ワイヤーフレームとは、視覚的なデザインを一切排除し、構造だけを示す簡略化されたレイアウトスケッチです。色も写真も洗練されたフォントも一切使用せず、ボックス、線、プレースホルダーテキストのみで構成されます。ワイヤーフレームの目的は、見た目を決める前に、要素の配置場所を明確にすることです。階層構造、ナビゲーション、コンテンツの流れといった疑問に答えるのに役立ちます。作成コストが安く、変更も容易です。

デザイナーは、手書き、FigmaやSketchなどのツール、または専用アプリを使ってワイヤーフレームを作成します。低忠実度ワイヤーフレームは、粗いボックスと走り書きのラベルを使用します。高忠実度ワイヤーフレームは、実際のコンテンツとより正確な間隔を追加しますが、色や画像は使用しません。チームはワイヤーフレームを使用して、関係者の認識を早期に一致させます。ワイヤーフレーム内のボタンの移動に難色を示すクライアントは、後で完成画面を再構築する手間を省いてくれます。

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

• 主要ページセクションの配置。
• ナビゲーション構造とメニュー項目。
• コンテンツの階層構造とグループ化。
• ボタンやフォームなどのインタラクティブな要素。

ワイヤーフレームは設計図ではありません。あくまでも対話のためのツールです。表面的なデザインに時間を費やす前に、構造について合意を得ることが目的です。