Webサイトの新規制作やリニューアルをする際、「ワイヤーフレーム」を作るのは定石です。
ワイヤーフレームでサイトイメージをすり合わせ、担当デザイナーに共有し、サイトを作り込んでいくのが基本的なフローです。
この記事ではワイヤーフレームの作り方をはじめ、作る際の注意点、おすすめの制作ツールを紹介します。
ワイヤーフレームとは
まずは、ワイヤーフレームとは何か、作ることにどんなメリットがあるのかを確認しましょう。
ワイヤーフレームはWebサイトの設計図
線を意味する「ワイヤー」と、枠を意味する「フレーム」を組み合わせた「ワイヤーフレーム」は、線と枠で表現したWebサイトの設計図と定義されています。
別名は「画面設計」です。
サイトを作るクライアントの目的や、方向性の基本となるコンセプトなどを考慮し、WebディレクターがページごとのUI（ユーザーインターフェース）を組みます。
ワイヤーフレームの時点ではデザインを作り込まず、大まかな骨組みに画像やテキストなど必要なパーツを配置するのみです。
ワイヤーフレームを使うとどんな効果がある？
ワイヤーフレームはパーツをレイアウトしただけなので、仕様を大きく変更することも容易です。
そのため、サイト作成に関わるメンバーと、情報を整理しつつ、アイデアを出し合って、ワイヤーフレームに即反映することが可能。
イメージを可視化することで、メンバー間の認識をすり合わせることも容易です。
デザインを作り込みながらサイトを構築していくのに比べて、ワイヤーフレームを使えばサイトの基礎となる構成を効率的に作り上げられるという効果があります。
ワイヤーフレームとデザインカンプの違い
ワイヤーフレームと比べると、デザインカンプという言葉の方が聞き覚えのある人は多いかもしれません。
どちらもサイトが完成するまでの過程で作るものですが、目的はまったく異なります。
ワイヤーフレームがパーツをレイアウトしただけの設計図であるのに対し、デザインカンプはグラフィック込みでクライアントとイメージを固めていくための完成見本です。
デザインカンプはワイヤーフレームをもとにWebデザイナーが作成します。
ワイヤーフレームと似た言葉として挙がる「プロトタイプ」は、サイト内で理想的な導線が引けているかなど、操作性を検証するために作ります。そのため、レイアウトの確認が目的のワイヤーフレームとは別物です。
【基本】ワイヤーフレームの作り方
スムーズにサイトを構築するために、ワイヤーフレームが役に立つことをおわかりいただけたのではないでしょうか。
それでは、基本となるワイヤーフレームの作り方をstepごとに見ていきましょう。
【Step1】載せたい情報を整理する
実際にワイヤーフレームを作りはじめる前にすべきことが、載せたい情報の整理です。
ページごとに必要な情報は異なるので、それぞれでピックアップします。
トップページなら、そのサイトのイメージを印象づける画像や、どのようなサイトなのかを簡単に説明するテキスト、各コンテンツへ遷移させるボタンなどが必要になるはずです。
どんな情報を載せればいいのか思い浮かばない場合は、他サイトのページがどのような要素で成り立っているのかをチェックしながらピックアップしましょう。
【Step2】内容に優先順位をつける
載せたい情報をまとめたら、どの内容を目立たせたいか優先順位をつけましょう。
一般的にユーザーはページの上部から閲覧していきます。
そのため、見てほしい内容順で上から配置していくとよいでしょう。
【Step3】レイアウトのラフを作成する
載せたい情報の優先順位が決まったら、まずは手書きでレイアウトのラフを作成します。
ユーザーはページの上部からZを描くようにして情報を閲覧していきます。
その視線を意識しながら、優先順位の高い情報を上から配置していきましょう。
「欲しい情報がスムーズに手に入るページ構成になっているか」を確認し、時には順番を入れ替えます。
情報が1ページに溢れすぎて見にくい、読みにくい場合は優先度の低い情報を削除したり、別のページに移したりして調整しましょう。
【Step4】清書する
ある程度レイアウトが決まったら、ツールを使って清書しましょう。
手書きよりも見やすくなるので、クライアントやサイト作成に関わるメンバーとのすり合わせがしやすくなります。
データ化することで、共有や修正が楽になるのもメリットです。
ノウハウとして蓄積すれば、似た構成のサイトやページを作る際の土台としても活かせます。
ワイヤーフレーム作成の注意点
ワイヤーフレームを作る際に気をつけるべきことがあります。
どのような注意点があるのか確認しましょう。
デザインの作り込みは厳禁
ワイヤーフレームは、クライアントへ見せる場合などは特に作り込みたくなるかもしれません。
ですが、デザインを作り込むのは厳禁です。
ワイヤーフレームはあくまでもレイアウトを考えるためのものです。
デザイン的な要素を入れると、そちらに気を取られて、レイアウトに目がいかなくなってしまいます。
そのため、色も使わずモノクロで作成するようにしましょう。
また、レイアウトを具体的にしようとこだわり過ぎると、なかなか完成しません。
必要な要素が反映されていれば、完璧に整えなくても大丈夫です。
関係者が理解できるようにする
デザインなどを他の会社に任せる場合は、初見の人でも理解できるように作りましょう。
ワイヤーフレームがわかりづらいと、認識がずれたまま制作が進んでしまいます。
デザイン以降の工程で修正を入れるのは手間がかかるので、ワイヤーフレームの時点で関係者の認識が合致するようにしましょう。
ユーザー目線で制作する
モノクロのワイヤーフレームでも、レイアウトをしていくとサイトっぽくなります。
すると、ついユーザー目線を忘れがちです。
あくまでも、ユーザーの欲しい情報を提供することがサイトの目的なので、ユーザーニーズに沿う配置になっているか確認しながら作りましょう。
また、最近ほとんどのサイトがレスポンシブサイトですが、スマホでの見え方を意識して制作するようにしましょう。
パソコンで作業を行うと、パソコンの見え方で作りがちです。
しかし、込み入ったレイアウトにすると、スマホではうまく表示できない場合があるからです。
実際の文言を入れる
サイトに入れる文言を考えるのは手間なので、後回しにしたくなります。
ですが、デザインにテキストを組み込んだ後に修正を入れると、ワイヤーフレームの状態で直すより労力がかかります。
大掛かりになるほどコストもかさむため、ワイヤーフレームの時点で実際の文言を入れるようにしましょう。
仮テキストと実際のテキストとでは、イメージに差が出ます。
競合サイトを研究する
何もないところからワイヤーフレームをつくるのは、よほどの経験がある人でないと難しいです。
そこで手本にすべきは、競合サイトや話題のサイトです。
さまざまなサイトをチェックして、レイアウトの見やすさはどこにあるか、工夫している点は何かなどを研究しましょう。
ワイヤーフレームの時点では独自性を追及しすぎず、あくまでもユーザー目線で見やすいか、情報を得やすいかを基本にチェックしましょう。
ワイヤーフレーム制作おすすめツール5選
手書きでラフを作成した後、どのツールで清書をするか迷うところでしょう。
ここではワイヤーフレームの制作におすすめのツールを5つ紹介します。
【有料】Adobe XD
Adobe XDはワイヤーフレームやデザインを作成できるツールです。
ホームページだけでなくスマホアプリにも対応しています。
便利なのは、ワイヤーフレームのデータをクラウド上で共有できること。
Adobe XDをインストールしていない人でも、ブラウザでデータを確認し、コメントを付けることができます。
【有料】CACOO（カクー）
CACOO（カクー）はクラウド型の作図ツール。
こちらも、サイトやスマホアプリのワイヤーフレームが作成できます。
インターネットがつながっていればパソコンで作図ができ、さらに複数の人と共有して、共同編集を行うことも可能です。
テンプレートが用意されているので、それを使えば初心者でもスムーズに作成できます。
【無料】PowerPoint（パワーポイント）
ワイヤーフレームに特化したサービスを利用しなくても、ワイヤーフレームは作れます。
プレゼン資料の作成などによく利用されるパワーポイントがそのひとつです。
ページ数が多かったり、レイアウトが複雑だったりするサイトでなければ、パワーポイントで十分事足ります。
パワーポイントを使い慣れているなら、別のツールを使うよりスムーズに作成ができるかもしれません。
複数の人で同時にチェックを行うことがないなら、よりおすすめです。
パソコンに元からパワーポイントがインストールされているなら、別途コストがかからないのもメリットです。
【無料】Excel（エクセル）
Excel（エクセル）は言わずと知れた表計算ソフトですが、ワイヤーフレームの作成にも利用できます。
もとからグリッド線がついているので、それを上手く活かせばレイアウトも考えやすいでしょう。
【無料】Googleスプレッドシート
今やExcelよりも使用頻度が高い人も多いと思われるGoogleスプレッドシート。
操作はExcelと似ているので、使ったことがない人もすぐに慣れるはずです。
データのURLを知らせて、編集権限を付与すれば、同時に作業を行うことも可能です。
まとめ
ワイヤーフレームの作成は、デザインを作り込む前、レイアウトを固めるのに必要不可欠です。
デザインを作り込んだ後にレイアウトの大幅な修正が入ると、時間も手間もかかります。
それを防ぐためにワイヤーフレームを作りましょう。
ワイヤーフレームは作り込まないことが原則。
デザインではなく、レイアウトのチェックが目的なので、必要な要素のみを入れた、モノクロのシンプルなレイアウト図を作ります。
ツールを使えば、見やすいワイヤーフレームを効率良く作成できます。
ユーザー目線を忘れず、初見でも認識が合致するように作ることを意識しましょう。