前回までに「webデザインの基礎」や「webデザインのヒアリング」といった基本知識を解説してきました。ここからはwebデザインが完成するまでの手順・流れを学んでいきましょう。ヒアリング終了後は貴方のwebデザイナーとしての腕の見せ所となるのでしっかりと実力をアピールしていきましょう。
準備.ヒアリングで得た情報を整理する
いきなりデザインを始めるのではなく、まずは落ち着いて「ヒアリングで得た情報」をまとめましょう。
クライアントがどのようなwebデザインやサイトデザインを求めているのか、しっかりと把握するのが最初の作業です。
情報の整理を行う際は、特に以下の情報に注目してみてください。
・webデザインを依頼してきた目的
・ターゲット(性別・年代・職業など)
・webデザインを行う際に掲載しなければいけない内容・項目
・クライアントの事業内容とアピールポイント
・サイト内で使用する画像の提供の有無
・サイト全体の仕様
・スケジュール
手順1.デザインするサイト・ページの方向性の決定
ヒアリングで得た情報からデザインするサイト・ページの「方向性」を決めていきます。
ターゲットの属性によって、興味を持ってもらえるデザインは全く異なりますよね。
どうすれば、ターゲットの良い印象を与えられるかを考えていきます。
手順2.サイトの構造の決定
手順1で方向が決まった後は「サイトの構造」の確認・決定をしましょう。
トップページから始まってどんな内容を詰め込んでいくのか、段階的に決めていきます。
サイトの構造を予め決めておいた方が後々楽になるというのがwebデザインの常識でもあります。
サイトの構造をツリー状にすると視覚的に理解しやすくなるのでおすすめです。
手順3.ワイヤーフレームの決定
サイトの構造が決まると自然と「この内容はここに置こう」「こっちの方が見栄えがいいな」とサイト・ページの大まかな枠組みが見えてきますよね。
この大まかな枠組みの事を「ワイヤーフレーム」と呼びます。
細かなデザインではなく、まずは優先順位に基づいたコンテンツの配置を決めていきましょう。
ここまで来ると、webデザインをしているといった実感がわいてくるのではないでしょうか？
手順4.デザインカンプ
次の手順は、完成した時の事を考慮しながら全体カラーや使用する文字のサイズ・フォント、画像の選定を行っていきます。
テキストや画像を挿入する事になるので「伝えたい事がしっかりと伝わっているかどうか」を確認しましょう。
画像選びに迷った時は、当サイトの無料で使用できるwebグラフィックを活用してみるのもおすすめです。
手順5.テスト
制作したサイトが想定通りに動くかどうか「テスト」を行います。
ただ単にテストと呼ぶ場合もあれば、「プロトタイプテスト」と呼ぶ事もあります。
開発者目線ではなく、ユーザー目線になってサイトの使い勝手の良さや視認性の良さを確認していきましょう。
テストは一度だけではなく、何度も繰り返してブラッシュアップを行います。
ここまでがwebデザイナーのお仕事となります。
手順6.コーディング
最後にhtmlやCSSといった言語を使用してソースコードを記述する「コーディング」に移ります。
こちらは、webデザイナーではなく、コーダーと呼ばれる専門の担当者が行います。
コーディングで問題がなければ、無事完成です。
まとめ
今回は、ザッとですがwebデザインの完成までの手順・流れを解説しました。
細かな工程は、依頼や会社によって異なりますが、大まかな流れはイメージできたのではないでしょうか？
本番でパニックにならないように、ヒアリングと一緒にデザイン完成までの流れをイメージトレーニングしてみてはいかがでしょうか？