ワイヤーフレームとは、デザインの骨組みのことです。画像のための枠、テキストのための線、ボタンのためのラベル。色もフォントも、洗練されたビジュアルもありません。ただ構造だけを残した、骨組みだけのものです。

ワイヤーフレームは、デザインプロセスの初期段階、スケッチの後、高精細なモックアップの前に作成されます。その役割は、レイアウトに関する疑問に答えることです。ナビゲーションはどこに配置すべきか、カラム数はいくつにするか、階層構造はどうなっているのか、といった点です。あえて見栄えを悪くしているのは意図的なものです。ワイヤーフレームがあまりにも完成度が高いと、関係者はレイアウトの良し悪しではなく、青色の色合いについて議論を始めてしまうからです。

ワイヤーフレームが示すもの

• 主要要素の配置：ヘッダー、ナビゲーション、コンテンツ、フッター
• コンポーネントの相対的なサイズと優先順位
• 画面間またはページ間のフロー
• ボタンやフォームなどのインタラクティブな要素

BalsamiqやFigmaといったツールのおかげで、ワイヤーフレーム作成は迅速に行えるようになりました。しかし、今でも紙とマーカーを使うデザイナーもいます。重要なのは、使用する媒体よりも、そこに込められた考え方です。ワイヤーフレームは、議論のきっかけとなるものです。「これが構造です。どう思いますか？」と問いかけるようなものです。この段階では、変更も容易です。ビジュアルデザインが完成してからサイドバーを移動しようとすると、後工程をすべてやり直す必要が生じます。ワイヤーフレームの中で移動させる方がはるかに効率的です。