PageFlyで会社概要ページを作成する方法
概要
PageFlyを使えば、コーディングスキルなしでShopifyのAbout Usページをデザイン・カスタマイズできます。この記事では、PageFlyでAbout Usページを作成するためのステップバイステップガイドをご紹介します。
PageFlyで完全なShopifyのAbout Usページを構築する方法をより視覚的に確認したい場合は、こちらの動画をご覧ください。
要件
公開されたテーマ：選択したテーマは公開されている必要があります。非公開のテーマでは、PageFlyページがShopifyメニューに表示されません。公開テーマにすることで可視性を確保します。
ページの公開：PageFlyページの公開ボタンを有効にして、Shopifyストアに保存・同期します。確認メッセージが表示され、正常に公開されたことが検証されます。
PageFlyでAbout Usページを作成する方法
PageFlyでAbout Usページを作成するには、以下の手順に従います。
ステップ1：通常ページを作成
まず、PageFlyダッシュボードに移動し、[Pages]をクリックし、「Create blank page」を選択し、ドロップダウンメニューから「Regular」を選択して、ページをゼロから構築を開始します。
以下の方法でページを作成できます：
Gen 2 Editor：新しいエディタで、フレックスセクションとフレックスブロックが特徴です。柔軟でカスタマイズ可能なレイアウト編集とより直感的なコントロールにより、速度が最適化されています。
重要な注意: Gen 2 レイアウトは、ペイ・アズ・ユー・ゴー料金モデル(slot plans)専用で利用可能になります。
Legacy Editor：セクション/行/列システムを使用する古いエディタです。
または、「Create from template」ボタンをクリックして、About UsページにPageFlyテンプレートを使用することもできます。テンプレートはGen 2エディタとLegacyエディタの両方で利用可能です。
ステップ2：画像バナーをアップロード
ページキャンバスにセクションを追加
Gen 2 Editor
ステップ1：左のツールバーで「Element」をクリックします。PageFlyタブで、Layoutをクリックし、Flex sectionレイアウトをページにドラッグします。
ステップ2：Stylingタブに移動し、Content Max Widthまでスクロールして「Fill Container」を選択します。
Legacy Editor
要素カタログで、左のツールバーにある「Add element」アイコンをクリックし、Layout elementを選択し、Full Sectionオプションをページエディタにドラッグ＆ドロップします。
次に、パンくずリストのSectionをクリック > Generalタブに移動 > Set fixed widthオプションをオフにします。
バナーに背景画像を追加
Stylingタブで、Backgroundパラメーターまでスクロールダウンし > Background Imageオプションから画像を選択します。
Image Managerにある画像をアップロードするか、インターネットからアップロードできます。詳細については、こちらをご覧ください。
次に、Spacingセクションまでスクロールダウンし > トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。真ん中の小さなボックスは、Padding and Marginの四方全てに同じ値を設定します。
このケースでは、パディングの上下両方に200pxを設定しています。
引き続きBackgroundパラメーターまでスクロールダウンし > More Settingsボタンをクリック > Background PositionにCenter、Background SizeにCoverを選択します。
「About Us」見出しを追加
Gen 2 Editor
Gen 2 Editorでは、見出しの追加とスタイリングの調整はLegacy Editorと似ています。ただし、セクション内での見出しの配置手順は少し異なります。
Flex sectionをクリックし、Stylingタブに移動します。
Align Itemsの下で、Centerを選択します。
Legacy Editor
要素カタログで、「Add element」アイコンをクリック > Headingelementを選択 > 最初のバリアントをページエディタにドラッグ＆ドロップします。
次に、Generalタブで、見出しテキストを「ABOUT US」に変更します。
Stylingタブをクリック > Content color > 白を選択します。
Spacingで、マージンの上下を0pxに調整します。Typographyパラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。
More Settingsボタンをクリック > フォントウェイトにBoldを選択します。
セクションをクリック > Stylingタブに移動 > Text Alignmentで中央揃えを選択します。
ステップ3：紹介文を追加
Gen 2 Editor
Gen 2エディタでは、スタイリング設定はLegacyエディタと同様です。ただし、セクション内のコンテンツを配置する方法にはいくつかの違いがあります。
Flex sectionをクリックし、Stylingタブに移動します。
Align Itemsまでスクロールし、Centerを選択します。
Legacy Editor
Elementカタログで、「Add element」アイコンをクリック > Layoutelementを選択 > Full Sectionオプションをページエディタにドラッグ＆ドロップします。
その後、Heading要素とParagraph要素もセクション内にドラッグ＆ドロップします。これでこのセクションはあなたのブランドの要約またはストーリー用となります。
Generalタブで、ビジネスコンテンツに合わせてテキストを変更します。Stylingタブを使用して、フォントとフォントサイズを調整します。
ステップ4：「理由」セクションを作成
このステップでは、顧客があなたの製品を選ぶべき理由を示します。
Elementカタログで、「Add element」アイコンをクリック > Layout elementを選択 > ⅓ – Sectionオプションをページエディタにドラッグ＆ドロップします。
見出しもセクション内にドラッグ＆ドロップします。見出しのテキストを「WHY CHOOSE US」に変更します。Stylingセクションで再度フォントとフォントサイズを調整します。
次に、Image elementとHeading elementをそれぞれのカラムにドラッグ＆ドロップします > コンテンツを適用 > Stylingタブに切り替えてテキストをカスタマイズします。
ステップ5：Instagramフィード要素を追加
Instagram要素を使用すると、顧客はあなたのブランドの個性を垣間見ることができ、ブランド信頼性、顧客エンゲージメントを高め、最終的に売上を促進します。
行動喚起の見出しを追加
Heading要素を使用して、「Follow us on Instagram」という行動喚起の見出しを追加します。Element Catalogで「Add element」アイコンをクリック > Heading要素をドラッグ＆ドロップします。Stylingタブに切り替えてテキストをカスタマイズします。
Instagramフィード要素を追加
Element Catalogで、Add elementアイコンをクリック > Heading要素と同じセクションにInstagram feed要素をドラッグ＆ドロップします。
Instagramに接続する必要があることに注意してください。Instagram feed elementに関するこの記事を確認して、詳細をご覧ください。
ステップ6：ページを保存して公開
最後に、Publishボタンをクリックし、Live viewでライブのページを確認します。まだ公開したくない場合は、Saveボタンをクリックし、Previewモードで確認します。
参考として、ベストなShopifyのAbout Usページテンプレート例の記事をチェックしてください。
ユースケース
SEO最適化：関連性の高いキーワード、メタディスクリプション、画像の代替テキストを使用して、About Usページを検索エンジン向けに最適化します。
明確さと簡潔さ：コンテンツを明確かつ簡潔に保ち、訪問者があなたのブランドストーリーとミッションを迅速に理解できるようにします。
よくある質問
About usページにはどのような情報が掲載されますか？
あなたのブランドストーリー：起源、ミッション、他との違いを説明します。
あなたのチーム：ブランドを支える顔を紹介し、人間的な繋がりを育みます。
あなたの価値観：ビジネスにとって最も重要なことと、それが製品やサービスにどのように反映されているかを強調します。
お客様の声：肯定的なフィードバックを紹介して、信頼性と信用性を構築します。
行動喚起：訪問者にもっと詳しく知ってもらったり、購読してもらったり、ソーシャルメディアでフォローしてもらったりすることを促します。
PageFlyを使用してAbout usページを作成できますか？
もちろんです！PageFlyのドラッグ＆ドロップインターフェースを使えば、Shopifyストアの魅力的なAbout Usページを簡単にデザイン・カスタマイズできます。
追加リソース
Last updated
Was this helpful?