ワイヤーフレーム（wireframe）

ワイヤーフレーム（wireframe）とは、Webサイトやアプリの画面設計において、レイアウトや要素の配置を線と枠だけで示した設計図のことです。色やフォント、画像といった見た目の要素を含めず、「どこに何を置くか」という骨組みだけを表現する資料として作成されます。

現実世界に例えると、ワイヤーフレームは「建物の設計図」のようなものです。壁紙や照明の色を決める前に、まず部屋の配置や動線を図面上で確認するのと同じように、画面の構成を先に固めます。

基本的な役割

ワイヤーフレームは、デザインを作り込む前の段階で、画面に何をどう配置するかを関係者間で確認するために使われます。見た目の印象に気を取られず、情報の優先順位や導線を検討できることが、最大の役割です。

似た言葉に「モックアップ」がありますが、こちらは色やフォント、画像を含めた、実際の画面に近い見た目で作られる資料です。ワイヤーフレームは構造の検討、モックアップは見た目の検討という違いがあり、多くの制作現場ではワイヤーフレームを先に作ってからモックアップへ進みます。

「プロトタイプ」は、画面同士をリンクさせて実際にクリックして動作を確認できるようにした試作品を指します。ワイヤーフレームが1枚ごとの静止した設計図であるのに対し、プロトタイプは画面遷移や操作の流れまで含めて検証できる点が異なります。

ワイヤーフレームは、要件定義や情報設計が固まった後、本格的なデザイン制作に入る前の段階で作成されるのが一般的です。手戻りのコストが低い早い段階で構成を確認しておくことで、デザイン作業のやり直しを防ぐ狙いがあります。

手書きのラフスケッチから始めることもあれば、FigmaやAdobe XDといった専用のデザインツールを使って作成することもあります。関係者間で共有・修正しやすいという点から、近年はデジタルツールを使ったワイヤーフレーム作成が主流になっています。

ワイヤーフレームのレビューでは、必要な情報が過不足なく配置されているか、利用者が迷わず操作できる導線になっているかを中心に確認します。色やデザインの好みに議論が偏らないようにすることも、この段階でのレビューの重要な狙いのひとつです。

Webサイトやアプリは、画面の大きさが異なるスマートフォンとパソコンで見え方が変わるため、それぞれに合わせたワイヤーフレームを用意することがあります。限られた画面幅に情報をどう収めるかを、デザイン制作の前段階で検討しておくことができます。

ワイヤーフレームには、手書きに近いラフな「ローファイ（低忠実度）」と、実際の文言や要素の大きさまで再現した「ハイファイ（高忠実度）」があります。企画の初期段階ではローファイで素早く案を出し、方向性が固まってからハイファイへ精度を上げていく進め方がよく取られます。