ワイヤフレームとは

ワイヤフレームとは

ワイヤーフレームとは、コストと再現度が最も低いデザイン表現です。主に以下の構造要素で構成されています。

1. コンテンツのグループ - 情報のまとまり
2. コンテンツの配置 - レイアウト構成
3. コンテンツの説明とインターフェース同士の関係 - 要素間の繋がり

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

1. 情報の整理ができる

• レイアウト設計: コンテンツの配置をあらかじめ整理できる
• コンテンツ計画: 表示する情報（画像・文章など）を事前に整理できる

2. 認識合わせができる

エンジニア・デザイナー・クライアント間のコミュニケーションツールとして活用でき、認識のずれを防ぎます。結果的に工数の短縮にも繋がります。

3. アイディア出しの土台になる

スタートアップ時のたたき台として、素早くアイディアを形にできます。

ワイヤフレーム作成時の注意点

色について

1. 不適切な色を使用しない - ワイヤフレームはカラフルである必要がない
2. グレーの濃淡を活用 - 階層を視覚的に表現する
3. 画像やアイコンは常にグレー - 視覚的に目立たせない
4. テキストは読みやすく - 適切なコントラストを確保する
5. 機能的な色は使用可能 - リンクは青、アラートは赤、確認は緑、警告は黄色
6. 黒は避ける - 境界線に黒を使うとワイヤフレームが乱雑になる

デザインについて

1. デザインを凝りすぎない - シンプルに保つ
2. 醜い画像・アイコン・奇抜なフォントは使用しない
3. 実際のサイズを使用する - 例: スマートフォンは 375px、タブレットは 768px など

コミュニケーションについて

1. 他の人が理解できない記号やコードは記載しない
2. 理解しやすいアフォーダンスを意識する

ワイヤフレーム作成前に知っておくべきこと

1. ドキュメントを記載する - アラートやモーダルなど、小さな UI 要素についても説明を書く
2. メイン画面から作成する - 主要なデザインコンポーネントは他箇所でも再利用される可能性が高く、手戻りが少ない
3. 状態変化は画面を分けて記載 - ホバー、クリック後など、状態が変わる場合は別画面として表現する

• ←前へ
• 次へ→