誰でもできる!Shopifyでランディングページを作成する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
サムネイル33

この記事の所要時間:6分

Shopifyでは、トップページの他に自己紹介ページや商品ページ、ブログページなど、様々なページを追加することができます。

時には、キャンペーンなどのランディングページを必要とすることもあると思います。

しかし、Shopifyのページレイアウトをカスタマイズするには、コード編集が必要になります。HTMLやCSSを書けないマーチャントはデフォルトのデザインを使用するしかありません。

そこで今回は、そんなマーチャントのために、複雑なコード編集なしでオリジナルのページレイアウトを作成できるページビルダーアプリをご紹介します。

本記事を読めば、誰でも簡単にオリジナルのページを作成することができます。

Shopifyの固定ページについて

Shopifyは、トップページや商品ページ以外にも様々なページを作成して追加することで、オリジナルのショップを構築することができます。

Shopifyで使用するページは主に以下のとおりです。

・レギュラーページ
・商品ページ
・コレクションページ
・ブログページ
・カートページ
・チェックアウトページ
・パスワードページ
・404ページ

レギュラーページ(固定ページ)

レギュラーページは、LP(ランディングページ)やAbout(自己紹介ページ)のように、必要な情報を1ページにまとめたページです。

たくさんの活用方法があり、ポリシーやFAQ、会社概要など、ある情報をまとめるページを作成する場合に使用します。

レギュラーページは、LP(ランディングページ)やAbout(自己紹介ページ)のように、必要な情報を1ページにまとめたものです。

たくさんの活用方法があり、ポリシーやFAQ、会社概要など、あることについて情報をまとめるページを作成する場合に使用します。

商品ページ

商品ページは、選択した商品の情報を確認し、カートに追加するページです。商品の様々な情報を確認して購入するかを決める重要なページです。

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

コレクションページ

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

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

ブログページ

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

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

カートページ

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

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

チェックアウトページ

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

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

パスワードページ

パスワードページは、パスワードの設定やメール配信の受取り登録ができるページです。会員登録をしている顧客が特に利用します。

パスワードページは、オンラインショップにパスワード保護を追加するページです。

ショップにパスワードを設定して、特定の顧客にパスワードを提供することで、パスワードを知る顧客のみがショップにアクセスすることができます。

404ページ

404ページは、存在しないページを顧客が開いた際にエラーを伝えるページです。

404ページは、存在しないページを顧客が開いた際にエラーを伝えるページです。

このようにShopifyにはたくさんのページタイプがあり、必要なページを追加してショップを充実させます。

基本的には好みのデフォルトデザインを選び、セクションの並び替えやカラー変更など、多少のカスタマイズが可能です。ですがコード編集なしでは、自由度の高いカスタマイズはできません。

ノーコードでページ作成ができるアプリ「PageFly」

コード編集ができないマーチャントでも、オリジナルのページを作成できるアプリ「PageFly」についてご紹介します。

PageFlyは、ランディングページやブログページなどをドラッグ&ドロップで編集することができるページビルダーアプリです。PageFlyは日本語にも対応しているため、他のページビルダーと比べてもとても使いやすくなっています。

無料プランもあるので、インストールして実際に一度使用してみることをオススメします。

PageFlyの主な機能

・基本的なページセクションの追加
・スライドショーやアニメーションの追加
・レビューや評価の表示
・セット商品などのサジェスト
・SNSの追加
・YouTube動画の表示
・ページの分析
・24時間のサポート

PageFlyは基本的なWebの要素だけでなく、Shopifyのセクションや外部サービスのセクションなどもページに追加することができます。

また1から作成するのが大変な場合は、多くのテンプレートデザインがあるため、テンプレートを選択して編集することも可能です。

ポップアップ表示やアニメーションの設定も可能なので、誰でも簡単にリッチなデザインのページを作成することができます。

料金プラン

PageFlyは、無料プラン以外に3つの有料プランがあります。各プランの機能と料金は以下のとおりです。

