ジグザグセクション — フォーマット、ルール、例

ジグザグセクションは、並列的な一連の機能を画像とテキストのペアとして繰り返し提示し、ワイドスクリーンではビジュアルを左右交互に配置します。このパターンは、短いリストを長いランディングページに引き伸ばすためではなく、検討された製品ストーリーを通じて明確な視覚的チェックポイントを作成するために使用します。

レンダリングされた例はリズムを示していますが、灰色の領域はこの仕様における説明用UIです。実際のインスタンスには、本物の情報を伝えるビジュアルを含める必要があります。

この要素が重要な理由

長いページはナビゲーションの問題を生み出します。読者には、あるアイデアが終わり、次のアイデアが始まることを示すランドマークが必要です。ジグザグは、画像、見出し、説明という繰り返しと、ワイドスクリーンでの異なる配置によって、それらのランドマークを提供します。反復される構造により各セクションの理解が容易になり、交互配置により隣接する項目が1つの列に統合されるのを防ぎます。

心理的な効果は、項目が真に並列的である場合に最も強くなります。読者は最初のペアを見てパターンを学習し、後続の見出しとビジュアルをスキャンしてどこで速度を落とすかを選択できます。ビジュアルは認識を提供し、見出しは機能を名付け、本文はその結果を説明します。交互配置は、情報モデルを変えずに注意をリセットするのに十分な空間的変化を加えます。

この効果には限界があります。各ペアはかなりの縦方向のスペースを消費します。特に列が積み重なるスマートフォンでは顕著です。説明が1文だけで、ビジュアルがエビデンスを追加しない場合、このパターンは読者に多くを学習させずに長く移動させることになります。装飾的な交互配置は、合理的なシーケンスではなくセールステンプレートのように感じられることもあります。この要素は、各ビジュアルが読者が明確な機能、状態、結果、またはワークフローを理解するのに役立つ場合にのみ、そのフットプリントに値します。

機械抽出可能性とは、ソフトウェアがその正確性を保証するコンテキストを失わずにコンテンツユニットを分離できることを意味します。適切に作成されたジグザグは、それぞれが見出し、自己完結型の説明、ビジュアルの説明、オプションのリンクを持つ明示的な項目の集合です。検索システムは、1つの項目を一貫した機能ステートメントとして抽出できます。その意味は「左側にあるもの」に依存しないからです。CSSの配置ではなく、ソース順序がシーケンスを確立します。

このページのルールの前に、要素作成ルール を適用してください。最初に完全な説明をドラフトし、型付き要素を別の構造化パスで適用します。このページで項目数の制限、メディア要件、本文マッピング、ネスト制限がより狭く設定されている場合、これらの要素固有のルールが優先されます。

使用するタイミング

以下のすべての条件が満たされる場合にジグザグを使用します。

1. ページに3〜6つの並列的な機能、ケイパビリティ、成果、または非順次的なワークフロービューがある。
2. すべての項目に、その主題を説明または実証する実際のビジュアルがある。
3. 各項目に、カードが許容するより多くの説明が必要だが、完全な独立した章ほどは必要ない。
4. 読者はすべての詳細を読む前にシーケンスをスキャンすることでメリットを得られる。
5. 順序は有用だが手順的ではなく、項目は単独で抽出しても理解可能である。

強力な使用例としては、ケイパビリティごとに1つのインターフェースビューを備えた製品ツアー、各運用上の問題を対応するワークフローとペアにするソリューションページ、または複数の並列モデルを示すアルティメットガイドがあります。ビジュアルは、そのメディアが情報を伝える場合、スクリーンショット、図、チャート、写真のいずれかになります。生のインターフェースキャプチャでは読者が関連するコントロールを探す必要がある場合は、項目内で注釈付きスクリーンショット を使用します。

ニアミスは一般的です。番号付きの手順にはジグザグを使用しないでください。左右の変更は手順に必要な方向性のシグナルを弱めます。比較には使用しないでください。製品を交互に配置すると、基準ごとの評価が妨げられるためです。それぞれが1文を必要とする12の利点には使用しないでください。カード、箇条書き、またはサマリーテーブルの方がスペースを有効活用できます。各セクションが前の結論に依存する議論には使用しないでください。連続した散文と見出しの方がその論理をより明確に保持できます。

