Webデザインの製作工程をざっくり理解しておこう
Webデザイナーの仕事は、（クライアントなどから）依頼されたWebサイトのデザインをすることが中心となります。
小規模の会社などの場合は、デザイン以外にも様々な工程に関与するケースもあるでしょう。
そのため具体的にどのようなプロセスでWebサイトが制作されていくのか、そのプロセスを知っておくのは大切なこととなります。
まずはWebデザインの製作工程をざっくり理解しておきましょう。
具体的には以下の流れでWebサイトは制作されていきます。
企画
↓
設計
↓
デザイン
↓
実装
それぞれの工程を簡単に解説していきましょう。
【目次】
企画
Webデザインに取り掛かる際の最初の工程が企画になります。
企画をするにあたっては、Webサイトの目的をしっかりと把握することが重要になります。
クライアントなど作業依頼者としっかり打ち合わせをして、目的、コンセプト、ターゲット層などを明確化します。
ヒアリングする際には、より具体的な要望を引き出した方が良いでしょう。
例えば「バイク好きが見に来るようなサイトを作りたい」というよりは「バイクの美しさを強調したい、キレイな写真などを大きく使って、視覚的に訴えるサイトに仕上げたい」のほうが良いです。
具体的な要望を聞き出すことで、どこに気をつけながらデザインすればよいかが明確となります。
逆に言えば最初に要望のズレが生じてしまうと、修正などで後の作業に大きな支障が出てしまう可能性があります。
修正、訂正などを繰り返さない為にも、しっかりと依頼者の要望は把握しておきましょう。
ヒアリングした内容を基にデザインやインターフェイスなどの全体像を決定していきます。
設計
設計の段階に入ったら、まずは企画を基に必要となる情報を書き出しましょう。
一例をあげましょう。
とあるお寿司屋さんのWebサイトの情報を書き出してみました。
- トップページ
- お店の特徴
- お店からのお知らせ
- メニュー
- Q＆A
- お問い合わせ
- アクセス
これは一例となります。
まずはどのようなページにどのような情報を表示させるべきかをざっくりと考えましょう。
情報の洗い出しが終わったら、次はワイヤーフレームの作成となります。
ワイヤーフレームとは上記画像のようなものです。
具体的には画像やテキストをどのように配置するのかを決める作業のことです。
ワイヤーフレームをIllustratorやPhotoshopを使用して作成する人もいますが、もちろん手書きでも構いません。
デザイン
ワイヤーフレームを基にデザインする実作業は、デザインツールソフト（IllustratorやPhotoshop）を使用することになります。
クライアントなど作業依頼者の意向に沿ったデザインにすることが最重要となります。もちろん機能性やデザインの統一感を意識することも必要です。
またパソコンのみならず、スマートフォンなど他のデバイスから見たデザインも必要となります。
現在ではデバイスの画面サイズに応じて、自動的に表示が切り替わる「レスポンシブウェブデザイン」が主流となっています。
レスポンシブウェブデザインは、Googleなど検索エンジンから推奨されているデザインですので、SEO効果も期待できます。
可能であればレスポンシブウェブデザインでデザインするようにしましょう。
最新のWebデザイントレンドを把握するために、Webデザインの参考サイトまとめを見ておくのも良いでしょう。
実装
デザイン案が固まったら、コーディング作業に入ります。
コーディングとは、HTMLやCSS、JavaScriptなどコンピュータにわかる言葉で指示をや命令をすることです。
ページデザインのPSDファイルなどを基にブラウザで閲覧できるようにコーディングしていきます。
デザイナーとコーダー（コーディングを専門に行う人）が分かれている場合、ここで作業はコーダーにバトンタッチということになります。
プログラムなどが正しく機能しているかどうかの作業検証（デバック）などを行った後、本番用のサーバーへファイルを移しウェブサイトが公開となります。
まとめ
Webデザインの作業工程について解説しました。
ここであげた工程はあくまで一例となりますが、多くのWebデザイナーが似た工程で作業を進めているはずです。
Webデザインが色んな工程を経て、様々な部署と関わりあいながら、完成するということが分かって頂けたかと思います。
レイアウトやイメージをデザインするだけがWebデザイナーの仕事ではありません。
交渉力や提案する力なども磨いていきましょう。
