2019年8月24日Webツイートシェアはてブ送るPocketいまいちワイヤーフレームの作り方がわからない!ワイヤーフレームを作ることによって、逆に効率が悪くなっている気がする...ワイヤーフレームの作り方を見直したい!ワイヤーフレームの作り方で悩んでいる人は、多いのではないでしょうか?ワイヤーフレームをさっさと作って、デザインやコーディングに進みたいですよね。!ワイヤーフレームを作るときに手を抜くと、その後の作業が余計に時間がかかってしまいます。お客さんからWebサイトの制作依頼を受けている人は、ワイヤーフレームを適当に作ってデザイン・コーディングを進めてしまうと、お客さんのイメージしているものと全然違うものができあがってしまい、最悪案件自体がなくなってしまうリスクも!そのため、ワイヤーフレームはあなたの身を守る道具にもなりますし、最終的なWebサイトの出来上がりに大きく関わってくることになります。そこで、今回はワイヤーフレームの作り方について取り上げました。Webサイトの制作に入る前に、最低限これだけはワイヤーフレームで、確認しておいたほうがいい項目を紹介しているので、ぜひ参考にしてみてください。今回紹介しているワイヤーフレームの作り方は、1:個人でWebサイト制作をしている人の、ワイヤーフレームの作り方2:Webディレクターがデザイナー・コーダーに指示を出すために作る、ワイヤーフレームの作り方の2パターンになります。まとめワイヤーフレームとはワイヤーフレームとは、Webサイトの設計書になります。ワイヤーフレームを作ることによって、Webサイトの制作がスムーズに進みます。ワイヤーフレームを作ってから、Webサイトの制作に入るのが一般的です。なんでワイヤーフレームを作るの?ワイヤーフレームを作らずに、いきなりWebサイトの制作を始めた場合、デザインやページの構成を考えながら制作を進めていくことになります。すると、その場だけの制作になってしまい、制作が進んでいくにつれて...デザインが統一されていない、ページに必要な情報が入っていない、ページが足りない...などのトラブルが発生します。そのような、致命的なトラブルが発生すると、修正に多くの時間が取られてしまいます。最悪な場合、いちから作り直しになることも...(僕は経験あり)また、Webディレクターでデザイナー・コーダーに支持を出す方は、ワイヤーフレームを作らないと、どんなWebサイトを制作するのかをデザイナー・コーダーと共有ができません。すると、Webディレクターがお客さんから話しを聞いて、思い描いていたWebサイトと、デザイナー・コーダーが実際に制作したWebサイトが、まったく違うということになる可能性があります。なるともう、納期に間に合わなくなることも...。考えただけでも恐い...。ワイヤーフレームを作るメリットワイヤーフレームを作ることによって、得られるメリットは大きいので、めんどくさくてもワイヤーフレームは必ず作るようにしましょう!ワイヤーフレームを作るメリットWebサイトの目的に沿ったデザインを考えられる制作する前に、ページ構成の確認ができる制作するものが明確になり、制作スピードがUPするデザイナー・コーダーと制作するものに対して勘違いが起きないお客さんにワイヤーフレームを見せて確認が取れるワイヤーフレームの作り方(個人編)個人でWebサイトを制作している人も、制作に入る前にワイヤーフレームを作るようにすると、制作後の修正も少なくスムーズに制作することができます。ワイヤーフレームを作るときに、最低限押さえておきたい項目を紹介するので、参考にしてみてください。Webサイトを作る目的・ターゲットを決めるWebサイトの目的を明確にするこれからWebサイトを制作するにあたって一番大事なのが、なんのためにWebサイトを作るのか目的をハッキリさせることです。その目的を達成させるために、デザインやページの構成が決まってきます。Webサイトの目的Webサイトから問い合わせを増やしたいWebサイトを見て来店してほしいWebサイトからサービスの申し込みをしてほしいこのようにWebサイトを制作する目的を明確にしましょう!目的を明確にすると、どんなコンテンツを作ればいいのか、どんなレイアウトにすればいいのか決めやすくなります。逆に言えば、その目的を達成するために邪魔になるコンテンツは、迷わず排除することができます。Webサイトのターゲットを決める次に、これから制作するWebサイトで、どんなターゲット層にアピールしていくのかを決めます。etc.などを設定していきます。属性を細かく設定してターゲットを想定してみると、この後に決めるページ構成でも、そのターゲットにマッチしたコンテンツを考えることができます。最低でも、性別・年齢などは決めて、Webサイトに訪れるユーザーをイメージできるようにしておきましょう。ページの構成を考える上の画像のようなサイトマップを作ると、構成を一目で理解することができるのでオススメWebサイトを制作する目的・ターゲットが決まったら、次にページ構成を考えていきます。STEP:1で明確になった目的を叶えるためには、どんなページが必要なのかをじっくりと考えましょう。新着情報ブログまずは、必要だと思う情報をとりあえずなんでも書き出してから、ページ構成を考えていきます。その後、どのページに何を載せていくかを決めていきます。お店の歴史を伝えるページと外観・内観の写真は、ひとつのページで制作する。外観がとてもオシャレで、インスタ映えするなどの強みがあったら、外観だけのページを制作する。ターゲットに合わせたクーポンやサービスを載せるページを作る。(女性向け・サラリーマン向け・家族向け)このように、ひとつひとつ整理をして、ページ構成を考えていきます。目的を達成するためのレイアウトを決めるページの構成が決まったら、次にどのようなレイアウトにするかを決めていきます。以前までは、Sample1がオーソドックスなレイアウトでしたが、最近ではスマホでの観覧がメインになってきたため、Sample3がオーソドックスになってきています。情報量・ページ数が多いWebサイトはSample2のようなレイアウトが多いです。レイアウトを決めるときの注意点は、パソコンでWebサイトを見るユーザーよりも、スマートフォンでWebサイトを見るユーザーのほうが多いということ。スマホで見たときのレイアウトを先に決めてから、PCのレイアウトを考えたほうが効果的です。Clipは、様々なWebデザインをまとめたサイトです。あなたがこれから制作するWebサイトの業種や、ページ数など同じようなWebサイトは、どのようなレイアウトになっているのか研究してみてください。ワイヤーフレームを作る僕が実際に昔作ったワイヤーフレームです。しょぼい(笑)ここまで準備して、やっとワイヤーフレームを作り始めることができます。Webサイトの目的を達成するために、どのようにコンテンツを配置していくのかを決めていきます。Webサイトの目的が、お問い合わせの場合は、お問い合わせフォームに飛ぶボタンは、常にユーザーに見せておきたいですよね!飲食店などで来店してほしい場合は、アクセスマップページへのリンクがわかりやすい必要があります。アクセスマップページでは、ターゲットに合わせてコンテンツを配置する必要があります。ターゲットの年齢層が高い場合は、Googlマップを載せているだけでは操作が難しいかもしれません。いう場合は、Googleマップをただ載せておくだけではなく、イラストで描いた地図などを載せたほうが効果的です。このように、ターゲットをイメージして、使いやすいさを考えながらワイヤーフレームを作っていきます。ストーリーを考えるとコンテンツが作りやすくなる!ストーリーというのは、どのコンテンツを順番に見せれば、ユーザーがWebサイトの目的に達するかを考えることです。飲食店を例に上げると、TOP(良さそうなお店だな)→アクセスマップ(自分のいるところから近いか確認)→料理の写真(どんな料理があるか確認)→店内の雰囲気(大人数・または女性がいても楽しめるかを確認)→店舗情報(予約はすぐ取れれるか電話)→アクセスマップ→来店!僕の想像でストーリーを作ってみましたが、実際こんな感じで来店する人は多いのではないでしょうか?このストーリーの流れを壊さないように、コンテンツの配置を考えていけば、ユーザーがスムーズにWebサイトを見ることができます。ワイヤーフレームの作り方(Webディレクター編)Webディレクターの場合は、デザイナー、コーダーと打ち合わせをするときに、ワイヤーフレームを使いながら説明をするので、ワイヤーフレームがとても重要になってきます。お客さんにヒアリングWebディレクターの場合は、まずお客さんのヒアリングから始まります。お客さんが、なんでWebサイトを作りたいのかをしっかりとヒアリングしましょう!そして、その目的をかなえるためのページ構成などを提案していきます。その際、過去の事例を載せたコンテンツを作りたいとこちらが言っても、お客さんがその情報を持っていなかったら、コンテンツを作るのが難しい場合もあります。その場合は、これから情報を集めてもらい、後々その情報を入れられるように制作するのか、または、そのコンテンツをあきらめて、違うコンテンツを作るのかはWebディレクターの判断になります。どのパターンでも対応できるように、お客さんと会う前にから様々なパターンを考えておきましょう。お客さんに聞いた情報を整理お客さんに情報をもらったら、その情報を整理していきます。サイトの目的ロゴのデザインサイトカラーターゲットページ構成SNSの状況など、わかりやすくまとめます。リニューアル案件などは、過去のデータ、ブログなど引き継ぐところはどうするのかを明確にしておきましょう。レイアウトを決めるどんなレイアウトにすれば、Webサイトの目的が達成できるのかを考えて、レイアウトを決めていきます。Webディレクターは、なんでそのレイアウトにしたのかを、論理的にわかりやすくお客さんに説明できなければいけません。専門用語を連発して話す人がいますが、それだと伝わらないし、胡散臭く見えて信用もされません。相手がWebの知識がないことを前提に、わかりやすく話をするようにしましょう。お客さんが納得できる説明ができない場合は、カッコイイ(カワイイ)デザインがいい!という理由だけで、変なレイアウトに決まってしまうことも...。なんとしてでも、それは阻止したいですよね。ワイヤーフレームを作る(7割ぐらいの完成度)ここまで準備ができたら、ワイヤーフレームを作り始めます。Webディレクターが作るワイヤーフレームは、デザイナー、コーダー、お客さんも確認する資料になるので、誰が見てもわかるようにわかりやすく作ることを心掛けましょう。この段階で作るワイヤーフレームは、7割程の完成度にしておきます。いうのも、この後デザイナー・コーダーとの打ち合わせを入れるので、そこでデザイナー・コーダーの意見を取り入れて、ワイヤーフレームを完成させます。STEP5:ワイヤーフレームを完成させる(デザイナー・コーダーと打ち合わせ)ワイヤーフレームが7割ぐらいできたら、デザイナー・コーダーと打ち合わせをします。その打ち合わせで、今回制作するWebサイトのコンセプトやページ構成などを説明します。その際にデザイナー・コーダーそれぞれの目線で、意見を出してもらいワイヤーフレームを完成させていきます。ここでしっかりと意見を言い合って、今回制作するWebサイトの理解度をみんなで共有し高めます。することで、実際にデザイン作業・コーディング作業に入った後も、考えが共有されているので、出来上がった制作物が大きくズレることはありません。お客さんに確認してもらうワイヤーフレームが完成したら、必ずお客さんにも確認してもらうようにしましょう。することで、お客さんとこれから制作するWebサイトの完成イメージが共有することができます。ここでOKをもらっておけば、今後これを覆すような大きな変更が入る可能性が低くなります。ワイヤーフレームを見せた時点で、大きな変更が入っても、まだ余裕で引き返すことができます。ワイヤーフレームが簡単に作れるWebサービス僕は基本的にワイヤーフレームは、Webサービスを使って作ります。手書きでワイヤーフレームも作ったりするのですが、考えを整理するためだったり、メモとして使うだけです。ちなみに僕が使っているWebサービスはCacoo(カクー)です。有名なので使った人も多いですかね!?ワイヤーフレーム以外もマインドマップなども作れちゃうので、いろいろな用途で使うことができます。使ったことない人は、ぜひ使ってみてください♪まとめワイヤーフレームを作り終わるまでが、Web制作の最初のハードルになります。ワイヤーフレームを作ることによって、制作が進んだあとの大きな修正を回避することができます。コメントをキャンセルメールアドレスが公開されることはありません。USTaichiWebの仕事をいろいろしてる人バーテンダー→Web制作会社→Webコンサルティング会社→現在とある中小企業のWeb担当です。制作会社では主に様々な企業の新規サイト制作、サイトリニューアルなど、1000件以上の案件に関わりました。その後、成果が出るWebサイト運営を学ぶために、Webコンサルティング会社へ転職。そこで学んだことを生かすために、現在とある企業のWeb担当者をしています。地元千葉が大好きなので、地元の活性化につながるような仕事を今後はしていきたいと思っています。企業のWeb担当者Webサイトを分析し、戦略を練るのが好物です。