最も明らかなテストは、画像を削除することです。残った見出しが一貫したピアのセットを形成し、欠落した各ビジュアルが意味のあるエビデンスのギャップを残す場合、ジグザグはおそらく適切です。コピーが一般的なメリットリストになり、重要なものが失われない場合、画像は装飾であり、要素は誤用です。

配置する場所

ジグザグは、ページが共通の問題を定義し、一連のケイパビリティを命名した後に配置します。読者は、最初の大きなビジュアルに遭遇する前に、そのシーケンスが重要である理由を理解している必要があります。製品ページやソリューションページでは、通常はヒーロー、直接回答、または短い概要の後、エビデンス、詳細な仕様、価格、または最終的なコールトゥアクションの前に配置します。

シーケンス全体をH2と1つの短いフレーミング段落で導入します。各項目の前に個別のH2を追加しないでください。各項目のタイトルは共有セクション内の子見出しです。すべての項目を連続させて、交互のリズムが1つのコレクションを伝えるようにします。長い修飾がシーケンスを中断する必要がある場合は、ジグザグを終了し、その後で新しいセクションを開始します。

ジグザグは、別の大きなビジュアルシーケンス、画像ギャラリー、製品スライダー、タイムライン、または繰り返しカードグリッドのすぐ隣に配置してはなりません。連続した表示パターンは視覚的疲労を引き起こし、どのコレクションがプライマリかを不明瞭にします。主張とそのエビデンス、警告とそれが修飾する指示、価格とその購入条件を分割してはなりません。順序付きリスト、テーブルセル、アコーディオンパネル、または別のジグザグ内に出現してはなりません。

デフォルトでは、1ページに1つのジグザグを使用します。2つ目は、2つのコレクションが明確に異なる質問に答え、個別のセクション見出しを持ち、間に散文またはエビデンスがある場合のみ許容されます。関連のないページセクションの配置を単にパターンを模倣するために交互にしないでください。コレクションの境界は要素の意味の一部です。

構成要素

1. コレクション見出し: すべての項目がカバーする共通の質問またはカテゴリを命名します。
2. コレクション導入部: 項目がなぜ一緒に属するのか、読者が何に注目すべきかを説明します。
3. 項目コンテナ: 1つのビジュアルと1つのテキスト領域をプログラム的かつ視的に関連付けて保持します。
4. 項目見出し: 1つの特定の機能、成果、またはビューを具体的な言語で命名します。
5. 項目本文: その項目が何をするのか、なぜ重要なのか、正しく解釈するために必要な境界を説明します。
6. 情報ビジュアル: テキストと同じ主題を示し、有用な代替テキストまたはアクセシブルなキャプションを持ちます。
7. オプションの項目リンク: 説明の後に、1つの関連する詳細情報またはアクションを提供します。
8. 表示の交互配置: DOMの順序や意味を変えずに、ワイドスクリーンでビジュアルの側面を変更します。

間隔、色、角の半径、画像クロップ、ブレークポイントはレンダラーに属します。作成者はセマンティックな順序、完全なコピー、アクセシブルなメディア情報を提供します。

デザイン例

以下はサポートされているバリエーションです。これらは1つのコンテンツ契約を共有し、開始時の配置、ビジュアルの処理、またはビューポートの動作のみが異なります。

メディアファースト: デフォルトのワイドスクリーンバリアントで、最初のビジュアルを左側から始めます。最初のビジュアルが即座に認識を提供し、周囲のページがすでにその側に支配的な画像を配置していない場合に使用します。

テキストファースト: テキストを左側から始め、その後交互に配置します。最初の説明が最初のビジュアルの前に意味を確立する必要がある場合、または前のセクションとのバランスをより良くする場合に使用します。

コンテインメディア: スクリーンショットや図を一貫したフレーム内に配置します。製品インターフェース、チャート、およびエッジやラベルが重要な図に使用します。すべての項目は、ソース画像の寸法が異なる場合でも同じフレームロジックを使用します。

エッジメディア: 写真や非インターフェースのイラストがその領域を埋めることを許可します。クロッピングはレスポンシブに変更される可能性がありますが、被写体やコピーで説明されている情報を削除してはなりません。

