【Shopify】PageFlyでおしゃれなLPを作る方法

はじめに

ストアを運営していると、セールやイベントを訴求するために必要になってくるのがランディングページです。

Shopifyには自由にページを作成できる機能がありますが、おしゃれでかっこいいLPが作りたい場合、制作を外注することが多いと思います。

しかし、料金が高い！

そんな時は、Shopifyのアプリを利用して、LPの作成にトライしてみてはいかがでしょうか？　今回ご紹介する「PageFly」は、コーディングの知識がなくてもLPの作成が可能な、大変便利なアプリになっています！

PageFlyとは

PageFlyはShopifyの公開アプリです。

LP作成アプリはいくつかありますが、PageFlyは無料プランもあるのがうれしいところです。

無料プランで作成可能なページ数は、各ページタイプにつき1ページずつになっているので、多くのページが必要になったら有料プランに変更すればよいでしょう。

PageFlyをインストールする

アプリストアにログインし、「PageFly Advanced Page Builder」と入力して検索します。検索結果からPageFlyを見つけたら選択します。

「アプリを追加する」を選択すると、インストールの確認画面が表示されるので「アプリをインストール」をクリックしてインストールしてください。

管理画面の「アプリ管理」を開いて、下のキャプチャのように、インストールされたアプリの一覧に「PageFly」が表示されていればOKです。

新規にページを作成する

それでは、さっそくLPを作ってみましょう。

アプリ管理でPageFlyを選択すると、PageFlyのダッシュボードが表示されます。

メニューで「Pages」を選択すると、ページの種類が選べるようになっていますが、今回は「Regular Pages」で作成します。ほとんどのLPは、こちらでOKでしょう。

「Regular Pages」を選択すると上の状態になりますので、画面上の右端（キャプチャでは見えません）にある「Create A New Page」という青いボタンをクリックして、新規にページを作成します。

なお、ダッシュボードの表示を日本語化したい時は「Settings」>「User Interface」で言語が選択できますので、「English」になっている箇所を「日本語」に変更しましょう。

テンプレートを選ぶ

ページを作成すると、下のような白い画面になっています。

PageFlyでは

①テンプレートを選んでカスタマイズ

②セクション（エレメントのグループ）やエレメント（画像や段落などの要素）を1つひとつ追加して作成

の、どちらの方法でもページを作成することができます。

②の方法は、ページの構造（HTML）についての知識がある程度必要になるため、今回は①のテンプレートを選んでカスタマイズする方法で作成して行きましょう。

白い画面の中央部分を拡大すると、下のようになっています。

「Select a page template」を選択すると、テンプレートの候補が表示されます。

90種類以上のテンプレートの中から、作りたいLPのイメージに合ったものを選択してください。

今回は、雑貨を取り扱うストアの「母の日セール」のLPを作る想定で、「Maize」というテンプレート（上のキャプチャの上段右端）を選びました。

テンプレートを選択したところです。

サンクスギビング用のものですが、やわらかい雰囲気なので、少しカスタマイズするだけで母の日にも使えそうです。

日本語フォントを追加する

テンプレートを見るとわかるように、フォントがすべて英語になっています。

フォントは、画面右側の「Styling」というタブから変更できますが、デフォルトでは日本語フォントが選択できません。

これでは困るので、編集を始める前に、日本語フォントを使えるように設定しておきましょう。「Styling」タブでスクロールして、「Typography」の項目を見つけてください。

赤枠の一番下の段の右端にある、歯車マークをクリックすると、フォントマネージャーが表示されます。

PageFlyではデフォルトでGoogle Fontsが使用できるので、その中から日本語フォントを検索します。検索窓に「JP」と入力すると「Noto Sans JP」（ゴシック体）と「Noto Serif JP」（明朝系）の2つが表示されますので、こちらにチェックを入れて追加しましょう。

上のキャプチャのように「Selected Fonts」の側に移動するので、右下にある青いボタンをクリックして確定してください。

これで日本語フォントが選択できるようになりました。

ここまで読んで、面倒に感じた方もいらっしゃるかもしれません。そんな時は、ココナラでサービスを購入するという手もあります。

手前味噌になりますが、ココナラには意欲的なクリエイターが集まっていると感じますし、個人の方が多いので、制作会社と比較して価格がリーズナブルという利点があります。

