成功
ボタン
柔軟なレイアウトと任意の見出しコンテンツで、わかりやすいCTAボタンのセットを作成します。
Buttons を使用すると、顧客に明確な次のステップが必要な場所に、1つ以上のわかりやすいアクションを配置できます。ランディングページのCTA、クイックリンクのグループ、プロモーションの訴求、シンプルなナビゲーションのショートカットに適しています。エディターでセクションとブロックの仕組みをより詳しく確認するには、Shopify ドキュメントのセクションとブロックを参照してください。
メインのセクションコントロールでは、ボタンのグループがデスクトップとモバイルでどのように配置されるかを決定します。配置設定を分けることで、デスクトップでは広めの表示を保ちながら、小さな画面ではレイアウトを引き締められます。
レイアウト では、グループを横一列と縦の列の間で切り替えます。行は短いラベルを少数並べる場合に最適で、列はラベルが長い場合や各アクションにより多くのスペースが必要な場合に見やすくなります。
ボタンを2つ以上追加する場合、Button width は視覚的なリズムを調整するのに役立ちます。ラベルの長さに大きな差がある場合は幅を混在させ、よりすっきりと均一なボタングループにしたい場合は同じ幅を使用してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Button
Button ブロック
Section titled “Button ブロック”Button ブロックを追加すると、独自のテキスト、リンク、スタイル、アイコン、モバイル幅の動作、デバイスの表示可否を持つ別のアクションをセクションに加えられます。ボタンの詳細を確認してください。
Button ブロックは、同じグループ内に複数のアクションが必要な場合、たとえば主要CTAと補助CTA、またはリンク先の短い一覧を作成したい場合に使用します。デバイスごとに個別のボタンを非表示にすることもでき、モバイルとデスクトップで少し異なるアクションセットが必要な場合に便利です。
複数の Button ブロックを組み合わせる場合は、視覚的な階層がはっきりわかるようにしてください。強い主要アクションを1つ、補助アクションを1つまたは2つにすると、同じくらい目立つボタンをいくつも並べるより効果的なことが多いです。
セクション固有の設定
Section titled “セクション固有の設定”カラー設定は、このセクション専用にデフォルトのアイコン、テキスト、サブ見出しの色を上書きします。カスタム背景を追加し、より強いコントラストや意図的な配色が必要な場合に特に有効です。
これらの色は1つずつではなく、まとめて調整してください。見出しエリアが背景の上で読みにくくなった場合は、ボタンのスタイルを変更する前に、まずテキストとサブ見出しの色を更新してください。
カスタム背景やオーバーレイを使用する場合は、見出しテキスト、アイコン、ボタンがひと目で読みやすいことを必ず確認してください。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定では、ボタングループの上に表示される任意の導入コンテンツを管理します。このセクションでは、組み込みボタンも含められます。Button ブロックだけに頼らず、シンプルな見出しとアクションのレイアウトにしたい場合に便利です。
ボタンに短い販売メッセージや案内などの文脈が必要な場合は、見出しエリアを使用してください。組み込みボタンには独自のスタイル、アイコン、リンク、配置、モバイル幅のコントロールがあり、これらの設定はそのセクションレベルのボタンにのみ適用されます。
組み込みボタンと Button ブロックを組み合わせる場合は、どのアクションを先頭にするかを決めてください。1つのボタンを視覚的に最も目立たせることで、セクションが競合する選択肢の一覧のように見えるのを防げます。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、ボタングループの背後に色、グラデーション、画像、動画を配置できます。これにより、シンプルなアクションエリアをより強いプロモーションセクションに変えられますが、背景は可読性や余白にも影響します。
テキスト量の多い導入部分には明るい背景を使うか、背景画像がボタンと競合する場合はオーバーレイの強さを高めてください。モバイル専用の背景メディアを使うと、小さな画面でもセクションをすっきり保ちやすくなります。
余白設定では、セクションの上下のスペースを調整します。Buttons が近接するコンテンツを支える場合は余白を減らし、アクションを独立した目的地として際立たせたい場合は余白を増やしてください。
区切り線設定
Section titled “区切り線設定”区切り線設定では、セクションの上または下に任意の線を追加できます。フル背景の演出を使わずに、やわらかく視覚的に区切りたい場合に使用してください。
表示設定では、セクション全体をデスクトップ、モバイル、またはその両方に表示するかを制御します。1つのレイアウトをすべての環境で無理に使うのではなく、モバイル専用のアクションセクションを作りたい場合に便利です。
幅設定では、コンテンツ幅と外側のセクション幅を調整します。コンテンツ幅を狭くすると、小さなボタングループがより意図的に見え、セクション幅を広くすると、強い背景と組み合わせたときにより効果的です。
使用上の注意
Section titled “使用上の注意”- リストは短く保ってください。 このセクションは、長いリンク集ではなく、集中したアクションセットに使用してください。
- レイアウトをラベルの長さに合わせてください。 短いボタンテキストには行を、より余裕が必要なボタンには列を選んでください。
- 1つの優先アクションから始めてください。 最も重要なボタンを視覚的に最も強くし、補助アクションは控えめに保ってください。
- デスクトップとモバイルは別々に確認してください。 配置、幅、表示可否、メディアの選択によって、表示領域ごとのセクションのレイアウトと可読性が変わります。
- デフォルトのスタイルは意図して使ってください。 空、透明、またはそれ以外に中立的な値は、通常フォールバックのスタイルを維持します。一方で、明示的な色やメディアを使うと、セクションがより独立した見た目になります。
- 公開前にメディアの動作を確認してください。 デスクトップとモバイルで異なるメディアを使用する場合は、両方のサイズで切り抜き、読み込み、テキストの可読性を確認してください。