モバイルスタック: 左右の交互配置を削除し、すべての項目に1つの一貫した読み取り順序を使用します。これは必須のレスポンシブ動作であり、オプションの編集バリアントではありません。

テキストのみ、自動再生、カルーセルのバリアントはありません。意味のあるメディアを削除するとジグザグを使用する理由がなくなります。動画や非表示のスライドは異なるインタラクション契約を導入します。

パラメータ

親ボディは、最初の見出しをtitleに、次の段落をintroに、各ネストされた項目を1つの繰り返しペアにマッピングします。項目の最初の見出しはitem.titleにマッピングされ、残りのボディはitem.contentにマッピングされます。メディア参照と代替テキストは、その項目のみを説明するため、項目に残ります。作成者は項目ごとに左右を設定できません。レンダラーはソース位置とstartからワイドスクリーンの配置を導出します。

構文とコード例

すべてのアダプターは、1つの親タイトル、1つの導入部、順序付き項目、および安定したソース順序を保持する必要があります。例ではコレクションを3項目（最小有効数）に省略しています。

ポータブルMarkdownディレクティブ

:::zigzag{start=media mediaFit=contain}
## コンテンツ決定を反復可能なシステムに変える

完全なインベントリから優先順位付けされたプロダクションと測定可能な結果へ移行します。

::item{media="inventory-view" alt="ステータスと所有者でグループ化されたコンテンツインベントリ。"}
### インベントリ全体を確認する

変更するものを決定する前に、すべてのURL、所有者、ステータス、パフォーマンスシグナルを1つのビューにまとめます。
::

::item{media="priority-view" alt="ビジネス価値と工数で順序付けられた優先キュー。"}
### 価値ある作業を優先する

ビジネス価値と工数で機会を順序付け、チームが合理的なキューに基づいて行動できるようにします。
::

::item{media="impact-view" alt="パフォーマンス変更の横に公開注釈があるレポートビュー。"}
### 公開された影響を測定する

各変更を注釈と安定したレポート期間に結び付け、後の変動を調査できるようにします。
::
:::

これらの識別子はポータブル契約を文書化しており、プロダクションアダプターは各識別子を承認済みアセットに解決します。作成者は公開前に解決されたアセットが存在することを確認する必要があります。

Hugoショートコード

{{< zigzag title="コンテンツ決定を反復可能なシステムに変える" intro="完全なインベントリから優先順位付けされたプロダクションと測定可能な結果へ移行します。" start="media" mediaFit="contain" >}}
  {{< zigzag-item title="インベントリ全体を確認する" media="inventory-view" alt="ステータスと所有者でグループ化されたコンテンツインベントリ。" >}}
  変更するものを決定する前に、すべてのURL、所有者、ステータス、パフォーマンスシグナルを1つのビューにまとめます。
  {{< /zigzag-item >}}
  {{< zigzag-item title="価値ある作業を優先する" media="priority-view" alt="ビジネス価値と工数で順序付けられた優先キュー。" >}}
  ビジネス価値と工数で機会を順序付け、チームが合理的なキューに基づいて行動できるようにします。
  {{< /zigzag-item >}}
  {{< zigzag-item title="公開された影響を測定する" media="impact-view" alt="パフォーマンス変更の横に公開注釈があるレポートビュー。" >}}
  各変更を注釈と安定したレポート期間に結び付け、後の変動を調査できるようにします。
  {{< /zigzag-item >}}
{{< /zigzag >}}

Hugoアダプターは名前付きパラメータのみを使用します。項目位置から交互クラスを導出し、視覚パターンを達成するためにソース順序を書き換えてはなりません。

WordPressブロック

<!-- wp:amicited/zigzag {"title":"コンテンツ決定を反復可能なシステムに変える","intro":"完全なインベントリから優先順位付けされたプロダクションと測定可能な結果へ移行します。","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"インベントリ全体を確認する","media":"inventory-view","alt":"ステータスと所有者でグループ化されたコンテンツインベントリ。"} -->
  <p>変更するものを決定する前に、すべてのURL、所有者、ステータス、パフォーマンスシグナルを1つのビューにまとめます。</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"価値ある作業を優先する","media":"priority-view","alt":"ビジネス価値と工数で順序付けられた優先キュー。"} -->
  <p>ビジネス価値と工数で機会を順序付け、チームが合理的なキューに基づいて行動できるようにします。</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"公開された影響を測定する","media":"impact-view","alt":"パフォーマンス変更の横に公開注釈があるレポートビュー。"} -->
  <p>各変更を注釈と安定したレポート期間に結び付け、後の変動を調査できるようにします。</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPressは内部ブロックをジグザグ項目に制限し、手動の左右コントロールを提供せずにリストの並べ替えを公開する必要があります。エディタープレビューとフロントエンドは同じ項目順序を使用する必要があります。

