Webサイト制作の流れ【Webデザイナーを目指す方必見！】

今回はWebデザイナーがWebサイトを制作していく流れについて紹介していきます。

Webデザイナーという仕事に興味はあるけど具体的にどんな仕事をしているのか気になるという方。

またはWebデザイナーを目指す方も全体のイメージが持てるよう参考になればと思います。

Webデザイナーの仕事の流れを把握することで必要な知識やスキルが分かるので、Webデザイナーを目指し勉強していくためにも理解の助けになる記事です。

また無駄な勉強を避けることができ、効率よくWebデザイナーを目指すための参考になる情報になります。

では早速Webサイト制作の流れを見ていきましょう。

企画

当たり前ですが、Webサイトを制作するにあたって企画は必ず必要です。

そして企画を考える上で必要なことは「Webサイトを作る目的」と「ターゲットユーザー」の選定です。

Webサイトを作る目的

これはWebサイト制作の流れの中で最も大事な工程と言えます。

Webサイトは作ることが目的ではなく、Webサイトを作って何かを実現させたいというのが本来の目的です。

これがブレていてはいくらデザインがかっこいいWebサイトを作ったとしても誰も必要としないものになってしまうでしょう。

そのため企画段階でクライアントとWebサイトを作る目的を共有し、その上でクライアントの目的・ゴールに沿った企画・設計をしなければならないのです。

またWebデザイナーにとってお客様は Web制作を依頼するクライアントですが、クライアントの目的を達成するため・クライアントのその先にはWebサイトへ訪問するユーザーの存在がいます。

Webデザイナーはクライアントを満足させることは勿論、常に受け手であるユーザーを意識したサイト設計をするスキルが求められています。

個人用に制作するポートフォリオサイトであればデザインやフォントなど自由に設計できるとはいえ、それでも常にユーザーの立場に立って考えられるスキルがWebデザイナーには必要なのです。

ターゲットユーザー

Webサイトは世界中の人がアクセスできるものですが、それでもサイトのコンセプトやデザインを設計していくにあたってターゲットユーザーを設定することで制作をスムーズに行うことができるようになります。

ターゲットを詳細にすることで、Webサイトの全体のデザインから使用するカラー・フォントに至る細かいデザインまで何が最善か考える指針となります。

そこで、例えばオーガニック化粧品メーカーのWebサイトでターゲットを設定するとしたらどうなるでしょうか。

• ユーザーの大半は女性
• 年代は２０〜４０代向け
• オーガニックなど自然由来の成分を使用した商品を求めるユーザー
• 少々市販の化粧品より高くても自分の肌に合った商品を求めている
• 化粧品だけでなく、化粧品の詳細な説明や肌に関する悩みを解決する情報も必要としている

この５つの項目から、例えばカラーであればコントラストの強いギラギラしたものよりも落ち着いた自然を感じさせるようなカラーをベースにしたり、フォントも無機質なものより柔らかさやお洒落なものを選ぶなどサイトデザインのイメージが膨らみます。

また化粧品のページだけでなく、商品を使用してみたユーザーの声、お肌をケアする有益な情報などがコンテンツとして別のページを作るべきかなど検討できるので次に進むサイトマップ制作がスムーズになります。

これはあくまで僕が簡単に考えた事例なので、実際の取扱商品やその企業のコンセプトによってもっと詳細に考える必要があります。

Webサイト制作で「企画」が8割以上を占めるほど大事なものだと考えます。

家を建てる時に土台や全体を支える柱がしっかりしていないと全てが不安定なものになってしまうのと同じようなものです。

クライアントと企画をきちんと進めることが後工程でスムーズに進め結果的に効率の良いWebサイト制作に繋がるので疎かにしないようにしましょう。

サイト設計

企画で「Webサイトを作る目的」と「ターゲットユーザー」が決まったところで、これらをサイト設計に落とし込んでいきましょう。

サイトに必要な情報のリストアップ

まずはサイトに必要なページを全てリストアップしていきましょう。

ここでは出し惜しみせずできる限り漏れなくリストアップします。

次にリストアップしたものをより詳細な内容を考えていきます。

ただし膨大な情報が散乱しているサイトはユーザーが本当に必要とする情報へ辿り着けなくなることに繋がります。

本当に必要な情報は何か、情報が重複しているものや関連付けできるものはないか考え取捨選択する必要があります。

イメージとしては一旦風呂敷を広げて包みたいものだけ決めて折り畳むようなものです。

サイトマップ制作

サイトマップとは1つのWebサイトにあるページの一覧を構造化した設計図のことです。

