Shopifyでランディングページを作成する「PageFly」を徹底解説

この記事の所要時間:6分
Shopifyでは、トップページの他に自己紹介ページや商品ページ、ブログページなど、様々なページを追加することができます。
時には、キャンペーンなどのランディングページを必要とすることもあると思います。
しかし、Shopifyのページレイアウトをカスタマイズするには、コード編集が必要になります。HTMLやCSSを書けないマーチャントはデフォルトのデザインを使用するしかありません。
そこで今回は、そんなマーチャントのために、複雑なコード編集なしでオリジナルのページレイアウトを作成できるページビルダーアプリをご紹介します。
本記事を読めば、誰でも簡単にオリジナルのページを作成することができます。
Shopifyの固定ページについて
Shopifyは、トップページや商品ページ以外にも様々なページを作成して追加することで、オリジナルのショップを構築することができます。
Shopifyで使用するページは主に以下のとおりです。
・レギュラーページ
・商品ページ
・コレクションページ
・ブログページ
・カートページ
・チェックアウトページ
・パスワードページ
・404ページ
レギュラーページ(固定ページ)

レギュラーページは、LP(ランディングページ)やAbout(自己紹介ページ)のように、必要な情報を1ページにまとめたものです。
たくさんの活用方法があり、ポリシーやFAQ、会社概要など、あることについて情報をまとめるページを作成する場合に使用します。
商品ページ

商品ページは、選択した商品の情報を確認し、カートに追加するページです。商品の情報を確認して購入するかを検討する重要なページです。
コレクションページ

コレクションページは、コレクションに追加された商品の一覧を閲覧するページです。顧客は複数ある商品の中から写真や値段を見て、気になる商品をクリックします。
ブログページ

ブログページは、ブログ記事(コンテンツ)を表示するページです。Shopifyのブログページは、画像とテキストで構成されており、コンテンツを入力するだけでブログ記事として反映されます。
カートページ

カートページは、顧客がカートに追加した商品一覧を確認し、チェックアウトに進むページです。カートに追加した商品や合計金額などを確認することができます。
チェックアウトページ

チェックアウトページは、ネットショッピングの最後に決済を行うページです。顧客は決済情報の入力や配送オプションを選択して、決済を完了させます。
パスワードページ

パスワードページは、オンラインショップにパスワード保護を追加するページです。
ショップにパスワードを設定して、特定の顧客にパスワードを提供することで、パスワードを知る顧客のみがショップにアクセスすることができます。
404ページ

404ページは、存在しないページを顧客が開いた際にエラーを伝えるページです。
このようにShopifyにはたくさんのページタイプがあり、必要なページを追加してショップを充実させます。
基本的には好みのデフォルトデザインを選び、セクションの並び替えやカラー変更など、多少のカスタマイズが可能です。ですがコード編集なしでは、自由度の高いカスタマイズはできません。
ノーコードでページ作成ができるアプリ「PageFly」
コード編集ができないマーチャントでも、オリジナルのページを作成できるアプリ「PageFly」についてご紹介します。
PageFlyは、ランディングページやブログページなどをドラッグ&ドロップで編集することができるページビルダーアプリです。PageFlyは日本語にも対応しているため、他のページビルダーと比べてもとても使いやすくなっています。
無料プランもあるので、インストールして実際に一度使用してみることをオススメします。
PageFlyの主な機能
・基本的なページセクションの追加
・スライドショーやアニメーションの追加
・レビューや評価の表示
・セット商品などのサジェスト
・SNSの追加
・YouTube動画の表示
・ページの分析
・24時間のサポート
PageFlyは基本的なWebの要素だけでなく、Shopifyのセクションや外部サービスのセクションなどもページに追加することができます。
また1から作成するのが大変な場合は、多くのテンプレートデザインがあるため、テンプレートを選択して編集することも可能です。
ポップアップ表示やアニメーションの設定も可能なので、誰でも簡単にリッチなデザインのページを作成することができます。
料金プラン
PageFlyは、無料プラン以外に3つの有料プランがあります。各プランの機能と料金は以下のとおりです。
Free | Silver | Gold | Platinum | |
---|---|---|---|---|
月額料金 | 無料 | 19ドル | 39ドル | 99ドル |
テンプレート | ○ | ○ | ○ | ○ |
カスタムコード | ○ | ○ | ○ | ○ |
セクションの保存数 | 1 | 5 | 20 | 無制限 |
バージョン管理数 | 3 | 10 | 30 | 50 |
レギュラーページの保存数 | 1 | 20 | 30 | 無制限 |
ホームページの保存数 | 1 | 2 | 5 | 無制限 |
コレクションページの保存数 | 1 | 2 | 30 | 無制限 |
商品ページの保存数 | 1 | 2 | 30 | 無制限 |
ブログページの保存数 | 1 | 2 | 30 | 無制限 |
パスワードページの保存数 | 1 | 2 | 5 | 無制限 |
全プランですべての機能を利用することができますが、使用できるページ数はプランによって異なります。
無料プランでは、それぞれページタイプに対して1ページずつしか使用できないので、レギュラーページのように様々な用途で使用する場合に不便に感じると思います。
他のページビルダーよりも月額利用料が安いので、アップグレードも検討してみてください。
PageFlyの設定方法
初期設定
次にアプリの使用方法について解説します。
まずは、コチラからアプリをインストールしてください。
アプリのインストールが完了したら、最初に日本語に設定します。
管理画面から「設定 > 操作画面」をクリックします。