例

良い例

見出し: コンテンツリフレッシュのすべての段階を理解する

1. 減少しているページを見つける — トレンドチャートが同じURLを同等の期間にわたって表示します。コピーは、持続的な減少を通常の週次変動と区別する方法を説明します。
2. 原因を診断する — クエリとページのビューが、どのトピックが可視性を失ったかを示します。コピーは、インテントの変化、より強い競合他社、古い情報、技術的な欠陥を区別します。
3. 介入を記録する — 注釈ビューが公開日と正確な変更内容を示します。コピーは、記録された介入が後の測定をなぜ信頼できるものにするかを説明します。
4. 結果を確認する — レポートビューが合意された観測期間を示します。コピーは、成功、変化なし、さらなる減少がそれぞれ次に何をトリガーするかを述べます。

これは、4つの項目が1つのリフレッシュシステム内の並列ビューを説明し、すべてのビジュアルが散文では効率的に再現できないエビデンスを提供し、見出しだけで読者に有用なスキャンを提供するため、機能します。順序は、要素を手順に変えることなくストーリーをサポートします。

悪い例

見出し: 当社のプラットフォームが優れている理由

1. 簡単 — 笑顔の人物の装飾的な写真に「当社のプラットフォームは使いやすいです」という文言が添えられています。
2. パワフル — 装飾的な抽象図形に「より速くパワフルな結果を得る」という文言が添えられています。
3. フレキシブル — ストック写真に「柔軟な機能はすべてのビジネスにフィットします」という文言が添えられています。
4. お問い合わせ — 大きなフォームが7つのフィールドを求めています。
5. 信頼されている — ロゴストリップが、ロゴが誰を表しているかの説明なしに表示されています。
6. さらに多くの機能 — 8つの無関係な箇条書きが高い最終行を埋めています。

これは、主張が一般的で、画像が情報を持たず、項目が異なる役割を果たしているため、失敗しています。埋め込まれたフォームがコレクションを中断し、最後の項目は1つの焦点を絞った説明を目的としたフォーマット内にリストを隠しています。ページは明確にならずに長くなります。最初の3つの主張をエビデンスに裏付けられた散文またはコンパクトなメリットカードに置き換え、フォームを説明セクションの後に配置し、信頼エビデンスを特定し、残りの機能には適切なリストまたはテーブルを使用します。

スキーママークアップとアクセシビリティ

ジグザグはプレゼンテーションパターンであり、Schema.orgの型ではありません。そのコピーはそれを囲むArticleまたはWebPageの一部として残り、製品情報は、ページと情報がそれぞれの要件を独立して満たす場合にのみ、有効なProductまたはSoftwareApplicationマークアップに貢献できます。要素が項目を繰り返すという理由だけでItemListを出力してはならず、項目が必須ステップではなく並列機能である場合にHowToを出力してはなりません。

コレクションにはアクセシブルな見出しを持つセクションを使用し、各項目にはセマンティックなセクションまたは記事を使用します。DOM順序を論理的かつすべてのブレークポイントで同一に保ちます。CSSグリッドの順序付けにより画像が視覚的に表示される位置が変わる可能性がありますが、キーボード、スクリーンリーダー、コピー＆ペースト、検索抽出の順序は一貫している必要があります。「左に示すように」や「右の画像にあるように」とは決して書かないでください。これらの位置は小さい画面では反転または消えるためです。

すべての情報画像には、その画像がコンテキストで何をもたらすかを述べた代替テキストが必要です。隣接する段落を一字一句繰り返さないでください。複雑なチャート、インターフェース、または図を簡潔に説明できない場合は、可視のキャプションまたは近くに長い説明を追加します。装飾的な画像は推奨されません。すべての項目はそのビジュアルを正当化する必要があるためです。レンダラーが装飾的な飾りを追加する場合、それらは空の代替テキストを受け取ります。

