成功
ボタン
スタイル、アイコン、リンク、モバイル表示オプションをカスタマイズできる、柔軟なCTAボタンを作成します。
このブロックを使用して、セクションまたはブロック内に明確な行動喚起を追加します。テキストとリンクだけでシンプルにすることも、アイコン、代替スタイル、モバイル専用の表示オプションでより視覚的にすることもできます。
まずボタンのテキストとリンクを設定し、その後、アクションの目立ち方に合わせて見た目のスタイルを調整します。強めのスタイルは主要なアクションに最適で、プレーンまたはセカンダリのスタイルは補助リンクや目立たせすぎたくないアクションに適しています。
絵文字またはサポートされているアイコン名を追加して、ボタンにすばやく視覚的な手がかりを与えられます。多くの場合、アイコンはラベルの代わりではなく補助として使うべきです。
レイアウトでは、アイコンの表示位置、またはボタンをアイコンのみで表示するかどうかを制御します。アイコンのみのボタンは、周囲のコンテンツから意味が明確に分かる場合や、記号が広く認識されている場合に最適です。
アイコンのみのレイアウトを使用する場合は、アクションが一目で理解できることを確認してください。テキストラベルのほうが通常はより明確で、アクセシビリティも高くなります。
デフォルトのボタンが周囲のコンテンツと比べて大きすぎたり小さすぎたりする場合は、小さいサイズまたは大きいサイズのバリエーションを使います。大きいスタイルは注目のプロモーションを目立たせるのに役立ち、小さいスタイルはコンパクトなレイアウトに適しています。
モバイルの全幅オプションを使うと、小さい画面でもボタンをタップしやすくなります。これは、縦に積み重なるレイアウトや、細いインラインボタンが見落とされやすいプロモーション領域で特に便利です。
ボタンが外部の移動先を指す場合は、新しいタブでリンクを開くことで、お客様が現在の場所を保ちやすくなります。内部の移動先では、通常は同じタブで開くほうが自然です。
標準ブロック設定
Section titled “標準ブロック設定”表示設定では、このブロックをデスクトップまたはモバイルで表示・非表示にできます。これは、画面サイズごとに異なるボタンの見せ方を使いたい場合や、情報が多いモバイルレイアウトを簡略化したい場合に便利です。関連するテーマエディターの動作については、セクションのカスタマイズに関するShopifyドキュメントを参照してください。
これらのコントロールの共通の動作については、表示設定を参照してください。
使用上の注意
Section titled “使用上の注意”- 明確なアクション文を使う。 お客様に次に何が起こるかを正確に伝えるラベルを選びます。たとえば、今すぐ購入、詳しく見る、予約する などです。
- 優先度に合わせて目立ち方をそろえる。 メインのアクションには、より強いスタイルや大きいスタイルを使い、補助リンクには控えめなスタイルを使います。
- アイコンは補助として使う。 意味を補強するためにアイコンを追加しますが、文脈で意図が明確でない限り、アイコンだけに頼らないでください。
- モバイルのタップ操作を最適化する。 小さい画面でボタンの存在感を高めたい場合や、タップしやすくしたい場合は、全幅表示をオンにします。
- スタイルのフォールバックを確認する。 ボタンに周囲のエリアのフォールバックスタイルを継承させたい場合は、色や見た目の上書きを未設定のままにします。ボタンをコンテナーとはっきり区別したい場合にのみ、明示的なスタイルを追加します。
- 非表示状態を確認する。 デスクトップまたはモバイルでブロックを非表示にする場合は、そのデバイスで同じアクションを別の場所からも利用できることを確認してください。