2026/6/3
「とりあえずデザインから」で失敗するWEBサイト制作の話。
Type Something
Type Something
2026/6/3
「デザインのイメージだけ先に見せてもらえますか」
WEBサイト制作のご相談を受ける中で、こう聞かれることがよくあります。お気持ちはよく分かるのですが、私たちは順番として、デザインより先に「情報設計」から着手することを大切にしています。今日は、その情報設計にあたる「ワイヤーフレーム」という考え方についてお伝えします。
ワイヤーフレームとは何か
ワイヤーフレームとは、簡単に言うと「WEBサイトの設計図」です。色や写真、フォントといった見た目の要素を一切使わず、線と文字だけで「どのページに、何を、どの順番で配置するか」を決めていく工程を指します。家づくりに例えるなら、内装や家具を決める前に、間取り図を確定させるようなものです。
なぜこの工程が重要かというと、WEBサイトは「見た目の美しさ」だけでは成果につながらないからです。訪れたお客様が知りたい情報にすぐたどり着けるか、問い合わせボタンが自然な流れで目に入るか。こうした構造の部分は、デザインの装飾よりも先に決めておく必要があります。
デザインから先に決めてしまうと、何が起きるか
デザインを先に固めてしまうと、後から「この情報も入れたい」「このページも必要だった」という要望が出てくるたびに、レイアウトを崩さざるを得なくなります。結果として、見た目は整っているのに、情報が詰め込まれすぎて何を伝えたいのか分かりにくいサイトになってしまう——これは、私たちがリニューアルのご相談を受ける中で非常によく目にするパターンです。
ホームページをリニューアルしても成果が変わらない理由については、こちらの記事でも詳しく解説しています。
ワイヤーフレームで決めるべき3つのこと
1：ページ構成（サイトマップ）
トップページの他に、どんなページが必要か。会社案内、事業内容、実績、採用、お問い合わせなど、自社にとって本当に必要なページを洗い出します。同業他社にあるからといって、そのまま真似して増やす必要はありません。
2：各ページの情報の優先順位
たとえばトップページであれば、最初に何を見せ、次に何を見せるか。お客様が知りたい順番と、会社が伝えたい順番は、必ずしも一致しません。この優先順位を、お客様の視点で組み立て直す作業がここに含まれます。
3：次のアクションへの導線
問い合わせ、資料請求、電話など、お客様に次にとってほしい行動を、各ページのどこに配置するかを決めます。この導線が曖昧なままデザインを進めてしまうと、せっかくサイトを訪れたお客様を取りこぼしてしまうことになります。
ワイヤーフレームの前提にあるもの
ページ構成や情報の優先順位を決めるためには、そもそも「自社が誰に、何を伝えたい会社なのか」が整理されている必要があります。この土台がないままワイヤーフレームを組んでも、結局は情報の羅列になってしまいます。会社の「選ばれる理由」を整理する考え方については、こちらの記事をご覧ください。
[B.I.（ブランドアイデンティティ）とは？「つくる」の最初の一歩]
経営者が確認すべきタイミングは「デザインの前」
WEBサイト制作の現場では、経営者の方に完成間近のデザインを見せて初めて「思っていたのと違う」という声が出ることがあります。しかし、この段階での修正は、構造そのものに関わるため、時間もコストも大きくかかってしまいます。
私たちがおすすめしているのは、デザインが仕上がる前、つまりワイヤーフレームの段階でしっかりと経営者に確認していただくことです。線と文字だけの状態は一見地味に感じるかもしれませんが、この段階でこそ「言いたいことが、言いたい順番で伝わる構造になっているか」を確認することができます。
自社の「選ばれる理由」を、WEBサイトの構造やデザインにどう落とし込んでいくのか。その全体像を、無料の小冊子「みつける、つくる、そだてる｜お客様に選ばれ、愛され続けるブランドづくりの方程式。」にまとめています。ぜひ一度お手に取ってみてください。