サイトの骨格となる部分のことでページの階層などをサイトマップに落とし込んでいく作業になります。

商品ページでも商品詳細ページや商品一覧ページ、新着商品のページなど様々な種類があるため、ページの階層やカテゴリー分類をここで明確にしておきます。

ワイヤーフレーム制作

ワイヤーフレームとは各ページの設計図のようなものです。

Webサイトは基本的に複数ページ制作するものなのですべてのワイヤーフレームを設計しましょう。 

トップページや各コンテンツページ、お問い合わせフォームなどの目的によって必要な情報は異なります。

お問い合わせフォームであればフォームのデザインから送信ボタンなど必要となる情報をできる限りワイヤーフレームに落とし込んでおくべきです。

なぜなら後でデザイン設計をする際に情報の漏れがあったりするとデザインを設計し直したりコーディングの実装方法が異なるので余計に時間がかかることになるからです。

また現在のWebサイトはレスポンシブ対応（PC・タブレット・スマホのどの端末でも最適な表示になるよう一つのコードで設計すること）をすることが求められています。

各ページPC用とモバイル用のデザインでワイヤーフレーム設計することは必須の作業になります。

ワイヤーフレームを設計するデザインツールはいくつかありますが、最初は手書きで簡単にでもアウトプットしていくと良いでしょう。

ワイヤーフレームをデザインツールで制作するときはなるべく画像やアイコン、ボタンなどの配置を決定しておくと後でデザイン設計する際に悩まずに進めることができます。ヘッダーやフッターなども含めてページ全体の構成が理解できる設計をしましょう。

ワイヤーフレーム制作はデザイナーや案件によって異なります。

デザイナーによっては丁寧にワイヤーフレームを設計せず手書きで十分だと考える人もいますし、一方手書きせずそのままワイヤーフレームをツールでデザインする人もいます。

また案件によってはサイトマップとワイヤーフレームを確認してもらう作業が必要な場合がありますのでその時は手書きではなくデザインツールで把握しやすい設計が求められます。

デザインカンプ制作

 Photoshopなどで実際にWebサイトの見た目となるデザインを作り込んでいく段階になります。

用途や使い方によってillustratorやsketchなどのツールを利用する場合もあります。基本的にWebデザイナーはPhotoshopでデザインカンプを制作したり商品広告のバナーを制作したりしますので必須のスキルとなります。

未経験でWebデザイナーを目指す方はまずPhotoshopの勉強から始めると良いでしょう。

デザインカンプもワイヤーフレームを設計した時と同様にレスポンシブ対応で分けて制作する必要があります。

HTML/CSSコーディング

次にphotoshopなど制作したデザインカンプを元にコードを書いてWebサイトに表示するよう実装する最終段階になります。

HTMLとはHyper Text Markup Languageの略で簡単に説明すると普段使っている文章をコンピュータが理解できるような文章の構造にすることでWebサイトに文字や画像を表示することができる言語のことです。

CSSとはCascading Stylesheetの略で、これはHTMLで記述されたコードにデザインを加えることで普段僕たちが閲覧するようなサイトのデザインに表示できるようにするものです。

JavaScriptやjQueryでサイトにアニメーションや動きをつける

HTML/CSSコーディングに付加価値をつける作業の段階です。HTML/CSSだけで制作した静的なWebサイトでは味気ない印象を与えてしまいます。

そこでJavaScriptやjQueryが必要になります。

JavaScriptはWebページに複雑な動きを加えることができるプラグラミング言語のことです。

jQueryはJavaScriptをより便利に使えるようにしたライブラリのことで簡単にハンバーガーメニューやスライドショーなどのリッチな動きを表現することができます。

最近はCSSアニメーションなど新たな設定も実現したことで簡単にCSSでサイトに動きをつけることができるようになりました。

とはいえ、まだまだJavaScriptや jQueryの実装でしか対応できないアニメーションがあるのも事実です。

WebデザイナーとしてはJQueryが使えるだけで基本的なサイト制作は行うことができますが、自分により付加価値をつけるためにはJavaScriptのスキルを身に付けることが重要です。

最後に

いかがでしたでしょうか？WebデザイナーがWebサイトを制作する上での流れについてイメージが掴めたのではないでしょうか。

Webデザイナーはデザインに限らず、企画設計やコーディングなど幅広いスキルが求められています。

基本的にどのWebサイト制作でも流れは大きく変わりません。

全体を把握して自分に足りないスキルを確認してWebデザイナーを目指すために取り組んでいきましょう。