Product Design Wiki

ワイヤーフレーム

  1. ワイヤーフレーム(wireframe)は、3Dモデリングにおける立体の表現方法の1つ。頂点と線を用いて立体の形状だけを表現し、色や陰影、テクスチャは表現されない。
  2. (1から転じて) ウェブサイトやアプリケーションの各画面にどのような要素(テキストや画像、ボタンなど)が載るのかを、簡易な形で視覚化したもの。色やタイポグラフィのスタイルは省かれ、画像やテキストコンテンツは仮のものが配置されることが多い。

本項では2について解説する。

ワイヤーフレームの用途

ワイヤーフレームは、ウェブサイトやアプリケーションの画面をデザインする過程で、ルック・アンド・フィールを詳細に検討する前の段階における中間成果物として作成されることが多い。

ワイヤーフレームを作成することで、各画面にどのようなテキストや画像が載るのか、ハイパーリンクやボタンなどがどんなふるまいをするのかを(ルック・アンド・フィールの検討と独立して)検討できる。

ワイヤーフレームを通じて検討する事項の一例として、ウェブサイトを作成する場合であれば、

などが挙げられる。

SmartHRのようなウェブアプリケーションの場合であれば、上記の他に

も加わる。

これらの検討に集中できるよう、ワイヤーフレームを作る際はなるべく使う色を減らし、標準的なタイポグラフィのみを使うことが望ましい。

ワイヤーフレームの詳細度

ワイヤーフレームは、必要に応じてさまざまな詳細度で作られる。四角形がたくさん並んでいるような詳細度の低いものから作り始め、要素やふるまいが決まるに従って段階的に詳細度を高くしていくことが多い。

初期段階から詳細部分の検討に脱線してしまわないよう、あえてなるべく太いペンでワイヤーフレームを描くことを推奨するデザイナーもいる。

参考