# ボタン ### PageFlyボタン要素について PageFlyの[ボタン要素](https://help.pagefly.io/manual/button-element/)は、あらゆるページの基本的な要素の1つです。それは、ページで達成しようとしているあらゆる目標に対するCall To Action (CTA)として機能します。 詳細は以下の動画チュートリアルでご確認いただけます。 {% embed url="" %} ### ボタン要素へのアクセス方法 * ステップ1: "**Elements**"をクリックします * ステップ2: PageFlyタブから、"**Button**"を見つけて選択できます * ステップ3: ボタン要素には6種類のバリエーションがあり、それぞれ異なるスタイルです。時間を節約できるよう、今後もバリエーションを追加していく予定です。これらのバリエーションの中から、ページエディターに配置したいものをドラッグ＆ドロップしてください ![](/files/pk1j4lyb40ddj8bBsmlQ) ### ボタン要素の設定方法 ボタン要素には多数のパラメーターがあり、Call To Actionのクリック率を最大限に高めるためにコンテンツの外観を細かく調整できます。 レイアウト内の要素を選択して、そのパラメーターを確認してください。**General**タブと**Styling**タブのパラメーターはこの要素固有のものです。 ![](/files/GuWRDSmv19AIOmF5VqgT) #### 一般設定 * **ボタンタイプ** 選択肢は3つあります：テキストのみ、テキストとアイコン、アイコンのみ。 ![](/files/7gY7GueNYjrV6lxJzixE) * **ボタンテキスト** この設定は、ボタンタイプがアイコンのみの場合は利用できません。ボタンの内容を挿入およびスタイル設定できます。 ![](/files/8mvNDk1MFWOG99pgyFgN) * **アイコン位置**: アイコン位置は左、右、または上から選択できます {% hint style="info" %} **注**: このパラメーターは、ボタンタイプで"**テキストとアイコン**"が選択されている場合にのみ表示されます。 {% endhint %} ![](/files/Vg8CA7aCfKE4FuOgGRnG) * **全幅を有効にする**: ボタンをコンテナの全幅で表示するかどうかを選択します。これにより、以下の例のように、ボタンは親コンテナ要素の全体の幅を埋めるように水平方向に引き伸ばされます {% hint style="info" %} **注**: このパラメーターは、従来のLegacyエディターでのみ利用可能です。 {% endhint %} ![](/files/ceOdsxJCrsDt9hdToG6w) * **アクション** クリックアクションパラメーターを使用することで、リンク、セクション、ポップアップ、Eメールアドレス、または電話番号に遷移させることができます。 ![](/files/XNqZlf5WuBxdgEsOphqe) ACTIONパラメーターについては、[こちら](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/)をご覧ください。 [ATTRIBUTES、VISIBILITY、ANIMATIONパラメーター](https://help.pagefly.io/manual/elements-general-settings/)についてさらに詳しい情報を得ることができます。 #### スタイル設定 以下は、スタイル設定タブに表示される主な設定です。 * **グローバルスタイル**: 6種類のバリエーションでボタンのスタイルを選択します。 ![](/files/OhxAkKrNCWDvivLQsjMB) * **状態スタイル**: ボタンに選択できる3つのオプション（通常状態、マウスオーバー状態、アクティブ/選択状態）が含まれています。 ![](/files/WpUsaSPk5OlboXmbj47X) タイポグラフィ、背景、ボーダーなど、スタイル設定タブの他の設定については、[こちらのガイド](https://help.pagefly.io/manual/elements-style-settings/)をご参照ください。 ### ユースケース #### ボタンサイズの増やし方 基本的に、ボタンの内容を増やすと、ボタンのサイズも自動的に大きくなります。別の場合として、ボタン要素のパディングを変更することもできます。以下のGIFをご確認ください。 この例では、左右のパディングを20pxから30pxに、上下のパディングを12pxから50pxに増やしています。 ![](/files/tDZskbr5ZE3S5Aw6afuW) #### ボタンの色の変更方法 スタイル設定タブの"**背景色**"のカラーピッカーを使用することで、ブランドやデザインの好みに合わせてボタンの色を簡単にカスタマイズできます。 ![](/files/SYLl6Mg35CQJl5AUo5LL) 色設定を調整することで、サイトの配色を引き立てたり、重要なコールトゥアクションに注意を引いたり、単にブランドの視覚的アイデンティティに合わせたりするボタンを作成できます。 #### 動的チェックアウトボタンの作成方法 PageFlyで動的チェックアウトボタンを作成するには、2つのオプションがあります。 * **Legacyエディター**: HTML/Liquid要素を使用してカスタムコードを追加します。 * **Gen 2エディター**: 動的チェックアウトボタン要素をページにドラッグ＆ドロップし、その外観をカスタマイズするだけです。 詳細な手順については、[こちらのガイド](https://help.pagefly.io/manual/shopify-elements-dynamic-checkout-button/)をご参照ください。 #### ボタンを全幅にする方法 * **Legacyエディターの場合**: ボタン > Generalタブを選択し > Enable Full-Widthで「はい」を選択します。 ![](/files/45GI0vRveaoLNYpO4sQn) * **Gen 2エディターの場合**: スタイル設定タブのSizeパラメーターグループの下にあるWidth設定で、"**コンテナ幅に合わせる**"オプションを選択するだけです。 ![](/files/6V0zm9PMtocxUbTmJO7K) ### ボタン使用のベストプラクティス * 「今すぐ購入」、「登録」、「詳細はこちら」など、ボタンのCTAには明確で簡潔なテキストを使用します。 * 対照的な色や適切な間隔で、ボタンが視覚的に目立つようにします。 * 重要な情報の近くやセクションの終わりなど、ページ上の戦略的な場所にボタンを配置します。 * より大きなボタンサイズを使用し、視覚障害のあるユーザーのために適切な色のコントラストを確保することで、アクセシビリティを考慮します。 * さまざまなボタンのスタイル、色、配置をテストして、オーディエンスと目標に最適なものを見つけます。 * ページ作成を効率化し、ウェブサイト上のすべてのボタンで一貫したスタイルを確保するために、"[グローバルスタイル](https://help.pagefly.io/manual/global-styling-feature/)"を設定します。 ### バージョンアップデート PageFlyバージョン4.23.0のリリースにより、フレキシブルセクションとブロックが導入され、ページレイアウトの柔軟性と制御が向上しました。新しいページを作成する際に、Flexエディター（フレキシブルセクションとブロック）またはBasicエディター（列と行）から選択できるようになりました。 特に、Flexエディターの一般設定からは「全幅を有効にする」オプションが削除され、サイズパラメーターがスタイル設定に追加されました。 ### よくある質問 **1. Call to action (CTA) の例にはどのようなものがありますか？** 最も良い5つの例は、「今すぐ電話」、「今すぐ購入」、「購読」、「登録」、「詳細はこちら」です。 **2. ボタン要素のスタイルは設定できますか？** はい、できます。PageFlyボタン要素には5種類のバリエーションがあり、通常状態、マウスオーバー状態、アクティブ/選択状態の3つの状態スタイルオプションがあります。 **3. ボタンにアイコンを追加するにはどうすればよいですか？** 一般設定で、「テキストとアイコン」または「アイコンのみ」のボタンタイプを選択できます。 **4. ボタンをクリック可能にできますか？** はい、できます。一般設定の「アクション」パラメーターを使用して、ボタンにクリックアクションを追加できます。これにより、ユーザーがボタンをクリックしたときに、特定のリンク、セクション、ポップアップ、Eメールアドレス、または電話番号に遷移させることができます。 --- # 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/pjito/pagefly-elements/basic/button-element.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.