ホームページ制作を依頼すると、「まずワイヤーフレームを確認してください」と言われることがあります。

完成したデザインとは見た目が大きく違うため、「これは何を確認すればいいの？」と戸惑う方もいると思います。この記事では、ワイヤーフレームとは何か、なぜ必要なのか、どこを確認すればいいのかを初心者向けに解説します。

ワイヤーフレームとは？

ワイヤーフレームとは、ホームページの情報やパーツをどこに配置するか整理した設計図のようなものです。

完成前の段階なので、色や写真、細かな装飾はほとんど入れず、「ここに見出し」「ここに写真」「ここに問い合わせボタン」というように、ページの骨組みを確認します。

サイトマップ・ワイヤーフレーム・デザインの違い

工程	確認すること
サイトマップ	ホームページ全体にどんなページが必要か
ワイヤーフレーム	各ページに何を、どんな順番で配置するか
デザイン	色・写真・文字・余白などを含め、どのように見せるか

サイトマップでホームページ全体のページ構成を決め、その内容を各ページの画面に落とし込んでいくのがワイヤーフレーム、と考えると分かりやすいです。

なぜデザインの前に作るの？

情報の順番に集中して確認できる

最初から色や写真が入ったデザインを見ると、どうしても「この色が好き」「この写真が気になる」といった見た目に目が向きやすくなります。

ワイヤーフレームでは装飾を抑えることで、「この情報はもっと上に必要では？」「問い合わせまでの流れは分かりやすい？」といったページの中身を確認しやすくなります。

必要な情報の抜けに気づきやすい

ページの内容を実際の画面に近い形で並べると、「料金について説明がない」「実績への導線が必要」など、サイトマップだけでは気づかなかった情報の不足が見えてくることがあります。

デザイン後の大きな手戻りを減らしやすい

情報の順番や内容をワイヤーフレームの段階で整理しておくと、デザインに入ってからページ構成を大きく変更する可能性を減らせます。

ホームページ制作のどの段階で作る？

制作方法によって多少前後しますが、一般的には次のような流れで進みます。

1. ヒアリング・目的の整理
2. サイトマップ作成
3. ワイヤーフレーム作成
4. デザイン制作
5. コーディング・WordPress構築
6. 確認・公開

ワイヤーフレームは、ホームページの目的や必要なページを整理したあと、デザインを作る前の段階に位置します。
制作前のヒアリングについては

ワイヤーフレームで確認したいポイント

1. 必要な情報が入っているか

会社の強み、サービス内容、料金、実績、問い合わせ方法など、そのページで伝えたい情報に抜けがないか確認します。

2. 情報の順番は分かりやすいか

自社が見せたい順番だけでなく、初めてホームページを見る人が知りたい順番になっているかを確認しましょう。

3. 問い合わせまでの流れが分かりやすいか

問い合わせや資料請求など、ホームページでしてほしい行動につながるボタンが分かりやすい位置にあるかも確認します。

4. スマートフォンで見たときも想像する

パソコンでは横に並ぶ情報も、スマートフォンでは縦に並ぶことがあります。スマートフォン用のワイヤーフレームがある場合は、情報の順番やボタンの位置も確認しておきましょう。

ワイヤーフレームでは見た目を判断しすぎない

ワイヤーフレームは完成デザインではありません。文字が仮の状態だったり、写真がグレーの四角で表示されていたりすることもあります。

この段階では「おしゃれかどうか」よりも、必要な情報があるか、順番が分かりやすいか、ページの目的につながる構成になっているかを中心に確認するのがおすすめです。

KENZO724.が大切にしていること

KENZO724.では、デザインに入る前にページの内容や構成を確認し、伝えたいことと見る人が知りたいことを整理しながら制作を進めます。

ワイヤーフレームをただ確認してもらうのではなく、「なぜこの順番なのか」「ここで何を伝えるのか」も共有しながら進めることを大切にしています。

よくある質問

まとめ

ワイヤーフレームは、デザインを作る前にページの情報や配置を整理する設計図です。見た目ではなく、必要な情報・順番・問い合わせまでの流れを確認することで、その後のデザイン制作も進めやすくなります。