世の溢れているWebサイトはどれもがwebデザイナーによって作られています。良質な Webサイトを作る上で、重要なポイントは『デザイン』です。デザインの良し悪しによって、サイトの使いやすさや見た目の美しさ、そしてWebサイトから得られる成果は大きく変わります。このサイトオシャレ！カッコいい！って理由で自分もこんなサイト作ってみたい思いどうやったらこんなサイト作れるようになるの？って調べ出したらWebデザインというワードをそこで発見する人もいると思います。そこでWebデザイナーの方はどのような仕事をしているのかイメージが付くように Webデザイナーについてご紹介いたします。
Webデザイナーとは
webデザイナーは、個人やクライアントに依頼された Webサイトのデザイン制作をする職業のことです。（＊クライアントとは_広告代理店に広告を依頼した人。広告主。）クライアントと話し合い、 Webサイトをどのような方向性にしていくのかコンセプトを決め、 Webサイトの構成はもちろん、配色やロゴ、フォント、アイコンの配置といった細部まで目的を踏まえたデザインを行なっていきます。 Webデザイン以外にも企画設計やコーディングなどと多岐に渡り、さまざまなスキルが必要とされます。
Contents
Webデザイナーの仕事内容
Webデザイナーは、「 Webクリエイター」「ホームページデザイナー」と呼ばれることもあります。 Webデザイナーの主な仕事内容は、企業や個人などのクライアントを担当・制作するというものです。クライアントが思い描いている Webサイトを制作できるように全体の構成を考え、使い勝手がよく魅力が伝わるようなデザインを制作します。フリーランスの Webデザイナーの場合は、案件を獲得する営業活動から企画まで携わる場合もあります。デザインを行う前には、クライアントの「ヒアリング」、競合サイトの「調査・分析」、コンセプトを決める「サイト設計」、そしてコンテンツを決める「画面情報設計」を行います。クライアントの課題解決につながる企画と情報設計でなけらば、いくら美しいデザインを施しても効果がなく、ここが極めて重要な行程と言えます。
1.企画
まずはサイトを作る目的を明確にします。目的に沿った Webデザインを作成するためにも必ずクライアントの目的を確認しましょう。クライアントとの打ち合わせ時に、要望・条件・方向性・コンセプトなども決定します。クライアントとのヒアリングから Webサイトの目的を明確化することで、デザインやインターフェースなどの全体像を決定します。
2. Webサイトの構成とレイアウトを決める。
クライアントとの打ち合わせが終わったら、サイトマップと Webデザインの元となるワイヤーフレームを作成します。クライアントから依頼された内容に沿って、ホームページを設計して行う作業です。サイト全体のページ階層が把握できるものをサイトマップと言い、ページのどこに何を掲載するのかをレイアウトして表した設計図のことをワイヤーフレームと言います。この行程で、ホームページと下層デザインの大まかな掲載内容が図としてわかるようになります。この時、クライアントから掲載する画像やテキストも用意してもらうのが一般的ですが、写真がうまく撮れない、文章が用意できないといるクライアントの場合は、カメラマンやライターに制作を代行してもらうこともあります。
制作する Webサイトの大まかなレイアウトを決めます。基本的な構成や全体のボリュームなどを考慮し、キーとなるビジュアルや Webサイトの全体のイメージを決定します。ブランディングや、見た目の美しさを考慮することも大切ですが、 Webデザインの場合は、操作性も欠かせません。 Webサイトの画面はUI（ユーザーインターフェース）と呼び、操作性を考慮して設計をするので、UIに関する知識も求められます。（そのため、 Web以外にもアプリを含めた操作性の高いデザインを追求するデザイナーの場合は、 Webデザイナーという肩書きとともに「UIデザイナー」と名乗る方もいます。
4. Webサイトのデザインを作る。
Webサイトデザイナーが行うことは、 Webサイトの色合いや装飾決めです。「Illustrator」や「Photoshop」などのグラフィックソフトを用いて Webサイトの配色やロゴ・アイコンの配色などを決めます。 Webデザインは時代によってトレンドが変わりますが、常にサイトを作る目的・ブランドのイメージを忘れず、機能性・デザイン全体の統一感を意識して制作することが重要です。デザイン全体に統一感を持たせるためには、各ページごとに共通したコンテンツの配置・配色・画像の大きさ・フォントなどを使用するといいでしょう。なお、スマートフォン・タブレットだどの複数の異なる画面サイズの端末にも対応させる場合は、パソコンでなく他のモバイル端末から見たデザインも必要になります。そのためにはパソコンサイトとモバイルサイトで完全に別個のページのレイアウトのサイトをデザインする場合もありますが、近年では閲覧するデバイスの画面サイズに応じて自動的に表示が切り替わる「レスポンシブデザイン」が主流になっています。 Webデザインとは言っても、パソコンで表示することだけを考えるのではなく、どの端末からでも見やすいデザインを作ることを心がけましょう。
最終的には、デザインカンプと呼ばれる Webページのデザインデータを作成します。基本的に、ここまでの作業は Webプロデューサーや Webディレクター、クライアントと相談を重ねながら進めることが一般的です。
テキスト・画像などのコンテンツを配置してデザインができあがったら、クライアントがデザインをチェックします。完成イメージを視覚的に表示して、全体のデザインをコーディング前に確認するために使われます。ワイヤーフレームの段階では伝わらなかった、サイト全体のデザインの仕様や色味・雰囲気などが伝えやすくなります。またこの段階でデザインの修正や課題の洗い出しなども行います。
5. Webサイトのコーディングを行う。
デザイン修正が完了し、Webサイトの大まかなレイアウトにクライアントの合意が得られた後コーディング作業に入っていきます。コーディングとは、プログラミング言語を使ってプログラムを組み立てることを言います。
デザイナーがPhotoshopで作成したページデザインのPSDファイルをもとに、 Webブラウザで閲覧できるように、Webサイトを構成する言語であるHTML&CSS、JavaScriptなどを使用してコーディングを行います。リンクをクリックすると別のページに跳ぶことができるのもコーディング作業がなくては成り立ちません。コーディングを行うことによって、デザイナーが作成したデザインが、「 Google Chrome」や「Internet Explorer」、「Safari」などのウェブブラウザで実際に閲覧できるようになります。
HTMLは文章や画像といった要素を表示し、CSSは配置、フォント、文字サイズ、色などを指定し、JavaScriptで動きを表現します。ユーザーの使いやすさや見た目の美しさも意識しつつ、事前に決めた大まかなレイアウトに沿ってロゴやアイコンなどのデザインを行います。最終的なデザインの調整はピクセルと呼ばれるデータの最小単位で行われるため、 Webデザイナーには集中力と根気が不可欠です。パソコンと向き合う時間が長いと思われがちな Webデザイナーですが、クライアントとのミーティングなど、人と接する機会も多くなります。 Webサイトに対するクライアントの要望をしっかりとヒアリングする必要があるため、 Webデザイナーはデザインに加えてコミュニケーション能力も問われる仕事と言えます。
6. Webサイトのプログラミングを行う。（バックエンドエンジニア）
コーディングの後は、更新しやすいシステムなどを構築する「プログラミング」を行います。 Webサイトの見た目が完成すると、次はバックエンドエンジニアが、 Webサイトの目に見えない裏側のシステムを作ります。ここでは、メールの送受信やクレジット決済などの「機能」をサイトに掲載します。
この行程では一文字でも記述を誤ると正しく表示されないため、緻密な作業を行うことが必要です。jQueryと言うJavaScriptなどを使用して動きをつけたり、プログラム完成後に正しく機能しているかの作業検証（デバック）などを行います。そして最終確認を行い、 本番用のサーバーへファイルを移し、ようやくWebデザインが完成し公開できます。
まとめ
この一連の作業は、 Webデザイナーが1人で全てを行うこともあれば、他の職種の人と協力して行うこともあります。「 Webデザイン」とはいってもレイアウトやイメージをデザインソフトを使って形にするだけではありません。いろいろな行程に関わりながら初めて Webデザインは Webデザインサイトとして機能することができます。デザイン力を身につけることはもちろん重要なことですが、これからはコーディングもデザインもできる人材が求められます。スキルを上げて、デザインもコーディングもできる Webデザイナーを目指しましょう！
