ワイヤーフレーム
- ワイヤーフレーム(wireframe)は、3Dモデリングにおける立体の表現方法の1つ。頂点と線を用いて立体の形状だけを表現し、色や陰影、テクスチャは表現されない。
- (1から転じて) ウェブサイトやアプリケーションの各画面にどのような要素(テキストや画像、ボタンなど)が載るのかを、簡易な形で視覚化したもの。色やタイポグラフィのスタイルは省かれ、画像やテキストコンテンツは仮のものが配置されることが多い。
本項では2について解説する。
ワイヤーフレームの用途
ワイヤーフレームは、ウェブサイトやアプリケーションの画面をデザインする過程で、ルック・アンド・フィールを詳細に検討する前の段階における中間成果物として作成されることが多い。
ワイヤーフレームを作成することで、各画面にどのようなテキストや画像が載るのか、ハイパーリンクやボタンなどがどんなふるまいをするのかを(ルック・アンド・フィールの検討と独立して)検討できる。
ワイヤーフレームを通じて検討する事項の一例として、ウェブサイトを作成する場合であれば、
- テキストコンテンツの種類(見出し、日付、箇条書き…)
- テキストコンテンツの内容
- ハイパーリンクの参照先がどこか
- 画像の種類、数
- 要素を表示する際のルール
- 要素どうしの相対的な優先順位
などが挙げられる。
SmartHRのようなウェブアプリケーションの場合であれば、上記の他に
- ボタンやチェックボックスなどの、ユーザーが操作可能なUIコンポーネント
- それらのUIコンポーネントを操作したときのふるまい
も加わる。
これらの検討に集中できるよう、ワイヤーフレームを作る際はなるべく使う色を減らし、標準的なタイポグラフィのみを使うことが望ましい。
ワイヤーフレームの詳細度
ワイヤーフレームは、必要に応じてさまざまな詳細度で作られる。四角形がたくさん並んでいるような詳細度の低いものから作り始め、要素やふるまいが決まるに従って段階的に詳細度を高くしていくことが多い。
初期段階から詳細部分の検討に脱線してしまわないよう、あえてなるべく太いペンでワイヤーフレームを描くことを推奨するデザイナーもいる。
参考
- Who coined the term “wireframes”?
- Webサイト設計のためのデザイン&プランニング(Dan M. Brown、マイナビ出版)
- Sketching with a Sharpie