FreeSilverGoldPlatinum
月額料金無料19ドル39ドル99ドル
テンプレート
カスタムコード
セクションの保存数1520無制限
バージョン管理数3103050
レギュラーページの保存数12030無制限
ホームページの保存数125無制限
コレクションページの保存数1230無制限
商品ページの保存数1230無制限
ブログページの保存数1230無制限
パスワードページの保存数125無制限

全プランですべての機能を利用することができますが、使用できるページ数はプランによって異なります。

無料プランでは、それぞれページタイプに対して1ページずつしか使用できないので、レギュラーページのように様々な用途で使用する場合に不便に感じると思います。

他のページビルダーよりも月額利用料が安いので、アップグレードも検討してみてください。

PageFlyの設定方法

初期設定

次にアプリの使用方法について解説します。

まずは、コチラからアプリをインストールしてください。

アプリのインストールが完了したら、最初に日本語に設定します。

管理画面から「設定 > 操作画面」をクリックします。

アプリのインストールが完了したら、最初に日本語に設定します。管理画面から「設定 > 操作画面」をクリックします。

 ドロップダウンメニューをクリックして日本語を選択し、「保存」をクリックします。

ページを作成する

では、ページレイアウトを作成する編集ページについて説明します。

管理画面はとてもシンプルで、分析と各ページタイプの編集画面に分かれています。

ページタイプをクリックすると、ページの編集画面に移動します。

管理画面はとてもシンプルで、分析と各ページタイプの編集画面に分かれています。
ページタイプをクリックすると、ページの編集画面に移動します。

例えばレギュラーページをクリックしてLPを作成してみます。

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

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

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

①追加する要素のタイプを選択します。各アイコンは上から順に「要素追加」「Shopifyの要素追加」「外部サービスの要素追加」「セクションを追加」です。
②追加する要素を選択し、画面中央ドラッグ&ドロップで追加します。
③ページに追加した要素の細かな編集を行います。

①追加する要素のタイプを選択します。各アイコンは上から順に「要素追加」「Shopifyの要素追加」「外部サービスの要素追加」「セクションを追加」です。
②追加する要素を選択し、画面中央にドラッグ&ドロップで追加します。
③ページに追加した要素の細かな編集を行います。

また、テンプレートデザインを追加することも可能です。

画面右上にある「・・・」をクリックし、「ページテンプレート」をクリックします。好みのテンプレートデザインを選択して「このテンプレートを選択する」をクリックします。

画面右上にある「・・・」をクリックし、「ページテンプレート」をクリックします。お好みのテンプレートデザインを選択して「このテンプレートを選択する」をクリックします。

このようにしてページを編集します。

画面右上に「保存」ボタンがあるので、こまめに保存するようにしてください。

ショップにページを追加する

ページのデザインが完成したら、Shopifyの管理画面からショップにページを追加します。

1. ページを公開する

作成したページをShopifyで使用するには、ページを公開する必要があります。

ページの編集画面から、保存のすぐ横にあるドロップダウンメニューをクリックし、「Save & Publish」をクリックします。

ポップアップが表示されるので「ページタイトル」「URL(パーマリンク)」を設定して「ページを公開する」をクリックします。これで完了です。(ページ管理の画面から公開することも可能です。)

ポップアップが表示されるので、「ページタイトル」「URL(パーマリンク)」を設定して「ページを公開する」をクリックします。これで完了です。
※ページ管理の画面から公開することも可能です。

2. ページをメニューに追加する

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

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

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

リンクの欄では「ページ > (作成したページのタイトル)」を選択します。

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

最後に「追加」をクリックし、「保存する」をクリックして完成です。

プレビューから、ショップのメニューに作成したページが追加されているか確認してください。

プレビューから、ショップのメニューに作成したページが追加されているか確認してください。

【最後に】オリジナルのページを作ろう!

今回はShopifyのおすすめページビルダーアプリ「PageFly」についてご紹介しました。

PageFlyは誰でも簡単に使用することができ、尚且つ無料で利用できるので、オリジナルページを手軽に作成したいマーチャントにはとてもオススメなアプリです。

また、PageFlyはセクションやテンプレートの数も豊富です。アイデア一つでどんなデザインでも作成することができるので、既存のテーマにないクリエイティブなページを作成してみてください。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。