はじめに
- ShopifyのアプリPageFlyを使用してランディングページを作成するまでの手順を紹介します
- テンプレートをもとにページのデザインの変更は別のページで説明します
PageFlyでランディングページを作成する手順の紹介
手順1: Shopifyにログインし、PageFlyをインストール
- 「Apps」セクションに移動し、「PageFly」と検索します。
- 検索結果からPageFlyを見つけたら、それをクリックしてShopifyアプリストアからアプリを追加します。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.20.38-1.png)
- PageFlyをインストールし、インストールが完了すると自動的にPageFlyのインターフェイスに移動します。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.20.56.png)
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.21.29.png)
手順2: ページの作成
- PageFlyインターフェイスで「Pages」にアクセスします。
- 「空白のページを作成する」か「テンプレートから作成する」を選びます。初心者の方は、テンプレートから選ぶことを推奨します。
- 「Regular」を選択します。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.30.22.png)
- 好きなテンプレートをプレビューして選択し、テンプレートをロードします。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.34.55.png)
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.35.46.png)
手順3: ページのカスタマイズと公開
- キャンバスに表示されたテンプレートを基に、ページに必要な要素を追加します。ページ上部の「要素を追加」(プラス記号)をクリックし、希望する要素を選びます。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.37.46.png)
- コンテナー、タブ、テキストブロックなどの要素を配置し、カスタマイズします。各要素をクリックして、テキストやスタイルを編集できます。
- 全ての編集が完了したら、ページを「保存」し、ページに名前を付けます(例: 「Nike」)。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.49.49.png)
- 保存後、ページを公開し、提供されたURLでページを確認します。
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.50.02.png)
![](https://www.s3lab.co.jp/wp-content/uploads/2024/05/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-05-23-0.52.59.png)
これで、ShopifyのPageFlyを使って、プロフェッショナルなランディングページを簡単に作成できます。この手順に従って、自分だけのカスタマイズされたページを設計しましょう。