PageFlyでホームページを作成する方法
概要
要約：ホームページは、オンラインストアのショーウィンドウです。訪問者が最初に目にするものであり、ショッピング体験全体の雰囲気を決定づけます。
ホームページは、商品を宣伝するための最高の場所です。ベストセラー、新着商品、または特別オファーを、高品質の画像、明確な説明、訪問者にクリックして詳細を確認することを促すコールトゥアクションを通じて強調することで、最終的に売上につなげることができます。
この記事では、PageFly Page Builderを使用してホームページを作成する方法について解説します。
PageFlyでホームページを作成する方法に関するこちらのビデオも確認できます。
Gen 2 Editor - PageFlyでホームページを作成する方法
重要事項: Gen 2 Layoutは、従量課金制（slot plans）でのみ利用可能です。
ステップ 1: ホームページを作成する
PageFlyでホームページを作成するには、2つの方法があります。
ゼロからページを作成する
テンプレートからページを作成する
ゼロから新しいホームページを作成する
PageFlyダッシュボードで、Pages tabに移動し、右側のsidebarにあるCreate blank pageボタンをクリックして、ゼロからページの構築を開始します。> Homeを選択します。
テンプレートから新しいホームページを作成する
Pages Dashboardから、Create from templateボタンをクリックし、Homeを選択します。Template Libraryが開いたら、ホームページに適したPageFlyテンプレートを選択できます。選択後、Selectをクリックします。
ステップ 2: ホームページにバナーを作成する
ページキャンバスにセクションを追加する。
PageFly editorで、Element iconをクリックします。> PageFly tab > Layout elementを選択 > Full Sectionオプションをpage editorにドラッグ＆ドロップします。
バナーに背景画像を追加する
sectionをクリックし、Styling tabに移動し、BACKGROUND parameterまでスクロールダウンします。> Background Imageオプションから画像を選択します。
Image Managerにある画像をアップロードするか、インターネットからアップロードできます。詳細については、こちらをお読みください。
BACKGROUND parameterまでスクロールダウンします。> More Settingsボタンをクリックします。
Background PositionにCenter Center、Background SizeにCoverを選択します。
Styling tabで、SPACINGセクションを見つけます。
トップパディングとボトムパディングの値を編集して、sectionの高さを画像の高さに合わせて変更します。
中央の小さなボックスは、Padding and Marginの4辺すべてに同じ値を設定します。
この例では、Padding topとbottomに250pxを設定しています。
ストアのスローガンを追加する
引用やスローガンは、ストアをユニークにします。特別なスローガン、特に視覚的に目立つようにカスタマイズすると、顧客はあなたのストアを覚えるでしょう。
そこで、バナーにHeading elementを使用します。
element catalogで、Element iconをクリックします。> PageFly tab > Heading elementを選択 > 最初のvariantをpage editorにドラッグ＆ドロップします。
elementをバナーにドラッグ＆ドロップした後、コンテンツを変更します。
General tabに移動し、CONTENT parameterのHeading Textボックスのコンテンツを変更します。
HTML TagをH1に変更します。HTML Tagを追加することは、ストアのSEOに役立ちます。
Styling tabに切り替えて、スタイルを変更します。
Content Colorに赤色を選択します。
フォントファミリーをRoboto Slab fontに変更します。
フォントサイズを80pxに調整します。
More Settingsボタンをクリックし、font weightをBold style、Line heightを2pxに選択します。
Padding topとbottomに20pxを設定します。
バナーにメインのコールトゥアクションボタンを追加する
オンラインストア、特にホームページにおいて、メインのコールトゥアクションを決定することは非常に重要です。このコールトゥアクションボタンは、ストアオーナーが最も期待する行動をユーザーに取らせることができます。
element catalogで、Element iconをクリックします。> PageFly tab > Button elementを選択 > 最初のvariantをバナーにドラッグ＆ドロップします。
次に、General tabに移動し、ボタンのコンテンツを変更します。Button TextボックスのデフォルトコンテンツをDISCOVER NOWに変更します。
Styling tabに切り替えて、通常状態のボタンをスタイル設定します。Padding topとbottomに15px、Padding rightとleftに30pxを設定します。
そして、TYPOGRAPHY parameterのテキストにMontserrat fontとFont size 20pxを設定します。
BACKGROUND parameterまでスクロールダウンし、背景色にrgba(74, 144, 226, 0.99)コードを設定します。
Styling tabで、Mouse overおよびActive状態のボタンをスタイル設定します。BACKGROUND COLORにrgba(74, 144, 226, 0.99)を設定します。そして最後に、ボタンにホバーすると変更を確認できます。
ステップ 3: ストアのハイライトコレクションを表示する
ストアで幅広い種類の商品タイプを特徴づけることは、顧客にすべての商品の全体像を把握させるのに役立ちます。
ストアがさまざまな種類の商品を提供しているのに、それらが特徴づけられていない場合、顧客に誤解を招く可能性があり、その結果、売上を失う可能性があります。
そして、PageFlyにはコレクションを特徴づけるのに役立つCollection List elementがあります。
見出しを追加する
Collection list elementを追加する前に、Heading elementを追加し、名前を付けます。
element catalogで、Element iconをクリックします。> PageFly tab > Heading elementを選択 > 最初のvariantをドラッグ＆ドロップします。
General tabに移動し、Heading Textボックスの見出しのコンテンツを変更します。ここでは、EXPLORE OUR COLLECTIONSに変更します。
Styling tabに切り替えて、以下のオプションで見出しをスタイル設定します。
margin-topを0px、margin bottomを60pxに調整します。
Font familyをRoboto Slab fontに変更します。
Font sizeを50pxに調整します。
Font weightをBold、Line heightを1.5emに設定します。
見出しが含まれているRowをクリックし、Rowを中央揃えにして、見出しが中央に配置されるようにします。
Collection List Elementを追加する
見出しを作成したら、Collection List elementを使用してストアのコレクションを表示します。
element catalogで、Elements iconをクリックします。> Shopify tab > Collection Listを選択 > 最初のvariantを見出しelementがある同じRowにドラッグ＆ドロップします。
ストアのすべてのコレクションが自動的に表示され、items per loadingを調整して表示したいアイテム数を指定できます。デフォルトでは4つのアイテムが表示されます。Collection Listの設定構成について詳しく知るには、この記事を確認できます。
ステップ 4: "About Us"セクションを追加する
顧客がストアを訪問した際、行うべき重要なことの1つは、ストアが提供する商品/サービスを知らせることです。顧客を混乱させたり、このストアで何を販売しているのか疑問に思わせたりしないでください。
セクションレイアウトを追加する
element catalogで、Element iconをクリックします。> PageFly tab > Layout elementを選択 > 1/2-1/2オプションをpage editorにドラッグ＆ドロップします。
左カラムにParagraph Elementを追加する
element catalogで、Element iconをクリックします。> PageFly tab > Paragraph elementを選択 > 最初のvariantをセクションの最初のカラムにドラッグ＆ドロップします。
Paragraph elementをクリックしてコンテンツを変更します。General tabで、ストアについて簡潔に説明したいコンテンツをここに入力します。
Styling tabに進み、paragraphのスタイルをカスタマイズします。
フォントファミリーをMontserrat fontに変更します。
フォントサイズを20pxに調整します。
Margin topとbottomに0pxを設定します。
More Settingsボタンをクリックし、font weightをRegular style、Line Heightを1.5emに設定します。
右カラムに画像を追加する
Element iconをクリックします。> PageFly tab > Image elementを選択 > 最初のvariantをセクションの2番目のカラムにドラッグ＆ドロップします。
Image Managerにある画像をアップロードするか、インターネットからアップロードできます。詳細については、こちらをお読みください。
ステップ 5: 商品詳細を追加する
Elements iconをクリックします。> Shopify tab > Product Detailsを選択 > 最初のvariantをpage editorにドラッグ＆ドロップします。
General tabに移動します。> Custom Productオプションを選択 > 表示したい商品を選択します。
ステップ 7: お客様の声を追加する
お客様の声（Testimonials）やソーシャルプルーフは、オンラインストアにとって役立ちます。なぜなら、基本的にストアの商品の信頼性と信用を築くのに役立ち、これが他のお客様にストアから商品を購入することを促すからです。
PageFlyには、プリメイドセクションの1つとしてTestimonialオプションがあり、これを使用して顧客のフィードバックを表示できます。
セクションにホバーまたはクリックすると、右下にプラスアイコンが表示されます。> アイコンをクリックします。> Templateを選択します。
テンプレートライブラリのポップアップで、Categoryドロップダウンボタンに移動します。> Testimonialsを選択 > プリメイドセクションを選択します。
または、Element icon > PageFly tabのContent list elementを使用して、独自のユニークなお客様の声を作成することもできます。
image elementをクリックして、General tabで顧客の画像を選択します。
Styling tabに切り替えて、画像のStyle Presetを変更します。
Paragraph elementをクリックして、General tabで顧客のレビューコンテンツを変更します。
Styling tabに切り替えて、ここでparagraphのスタイルをカスタマイズできます。
Testimonial sectionをクリックします。
Styling tabに移動します。> BACKGROUND parameterまでスクロールダウンします。> 背景色を選択します。
Voila! PageFlyでホームページの作成が完了しました。
このホームページの構造は、Shopifyオンラインストアの基本的な標準的なホームページを持つのに役立ちます。ホームページにはストアの商品、主要なコールトゥアクション、そして何を販売しているかを顧客に表示する必要があることを忘れないでください。
Publishボタンをクリックして、ライブビューで確認してください。
Legacy Editor - PageFlyでホームページを作成する方法
ステップ 1: ホームページを作成する
PageFlyでホームページを作成するには、2つの方法があります。
ゼロからページを作成する
テンプレートからページを作成する
ゼロから新しいホームページを作成する
PageFlyダッシュボードで、Pages tabに移動し、右側のsidebarにあるCreate blank pageボタンをクリックして、ゼロからページの構築を開始します。> Homeを選択します。
テンプレートから新しいホームページを作成する
Pages Dashboardから、Create from templateボタンをクリックし、Homeを選択します。Template Libraryが開いたら、ホームページに適したPageFlyテンプレートを選択できます。選択後、Selectをクリックします。
ステップ 2: ホームページにバナーを作成する
ページキャンバスにセクションを追加する。
PageFly editorで、Element iconをクリックします。> PageFly tab > Layout elementを選択 > Full Sectionオプションをpage editorにドラッグ＆ドロップします。
バナーに背景画像を追加する
sectionをクリックし、Styling tabに移動し、BACKGROUND parameterまでスクロールダウンします。> Background Imageオプションから画像を選択します。
Image Managerにある画像をアップロードするか、インターネットからアップロードできます。詳細については、こちらをお読みください。
BACKGROUND parameterまでスクロールダウンします。> More Settingsボタンをクリックします。
Background PositionにCenter Center、Background SizeにCoverを選択します。
Styling tabで、SPACINGセクションを見つけます。
トップパディングとボトムパディングの値を編集して、sectionの高さを画像の高さに合わせて変更します。
中央の小さなボックスは、Padding and Marginの4辺すべてに同じ値を設定します。
この例では、Padding topとbottomに250pxを設定しています。
ストアのスローガンを追加する
引用やスローガンは、ストアをユニークにします。特別なスローガン、特に視覚的に目立つようにカスタマイズすると、顧客はあなたのストアを覚えるでしょう。
そこで、バナーにHeading elementを使用します。
element catalogで、Element iconをクリックします。> PageFly tab > Heading elementを選択 > 最初のvariantをpage editorにドラッグ＆ドロップします。
elementをバナーにドラッグ＆ドロップした後、コンテンツを変更します。
General tabに移動し、CONTENT parameterのHeading Textボックスのコンテンツを変更します。
HTML TagをH1に変更します。HTML Tagを追加することは、ストアのSEOに役立ちます。
Styling tabに切り替えて、スタイルを変更します。
Content Colorに赤色を選択します。
フォントファミリーをRoboto Slab fontに変更します。
フォントサイズを80pxに調整します。
More Settingsボタンをクリックし、font weightをBold style、Line heightを2pxに選択します。
Padding topとbottomに20pxを設定します。
バナーにメインのコールトゥアクションボタンを追加する
オンラインストア、特にホームページにおいて、メインのコールトゥアクションを決定することは非常に重要です。このコールトゥアクションボタンは、ストアオーナーが最も期待する行動をユーザーに取らせることができます。
element catalogで、Element iconをクリックします。> PageFly tab > Button elementを選択 > 最初のvariantをバナーにドラッグ＆ドロップします。
次に、General tabに移動し、ボタンのコンテンツを変更します。Button TextボックスのデフォルトコンテンツをDISCOVER NOWに変更します。
Styling tabに切り替えて、通常状態のボタンをスタイル設定します。Padding topとbottomに15px、Padding rightとleftに30pxを設定します。
そして、TYPOGRAPHY parameterのテキストにMontserrat fontとFont size 20pxを設定します。
BACKGROUND parameterまでスクロールダウンし、背景色にrgba(74, 144, 226, 0.99)コードを設定します。
Styling tabで、Mouse overおよびActive状態のボタンをスタイル設定します。BACKGROUND COLORにrgba(74, 144, 226, 0.99)を設定します。そして最後に、ボタンにホバーすると変更を確認できます。
ステップ 3: ストアのハイライトコレクションを表示する
ストアで幅広い種類の商品タイプを特徴づけることは、顧客にすべての商品の全体像を把握させるのに役立ちます。
ストアがさまざまな種類の商品を提供しているのに、それらが特徴づけられていない場合、顧客に誤解を招く可能性があり、その結果、売上を失う可能性があります。
そして、PageFlyにはコレクションを特徴づけるのに役立つCollection List elementがあります。
見出しを追加する
Collection list elementを追加する前に、Heading elementを追加し、名前を付けます。
element catalogで、Element iconをクリックします。> PageFly tab > Heading elementを選択 > 最初のvariantをドラッグ＆ドロップします。
General tabに移動し、Heading Textボックスの見出しのコンテンツを変更します。ここでは、EXPLORE OUR COLLECTIONSに変更します。
Styling tabに切り替えて、以下のオプションで見出しをスタイル設定します。
margin-topを0px、margin bottomを60pxに調整します。
Font familyをRoboto Slab fontに変更します。
Font sizeを50pxに調整します。
Font weightをBold、Line heightを1.5emに設定します。
見出しが含まれているRowをクリックし、Rowを中央揃えにして、見出しが中央に配置されるようにします。
Collection List Elementを追加する
見出しを作成したら、Collection List elementを使用してストアのコレクションを表示します。
element catalogで、Elements iconをクリックします。> Shopify tab > Collection Listを選択 > 最初のvariantを見出しelementがある同じRowにドラッグ＆ドロップします。
ストアのすべてのコレクションが自動的に表示され、items per loadingを調整して表示したいアイテム数を指定できます。デフォルトでは4つのアイテムが表示されます。Collection Listの設定構成について詳しく知るには、この記事を確認できます。
ステップ 4: "About Us"セクションを追加する
顧客がストアを訪問した際、行うべき重要なことの1つは、ストアが提供する商品/サービスを知らせることです。顧客を混乱させたり、このストアで何を販売しているのか疑問に思わせたりしないでください。
セクションレイアウトを追加する
element catalogで、Element iconをクリックします。> PageFly tab > Layout elementを選択 > 1/2-1/2オプションをpage editorにドラッグ＆ドロップします。
左カラムにParagraph Elementを追加する
element catalogで、Element iconをクリックします。> PageFly tab > Paragraph elementを選択 > 最初のvariantをセクションの最初のカラムにドラッグ＆ドロップします。
Paragraph elementをクリックしてコンテンツを変更します。General tabで、ストアについて簡潔に説明したいコンテンツをここに入力します。
Styling tabに進み、paragraphのスタイルをカスタマイズします。
フォントファミリーをMontserrat fontに変更します。
フォントサイズを20pxに調整します。
Margin topとbottomに0pxを設定します。
More Settingsボタンをクリックし、font weightをRegular style、Line Heightを1.5emに設定します。
右カラムに画像を追加する
Element iconをクリックします。> PageFly tab > Image elementを選択 > 最初のvariantをセクションの2番目のカラムにドラッグ＆ドロップします。
Image Managerにある画像をアップロードするか、インターネットからアップロードできます。詳細については、こちらをお読みください。
ステップ 5: 商品詳細を追加する
Elements iconをクリックします。> Shopify tab > Product Detailsを選択 > 最初のvariantをpage editorにドラッグ＆ドロップします。
General tabに移動します。> Custom Productオプションを選択 > 表示したい商品を選択します。
ステップ 7: お客様の声を追加する
お客様の声（Testimonials）やソーシャルプルーフは、オンラインストアにとって役立ちます。なぜなら、基本的にストアの商品の信頼性と信用を築くのに役立ち、これが他のお客様にストアから商品を購入することを促すからです。
PageFlyには、プリメイドセクションの1つとしてTestimonialオプションがあり、これを使用して顧客のフィードバックを表示できます。
セクションにホバーまたはクリックすると、右下にプラスアイコンが表示されます。> アイコンをクリックします。> Templateを選択します。
テンプレートライブラリのポップアップで、Categoryドロップダウンボタンに移動します。> Testimonialsを選択 > プリメイドセクションを選択します。
または、Element icon > PageFly tabのContent list elementを使用して、独自のユニークなお客様の声を作成することもできます。
image elementをクリックして、General tabで顧客の画像を選択します。
Styling tabに切り替えて、画像のStyle Presetを変更します。
Paragraph elementをクリックして、General tabで顧客のレビューコンテンツを変更します。
Styling tabに切り替えて、ここでparagraphのスタイルをカスタマイズできます。
Testimonial sectionをクリックします。
Styling tabに移動します。> BACKGROUND parameterまでスクロールダウンします。> 背景色を選択します。
Voila! PageFlyでホームページの作成が完了しました。
このホームページの構造は、Shopifyオンラインストアの基本的な標準的なホームページを持つのに役立ちます。ホームページにはストアの商品、主要なコールトゥアクション、そして何を販売しているかを顧客に表示する必要があることを忘れないでください。
Publishボタンをクリックして、ライブビューで確認してください。
ヒントとベストプラクティス
PageFlyのホームページを公開すると、テーマによって作成された現在のストアのホームページと置き換わります。PageFlyのホームページを非公開にすると、テーマによって作成されたホームページが表示に戻ります。
ランディングページの構築には、この記事を参考にしてください。
PageFlyでは、テーマによって作成されたホームページを編集することはできません。
よくある質問
1. Shopifyのホームページとは何ですか？
ホームページは、ゼロから作成またはテンプレートから作成できるウェブページであり、Shopifyストアの開始点です。
2. Shopifyでいくつのウェブサイトをホストできますか？
最大20個のドメインまたはサブドメインですが、これらはPageFlyダッシュボードでは作成できないため、Shopify adminにある必要があります。
3. ホームページには何を含めるべきですか？
明確なバリュープロポジションと適切なナビゲーションを備えたバナー
明確なコールトゥアクション（1つまたは2つ程度）...
コンテンツのハイライト
お客様の声
商品、サービス、機能に関する情報
連絡先情報
追加リソース
Last updated
Was this helpful?