ワイヤーフレーム とは？

家を建てる前に「間取り図」を描くよね。ワイヤーフレームはWebサイトやアプリの間取り図なんだ。「ここにロゴ」「ここにメニュー」「ここに記事一覧」みたいに、要素の配置だけをシンプルに描くんだよ。

いきなりキレイなデザインを作ると「この色がイヤ」「フォントが気になる」みたいに見た目の話ばかりになっちゃうんだ。ワイヤーフレームなら「ここにボタンを置くべきか」「この情報はもっと上に出すべきか」っていう構成の議論に集中できるんだよ。

紙とペンでもいいし、FigmaやAdobe XD、Balsamiqみたいな専用ツールもあるよ。初期段階では手書きの方がスピードが速くて修正も気軽にできるから、まずは手書きから始めるチームも多いんだ。

ワイヤーフレームは白黒の骨組みで、モックアップは色やフォントを付けた「完成イメージに近い見た目」のデザインだよ。ワイヤーフレーム → モックアップ → プロトタイプ、と段階を踏んで具体化していくんだ。

「情報の優先順位」を意識することだね。ユーザーが最初に見るべき情報を画面の上部に置くとか、重要なアクション（購入ボタンとか）を目立つ位置にするとか。ただ、ワイヤーフレームの詳細度（フィデリティ）をどこまで上げるかの判断は悩ましくて、粗すぎると関係者の認識がずれるし、細かすぎると修正コストが上がって本末転倒になる。このバランスの見極めはUXデザインの経験が長い人でもプロジェクトごとに迷うポイントなんだよ。