「ShopifyにGempagesを導入してLPを作成したい」
「ただ、Gempagesの具体的な機能や利用手順が分からない……」
Shopifyでランディングページの作成を検討中の場合、上記のような疑問を抱える方も多いのではないでしょうか。
Shopifyにはさまざまなランディングページ作成アプリがありますが、その中でもGempagesは特におすすめのShopifyアプリとされています。
ただ、いざGempagesを導入しようと考えても、具体的な操作方法や手順が分からず、利用を断念するケースも珍しくありません。
今回は、ShopifyのGempagesでLPを作成する方法について解説していきます。
GempagesでLPを作ることにどんなメリットがあるか？
GempagesでLP作成をするメリットは、下記の通り。
・専門知識不要で簡単にLP作成ができる
・Shopifyで登録した商品と連携できる
・本格的なLPデザインテンプレートが豊富
・タイトルタグやページ速度等のSEO対策にも対応
・ほぼ全てのShopifyテーマに対応
以下ではそれぞれのメリットについて詳しくご紹介します。
専門知識不要で簡単にLP作成ができる
Gempagesの大きなメリットは、HTML等の知識がない場合でも、ドラッグ＆ドロップだけで簡単にLP作成ができること。
通常ランディングページを作成したり、Shopifyストアページをカスタマイズしたりするには、HTMLやCSS、Liquidなどを使用したコーディング知識が必要です。そのため、コーディングやプログラミング未経験の方では、自由にデザイン性の高いLPを作成するのは困難です。
しかし、Gempagesでは専門的な知識なしで、はじめてランディングページを作成する場合でも、直観的な操作で優れたページデザインが行えます。
Shopifyで登録した商品と連携できる
Gempagesでは、ダウンロードした段階でShopifyで登録した商品データが共有されています。
Gempagesであれば、再度アプリ内に商品データを登録する必要がありません。ランディングページに商品データをそのまま挿入したり、商品ページへのリンクを埋め込んだりといった作業が、簡単に行えます。
本格的なLPデザインテンプレートが豊富
Gempagesには、およそ50種類ほどのデザインテンプレートが用意されています。必要最低限のプランのみでも、基本的な40種類ものテンプレートから自由に選択し、自社商品やブランドイメージに合わせてカスタイズできます。
テンプレートを使用すれば誰でも簡単に、プロに依頼したようなおしゃれなデザインのランディングページが作成可能です。
タイトルタグやページ速度等のSEO対策にも対応
新規でラインディングページを作成した場合、十分なSEO対策が施されているか、という点も気になるところです。
Gempagesでは、メタタグや代替えテキスト、サムネイル画像などを使用した基本的な内部施策を最適化できます。
またページ処理速度も早いため、ユーザビリティの向上にも効果が見込めます。
ほぼ全てのShopifyテーマに対応
Gempagesであれば、Shopifyにおける全てのデザインテーマと互換性があります。
無料や有料、ページタイプ、オンラインストア2.0に至る全てのテーマに対応しているため、Gempagesを利用するために他のテーマへ切り替えるなどの作業も必要ありません。
Gempagesを使ってLPを作る手順
以下では、実際にGempagesでLPを作成する手順を紹介していきます。
テンプレートを使うか、1から自由に作成するか
まずはアプリをインストール後、「GemPages」の管理画面をみながら新規のLPページを作成していきましょう。
ダッシュボードの画面右上にある「Created New」をクリックすると、作成したいページの一覧が表示されるため、今回は「Landing Page」を押します。
すると、下記画面のようにテンプレートが一覧で表示されます。
テンプレートを使用したい場合は、一覧の中から自由に選択して作成に進みましょう。テンプレートを使用せず、1から自分でLPを作成するさいは「Create New Page」という箇所をクリックします。
今回は、「Create New Page」で1からランディングページを作成していきます。
次の画面でページの名前や、ヘッダーとフッターの有りなしを選択し、「Creat」を押せば準備は完了です。
Gempagesの操作画面をざっくり解説
次に、Gempagesのページ作成画面についてざっくりと解説します。
Gempagesの操作画面は、大まかに以下の項目で分かられます。
・プレビューや保存関連の操作項目
・実際に配置するコンテンツ
・設置するコンテンツ(画像や文章のこと)の配置の方法
ここでは、それぞれの項目について1つずつみていきましょう。
プレビューや保存関連の操作項目
画面上部にあるメニューが、プレビューや保存に関する操作項目となっています。
プレビューでは、現在の作成ページがどのような形で表示されているのかを確認できます。ノートパソコンやデスクトップ、スマホからタブレットまで、幅広い種類の媒体の表示確認が行えます。
画面右上の「Save」を押せば、直近の作成データが保存されます。編集が完了したランディングページを公開したい場合は、「publish」のボタンを押すことで行えます。
コンテンツの配置や編集
操作画面の左側にあるメニューでは、ランディングページの見出しやアイコン、テキスト、ボタンなどの設置や編集が行えます。
また、コンテンツに合わせて下記のような挿入、カスタマイズも可能です。
・表示するカラム数の設定
・罫線（ライン）を挿入
・多彩なデザインのバナー挿入
・リスト機能の挿入
・価格表の挿入
設置するコンテンツ(画像や文章のこと)の設置
実際に配置できるコンテンツには、画像や動画、通常テキストなど、さまざまなものがあります。基本的には、通常のWebページを作成するコンテンツは殆ど配置可能となっています。こちらもコンテンツの配置や編集と同様に、作成画面左側のメニューから行えます。
また、コンテンツに合わせて以下のような機能も設置することができます。
・Shopifyストアの商品ページ
・Shopifyストアの商品カテゴリーページ
・Google Maps
・Instagramの投稿フィード
・Youtbue/Vimeoなど
・SNSのシェアボタン
・メルマガ登録のためのアドレス
クションやコンテンツを挿入してページを作成していく
Gempagesの操作画面を把握したあとは、いよいよランディングページを作成していきます。
作成方法はとてもシンプル。
LP制作の手順
1.メニューバーのタブを掴んで挿入
2.コンテンツを掴んで挿入
3.コンテンツをアップロードして選択
左側のメニューバーから、挿入したい動画やテキスト、商材などのタブを掴み、右側の編集ページにドロップすれば簡単にカスタマイズが行えます。
ランディングページ作成の場合は、先にPhotoshopなどでLP用の画像を作成しておきましょう。そうすれば、作成済みのLPページデザインをそのままドロップするだけで、作成がスムーズに進みます。
ボタンを挿入する
ランディングページにボタンについても、基本的にはドロップ＆ドロップで挿入します。
Gempagesではもともとボタン機能が用意されていますが、オリジナルの画像を使用してボタンを作成することも可能です。
手順は下記の通り。
ボタンはマウスオーバーしたときように透過の画像を用意しておく
挿入したい箇所に画像を設定
背景画像を入れる場合は設定箇所に入れる
画像挿入後はメニューバーからサイズを調整
上記した4項目で、マウスオーバーで透過するボタンが作成できます。
Shopify×GempagesでのLP作成まとめ
今回はGempagesを使用して、Shopifyにランディングページを作成する手順をご紹介していきました。
Gempagesであれば、専門的なコーディングスキルも不要で、簡単に理想のLPが作成できます。
また、以下のようなメリットも見逃せません。
・Shopifyで登録した商品と連携できる
・本格的なLPデザインテンプレートが豊富
・タイトルタグやページ速度等のSEO対策にも対応
・ほぼ全てのShopifyテーマに対応
最後に・・・
Shopifyで構築したストアにMikawaya Suscrptionを導入すれば、カンタンに定期販売が開始できます。
＞＞アプリインストールはこちら
さらにMikawayaではランディングページ上で購入を完結させるLPフォーム一体型機能もオプション搭載しています。
Mikawaya Suscrptionについてもっと詳しく知りたい方はこちらの記事も合わせて御覧ください。
最後までお読みいただきありがとうございました。