成功
アコーディオン
FAQや追加情報を、任意のメディアやボタン付きの展開可能なパネルで整理します。
長い情報を、見やすく整理された折りたたみ式パネルにまとめるには、このブロックを使用します。FAQ、配送詳細、お手入れ方法、ポリシー、またはページ全体を占有せずに表示しておきたい補足コンテンツに適しています。テーマコンテンツの構造の概要については、セクションとブロックに関するShopifyドキュメントをご覧ください。
コンテンツはブロック内に直接記述することも、既存のページやブログ記事に接続することもできます。アコーディオンをご覧ください。
見出しとコンテンツから始めます。見出しはお客様が最初に見るクリック可能なラベルなので、短く具体的にしてください。一方、コンテンツ領域は回答、説明、補足詳細に最適です。
アコーディオンを既定で開いた状態にすることもできます。1つの項目が特に重要な場合に有効ですが、使いすぎるとブロックがあまりコンパクトに見えなくなります。
このブロックは、ブログ記事やページからコンテンツを取り込むこともできます。ほかの場所の長いコンテンツを再利用したい場合に便利で、短いプレビューで十分な場合は、本文全体の代わりに抜粋を表示することもできます。抜粋の詳細は、Excerptsをご覧ください。
ページとブログ記事の両方が割り当てられている場合は、ページが優先されます。
見出しとアクション
Section titled “見出しとアクション”見出しの横にインラインアイコンを追加して、アコーディオン項目に視覚的な個性を持たせたり、トピックを区別しやすくしたりできます。関連する項目ではアイコンの選択を統一し、装飾ではなく意図のあるブロックに見えるようにしてください。アイコンの設定については、Iconsをご覧ください。
アコーディオンが外部コンテンツに接続されている場合、そのコンテンツへのリンクを自動的に表示できます。また、より明確な行動喚起にしたい場合は、独自のボタンテキスト、リンク、アイコン、スタイルを追加することもできます。
アクションの重要度に合ったボタンスタイルを選択してください。リンクが次の明確なステップである場合は、より目立つスタイルが適しています。一方、より小さく控えめなスタイルは、補助的な閲覧導線に向いています。モバイル向けのフル幅ボタンは、見た目の控えめさよりもタップしやすさが重要な場合に役立ちます。
任意のメディアを追加して、アコーディオンコンテンツの見た目を変更できます。メディアは、メッセージを先に伝えるか、その後で補足するかに応じて、テキストの上または下に表示できます。
シンプルな視覚的強化が必要な場合は画像を、動きによってコンテンツをより分かりやすく説明できる場合は動画を使用してください。動画サービスのリンクを追加する場合は、埋め込みコードではなく動画URLを使用してください。
ポスター画像は、ホスト型動画に特に役立ちます。再生前の最初のフレームがすっきり見えるためです。アスペクト比の設定を使うと、メディアがレイアウトにどのように収まるかを調整できます。デスクトップでは適切でも、モバイルでは高すぎる、狭すぎる、または詰まりすぎて見える場合があるため、個別のモバイル比率も便利です。
自動再生とループは、重要な音声コンテンツよりも短い環境動画に向いています。お客様が動画を聞く必要がある、または操作する必要がある場合は、コントロールを表示したままにし、小さい画面で展開状態をテストしてください。詳細は、Using videoをご覧ください。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使用して、ブロックをすべてのデバイスに表示するか、デスクトップまたはモバイルで非表示にします。これは、小さい画面向けに異なるアコーディオンコンテンツ、文言、またはメディアの選択を使いたい場合に役立ちます。表示設定をご覧ください。
使用上の注意
Section titled “使用上の注意”- 見出しは明確にします。 お客様が正しい項目をすばやく開けるように、見出しは具体的な質問やトピックとして記述してください。
- コンテンツソースは1つにします。 短いカスタムコンテンツは直接テキストを入力し、再利用するコンテンツはページまたはブログ記事を接続します。両方に同時に依存しないようにしてください。
- 開いた状態は控えめに使います。 既定で開くオプションは、優先度の高い項目にのみ使用してください。特に複数のアコーディオンブロックを並べて表示する場合は重要です。
- 目的を持ってメディアを追加します。 理解を深める場合にのみ画像や動画を選び、公開前にデスクトップとモバイルの両方で展開後のレイアウトを確認してください。
- アクションに意味を持たせます。 お客様がより詳しい先に進むことで本当にメリットを得られる場合にのみ、ボタンまたはコンテンツリンクを表示してください。
- フォールバックスタイルを想定します。 色やその他の視覚値を既定のままにしておくと、周囲の見た目を保てます。一方、明示的に上書きすると、アコーディオンがページの他の部分からより独立して見えます。