# PageFlyで会社概要ページを作成する方法 ### 概要 PageFlyを使えば、コーディングスキルなしでShopifyのAbout Usページをデザイン・カスタマイズできます。この記事では、PageFlyで[About Us](https://help.pagefly.io/manual/how-to-create-an-about-us-with-pagefly/)ページを作成するためのステップバイステップガイドをご紹介します。 PageFlyで完全なShopifyのAbout Usページを構築する方法をより視覚的に確認したい場合は、こちらの動画をご覧ください。 {% embed url="" %} ### 要件 * 公開されたテーマ：選択したテーマは公開されている必要があります。非公開のテーマでは、PageFlyページがShopifyメニューに表示されません。公開テーマにすることで可視性を確保します。 * ページの公開：PageFlyページの公開ボタンを有効にして、Shopifyストアに保存・同期します。確認メッセージが表示され、正常に公開されたことが検証されます。 ### PageFlyでAbout Usページを作成する方法 PageFlyで**About Usページ**を作成するには、以下の手順に従います。 #### ステップ1：通常ページを作成 まず、PageFlyダッシュボードに移動し、\[Pages]をクリックし、「Create blank page」を選択し、ドロップダウンメニューから「Regular」を選択して、ページをゼロから構築を開始します。 以下の方法でページを作成できます： * **Gen 2 Editor**：新しいエディタで、フレックスセクションとフレックスブロックが特徴です。柔軟でカスタマイズ可能なレイアウト編集とより直感的なコントロールにより、速度が最適化されています。 {% hint style="warning" %} **重要な注意**: Gen 2 レイアウトは、ペイ・アズ・ユー・ゴー料金モデル([slot plans](https://help.pagefly.io/manual/pricing-plans/))専用で利用可能になります。 {% endhint %} * **Legacy Editor**：セクション/行/列システムを使用する古いエディタです。 ![](/files/zjBWP3l2CvfMKZdJ8q4F) または、「Create from template」ボタンをクリックして、**About Usページ**に[PageFlyテンプレート](https://pagefly.link/sZKZHnFY)を使用することもできます。テンプレートはGen 2エディタとLegacyエディタの両方で利用可能です。 #### ステップ2：画像バナーをアップロード **ページキャンバスにセクションを追加** **Gen 2 Editor** * ステップ1：左のツールバーで「Element」をクリックします。PageFlyタブで、Layoutをクリックし、Flex sectionレイアウトをページにドラッグします。 * ステップ2：Stylingタブに移動し、Content Max Widthまでスクロールして「Fill Container」を選択します。 ![](/files/8Ip695VKnoV7h3ldMvc5) **Legacy Editor** 要素カタログで、左のツールバーにある「Add element」アイコンをクリックし、[Layout element](https://help.pagefly.io/manual/layout-element/)を選択し、Full Sectionオプションをページエディタにドラッグ＆ドロップします。 ![](/files/okjEqeiQ77P524sdwHCE) 次に、パンくずリストのSectionをクリック > Generalタブに移動 > Set fixed widthオプションをオフにします。 ![](/files/UGm1krLUSIxbaVMABaU3) **バナーに背景画像を追加** Stylingタブで、Backgroundパラメーターまでスクロールダウンし > Background Imageオプションから画像を選択します。 ![](/files/IADke1S3IrhWUHSrVLRQ) Image Managerにある画像をアップロードするか、インターネットからアップロードできます。詳細については、[こちら](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files)をご覧ください。 次に、Spacingセクションまでスクロールダウンし > トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。真ん中の小さなボックスは、[Padding and Margin](https://help.pagefly.io/manual/edit-spacing-margin-and-padding)の四方全てに同じ値を設定します。 このケースでは、パディングの上下両方に200pxを設定しています。 ![](/files/mNMxSSKJgJovwI8VicKF) 引き続きBackgroundパラメーターまでスクロールダウンし > More Settingsボタンをクリック > Background PositionにCenter、Background SizeにCoverを選択します。 ![](/files/I17Ln23onHebWx1lRAzQ) **「About Us」見出しを追加** **Gen 2 Editor** Gen 2 Editorでは、見出しの追加とスタイリングの調整はLegacy Editorと似ています。ただし、セクション内での見出しの配置手順は少し異なります。 1. Flex sectionをクリックし、Stylingタブに移動します。 2. Align Itemsの下で、Centerを選択します。 ![](/files/QwpWTiHIU7LsDhV79BEU) **Legacy Editor** 要素カタログで、「Add element」アイコンをクリック > [Heading](https://help.pagefly.io/manual/heading-element/)[element](https://help.pagefly.io/manual/heading-element/)を選択 > 最初のバリアントをページエディタにドラッグ＆ドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcTQ_Coh4nnsbMcOFLnzB9tSjhKu2ey44NEoBrJ6aB7VHcOuJB4emuRrJl4yI-t1_ZKlJf37WtPN5tEYAIhXxrlUTiRyEgzB8naAFT0lz0A9F67DUg7h2b19c884twt4wEypTcI_ZRqRcN63BqigQkey6hkw8SU8blAlA0dKjzU6Q.png) 次に、Generalタブで、見出しテキストを「ABOUT US」に変更します。 Stylingタブをクリック > Content color > 白を選択します。 Spacingで、マージンの上下を0pxに調整します。Typographyパラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。 More Settingsボタンをクリック > フォントウェイトにBoldを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcH7SA3VqEsbNyeUG_gGZyLBIqKlJWY6YC8VNN2HHmHNznyxg_iN0jM6Qn133eC1OybQrtspgtd1y8_YKFCPi53HKyCW2VIMrO0DW-VUXof7D7jRKZMZXu9hDiOFZcKUbC1nfPGYl_fbZZHMUkey6hkw8SU8blAlA0dKjzU6Q.png) セクションをクリック > Stylingタブに移動 > Text Alignmentで中央揃えを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfHu-Vl_OUxfHhQVLbrdcmEKKyX3lB5Tp7_bbuY8AJN2l6uMWjhY9A9KoGNsj1jiF4nO6fcxTU9WfohuVNM1JrmMFDsXXdXZVaWu9UDlzFSDPHb6u2GZgRD944jD-wgj4jMElXaTLZ07EcBttisNAkey6hkw8SU8blAlA0dKjzU6Q.png) #### ステップ3：紹介文を追加 **Gen 2 Editor** Gen 2エディタでは、スタイリング設定はLegacyエディタと同様です。ただし、セクション内のコンテンツを配置する方法にはいくつかの違いがあります。 * Flex sectionをクリックし、Stylingタブに移動します。 * Align Itemsまでスクロールし、Centerを選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXd2JFjer8J3dnxoK8Y_APmLEc_j-7Vj96GEx6WB5gCAVUwH9uAxyhaxBo3QCrS8ZjyhKLCuTMfRTSZ3kc-vHWah5s04Na9osevsgYgZhpUsOsrjK_MYeQz2KDf8TokXeJLusDxhnlHJxqz83ZZqkgkey6hkw8SU8blAlA0dKjzU6Q.jpeg) **Legacy Editor** Elementカタログで、「Add element」アイコンをクリック > [Layout](https://help.pagefly.io/manual/layout-element/)[element](https://help.pagefly.io/manual/layout-element/)を選択 > Full Sectionオプションをページエディタにドラッグ＆ドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcOHb3CUE5xDMpdDTpEt_sWbAf4Aa1_LXsoUec9z-Ae8DhEkAH_aSbZjLsd6KDA2X2rHjrzcE5zGR4HgndwJaYNw6Tire2Ehjo55zbeOPb3LMzn6f5zpzkGLRPKpFxrMWErw1y6VjJVR5MYz9-nRwkey6hkw8SU8blAlA0dKjzU6Q.png) その後、Heading要素とParagraph要素もセクション内にドラッグ＆ドロップします。これでこのセクションはあなたのブランドの要約またはストーリー用となります。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcnu94B01tNKA4b3zRCH5gZNf_7noLo-b35GLybhJEUcElr3BFPkIwq8MNlqbo-X1vvpBGNd5gDbvgeD7cDKg7zWdP1zAzMBqgodHGOneQzVwdERS0PfphsCpPrj37knXuoYMBsUFi2QBziAbRh9gkey6hkw8SU8blAlA0dKjzU6Q.gif) Generalタブで、ビジネスコンテンツに合わせてテキストを変更します。Stylingタブを使用して、フォントとフォントサイズを調整します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfU7AXNeNc11WSoFvdQ5MAT8AALTor5t-zy_N1hbIvIBCPOz2v8KZbP52xempbTIHk15mObF7KKcwNTs9kmdq87jfB1vigd86LhCkaREosbQVE5S0wo_5XSA60bHZRQLJsh62xb0JauRCuyh63-key6hkw8SU8blAlA0dKjzU6Q.png) #### ステップ4：「理由」セクションを作成 このステップでは、顧客があなたの製品を選ぶべき理由を示します。 Elementカタログで、「Add element」アイコンをクリック > [Layout element](https://help.pagefly.io/manual/layout-element/)を選択 > ⅓ – Sectionオプションをページエディタにドラッグ＆ドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXf6x1LmtnXZ2vVELjizuUwunkDIKPkRiN7qVINaYJgwvA9rSNTnr_MlEyCpyYBI2UW6b1C2otOF6W4X5d1y1ajwxUL7jKc43vy5r1vgEY57dZvB5wdcaD-b58FTDQQmrqgD54IOC27g0s4-jm-ilAkey6hkw8SU8blAlA0dKjzU6Q.png) 見出しもセクション内にドラッグ＆ドロップします。見出しのテキストを「WHY CHOOSE US」に変更します。Stylingセクションで再度フォントとフォントサイズを調整します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfKGGXXVcVAeqJhqspfAYXgwJv8pNWQ0hvKl_k-ipjPmQFh45qUARDijjgOyB5SQqOgTPaSmsU2Pj-JyY_pHgxvePstkQYarHxFt-PiL8-PmXnjm1gxV6Rg23ykxUR-0AlQmpL0HFbQ048MW5IKqgkey6hkw8SU8blAlA0dKjzU6Q.png) 次に、[Image element](https://help.pagefly.io/manual/image-element/)と[Heading element](https://help.pagefly.io/manual/heading-element/)をそれぞれのカラムにドラッグ＆ドロップします > コンテンツを適用 > Stylingタブに切り替えてテキストをカスタマイズします。 #### ステップ5：Instagramフィード要素を追加 [Instagram要素](https://help.pagefly.io/manual/instagram-element/)を使用すると、顧客はあなたのブランドの個性を垣間見ることができ、ブランド信頼性、顧客エンゲージメントを高め、最終的に売上を促進します。 **行動喚起の見出しを追加** Heading要素を使用して、「Follow us on Instagram」という行動喚起の見出しを追加します。Element Catalogで「Add element」アイコンをクリック > Heading要素をドラッグ＆ドロップします。Stylingタブに切り替えてテキストをカスタマイズします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc_XUnPF4s41gs4eyQbtEXv1eGfz1cna7EG67EGqXhXATeSbajdTNLpbiBy6uf7PYrpsBA3OlAOlkgj7kmdzdZvU1Md7OxDI0ftPyd2jrxzGpCX_uKZZNtdUYzBxfTt45gpSszqpccY6T9iaRsP2wkey6hkw8SU8blAlA0dKjzU6Q.png) **Instagramフィード要素を追加** Element Catalogで、Add elementアイコンをクリック > Heading要素と同じセクションにInstagram feed要素をドラッグ＆ドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcvYeQuPCyt6Y6krAKB3rely5R9a-h9tYhtRH5JaZW_or3rS7Y6jQLE_r3yxOAzYuzoiEgJ2NZqUOC47AI4o3ZuK1mypuDsCmZefgvkkdUowDyaBu159_sbnTv5VblgOKKh9Vr7xsH61oMhW3Ahtwkey6hkw8SU8blAlA0dKjzU6Q.gif) Instagramに接続する必要があることに注意してください。[Instagram feed element](https://help.pagefly.io/manual/instagram-element/)に関するこの記事を確認して、詳細をご覧ください。 #### ステップ6：ページを保存して公開 最後に、Publishボタンをクリックし、Live viewでライブのページを確認します。まだ公開したくない場合は、Saveボタンをクリックし、Previewモードで確認します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfoPFTJjxRZbjun0UFZqHKuFpx_6Pq8PaxJGBIieJpqlVdDRuqsA82pasnsLU0PB-NvUzEPik5bgmdt_ZLnAw5rswBMGBF89Hd8rkY9dKr44sGgS1xtKLndHIjoJFfc0IUsiHzdGJYmoJB3tZ5R0Qkey6hkw8SU8blAlA0dKjzU6Q.png) 参考として、[ベストなShopifyのAbout Usページテンプレート例](https://pagefly.io/blogs/shopify/e-commerce-about-us-page-example)の記事をチェックしてください。 ### ユースケース * SEO最適化：関連性の高いキーワード、メタディスクリプション、画像の代替テキストを使用して、About Usページを検索エンジン向けに最適化します。 * 明確さと簡潔さ：コンテンツを明確かつ簡潔に保ち、訪問者があなたのブランドストーリーとミッションを迅速に理解できるようにします。 ### よくある質問 **About usページにはどのような情報が掲載されますか？** * あなたのブランドストーリー：起源、ミッション、他との違いを説明します。 * あなたのチーム：ブランドを支える顔を紹介し、人間的な繋がりを育みます。 * あなたの価値観：ビジネスにとって最も重要なことと、それが製品やサービスにどのように反映されているかを強調します。 * お客様の声：肯定的なフィードバックを紹介して、信頼性と信用性を構築します。 * 行動喚起：訪問者にもっと詳しく知ってもらったり、購読してもらったり、ソーシャルメディアでフォローしてもらったりすることを促します。 **PageFlyを使用してAbout usページを作成できますか？** もちろんです！PageFlyのドラッグ＆ドロップインターフェースを使えば、Shopifyストアの魅力的なAbout Usページを簡単にデザイン・カスタマイズできます。 ### 追加リソース * [ベストなShopify About Usページテンプレート例](https://pagefly.link/BWgUfZQh) * [PageFly #1 Shopify Page Builderが構築したShopify About Usページ例](https://www.youtube.com/watch?v%3DR8maHTFoPX4) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/pages/how-to-create-an-about-us-with-pagefly.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.