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」を選択します。

要素カタログで、左のツールバーにある「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」アイコンをクリック > Heading elementを選択 > 最初のバリアントをページエディタにドラッグ＆ドロップします。

次に、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」アイコンをクリック > Layout elementを選択 > 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に関するこの記事を確認して、詳細をご覧ください。