Column
コラム
ワイヤーフレームって何？
ワイヤーフレームとは？
ホームページ制作では、デザインを作る前に「ワイヤーフレーム」という資料を作ることがあります。
ワイヤーフレームとは、それぞれのページに何を掲載し、どのような順番で見せるのかを整理したものです。
たとえばトップページであれば、
-
- 最初に何を見せるのか
- 会社の特徴をどこで伝えるのか
- 商品やサービスをどの順番で紹介するのか
- 実績やお知らせをどこに入れるのか
- お問い合わせへどうつなげるのか
といったことを整理していきます。
簡単に言うと、ホームページの各ページを作るための「設計図」のようなものです。
色や写真、細かな装飾を決める前に、まずページの中身と順番を決めるために作ります。
ワイヤーフレームはデザインではない
初めてワイヤーフレームを見ると、
「思っていたより地味」
「写真が入っていない」
「これが完成イメージなの？」
と思われるかもしれません。
しかし、ワイヤーフレームは完成デザインではありません。
制作会社によって作り方は異なりますが、白黒の枠だけで作られていたり、写真の代わりに四角いスペースが置かれていたり、文章も仮の内容になっていたりすることがあります。
この段階で確認するのは、色や雰囲気ではなく、
「何を、どこに、どの順番で見せるのか」
というページの構成です。
ワイヤーフレームをもとに内容を確認したあと、写真や色、文字の大きさ、余白、装飾などを加えてデザインを作っていきます。
そのため、ワイヤーフレームを見て「完成したホームページもこの見た目になる」と考える必要はありません。
なぜワイヤーフレームを作るの？
ワイヤーフレームを作る大きな理由は、
いただいた情報を実際のページに当てはめながら、内容や方向性を確認するためです。
素材を集めている段階では、
「この文章で十分そう」
「この写真があれば大丈夫そう」
「伝えたいことはだいたい揃っている」
と思っていても、実際にページの形にしてみると、文章量が多かったり、逆に説明が足りなかったり、写真が不足していたりすることがあります。
また、素材だけを見ている段階では気づかなかった、
「この内容はもっと目立たせたほうがよさそう」
「似た内容が重複している」
「ここはもう少し詳しく説明したほうがよさそう」
といったことも見えてきます。
さらに、ワイヤーフレームは、制作会社とお客様の認識を合わせるための資料でもあります。
お客様が大切だと思っていることと、制作会社が考えている優先順位にズレがないかを、実際のページ構成を見ながら確認できます。
素材を集めただけでは分からなかったことを、ページの形にすることで具体的に確認する。
そのために、デザインへ進む前にワイヤーフレームを作ります。
まずは「載せたいものが入っているか」を確認する
制作会社からワイヤーフレームが出てきたら、まず確認したいのは、伝えたい内容がきちんと入っているかです。
たとえば、
-
- 商品やサービス
- 会社の強み
- 実績
- お客様の声
- 採用情報
- お知らせ
- お問い合わせ
など、ホームページで伝えたい内容が抜けていないかを確認します。
「これは絶対に載せたい」
「この内容は必要ないかもしれない」
というものがあれば、この段階で制作会社に伝えておくと、その後の制作が進めやすくなります。
ワイヤーフレームは完成後に確認する資料ではなく、これから作るホームページの中身を話し合うための資料です。
「順番」と「大きさ」も確認する
載せたい内容が入っていれば、それだけでよいわけではありません。
ワイヤーフレームでは、どの情報を先に見せるのか、どの情報を大きく扱うのかも確認します。
たとえば、
「一番伝えたい商品なのに、小さく扱われている」
「採用を強化したいのに、採用情報がページの一番下にある」
「会社の強みをもっと早い段階で見せたい」
と感じることもあるかもしれません。
こうした部分は、単に「載っているか」ではなく、情報の優先順位が合っているかという確認になります。
ホームページを見る人は、必ずしもページの一番下まで読んでくれるとは限りません。
そのため、何を先に見せるのか、どこを強調するのかを考えることも大切です。
「あれもこれも上に」はおすすめできない
ワイヤーフレームを確認していると、
「これも目立たせたい」
「これも最初に見せたい」
「このボタンも上に置いてほしい」
と、たくさんの要望が出てくることがあります。
もちろん、大切な情報は目立たせる必要があります。
ただし、すべてを大きくして、すべてをページの上の方に置いてしまうと、どれが一番重要なのか分からなくなってしまいます。
結果として、ホームページ全体がごちゃごちゃした印象になることもあります。
ホームページを考えるときは、会社として伝えたいことだけではなく、
「初めて訪れた人は、まず何を知りたいのか」
という視点も大切です。
伝えたいことに優先順位をつけながら整理していきます。
ワイヤーフレームの作り方は制作会社によって違う
ワイヤーフレームには、決まった形があるわけではありません。
制作会社によって、
-
- 手書きに近い簡単なもの
- PowerPointなどで作ったもの
- XDやFigmaなどの制作ツールで作ったもの
- 実際のブラウザ上で確認できるもの
など、作り方はさまざまです。
サーフボードでは、Figmaを使うことが多いです。
また、どの段階まで作り込むかも制作会社によって異なります。
大まかな配置だけを確認してからデザインへ進む場合もあれば、文章や写真の位置までかなり細かく決めてからデザインへ進む場合もあります。
そのため、見た目だけで判断するのではなく、「この段階では何を確認すればいいのか」を制作会社に確認しておくと安心です。
サーフボードでは、素材をすべて集めて頂いた後にワイヤーフレームを作成しますので、文章や写真の位置までかなり細かく決めていきます。
まとめ
ワイヤーフレームとは、ホームページの各ページに何を掲載し、どのような順番で見せるのかを整理するための設計図です。
制作会社からワイヤーフレームを提示されたら、見た目のかっこよさではなく、
-
- 必要な内容が入っているか
- 情報の順番は分かりやすいか
- 大切な情報が適切な場所にあるか
- 見る人が知りたい情報にたどり着けるか
- 問い合わせや応募などにつながる流れになっているか
といった点を確認してみてください。
また、ワイヤーフレームの作り方や確認方法は制作会社によって異なります。
分からないところがあれば、「これは今の段階で決めるものですか？」と確認しながら進めると安心です。
サーフボードでは、ワイヤーフレームの工程を特に大切にしています。
誰に見てもらうのか、
何を伝えたいのか、
何を一番見てほしいのか、
最終的にどんな行動につなげたいのか
を考えながら、いただいた写真や文章などの素材を実際のページに当てはめていきます。
そうすることで、素材を集めている段階では見えてこなかった不足や重複、情報の優先順位なども確認しやすくなります。
ワイヤーフレームは、単なる下書きではなく、ホームページの中身をお客様と制作会社が一緒に整理し、認識を合わせるための大切な資料だと考えています。
関連コラム
株式会社サーフボードは、福井で最も歴史のあるホームページ制作会社です。
1996年創業以来、ホームページ制作を一筋に800社以上のホームページやWEBシステムの構築をしてまいりました。
ホームページ制作でお困りのことやご相談がございましたら、お気軽にお問合せくださいませ。