Webデザイン

Webデザイナーの主な仕事としてデザインカンプの作成があります。デザインカンプとはPhotoshopやIllustratorなどで作成したWebサイトの完成イメージのことです。今回はクライアントから支給された原稿からデザインカンプを作成するまでの手順を紹介します。かなり我流な部分もあるので参考材料のひとつとして読んでもらえると嬉しいです。 情報を整理して優先順位を付ける クライアントから提供される原稿のフォーマットは千差万別です。きちんと整理された原稿もあれば箇条書き程度の原稿もあります。ひどい場合だと商品やサービスのチラシを送ってきて「ここから情報を拾ってくれ」なんてこともあります。 この状態からデザインカンプの作成に取り掛かってしまうと混乱してしまうので、まずはクライアントから支給された原稿や画像を整理し、必要な情報を判断して優先順位を付けていきます。 情報を整理する際のコツは「見出し」を意識することです。どんなにこったデザインのWebサイトでもHTMLは見出し、本文、見出し、本文の繰り返しになっています。まずは必要な見出しをピックアップし、この情報はどの見出しのコンテンツかを整理していきましょう。HTMLの知識がある場合は、ここはh2タグ、ここはh3タグなど意識するとやりやすいです。 情報整理に使用するツールは何でもいいですが、僕はIllustratorかXDを使うことが多いです。Illustratorで真っ新なアートボードを作成し、原稿内のテキストを片っ端からコピペしていきます。見出しを意識し、同じ見出しに属する内容を一塊に配置していきます。もし重複した情報があれば削除しますし、分かりにくい情報があればクライアントに確認します。 この作業中はデザインについては全く考えないようにしています。ただし、見出しのフォントサイズは24px、本文のフォントサイズは16pxと決めて、見出しと本文の区別が付くようにはしています。 ワイヤーフレームを作成する 整理した情報を元にWebサイトのワイヤーフレームを作成します。ワイヤーフレームとはWebサイトの設計図みたいなもので、テキストや画像のレイアウトや内容を確認するために作成します。 僕はIllustratorで情報整理してそのままワイヤーフレームを作成することが多いですが、XDやPowerPointで作成してもOKです。基本的には色を使わずグレースケールで作成しています。デザインのことはいったん忘れて、どのように情報や画像をレイアウトしたら分かりやすいかに集中します。 ワイヤーフレームを作成したらクライアントに情報の伝え方やレイアウトに問題ないか確認してもらいます。本来なら確認してもらったワイヤーフレームを元にデザインカンプを作成するので、デザインカンプ完成後に内容の変更や修正は無いはずですが実際はそうもいきません。デザインカンプを見てからドンドン修正が来ることもあります。 普段からWebデザインをしている僕たちのような人種はワイヤーフレームから何となくデザインのイメージが浮かびますが、Webデザインに全く触れたことがない人はワイヤーフレームからデザインをイメージするのが難しいみたいです。なのでWebサイトの完成形に近いデザインカンプを見たときに修正がくるのだと思います。 実際のところ僕はワイヤーフレームをクライアントに見せずにデザインカンプを作成することもあります。ワイヤーフレームの修正のやり取りをするより、Webサイトの完成形に近いデザインカンプを見せて修正のやり取りをした方が結果的に早いことも多いからです。 ただし、クライアントにワイヤーフレームを見せない場合も、自分の中で情報を整理するために必ずワイヤーフレームは作成するようにしています。 デザインの方向性を決める 僕の場合はワイヤーフレームを作成した後にデザインについて考え始めます。 クライアントとデザインの方向性を共有するためにヒアリングは大切です。どんなデザインがいいのか、どんな色を使いたいか、参考にしているWebサイトはあるかなど、デザインについて出来る限りのことを聞きましょう。クライアントとの間にディレクターが入っている場合は、ディレクターに徹底的にヒアリングします。 クライアントやディレクターのヒアリングを元に、デザインの全体的な雰囲気やメインカラーなどの方向性を決めていきます。クライアントとのヒアリングや、もらった原稿や画像からデザインのイメージが浮かぶ場合もありますが、あまりイメージが浮かばない場合はWebデザインのギャラリーサイトを見てイメージを膨らませます。 MUUUUU.ORGSANKOU!81-web.com すんなりデザインが出来そうな時でも、あえてギャラリーサイトをチェックする場合もあります。自分のアイデアだけだと、どうしても似たり寄ったりのデザインになりがちです。たまにギャラリーサイトを見て新しいアイデアを取り入れることで、デザインについての知識をアップデートするようにしています。 デザインカンプを作成する デザインの方向性が定まったらIllustratorやPhotoshopでデザインカンプを作成していきます。デザインカンプを作成する上で心がけていることは「ワイヤーフレームにとらわれない」ということです。 デザインカンプを作るためにワイヤーフレームを作ったのに矛盾していますよね？もちろんワイヤーフレーム内の文章や画像を変更してはいけません。ただし、ワイヤーフレームのレイアウトはどんどんアレンジするべきだと思っています。 ワイヤーフレームに忠実にデザインカンプを作ると「ワイヤーフレーム通りだね」と言われる時があります。きっとクライアントやディレクターはワイヤーフレーム以上のものを期待しているんです。ワイヤーフレームの内容をどうやって魅力的に見せるかがWebデザイナーの腕の見せ所だと思っています。「このワイヤーフレームからよくこんなデザインが出来たね」なんて言われたら嬉しいですね。 ただし、ワイヤーフレームに忠実にデザインカンプを作らないといけない案件もあるので注意してください。 デザインカンプをクライアントに提出 デザインカンプが完成したらクライアントに確認してもらいます。クライアントから修正指示があった場合は、デザインカンプを修正して再度確認してもらいます。こやって最終的なデザインを決定していきます。 デザインについてのヒアリングがきちんと出来ていれば大きな修正はないと思いますが、たまにクライアントの気が変わって全く違うデザインにしたいなどの要望があります。このような場合は当初のヒアリング内容と大きく異なるため、追加料金をいただいてデザインカンプをもう一案作成することもあります。デザインについてのヒアリングを曖昧にしておくと、このような場合に「最初のお話と違いませんか？」と言えなくなってしまうので要注意です。 Webサイトのデザインカンプ作成のまとめ 僕がいつもやっているデザインカンプ作成の流れを紹介させてもらいました。デザインカンプ作成で大切にしていることは情報整理とヒアリングです。 Webデザイナーは単にWebサイトの見た目をデザインするだけではなく、与えられた情報を整理してサイトに訪れた人に分かりやすく伝えるのも重要な仕事だと思っています。情報がちゃんと整理されていないデザインは、見た目はキレイでも内容が分かりにくくなってしまいます。 また、クライアントへのデザインについてのヒアリングも大切です。どんな雰囲気のサイトにしたいのか、どんな色を使いたいのか、どのように商品の魅力を伝えたいのかなど、できる限りの情報を聞き出した方がいいと思います。ヒアリングを疎かにしてしまうと、いざデザインカンプを見せた際に「全くイメージと違います」と言われてしまう可能性もあります。そうならないためにもデザインカンプを作成する前に、きちんとヒアリングを行いましょう。 以上、Webサイトのデザインカンプを作るまでの流れの紹介でした。