world-build

ワールド構築

没入感のある体験、雰囲気、物語の奥行き、または「場所」のように感じられる表層が明示的に求められた場合に使用します。ポートフォリオやローンチページだからといって、自動的にこの方針が必要になるわけではありません。ADS が製品の範囲、方向性、レビューを担当します。これは手法のパレットであり、必須のスタックや別のビルドループではありません。

世界観を確立する

既存のブリーフ、参考資料、これまでの回答を確認します。タスクのブリーフに、舞台設定、中心となるメタファー、意図する感覚を明記します。たとえば、調査なら証拠や事件ファイル、研究室なら標本や観察記録、自然界なら成長や季節を使います。メタファーは、偽の運用テレメトリーではなく、役立つナビゲーション、グループ分け、フィードバックへと落とし込みます。

重要なクリエイティブの方向性が未解決のままなら、レビュー可能な小さな目標案と推奨案を提示します。すでに決まっている方向性であれば、改めて承認の場を設けずに進めます。メタファーがなくても、実際の製品について説明できる状態を保ちます。

雰囲気を選び、レイヤーを重ねすぎない

意図した雰囲気を生み出すために必要な手法だけを使います。余白、フラットカラー、単一のフォントファミリーも、すべて意図的な選択になり得ます。

• **素材感：**控えめな粒子感や紙のテクスチャで、手触りを表現できます。whimsical-design のノイズやグラデーションの例は、任意のレシピです。装飾用のオーバーレイは操作できないものとし、意味のあるコンテンツの背後に配置します。
• **光と奥行き：**静的な光彩、控えめなビネット、または重ねた平面で空間を表現できます。対象ブラウザーでコントラストとコストを確認します。ぼかしを使えば奥行きや洗練さが生まれるとは限りません。
• **環境のディテール：**事実に即した有用なコンテキストを伝える場合に限り、小さな周辺ラベルを使用します。文頭のみ大文字にする例：「Camera 04 recording」「Sample 0042」「Comms available」。ライブステータス、日付、カウンター、読み込み率を捏造しないでください。
• **シグネチャー効果：**目的のあるスポットライトを1つ、またはスクロールに連動する平面を1つ使うことで、探索を促せます。装飾的なドット、パーティクルフィールド、点滅・ちらつき、目的のない環境アニメーションは避けてください。
• **ポインターの扱い：**デフォルトではネイティブのカーソルを維持します。コンテキストに応じた演出が求められる場合は、ヒットターゲット、フォーカス、ネイティブの操作可能な要素、粗いポインターでの動作を損なわないようにします。ドットの追従表示を追加したり、ホバーを操作の必須条件にしたりしないでください。

個性を生み出すタイポグラフィ

まず、確立済みのタイプシステムを使用します。ディスプレイ用と本文用の対比や、モノスペースフォントの役割はメタファーを支えることがありますが、必要なフォント数は決まっていません。階層は読みやすいサイズ、ウェイト、間隔、グループ分けで表現し、劇的な見出しを必須にしません。文頭のみ大文字にする表記と、識別子の正確な表記を維持します。

モーションの振り付け

対象を絞ったモーションの作業に限り、web-animation-design を参照します。モーションは、登場、因果関係、連続性、または意図的な表現の演出を説明するものであるべきです。コンテンツはそのまま表示してもかまいません。すべてのセクションで表示演出を行ったり、リスト項目をすべて順番に表示したり、GSAP のインストールを必須にしたりしないでください。

既存のスクロール連動エフェクトでは、背景の平面をゆっくり動かすことで奥行きを表現できます。通常のスクロール、読みやすいコンテンツ、直接のナビゲーションを維持します。スクロールの直接追跡には、線形マッピングが適切な場合があります。映画的で表現豊かな登場演出では、製品操作の短い応答時間を示すデフォルトとは別に、長めの時間をかける理由を明確にします。シーケンスを短くまとめ、操作はすぐに使える状態にします。

実際のブラウザーで、通常時、中断時、モーション軽減時の動作を確認します。対象となるモバイル環境や WebKit も含めてください。静止画では構図を確認できますが、スクロール時の動作、タイミング、パフォーマンスは確認できません。モーション軽減が有効な場合は、視差や表示までの強制的な待ち時間なしに、すべてのコンテンツを表示する必要があります。

ローディングは実際の作業に合わせる

雰囲気づくりのために、最低表示時間のあるローダーを決して追加しないでください。キャッシュ済みのコンテンツやすぐに利用できるコンテンツは、すぐに表示してください。アセットの読み込みが本当に必要な場合は、読みやすいシェルと役立つ操作を維持してください。測定可能な場合に限り実際の進捗を表示し、それ以外の場合は正直なステータスを示してください。使えるコンテンツを、模擬ターミナル、進捗カウンター、全画面のカーテンの背後に隠さないでください。オプションのサウンドはユーザーが操作できるようにし、予期せず自動再生しないでください。

プロジェクト紹介の選択肢

仕事や事例を紹介する際は、訪問者の目的に合わせて構成を選んでください。エビデンスボードでは、大きなプレビューカード、詳細ビューアー、役立つメタデータ、画像ギャラリーを組み合わせられます。横スクロールスライダーよりも、グリッド、リスト、または記事を直接表示する形式のほうが、一覧性、ディープリンク、モバイルでの利用に適している場合があります。

ビューアーを設ける場合は、キーボード操作、Escape／閉じる操作、直接開く操作、読んでいた文脈を保った状態で元の項目に戻る操作を維持してください。すべてのプロジェクトを全画面モーダルに押し込んだり、表現上の工夫によって作品が埋もれたりしないようにしてください。

ADSで体験をレビューする

• 内部事情を知らなくても、その設定によって実際の作業が引き立っていますか？
• 主要な操作、長いラベル、実際のプロジェクト成果物は、想定する表示サイズで読みやすく、遮られていませんか？
• 装飾的な画像がなくても、訪問者は製品の入力と出力を理解できますか？
• 選んだ演出は、実際の操作や視差効果の軽減設定でも、遅延なく機能しますか？
• 単に正常に描画されただけではなく、意図した感覚を裏付ける証拠がありますか？ユーザーの美的判断を尊重してください。

テクスチャ、カスタムカーソル、ローダー、フォントの数、雰囲気を演出するレイヤーの数は、いずれも合格条件ではありません。参照例と結果を、実際の受け入れ状況とともに保管してください。新しいフィードバックは、ビルドのたびにこのスキルを自動的に拡張するのではなく、既存の担当者に分類してください。

参考例は手がかりであり、必須の美学ではありません

特定の参考例が役立つ場合は、手法を取り入れる前に、現在のソースと意図された特性を確認してください。調査の枠組みにはKillian Herzer、ミッションコントロールの表現にはInflight、ノスタルジックなアイデンティティにはPoolsuite、没入感のある奥行きにはLusion、控えめな雰囲気にはVoidが参考になります。これらの名前は調査の手がかりであり、現在の機能を示すものでも、その技術構成の再現を指示するものでもありません。