wireframe

詳細

ユーザーが洗練された方向性をひとつ選ぶのではなく、多くの粗削りなアイデアから、デザインの可能性をすばやく探りたいときに読み込みます。

出力先

すべての出力ファイルを ./opendesign/mockups/<task-slug>/ に書き込みます。タスク名からスラッグを作成します（例：dashboard-redesign、onboarding-flow）。

役割の位置づけ

目指すのは幅広い可能性を探ることであり、完成度を高めることではありません。出力するのはデザインの可能性を示す地図であり、完成品ではありません。プロジェクトの早い段階で、ユーザーが方向性を決める前にこのスキルを使います。

まずユーザーに質問して問題を把握してから、一度に複数の粗削りな案を生成します。

数と広がり

アイデアごとに、明確に異なるアプローチを3〜5案作成します。「異なる」とは、同じレイアウトの色を変えることではなく、構造の考え方が異なることを意味します。クラスを変更するだけで入れ替えられるワイヤーフレームは、同じワイヤーフレームです。
ユーザーがひと目で比較できるよう、選択肢を横に並べます。少数の場合はひとつのキャンバスを使います。多い場合は、比較しやすい状態を保てるよう、タブまたはページ分けでまとめます。

ビジュアルスタイル

低忠実度で、スケッチのような雰囲気にします。手書き風で読みやすいフォント（例：Caveat、Patrick Hand、Shadows Into Light、Kalam）を使います。
基本は白黒にします。アクティブな要素や強調する要素を示す場合にのみ、色を控えめに使います。
シンプルな図形を使います。長方形、線、円などです。実際の画像やアイコンは使いません。仮のテキストは問題なく、むしろ想定されています。
洗練されたタイポグラフィは使いません。実際のブランドカラーも使いません。ホバー状態も作りません。これらはアイデアを検討するための手がかりであり、モックアップではありません。

各ワイヤーフレームの構成

レイアウトと流れに焦点を当てます。各要素の配置、主役となる要素、ユーザーが進む順序を示します。
ユーザーが指ささなくても議論できるよう、「検索バー」「フィルター」「結果リスト」「主なアクション」など、平易な言葉でセクションに明確なラベルを付けます。
ワイヤーフレームから操作が想定される場合は、短い注記を付けます。実装はしません。

調整と反復

バリエーションの切り替え、密度の変更、任意のセクションの表示・非表示など、簡単な調整機能を少数用意します。調整できる範囲は最小限にします。ワイヤーフレームの忠実度をプロトタイプと競わせないようにします。

避けること

ワイヤーフレームを磨き込みすぎないでください。ユーザーが気に入った案があれば、次のステップではスケッチを整えるのではなく、別途、より忠実度の高い案を作成します。
ワイヤーフレーム同士の見た目を似せないでください。5案がすべて同じに見えるなら、5案ではなく1案です。