ワイヤフレームとは

ワイヤーフレームとは、コストと再現度が一番低いデザイン表現です。
主に以下のデザイン構造を持っています。

1. コンテンツのグループ
2. コンテンツの配置
3. コンテンツの説明とインターフェース同士の関係

ワイヤーフレームを作るメリット #

1. 情報の整理ができる。
   1. レイアウト（コンテンツの配置）はどのようにするか、あらかじめ整理することができます。
   2. 表示する情報、画像や文章などのコンテンツはどのようにするか、あらかじめ整理することができます。
2. 認識合わせができる。
   1. エンジニアとデザイナー、お客さんとのコミュニケーションツールとして利用でき、相互の認識のずれを起こるのを防ぎます。結果的に工数を短縮できます。
3. アイディアだしやたたき台として、スタートアップ時の土台にすることができる。

ワイヤフレームを作る上での注意点 #

1. 不適切な色を使用しない
2. デザインを凝りすぎない
3. 醜い画像とアイコンと奇抜なフォントは使用しない
4. 色合いを凝りすぎない（ワイヤフレームはカラフルである必要がないため
   1. インターフェースとコンテンツのワイヤフレーム構造に灰色の陰影を使用する
   2. 階層を視覚的に提案し、さまざまななグレーの色合いを使用してワイヤーフレームに順序を設定する
   3. 画像やアイコンは常にグレー（視覚的に目立たせたくない場合
   4. 要素間に適切なコントラスト　特にテキストは読みやすくする必要がある
   5. リンクには青、アラートには赤のボックス、確認には緑のボックス、情報には青のボックス、警告には黄色を使用できます
   6. 黒は避ける　例えば黒の境界線、ワイヤフレームを乱雑にする。
5. 実際のサイズを使用する。（存在するスマートフォンサイズを使用する。例 980px
6. 他の人が理解できない標識やコードは記載しない。
7. 理解しやすいアフォーダンスを想像し記載する。

ワイヤフレームを作る上で事前に知っておくこと #

1. 役立つ画面間ドキュメントの記載する。（アラートとボックスのような小さいドキュメントに対して記載することをお勧めする
2. メインで使うデザインコンポーネントは他箇所でも利用する可能性が高く、手戻りが少ない
   そのため、メイン画面から作成することをお勧めする。
3. 状態が変わる場合画面を分け記載すること。