【Shopify.dev和訳】Themes/Best practices/Sections and blocks
この記事について
この記事は、Themes/Best practices/Section and blocksの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
セクションとブロックを使った構築
テーマをデザインする際には、セクションやブロックで機能を提供するタイミングを考慮する必要があります。セクションとブロックは、マーチャントがテーマをカスタマイズして拡張することができる modular components です。マーチャントは、セクションやテーマブロックの追加や削除、セクションやブロックの設定の調整、アプリブロックやメタフィールドの導入を行うことができます。
このガイドラインはOnline Store 2.0のテーマに適用され、より具体的にはJSON テンプレートを使用したテーマに適用されます。リキッドテンプレートにセクションを追加したり削除したりすることはできません。
セクション
セクションはすべてのページで利用できます。テーマテンプレートのデフォルトコンテンツがメインテンプレートのセクションで利用できるようにし、セクションの追加、削除、並び替えができるようにしておく必要があります。セクションを使って以下のようなことができます。
- テンプレートレベルでコンテンツの追加、削除、並び替えを行う。
- セクション全体のレイアウトとコンテンツに適用されるテーマ設定を制御する。
ブロック
セクションレベルでのコンテンツの追加、削除、並び替えや、セクションの使い勝手を向上させるためには、テーマブロックを用意する必要があります。
ブロックを開発する際には、以下の原則を念頭に置いてください。
- テーマ設定がブロックに適用されていることを確認する。
- コンテンツに適したブロックレイアウトを選択し、ブロックの種類や順序に関わらず、ブロックが論理的に流れるようにしてください。
- ブロックを使った導入には、適切な 柔軟性レベルを選択してください。
ブロックレイアウト
セクションのグリッドレイアウトを設計する際には、ブロックの種類やブロックの順番に関わらず、論理的で直感的な読みの流れに沿ってブロックを配置してください。
セクション内のブロックの流れを決める際には、以下の点を考慮してください。
- 階層性を必要とするテキストベースのコンテンツでは、ブロックを垂直に積み重ねる。
- 階層を示す必要がない場合は、ブロックを水平に積み重ねるか、セクションで利用可能なブロックタイプに合わせてグリッドを作成します。
- ブロックを水平方向に積み重ねる場合は、セクショングリッドが複数行に渡って折り返せるようにするか、水平方向のスライドコントロールを提供して、快適なブロック幅を維持するようにします。セクショングリッドがレスポンシブで、画面サイズに応じてブロックがリフローできることを確認してください。
- 特定のブロックタイプや順序に依存してレイアウトを設計したり、特定のブロック順序を使用してグリッドレイアウトを変更したりしないようにしてください。
ブロックと柔軟性
シンプルさと柔軟性を両立させるためには、ブロックを追加するタイミングと、各ブロックに何を含めるかを慎重に検討する必要があります。ブロックが多すぎると、ごちゃごちゃして複雑になります。以下の原則を参考にして、ブロックを定義する方法を理解してください。
- 編集作業を簡素化し、エディタのサイドバーをすっきりさせるために、設定をブロックにまとめる。例えば、画像ブロックをカスタマイズするためのテーマ設定を、ブロックの中に入れ子にすることができます。
- 要素が特定の階層に従っている場合は、要素をグループ化し、オプションでブロックの挿入ポイントを前後に設けることができます。例えば、カートページのラインアイテムを制御する単一のブロックを作成することができます。
- あまりにも粒度の高いブロックの提供は避けてください。粒度が高いと、テーマのコードが複雑になり、マーチャントの編集作業がしにくくなります。例えば、著者、日付、コメントを 3 つの独立したブロックとして導入するのではなく、1 つのブロックにまとめるか、設定にまとめるべきです。
アプリブロックの考慮事項
マーチャントは自分のテーマにアプリ提供のブロックを追加することができます。テーマ開発者としては、このようなブロックのサポートをセクションに 追加する必要があります。セクションでアプリブロックをサポートするかどうかを決める際には、以下の点を考慮してください。
- 追加のコンバージョンツールや購入決定要因を重ねるための明確なユースケースがあるセクションにアプリブロックを提供する。たとえば、商品ページの商品情報やカートのテンプレートにアプリブロックを含めることができます。
- アプリブロックを使用してテーマを拡張することを検討する際には、アンチ脆弱性とセクションの目的を常に考慮してください。予想外のブロックタイプを挿入すると、レイアウトが簡単に崩れてしまうでしょうか？それらのブロックを処理するためにエッジケースの CSS スタイルを追加する必要があるでしょうか？セクションの目的が曖昧になったり、一貫性がなくなったりするのではないか？これらの質問に「はい」と答えた場合、アプリブロックは避けてください。
テーマ設定
テーマ設定を使って、さまざまなルック＆フィールのオプションを提供します。テーマ設定は、セクション、ブロック、テーマの各レベルで適用できます。
Metafields
Shopify では、ターゲット層に合わせて様々な標準的な metafieldsを提供しています。どのようなものが用意されているかを確認し、どのような使用例がそのテーマに適しているかを検討してください。例えば、ケアガイドやサイズチャートのメタフィールドのために、セクションやブロックを含めることができます。これらのメタフィールドは、ダイナミックソースとして参照されると、レンダリングされている製品などのコンテキストを反映して更新されます。
テーマにメタフィールドを組み込む際には、メタフィールド用の特定のブロックを構築することを検討してください。また、対象となるセグメントの e コマースサイトを監査し、コンテンツの表示方法を分析することで、特定のコンポーネントを設計する機会を得ることができます。例えば、メタフィールドを使用して、電子製品のための整形された情報リストを作成したり、コーヒーのブレンドや産地に関する情報を追加したりすることができます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion