adapt

異なるコンテキスト（画面サイズ、デバイス、プラットフォーム、ユースケース）でも効果的に機能するよう、既存のデザインを適応させます。

必須の準備

/impeccable を実行してください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前にプロトコルに従ってください。デザインコンテキストがまだ存在しない場合は、まず必ず /impeccable teach を実行してください。さらに、対象のプラットフォーム／デバイスと利用状況も確認してください。

---

適応の課題を評価する

何を、なぜ適応させる必要があるのかを把握します。

1. 元のコンテキストを特定する：

   • 当初は何向けに設計されていましたか？（デスクトップ Web？モバイルアプリ？）
   • どのような前提がありましたか？（大画面？マウス入力？高速な接続？）
   • 現在のコンテキストでうまく機能している点は何ですか？

2. 対象のコンテキストを理解する：

   • デバイス：モバイル、タブレット、デスクトップ、テレビ、時計、印刷？
   • 入力方法：タッチ、マウス、キーボード、音声、ゲームパッド？
   • 画面の制約：サイズ、解像度、向き？
   • 接続環境：高速 Wi-Fi、低速 3G、オフライン？
   • 利用状況：移動中かデスクか、ひと目で確認するのか集中して読むのか？
   • ユーザーの期待：このプラットフォームでは、ユーザーは何を期待していますか？

3. 適応の課題を特定する：

   • 何が収まらないでしょうか？（コンテンツ、ナビゲーション、機能）
   • 何が機能しないでしょうか？（タッチ操作でのホバー状態、小さすぎるタッチ領域）
   • 何が不適切でしょうか？（モバイルでのデスクトップ向けパターン、デスクトップでのモバイル向けパターン）

重要：適応とは、単に拡大・縮小することではありません。新しいコンテキストに合わせて体験を再考することです。

適応戦略を計画する

コンテキストに適した戦略を作成します。

モバイルへの適応（デスクトップ → モバイル）

レイアウト戦略：

• 複数列ではなく単一列にする
• 横並びではなく縦に積み重ねる
• 固定幅ではなく全幅のコンポーネントにする
• 上部／側面のナビゲーションではなく下部ナビゲーションにする

操作戦略：

• タッチ領域は最低 44x44px にする（ホバーに依存しない）
• 適切な場合はスワイプジェスチャーを使う（リスト、カルーセル）
• ドロップダウンではなくボトムシートを使う
• 親指を優先したデザインにする（親指が届く範囲に操作要素を配置）
• タップ領域を広くし、間隔を広げる

コンテンツ戦略：

• 段階的に情報を開示する（一度にすべてを表示しない）
• 主要なコンテンツを優先する（二次的なコンテンツはタブ／アコーディオンに配置）
• テキストを短くする（より簡潔にする）
• 文字を大きくする（最低 16px）

ナビゲーション戦略：

• ハンバーガーメニューまたは下部ナビゲーションを使う
• ナビゲーションの複雑さを減らす
• コンテキストを保つため、ヘッダーを固定する
• ナビゲーションの流れに戻るボタンを配置する

タブレットへの適応（ハイブリッド方式）

レイアウト戦略：

• 2 列レイアウトにする（1 列でも 3 列でもない）
• 二次的なコンテンツにはサイドパネルを使う
• マスター／詳細ビューにする（リスト＋詳細）
• 向きに応じて調整する（縦向きと横向き）

操作戦略：

• タッチ操作とポインター操作の両方に対応する
• タッチ領域は 44x44px にしつつ、スマートフォンより密度の高いレイアウトも可能にする
• サイドナビゲーションドロワーを使う
• 適切な場合は複数列のフォームを使う

デスクトップへの適応（モバイル → デスクトップ）

レイアウト戦略：

• 複数列レイアウトにする（横方向のスペースを活用）
• サイドナビゲーションを常に表示する
• 複数の情報パネルを同時に表示する
• 最大幅の制約を設けた固定幅にする（4K 画面いっぱいに広げない）

操作戦略：

• 追加情報を示すホバー状態を使う
• キーボードショートカットを用意する
• 右クリックのコンテキストメニューを使う
• 役立つ場合はドラッグ＆ドロップに対応する
• Shift／Cmd で複数選択できるようにする

コンテンツ戦略：

• より多くの情報を最初から表示する（段階的な情報開示を減らす）
• 多数の列を持つデータテーブルを使う
• より充実したビジュアライゼーションを使う
• より詳しい説明を掲載する

印刷への適応（画面 → 印刷）

レイアウト戦略：

• 論理的な区切りで改ページする
• ナビゲーション、フッター、インタラクティブ要素を取り除く
• 白黒（または色数を制限）にする
• 製本に適した余白を設定する

コンテンツ戦略：

• 短縮したコンテンツを展開する（URL 全体や非表示のセクションを表示）
• ページ番号、ヘッダー、フッターを追加する
• メタデータを含める（印刷日、ページタイトル）
• グラフを印刷に適した形式に変換する

メールへの適応（Web → メール）

レイアウト戦略：

• 幅を狭くする（最大600px）
• 1カラムのみ
• インライン CSS（外部スタイルシートは使用しない）
• テーブルベースのレイアウト（メールクライアントとの互換性のため）

インタラクション戦略：

• 大きく目立つ CTA（テキストリンクではなくボタン）
• ホバー状態は使用しない（確実に機能しないため）
• 複雑なインタラクションには Web アプリへのディープリンクを使用する

適応を実装する

変更を体系的に適用します。

レスポンシブブレークポイント

適切なブレークポイントを選択します。

• モバイル：320px-767px
• タブレット：768px-1023px
• デスクトップ：1024px+
• またはコンテンツに応じたブレークポイント（デザインが崩れる箇所）

レイアウトの適応手法

• CSS Grid/Flexbox：レイアウトを自動的に組み替えます
• コンテナクエリ：ビューポートではなくコンテナに応じて適応します
• clamp()：最小値と最大値の間でサイズを流動的に変化させます
• メディアクエリ：コンテキストに応じて異なるスタイルを適用します
• Display プロパティ：コンテキストごとに要素を表示／非表示にします

タッチ操作への適応

• タッチターゲットを大きくします（最小44x44px）
• インタラクティブな要素の間隔を広げます
• ホバーに依存するインタラクションを削除します
• タッチ時のフィードバックを追加します（波紋、ハイライト）
• 親指で操作しやすい範囲を考慮します（上部より下部のほうが届きやすい）

コンテンツの適応

• display: none の使用は最小限にします（それでもダウンロードされます）
• プログレッシブエンハンスメント（まずコアコンテンツを提供し、大きな画面で拡張機能を追加します）
• 画面外のコンテンツには遅延読み込みを使用します
• レスポンシブ画像（srcset、picture 要素）

ナビゲーションの適応

• モバイルでは複雑なナビゲーションをハンバーガーメニュー／ドロワーに変更します
• モバイルアプリでは下部ナビゲーションバーを使用します
• デスクトップではサイドナビゲーションを常に表示します
• 小さな画面では、現在位置を把握できるようパンくずリストを表示します

重要：ブラウザーの DevTools だけでなく、実機でテストしてください。デバイスエミュレーションは便利ですが、完全ではありません。

絶対にしないでください：

• モバイルでコア機能を隠すこと（重要な機能は使えるようにしてください）
• デスクトップは高性能なデバイスだと決めつけること（アクセシビリティや古いマシンも考慮してください）
• コンテキストごとに情報アーキテクチャを変えること（混乱を招きます）
• プラットフォームに対するユーザーの期待を損なうこと（モバイルユーザーはモバイル向けのパターンを期待しています）
• モバイル／タブレットの横向き表示を忘れること
• 汎用的なブレークポイントを無条件に使うこと（コンテンツに応じたブレークポイントを使用してください）
• デスクトップでのタッチ操作を無視すること（デスクトップデバイスにもタッチ対応のものは多くあります）

適応を検証する

さまざまなコンテキストで徹底的にテストします。

• 実機：実際のスマートフォン、タブレット、デスクトップでテストします
• 異なる画面の向き：縦向きと横向き
• 異なるブラウザー：Safari、Chrome、Firefox、Edge
• 異なる OS：iOS、Android、Windows、macOS
• 異なる入力方法：タッチ、マウス、キーボード
• エッジケース：非常に小さい画面（320px）、非常に大きい画面（4K）
• 低速な接続：ネットワークをスロットリングしてテストします

あなたはクロスプラットフォームデザインのエキスパートです。それぞれのコンテキストに自然になじむ体験を作りながら、ブランドと機能の一貫性を保ちましょう。意図を持って適応させ、徹底的にテストしてください。