ドロップダウンメニューをクリックして日本語を選択し、「保存」をクリックします。
ページを作成する
では、ページレイアウトを作成する編集ページについて説明します。
管理画面はとてもシンプルで、分析と各ページタイプの編集画面に分かれています。
ページタイプをクリックすると、ページの編集画面に移動します。

例えばレギュラーページをクリックしてLPを作成してみます。
管理画面から「レギュラーページ > 新規ページ作成」をクリックします。

次のページで要素(セクション)を追加してページを作成します。

①追加する要素のタイプを選択します。各アイコンは上から順に「要素追加」「Shopifyの要素追加」「外部サービスの要素追加」「セクションを追加」です。
②追加する要素を選択し、画面中央にドラッグ&ドロップで追加します。
③ページに追加した要素の細かな編集を行います。
また、テンプレートデザインを追加することも可能です。
画面右上にある「・・・」をクリックし、「ページテンプレート」をクリックします。好みのテンプレートデザインを選択して「このテンプレートを選択する」をクリックします。

このようにしてページを編集します。
画面右上に「保存」ボタンがあるので、こまめに保存するようにしてください。
ショップにページを追加する
ページのデザインが完成したら、Shopifyの管理画面からショップにページを追加します。
1. ページを公開する
作成したページをShopifyで使用するには、ページを公開する必要があります。
ページの編集画面から、保存のすぐ横にあるドロップダウンメニューをクリックし、「Save & Publish」をクリックします。
ポップアップが表示されるので「ページタイトル」「URL(パーマリンク)」を設定して「ページを公開する」をクリックします。これで完了です。(ページ管理の画面から公開することも可能です。)

2. ページをメニューに追加する
次に、Shopifyの管理画面から「オンラインストア > メニュー」をクリックします。メインメニューあるいはフッターのどちらか追加したいメニューバーを選択します。

「メニュー項目を追加」をクリックし、表示されるポップアップで、メニューのタイトルとリンク(作成したページ)の指定をします。
リンクの欄では「ページ > (作成したページのタイトル)」を選択します。

最後に「追加」をクリックし、「保存する」をクリックして完成です。
プレビューから、ショップのメニューに作成したページが追加されているか確認してください。

【最後に】オリジナルのページを作ろう!
今回はShopifyのおすすめページビルダーアプリ「PageFly」についてご紹介しました。
PageFlyは誰でも簡単に使用することができ、尚且つ無料で利用できるので、オリジナルページを手軽に作成したいマーチャントにはとてもオススメなアプリです。
また、PageFlyはセクションやテンプレートの数も豊富です。アイデア一つでどんなデザインでも作成することができるので、既存のテーマにないクリエイティブなページを作成してみてください。