ワイヤーフレームで構成を決める

ワイヤーフレームとは

デザインの最終的な見た目を作る前に、情報の配置・構成・流れだけを決める設計図のことです。
色もない、きれいなフォントもない、写真もない。
ただの「箱と文字」で構成されます。料理で言えば、
レシピを確認してから調理するのと同じです。

ワイヤーフレームを作る理由

カラーデザインを作り込んだ後に「構成が間違っていた」と気づくのは非常に痛い失敗です。
ワイヤーフレームで先に構成を確認することで後戻りを防げます。

なぜグレースケールだけで作ることが有効なのか。
色には強力な感情的インパクトがあり、鮮やかなオレンジや美しい写真を見ると「なんとなく良さそう」という印象が判断を曇らせます。
グレーしかない状態では見た目の魅力による誤魔化しが効かないため、
純粋に「この構成で情報が正しく伝わるか」という構造的な問いに集中できます。
プロがワイヤーフレームをグレーで作るのは、意識的に「美しさ判断」をOFFにするためです。

また、色や画像がないシンプルな状態だと「どの情報が最重要か」を客観的に判断しやすく、
クライアントへの構成確認も早い段階でできます。

ワイヤーフレームの作り方

① まず紙に箱を書いて要素を並べます（10〜15分）。
考えることより先に手を動かし、複数案を素早く出します。

② 情報の優先順位を数字でつけます。「1番重要：サービス名、
2番：メインビジュアル、3番：特長3点…」と番号を振ります。

③ クライアントに見せる場合はFigma・FigJam・Canvaでデジタル化します。

④ 「見た人がどこに視線が向くか」をシミュレーションして修正します。

ワイヤーフレームの書き方ルール

テキストは横線かダミーテキストで表現し、画像は対角線を引いた四角形（□に×）で表します。
ボタンは角丸の長方形に「CTA」とテキストを書きます。
色はグレーのみ使用し、きれいに描こうとしないことが重要です。
シンプルであることが目的です。

まとめ

ワイヤーフレームは「設計図なしに工事しない」という考え方と同じです。
5〜15分で作る粗い設計図が、後の大きな修正を防ぎます。
紙に手書きから始めることで、頭の中にあるアイデアを素早く形にできます。

NEXT STEP