現役Webディレクターがワイヤーフレームの作り方を丁寧に解説！【新人ディレクター必見の記事です】
こんにちは、カズキです。
新人Webディレクター
ワイヤーフレームを作るのが苦手。
自己流でやってるけど、正直合ってるか分からない…、今さら先輩にも聞きづらいし…。
ちゃんとした作り方があれば教えて欲しいな。
本記事を読んでほしいのはこんな方♪( ´θ｀)ノ
現在、Webディレクター歴4年目のフリーランスです。
過去に制作プロダクションのほか大手広告代理店、メディア運営会社でディレクションを経験してまして、数十～数百（ペラ一も含む）程度のサイト制作に関わってきました。
その為、ワイヤーフレームも同じ数だけ作ったことがあります。
また、現在もフリーランスでWeb関連の仕事もしている現役ディレクターのため、一定の信頼性は保証できるかと思います。
それでは、さっそく進めてまいります。
現役Webディレクターがワイヤーフレームの作り方を丁寧に解説！
そもそもワイヤーフレームって何だろう？
ワイヤーフレームはサイトの設計図。
ワイヤーは日本語で（線）、フレームは（枠や骨子）を意味するため、「線で描いた枠組み」のようなイメージを持ってもらえればオッケイです😌
このワイヤーフレームを元に「デザイン」したり、「コーディング」することによって、今見ているようなWebサイトができあがります。
家を建てるときも、まず設計図を作りますよね。
Webサイトもそれと同じで、ワイヤーフレームを作ることからサイト開発がスタートするんです。
ワイヤーフレームを作る目的ってなに？
サイトの完成イメージを固めるため。
ワイヤーフレームがないと、それぞれが独自の解釈でサイトを制作することになります。
お互い理解しているつもりでも、完成イメージが見えなければイメージと異なるサイトができあがってしまいます。
できあがってから「全然違います、作り直してください」と言われても簡単に作り直すことはできません。
それを防ぐためにワイヤーフレームの作成は必要不可欠でして、実装前にワイヤーフレームを使ってすり合わせすることは、完成後のギャップを埋めるためにも大切な作業となるんですね。
ワイヤーフレーム作成前にすべき3つのこと
さて、プロジェクトがめでたく始動しました。
さてと、「さっそくワイヤーフレームを作ろう！」と思ったアナタ。
ちょっとSTOPです。
ワイヤーフレームを何の準備もなしに作り出すのはNGですよ。
それは明確なゴールもなく、大海原を航海するようなもの。
ゴールにたどり着く前に沈没してしまったら大変です。
まずは、前提条件やゴールのイメージを明確にすることが大切♪( ´θ｀)ノ
（1）対応範囲の確認
（2）サイトコンセプトの策定
（3）情報設計
順を追って説明していきます。
（1）対応範囲の決定
ワイヤーフレームに取りかかる前に、今回のプロジェクトにかかる対応範囲を確認しましょう。
ビジネスの現場では「スコープ」などとも呼ばれますね😌
まずは、一枚のランディングページを作るのか、数十ページにも及ぶホームページをまるっと作るのか、どの程度の物を作るのか明確にしましょう。
またサイトに入る原稿を書くのは私たちなのか、発注者側で用意してもらえるのか、これによっても工数や予算も変わってきます。
それから、画像は用意してもらえるのか？ロゴやアイコンに指定はあるのか？
この辺りもワイヤーフレームの段階で整理しておけば、デザイン時の出し戻しを防ぐことができるため、確認しておくといいですよ。
対応範囲によっては「ワイヤーフレームに盛り込む情報の量」がダイレクトに変動するので、ワイヤーフレームを作り始める前にゴールを明確に定めることは非常に大事です。
いざ取り掛かってから「これもついでに頼める？」みたいに追加されてしまうと、プロジェクトが破綻するので注意しましょう。
（2）サイトコンセプトの策定
続いて、サイト制作のコア部分ともいえる「コンセプト決め」も事前におこないましょう。
・サイトを作る目的は？
・ターゲット像はどんな人？
・サイトカラーはどんな色？
・ブランドイメージに合うデザインはどんなデザイン？
少なくとも、この辺りの要件は事前に認識を揃えましょう。
「サイトを作る目的」や「サイトに訪問するユーザー像」が分からなければ、
どんなページが必要なのか分からないのでワイヤーフレームは作れません。
これを怠ったまま進めてしまうと、完成したはいいけど、クライアントが求めているワイヤーフレームにならないので注意です。
（3）情報設計
そして、作成するワイヤーフレームに盛り込む情報をまとめたドキュメントを用意します。
情報をまとめておけば、ワイヤーフレーム作成中に「あれ、次は何をすれば良いんだっけ？」と迷うこともなくなるはず。
ページやコンテンツの抜け漏れも防げるようになるので、これはぜひやっておきましょう。
・サイトマップ
・ページ遷移図
・コンテンツ案をまとめたもの
サイトマップ
サイトマップとは、サイトにある全ページをそれぞれグルーピングして振り分けて図にしたものです。
Webサイトでは、TOP以外のページは「基本的にすべてTOP配下に格納されるべき」と考えられているため、すべてのページが階層化されており、それぞれのページが親子関係を持った構造となっています。
たとえば、これから作ろうとしているサイトで「お問い合わせページ」が必要なら、TOPページ配下にお問い合わせページがあるべきですね。
更に「お問い合わせの確認ページ」が必要なら、お問い合わせページの下に「お問い合わせの確認ページ」がある状態が正しいです。
上記の画像（E）を見るとそのようになっているのが分かりますね♪( ´θ｀)ノ
つまり、ページ階層を視覚的にしたものがサイトマップであり、サイトにあるページを網羅的に見ることが可能なもの、なんですね。
そして、ワイヤーフレーム作成の手順として、TOPページから作り始めて下層ページの作成に入ることが多いため、サイトマップの用意は必須です😌
▼サイトマップの作り方を知りたい方は以下の記事をどうぞ
https://jpn-lifestyle.com/2020/08/22/site-map/ページ遷移図
続いて、ページ内に掲載される導線を決めます。
導線が何なのかというと、
「そのページからのみ、行くことのできる他ページへのリンク」を指します。
上記の画像でいうところの青文字が「通常リンク」、
緑文字が「そのページからのみ行けるリンク」です。
このようにページごとに「保有しているリンク」が違うことがわかると思います。
全てのリンクをTOPページに掲載してもいいのですが、
ユーザー心理的にみると「選択の負担」をできる限り減らすことがWebサイトでは大切と言われています。
▼一般的なTOPページでの導線の例
→グローバルナビゲーションに主要ページのリンクを並べる
→下層ページへのリンクはフッターにまとめることも多い
上記例のように「ユーザーがよく訪れるであろうページ」への導線はグローバルナビゲーションとして設置。
反対にユーザーが興味を持って「みずからページを深掘りした際にオススメするページ」への導線は以下のように「個別ページからリンクを設けること」で対応します。
▼以下、個別ページから「オススメしたいページ」への導線を設置した例
※上記は個別ページから次のアクションを促す導線を設置している例
ワイヤーフレームを作り始める前に、
「どうすればユーザーがストレスなく、サイトを回遊できるか」を考えてページ遷移図を考えると適切な情報設計を行うことができます♪( ´θ｀)ノ
コンテンツ案をまとめておく
最後に、ページに掲載するコンテンツ内容をざっくりとまとめましょう。
あらかじめ「どんな情報を掲載したいのか」、そしてその情報を掲載するにあたって「どのようにユーザーに伝えたいのか」、
この辺りはテキストベースでもいいので簡単にまとめておくと良いでしょう。
それから、そのページで掲載したいコンテンツに対して「優先順位を決めておく」ことでワイヤーフレームを作る際の基準となります。
準備が完了したら→さっそくワイヤーフレームを作ってみよう！
事前準備が整ったら、さっそくワイヤーフレームを作りましょう。
その前に→ワイヤーフレーム作成でよく使うツールを紹介
これからワイヤーフレームを作成する方のために、よく使われる作成ツールを紹介します。
自分が使いやすいツールを選びましょう😌
（1）PowerPoint
https://www.microsoft.com/ja-jp/microsoft-365/powerpointいまだに、ワイヤーフレームと言えば「PowerPoint」という人もかなり多いです。
ディレクターなら提案書などのドキュメント作成でもよく使うかと思うので、まずパワポを使えれば問題なし。
（2）AdobeXD
https://www.adobe.com/jp/products/xd.html最近だとXDを使用する人もかなり多め。
デザイナーさんならこちらがいいかもです♪( ´θ｀)ノ
元々デザイン作成ツールなので、細かい描画やインタラクティブな表現に強め。
前項で紹介した「ページ遷移図」などもXDのワイヤーフレーム上で簡単に表現できるので、経験者ならXDに移行してしまっていいかも。
（3）Excel
https://www.microsoft.com/ja-jp/microsoft-365/excel一枚のワイヤーフレームならエクセルでOK。
office製品なので操作方法はPowerPointとほぼ一緒です。
ただ、コーポレートサイトなど複数ページが必要なワイヤーフレームだと、ドキュメントとして見辛くなってしまうのが難点。
（4）Googleスライド
https://www.google.com/intl/ja_jp/slides/about/個人的に一番オススメするのがコチラ。
PowerPointとほぼ同じ機能を持っていて、操作方法も似てます。
Gogoleアカウントを持っていれば無料で使えるし、オンライン上でやりとりできるので非常に便利です。
僕も最近はずっとGooglスライドを使ってます。
さっそくワイヤーフレーム作成に取りかかったけど…
「手が止まってしまった…」
このような方は前章で取りまとめた「サイトコンセプト」をもとに、以下の前提条件をまとめておきましょう。
そもそも決めるべきポイントが整理されていない可能性を疑ってみて。
・サイト幅/対象デバイスを決めよう
・主要ページを整理しましょう
・レイアウトパターンを策定しよう
・ワイヤーフレームに記載する「文字サイズ」や「図形ルール」を決めよう
サイト幅/対象デバイスを決めよう
ワイヤーフレームは設計図ではありますが、実際のサイト幅や対象デバイスの選定は事前におこなっておくべき。
そのサイトがPCサイトなのか、それともスマートフォンなどを対象としたレスポンシブデザインのサイトなのかにもよって、表現するレイアウトは変わってきます。
まずワイヤーフレームを作る前に、その辺りがクリアリングされているのかチェック。
サイト幅やブレイクポイントのサイズ感については以下のようなサイトをチェックしたり、
ターゲットユーザーや最新のWebトレンドを考慮して決定するといいです😌
https://www.site-convert.com/archives/1595主要ページを整理しましょう
必ずしもワイヤーフレーム上で全てのページを作成する必要はありません。
「テキストが違うだけで同じようなレイアウト」であれば、そのページのワイヤーフレーム作らなくてもOK。
その場合デザイナーと相談の上、デザイン作成時に抜けないように伝えるのを忘れずに。
レイアウトパターンを策定しよう
採用するレイアウトパターンについて、ワイヤーフレームを作り始める前に決められるなら決めちゃってもOKです。
ある程度決めちゃった方が、ワイヤーフレームの作成もしやすいかと。
掲載する情報量やクライアントの要望を汲み取りつつ、提案していく感じがいいですね😌
とはいえ、あまりこだわりが無いクライアントや「お任せします！」みたいなパターンがほとんどだと思うので…、
情報量をみつつ、ユーザーが使いやすいレイアウトパターンを選択しましょう♪( ´θ｀)ノ
ワイヤーフレームに記載する「文字サイズ」や「図形ルール」を決めよう
ワイヤーフレームに描画する「文字サイズや図形のルール」は自分の中でルール決めしましょう♪( ´θ｀)ノ
実際のサイトで実装する「pt（ポイント数）やpx（ピクセル）」に合わせる必要はありませんが、
ワイヤーフレーム上の文字サイズにそれぞれ意味を持たせることで、
ワイヤーフレームの見栄えも良くなりますし、何よりデザイナーが仕事を進めやすくなります😌
ワイヤーフレーム上で文字サイズのバラつきがあると「デザイナーは意図があるものなのか？」、と混乱してしまいますので気をつけたいところです。
あとは必要情報をまとめるだけ
前提条件さえ決まれば、あとは情報を肉付けしていけばOK。
・サイトに必要なページは何なのか？→サイトマップを参考にすればOK！
・コンテンツを並べる順番は？→ページ遷移図を作って要素を優先順位付けしよう！
TOPページから作成してみましょう
そのほか、body要素（上記画像：緑の囲い線）のレイアウトを考える際に適切なレイアウトが分からない場合もあると思います。
そんな時は競合サイトのレイアウトを参考にしましょう。
競合サイトのレイアウトが100%正解とは言いませんが、
すでにサイトを公開していることから、一定の完成形であることは間違いありません。
ぶっちゃけ、良いと思えるレイアウトは真似しちゃってOK、オリジナリティはあとで追求するで問題なしです♪( ´θ｀)ノ
TOPページが完成したら下層ページを作りましょう
TOPページはサイトの中心。
そのため、TOPページで作成したレイアウトは下層ページでも応用可能です。
ページごとにレイアウトが異なるWebサイトは非常に見辛く、ユーザーを混乱させてしまうので、
基本的にはTOPページで作成したレイアウトをベースに下層ページ用の情報を掲載すればOKです。
下層ページのみ必要なコンテンツに対するレイアウトは「別に切り出して作る」でOKです。
このように段階を追って、TOPページ→「下層ページ」と作っていきましょう。
作成時に心掛けたい3つのこと
（1）参考にしたいサイトをいくつかピックアップしておこう
競合サイトが「どんなレイアウト」や「デザインを採用」しているのかチェックしましょう。
特に同じサービスや商材を扱っているサイトであれば、ユーザー層が似てるのでレイアウトや訴求を考えるときのヒントになります。
少なくとも5つぐらい参考サイトをピックアップしておくとベストです。
参考サイトがないままなんとなく進めると、軸が定まらないサイトになったり、ページによって異なる表現になってしまってサイトの一貫性が損なわれます。
そうなるとユーザー的に使いづらいサイトになりがちなので、必ず参考サイトはピックアップしておきましょう。
（2）ワイヤーフレームがデザインにならないように注意しよう
初心者にありがちなのが、クオリティーを上げようとデザインのようなワイヤーフレームを作ってしまうこと。
最初は慣れないかもしれませんが、
ワイヤーフレームでは配色は最低限、写真も無ければ、ロゴも設置していない場合も多いので、始めの頃は何となく物足りなく見えるんですよね。
でも、ワイヤーフレームの役割は「サイトに必要な情報を見える化すること」なので、ビジュアライズや装飾などはしなくて大丈夫です。
また、ワイヤーフレームでデザイン寄りのものを作ってしまうとクライアントも混乱しますし、
何よりデザイナーがデザインをするとき、ワイヤーフレームのデザインに引っ張られてしまうこともあります。
デザイナーにはワイヤーフレームやサイトコンセプトを汲み取って、
クリエイティブを施して欲しいので、基本的にはシンプルなワイヤーフレームを納品するよう心がけるといいでしょう。
（3）説明しないと伝わらない部分があれば注釈をつけよう
ワイヤーフレームを見ただけで、内容が伝わらないと思われる箇所は注釈を入れて補足しましょう。
特にインタラクティブな部分やアニメーションを使用したい箇所など、図だけだと伝わりづらいので、細かく内容を示してあげるとGOOD。
あまり決めすぎても良くないですが、意図を持って作った場合は、その旨をしっかりと伝えるのも大事ですね。
良いワイヤーフレームとは？→「デザイナーがすぐにでも手を動かせるもの」
繰り返しになりますが、ワイヤーフレームはサイトの完成イメージです。
デザイナーはあなたの作ったワイヤーフレームをベースにデザインを進めるので、
ワイヤーフレーム上で情報が漏れていたり、意図が分からないレイアウトだとデザイナーも困ってしまいます。
良いワイヤーフレーム作りのポイントは、
・このワイヤーフレームを見て瞬時にデザインすることが可能か？
・サイト制作に必要な情報はくまなく盛り込まれているか？
・コンテンツや原稿に変更はないか？
ここを抑えることが大切です😌
「作って終わり」にならないように、
ワイヤーフレームがが完成したら、デザイナーとエンジニアに説明の時間を設けて、実際に実装できる内容かどうかすり合わせするといいと思います♪( ´θ｀)ノ
わからなくてもOK→その場合は確認に出しましょう
作成してみて自分で判断できない場合は、他のディレクターや上司、制作チームに確認してもらいましょう。
やはり自分で作成したものを主観でチェックするのは難しいので、客観的な意見をもらってもいいと思います。
TOPページが完成した段階で確認に回しましょう。
せっかく組織でやっているので、チームとしての強みは利用した方がお得です😌
修正を重ねるごとにクオリティーを上げれば結果オーライです。
日々スキルを上げていけば問題なし。
おわり
長くなりましたがワイヤーフレームの作り方についての解説を終わります。
なにかと責任重大に思われるワイヤーフレーム作成。
でも心配不要、何度かサイト制作をやれば自然とコツを掴んでサクサク進められますよ。
それでは、みなさんのプロジェクトの成功を祈っています♪( ´θ｀)ノ