見出しは視覚的なサイズにハードコードされるのではなく、ページ階層に従う必要があります。項目リンクには、「詳細を見る」のような繰り返しテキストではなく、「インベントリワークフローを確認する」などの説明的なラベルが必要です。テキストと画像の行全体を1つの大きなリンクにしないでください。ネストされたリンクと不明確なアクティベーション領域は、キーボードとスクリーンリーダーの問題を引き起こします。動きの軽減設定を尊重し、コンテンツを表示するためにスクロールトリガーアニメーションを必要としないでください。

作成ルール

コレクションタイトルは3〜12語、導入部は20〜60語で記述します。各項目タイトルは3〜9語の具体的な単語を使用し、各本文は40〜120語を使用します。3〜6項目がサポートされる範囲です。これらの制限は、各ペアを独立したエッセイに変えずに、大きなビジュアル領域を正当化するのに十分な内容を要素が持つ必要があるために存在します。

項目見出しを文法的に並列にします。最初の見出しが動詞で始まる場合（「減少しているページを見つける」）、他の見出しも同様にする必要があります。各本文は、自然な順序で3つの質問に答える必要があります。これは何か、なぜここで重要なのか、読者はビジュアルで何に注目すべきか。具体的な名詞、インターフェースラベル、条件、結果を使用します。「最高」「パワフル」「革命的」などの無限定な最上級を避けます。

深さのバランスを保ちます。110語の項目1つが40語の項目2つと並ぶと、コレクションが抽象化のレベルを混在させている可能性があります。広い項目を分割し、浅い項目を結合し、または詳細をリンク先のページに移動します。リンクはオプションであり、シーケンスがナビゲーションディレクトリになるのではなく説明的であるように、項目ごとに1つに制限されます。

ジグザグ項目内には以下を決して入れないでください。

• フォーム、ニュースレター登録、価格表、オファー、またはプライマリコールトゥアクション。
• 比較表、アコーディオン、タブ、カルーセル、ギャラリー、動画プレーヤー、または別のジグザグ。
• 成功に順序が必要な番号付き手順。
• ビジュアルの高さを埋めるために追加された無関係な機能箇条書き。
• ソースとコンテキストのない、裏付けのない主張、 testimonialの断片、またはロゴ。
• レイアウトに画像スロットがあるためだけに追加された画像。

使用する投稿タイプ

postTypesフロントマターがこの関係の信頼できる情報源です。ジグザグはリストされた各タイプでオプションであり、ページに該当する並列的なビジュアルシーケンスがある場合にのみ表示されるべきです。

QAチェックリスト

• シーケンスに3〜6の真に並列的な項目が含まれている。
• 1つのH2と短い導入部が、項目がなぜ一緒に属するかを説明している。
• すべての項目に具体的で文法的に並列な見出しがある。
• すべての本文が40〜120語以内で、同等の深さを持っている。
• すべてのビジュアルが存在し、情報を提供し、その項目に一致している。
• 代替テキストまたはアクセシブルなキャプションが各ビジュアルの有用な情報を伝えている。
• デフォルトのDOM順序がCSSや画像なしで論理的である。
• ワイドスクリーンの交互配置は自動的に導出され、作成者が任意の側面を割り当てていない。
• モバイルは水平スクロールなしで一貫した積み重ね順序を使用している。
• 左右やビューポート固有の位置に依存する文言がない。
• 項目にフォーム、テーブル、ネストされた表示コンポーネント、手順ステップが含まれていない。
• コレクションが別の大きな繰り返しビジュアルパターンに隣接していない。
• リンクは説明的で、オプションのリンクは項目ごとに1つに制限されている。
• 交互配置レイアウトのみからスキーマ型が推測されていない。
• アニメーションが無効になっても、画像の読み込みが遅くても、ページが有用である。
• Markdown、Hugo、WordPressの表現が同じフィールドと項目順序を保持している。

並列的なアイデアには並列的なエビデンスがふさわしい場合にジグザグセクションを使用します。交互配置は、読者が各一貫した項目に気付くのに役立つべきであり、項目が存在する理由であってはなりません。