ヘッダー設定

注目のリンク

1. Company XYZのアイコンに関するドキュメント
2. セクションとブロックに関するShopifyドキュメント
3. テーマエディターに関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

これらの設定を使って、テーマ全体のコンテンツ領域に明確な導入を作成します。よく構成されたヘッダーは、次に続く内容を訪問者が理解しやすくし、一覧しやすさを高め、重要なコンテンツにより強い視覚的・意味的な導入部を与えます。テーマコンテンツの構成についてより広い概要を確認するには、セクションとブロックに関するShopifyドキュメントを参照してください。

ヘッダー内容

このグループは、コンテンツ領域の上部にあるテキストスタックを制御します。アラインメント、任意のアイコン、キャプション、メイン見出し、補足テキストです。最も効果的なヘッダーは、通常、各要素が同じメッセージを繰り返すのではなく、それぞれ異なる役割を担うように、焦点を絞って構成されています。

テキストの配置は、その周囲のコンテンツスタイルに合わせて選択してください。中央揃えはプロモーションや編集系のレイアウトに適しており、左揃えは長めの補足コピーを含める場合に、通常は読みやすくなります。

アイコン欄には、絵文字またはアイコン名を入力できます。機能の強調やテーマ付きのコンテンツラベルなど、簡単な視覚的な手がかりがメッセージの枠組みづくりに役立つ場合に使用してください。装飾的で情報性が低い場合は、よりすっきりした仕上がりのために空欄のままにしてください。アイコン名のガイドについては、Iconsを参照してください。

見出しキャプションは、メイン見出しの上に表示される短いラベルとして使用します。カテゴリ、キャンペーン、コンテンツテーマなど、簡単な文脈を示す場合に最も効果的です。

メイン見出しは、主なメッセージを担う必要があります。訪問者とページ構造の両方に役立つよう、具体的で説明的に保ってください。見出しタイプでは、その見出しをどれだけ目立たせ、構造上どのような位置づけにするかを選択できます。

見出しレベルは、見た目だけでなくページ構造に基づいて選択してください。最も重要なタイトルには最上位レベルの見出しを使い、ページ全体が適切に整理された状態を保ちます。

サブ見出しには、短い補足文脈、価値を示す文、または簡単な説明を使用します。見出しだけで十分に伝わる場合は、長い段落よりも簡潔なサブ見出しのほうが適しています。

ボタンアクション

ヘッダーから次の明確な手順につなげたい場合は、任意のボタンを追加できます。これは、閲覧、詳しく見る、注目の移動先を開くなど、行動につながる内容を紹介する場合に便利です。エディターでの設定詳細については、テーマエディターに関するShopifyドキュメントを参照してください。

ボタンテキストとリンクを一緒に追加して、アクションが完全で明確に伝わるようにします。ボタンアイコンを含める場合は、ラベルの代わりではなく補助として機能する必要があります。アイコン欄には絵文字またはアイコン名を入力できます。命名のガイドについては、Iconsを参照してください。

ボタンのスタイルは、アクションにどれだけの視覚的な重みを持たせるかを制御します。ボタンが主な次の手順である場合は、より強いスタイルが適しています。一方、より軽いスタイルは、コンテンツを主役に保つのに役立ちます。

ボタンのレイアウトでは、アイコンをラベルの横に表示するか、アイコンのみで表示するかを制御します。アイコンのみのボタンは、周囲の文脈からアクションが明確に分かる場合に限定するのが最適です。

注意

アイコンのみのボタンは、見落とされたり誤解されたりしやすい場合があります。多くの場合、短いテキストラベルのほうが、より明確で確かなアクションを作れます。

ボタンはテキストコンテンツの上または下に配置でき、必要に応じてモバイル用の別位置も設定できます。これにより、デスクトップのレイアウトをバランスよく保ちながら、モバイル訪問者にはよりスムーズな読みの流れを提供できます。

小さな画面でアクションをより明確に目立たせたい場合は、幅いっぱいのモバイルボタンオプションを有効にしてください。これは、ボタンをタップすることが主な目的である場合に特に便利です。

リンクを新しいタブで開くのは、外部の移動先や、訪問者に現在の位置を失ってほしくない場合に通常最適です。通常のナビゲーションでは、同じタブのままのほうが自然に感じられることが多いです。

使用上の注意

1. メッセージを焦点化する。 見出し、キャプション、サブ見出しを一緒に使い、複数の欄で同じテキストを繰り返すのではなく、1つの明確なアイデアを導入します。
2. 階層を重要度に合わせる。 ページ構造に合う見出しタイプを選び、全体の見出し順序を弱めずに重要なコンテンツを際立たせます。
3. アイコンは意図的に使う。 コンテンツやアクションの識別をより早く助ける場合にのみアイコンを追加してください。
4. ボタンアクションを明示する。 明確なボタンテキストと関連するリンクを組み合わせ、アクションが明白でない限り、アイコンだけに頼らないでください。
5. モバイル表示を確認する。 小さな画面でアラインメント、ボタン位置、幅いっぱいの動作を確認し、ヘッダーが読みやすく、タップしやすい状態を保ちます。
6. 両方のビューポートレイアウトを確認する。 デスクトップ用とモバイル用のコントロールを分けて使う場合は、両方のサイズを確認して、アラインメント、表示、メディアの動作が意図どおりに感じられるかを確かめます。
7. 上書きは目的を持って使う。 ヘッダーを周囲の領域に自然になじませたい場合は、デフォルトスタイルの値をそのままにします。ヘッダーを際立たせたい場合にのみ、明示的な色やメディアを使ってください。