前回のミッション「Webデザイナー未経験者にとって最低限必要なスキルや知識を知ろう！」
Webサイトを作るために必要なツールを揃えて、いざWebサイトを作成してみよう！と思ってもまず何から初めていいか分からない…と悩む方もいますよね。今回は簡単にですが、私がWebサイトを作る時の流れを紹介します！
1.何のためのサイトか、誰に向けたサイトなのか考える
誰に向けてのサイトなのか、このサイトを作る目的は何なのかをまず考えます。自分のための自分の趣味を紹介するサイトも良いのですが、Webデザイナーとして仕事をしていきていきたなら、仮想のクライアントを立ててサイトを作った方が練習になります。
何故なら、Webデザイナーの仕事はWebサイトの制作を依頼するクライアントがいて成り立つ仕事だからです。
仮にパン屋のオーナーがあなたのクライアントだとします。そのオーナーにはサイトを作りたい何かしらの目的があるはずです。例えば、サイトを作ってお店を宣伝したい、サイトを見てお店に足を運ぶ人が増えて欲しいなど。
そして、来てもらいたいと思う人＝いわゆるターゲットとするユーザーの年齢層や性別なども大切になります。男女や年齢によって、好む色が変わってくるのでそれらをサイトの配色やデザインに活かすためです。
ここで大事なのは、あなたが好きなデザインや色ではなく、ターゲットとしたユーザー層が好むデザインや色を意識したサイトを考えて作ることです。
２.必要なページや内容を考える
ターゲットユーザーが決まったら、目的に合わせてどういうメニューやコンテンツが必要なのかを整理します。お店の宣伝や実際の店舗に来て貰うことが目的であるなら、店舗の住所や地図はもちろんのこと、どういう商品を売っているのかが分からないとユーザーは行きたいとは思いませんよね。
頭で考えているだけでは中々案は出てこないので、ペンと紙を用意して思いつくまま書きなぐります。必要ないかなと思うことでも、後で精査すれば良いので、とりあえず頭に浮かんだことをどんどん書いていきましょう。同じカテゴリーだなと思うページはグループ化していくと良いでしょう。
必要だと思うページを出し切ったら、それらの重要度を考えてみましょう。ここでもあなたが「これは重要だ」と思うページではなく、ユーザーの気持ちになって重要なページを考えることです。
特に重要なページはHomeからすぐにアクセスできた方が良いので、ここでサイトの構成図（サイトマップ）も考えておきます。パワーポインやエクセルでも構成図は作れますが、XMindなど無料の作成ツールがオンライン上にはいくつかあるので使うと便利です。
3.Webサイトの設計図ことワイヤーフレームを作成する
ターゲットユーザーや必要なページが決まったら、何をどこに置くかを簡単にまとめていきます。Webサイトの設計図ことワイヤーフレームの作成です。紙にペンで書いている人もいれば、他の人と共有することが多い人はツールを使って作成したりもします。
4.Webサイトをどういうデザインにするか考える、作る
ワイヤーフレームを元に私の場合はPhotoshopでデザインを清書していきます。
サイトのイメージカラーや使用するフォントもこの時に決めてしまいます。コーディングの時にあれやこれや考えて進めるよりも、事前にある程度のルールを決めておく方がスムーズに進むからです。ロゴの作成も必要であればこの時に作ってしまいます。
5.コーディングする
作ったラフデザインを見ながらHTMLでマークアップ、CSSでレイアウトを組み、装飾していきます。4.で決めたルールで変えた方が良いものがあれば臨機応変に変えていきます。後はコツコツと進めていきましょう。
6.サーバーを設置する
サイトが完成したら、作ったデータをWeb上に公開するために、Webサーバーを用意します。Webサーバーがないと、Webサイトを作っても誰にも見てもらうことができません。
Webサーバーはレンタルすることができるので、人気のロリポップやエックスサーバー、mixhostなどから申し込みましょう。どれも無料のお試し期間があるので、実際に試してみて使いやすいと思ったところから契約すれば良いでしょう。
各サーバーのおすすめポイントや特徴は「初心者や個人サイト運営におすすめのレンタルサーバー比較」で紹介しているのでチェックしてみてください。
また、WebサーバーにデータをアップロードするためにはFTPソフトも必要になります。持っていない人は無料のFTPソフトをDLしておきましょう。Windows用ならFFFTP、MacならFileZillaがオススメでどちらも有名です。
7.ドメインを取得する
レンタルサーバーを契約したら、サイトのドメインを取得しておきましょう。ドメインはWeb上の住所みたいなもので、これがないとせっかくWebサイトを作っても人に教えることができません。
レンタルサーバーを契約すると本来は有料のドメインが無料で１つ貰えるケースがあるので、キャンペーンなどを小まめにチェックしてみてください。
ドメインには無料で取得できるドメインと、有料となる独自ドメインがありますが、Webデザイナーの仕事に就きたいなら独自ドメインを取得して就職活動のためのオリジナルサイトやポートフォリオサイトに活かしましょう。
実は未経験者で独自ドメインを取得してまでWebサイトやポートフォリオサイトを作ってくる人は中々いないので、ここで少し同レベルの人と差をつけることができます。
せっかく良いオリジナルサイトを作れていたとしてもドメインが無料のものだとどこか安っぽく見えてしまうので、独自ドメインを取得してやる気をアピールしましょう！
8.Webサイトを公開する
サイトも出来あがり、ドメインを取得したらWebサーバーにデータをアップロードします。全てアップロードし終えたら、ChromeやIEなど各ブラウザにURLを入力して崩れや誤字等がないかチェックしてみましょう。不具合があれば修正して、問題なければこれで完成です！
まとめ
やり方や流れに多少の個人差はあると思いますが、Webサイトを作る流れは大体こんな感じです。HTMLやCSSがほとんど分からないという方は、まずは3分動画でHTMLやCSSが学べる「ドットインストール」というサイトで勉強したり、本を片手に一サイト作成してみることをおすすめします。
近年はWebで何でも情報が手に入る時代ですが、本で読みながら進めた方が分かりやすいという場合もあるので、一冊も本を持っていない人は是非本も手にとってみてください。
私が初心者の時に読みたかったな〜！というようなおすすめの本は「独学でWebデザイナーの勉強をしたい初心者におすすめの本」で紹介しています。
次のミッション「転職に必須となるポートフォリオサイトの作り方を知ろう！」