ちなみに私も、ShopifyのLPを作成するサービスを始めました。よろしければ、ご検討ください！

編集の前に: 全体の構成を考える

さっそく編集を始めたいところですが、いきなり触り始めるよりも、大体どのようにカスタマイズするのか、あらかじめ決めておくと作業がスムーズです。

LPを作る時、原稿で頭を悩ませる方も多いと思いますが、テンプレートにはLPに必要な項目が始めから網羅されているため、ワイヤーフレームとしても利用できます。

どこを、どのように差し替えるかを考えて行くことで、LPの原稿が一通り用意できるはずです。

「Maize」の場合、上のような構成になっているので、各項目に入れたい内容をリストアップして行くとよいでしょう。自分のストアに該当する項目（たとえばブログ）がない場合は、セクションごと削除できるので大丈夫です。目玉商品の追加等も、もちろん可能です。

デザインとしては、サンクスギビング用のため色遣いやモチーフが秋仕様になっているので、もう少し母の日の時季に合ったものに変更したいところです。

ということで、ヘッダーをサンプルとして、画像やテキストの編集方法を見て行きましょう！

テンプレートの編集: 背景画像を変更する

ヘッダーには、いい感じの背景画像が設定されていますが、紅葉のモチーフが気になるのと、母の日の花と言えばカーネーションが伝わりやすいと思うので、まずこの画像を差し替えます。

同じサイズで、下のような画像を作成しました。

このテンプレートでは、パソコン用とモバイル用で別々の画像が設定されているので、モバイル用も作成しておきます。

画像サイズをテンプレートと同じにすることで、レイアウトが崩れるのを防ぐことができます。サイズは、ブラウザの開発ツール等で調べてください。

設定は「Styling」タブの「Background」で行います。

差し替える画像にマウスをのせると、アイコンが2つ現れるので、フォルダのアイコン（Reselect From Image Manager）をクリックして、イメージマネージャーを表示させます。

右上の「Upload From Computer」をクリックして、画像をアップロードします。

アップロードした画像が表示されるので、使用する画像にチェックを入れて、右下の青いボタンをクリックして選択します。

画像が変更されました。

テンプレートの編集: 背景色を変更する

テンプレートはレスポンシブのため、いろいろなサイズの端末で背景画像のまわりに余白ができないよう、画像の下に背景色が設定されています。

今回はテンプレートの背景色をそのまま利用しましたが、異なる色合いの画像を設定した場合は、それに合わせて背景色を変更する必要があります。

変更する時は、画像の上に「Background Color」という項目がありますので、そちらで任意の色を設定してください。

テンプレートの編集: テキストを変更する

次は、テキストの変更です。

テキストの変更は、右側のパネルの「General」というタブで行います。「Content」という項目を見つけて、テンプレートのビューで変更したいテキストをクリックします。

なかなかおしゃれなフォントなので、ここはこのまま、文言だけを「Mother's Day」に変えて利用したいと思います。右のパネルで「Thanksgiving」となっている箇所に「Mother's Day」と入力します。

その下のボディコピーは日本語にしたいので、「Styling」タブで「Typography」を見つけてください。初期設定は欧文フォントになっていますが、フォント名のところをクリックすると、事前に追加した日本語フォントが選べるようになっているはずです。

フォントを設定したら、メインコピーと同様に、「General」タブで文言を入力します。

コピーが変更されました。

なお、編集した内容は自動保存されないので、ある程度まとまったら、右上にある「Save」ボタンをクリックして保存しておきましょう。

ページを公開する

PageFlyで設定できる内容はこれだけではありませんが、画像とテキストの変更の流れをざっくりとご紹介しました。最後まで編集したものが下のキャプチャになります。もちろんレスポンシブです！

あとは公開するだけです。保存する時にクリックした「Save」の横にプルダウンメニューがあるので、そちらで「Save&Publish」を選択しましょう。

めでたく公開されました！

おわりに

いかがでしたでしょうか？

Shopifyは非常に高機能なプラットフォームですが、日本ではまだ新しいため、ストア構築に比較して、LP制作やカスタマイズに対応できるクリエイターが少ないように感じています。

しかし、ECは、運用してなんぼのものです。

どうか、この記事を参考に、ご自身のストアにとって必要なLPを作ってみていただければと思いますし、難しい、時間がないといった場合には、お気軽にお声かけいただければ、こんなうれしいことはありません！