お久しぶりです。WEB制作チームのウサミです。
最近の出来事なのですが、知り合いの知り合いが「趣味でWEBサイトを作りたいので、やり方を教えていただきたいです。」と言っていたので「分かる範囲でよければいいですよ。」と返事をしました。
そしていざ教える当日になったのですが・・・どういったサイトを作りたいかとその知り合いに聞いてみると、なんとなくのテーマは決まってはいるが、それ以上の返事は返ってこず、ページ数やカテゴリー、ビジュアルはどうしたいか、そういうのを聞いていたのですが、「まだ考えていない。」、「とりあえずお願いします。」等の返事が返ってきました。

（とりあえずお願いします！？え、私が作るの！？教えるだけじゃなかったの！？）
とか思いつつも気を落ち着かせ・・・

「こういう風に進める必要があると思うので、まずはそこまで進めてください。」

と言って、納得してもらい、その日はたこ焼きパーティーをして帰ってもらいました。
たこ焼きパーティーはブログとは関係なかったですね。

大分、前置きが長くなりましたが、趣味でWEBサイトを作る方に多いのが、なんとなくの雰囲気でサイト作りを始めてしまって、どう進めていけばいいか分からなくなる。と言ったケースだと思います。
今回のその知り合いのケースも結構これに当てはまっていると思いました。
ですので、今回はあくまで私流ですが、これで迷わない！私流WEBサイト作成の手順について教えていこうと思います。

あくまで私流ですので、やりにくいと思った場合はやり方を変えていただいて結構です。あくまでサイト作成時に迷わない為の一つの指標だと思っているただけると幸いです。

題材を考える

何よりも大事なのがこの題材です。
先にビジュアルを作ろうにもこの題材が無ければビジュアルは作れません。
仮に作ってしまったとしたら、大体は題材と噛み合わなく、統一感の無いサイトになってしまうとおもいます。

私はまず大きな題材を決めていきます。

例：「食べ物」、「遊び」、「ニュース」等

より形として題材が決まっている場合はもっと解りやすい題材でも結構です。

例：「食べ物の中のラーメン」、「遊びの中のバスケットボール」、「ニュースの中の政治」等

題材はより形として決まっていた方が作業は進めやすいでしょう
ですが、固め過ぎるとその題材に縛られすぎてそれ以上、コンテンツの幅を広げられなくなってしまいます。

例：「ラーメンに合う食べ合わせ」、「バスケットのうまいシュートのやり方」、「アメリカの政治」等

上のような例だとラーメンのサイトであれば、中々、美味しいラーメン屋さんを紹介するのは難しいでしょう。
バスケットであれば、連携やドリブル等の記事を書くのは気が引けてしまいます。
その内容に特化したいのであればそれでも問題はありませんが、もっと多方面のコンテンツも追加したいというのであれば特化した題材は避けた方がいいでしょう。
この時にどういった年齢層や性別の方に見てもらいたいかorどう使って貰うか等も決めておくと記事やカテゴリー、構成やビジュアルを作る際に楽になります。

ちなみに題材の出し方に、ロジックツリーの様に題材を出していくやり方があります。

例：ラーメンと言ったら「醤油味」、醤油味と言ったら「〇〇店」、〇〇店と言ったら「若者に人気」

上の例のように進めていき、詰まったらまた大元の題材であるラーメンから始め、題材が詰まるまでまた続けます。
これを繰り返すといろんな題材が出ますので、その中からサイトの題材にあったものを決めるというやり方です。

記事を考える、カテゴリーを考える

題材が決まったら、次は記事orカテゴリー内容を決めていきます。
１の時点で題材が決まっていない人でもこちらの記事orカテゴリー内容がなんとなく決まっている場合があります。
そういう場合は記事orカテゴリー内容からどういった題材にするか、考えることもできます。
逆に手順通りに題材から考えてきた人は題材を元に記事orカテゴリー内容を考えます。
この時にカテゴリーから考えていくのも有りだと思います。

例：記事から考える場合（ラーメンという題材で進めていった場合）

　・○○店のラーメンが美味しかったのでレビューします！

　・こんな所にこんなラーメン屋さんがありました。

　・今月の美味しかったラーメン屋さん特集

例：カテゴリーから考える場合（ラーメンという題材で進めていった場合）

　・おすすめのラーメン屋さん

　・美味しいラーメン屋さんの選び方

　・○○市周辺のラーメン屋さん一覧

　・行き当たりばったりラーメン屋さん巡り

記事から考えてもカテゴリーから考えても上の例を見てみると繋げられそうなコンテンツが幾つかありますね。
ちなみに、記事の予定だったものが思ったより、ボリュームがあったので、カテゴリーにした、カテゴリーにしようとおもったが思ったよりボリュームが少なかったので、記事にしたというやり方は全然有りだと思います。
そこは臨機応変です。
出せるだけ案を出してそこから記事にするかカテゴリーにするか分けていくのも一つの手だと思います。

構成、ビジュアルを考える

私は一番この段階が好きです。
分かりやすく作っているサイトが形になっていく様な気がするからです。
分かりやすい所からパーツになりそうなものを決めていきます。

1.サイト全体のイメージ

2.どういったUIを入れるか

3.今の段階で準備出来ているコンテンツの整理

4.１ページのボリュームをどうするか

5.どのブラウザサイズで見せたいか、スマホ、PCでの表示をどうするか

6.サイト全体のレイアウト

7.サイト全体のイメージカラー

8.サイトで使うフォントの設定

9.使える写真の整理

10.使えるイラストの整理

11.使えるアイコンの整理

全体のイメージをざっくりと決めたらUI、１ページ辺りのボリューム等をターゲットとなる見てもらいたいユーザー向けに調整します。

例：ラーメンサイトでスマホで見るライトな若者ユーザー向け

１ページのコンテンツ量を長くしすぎない様にし、写真やUIで分かりやすく情報を伝えたりします。
スマホユーザーで外でラーメン屋さんを探している時に見ていること等も考慮し、ページ内のコンテンツを分かりやすく区切り住所等の目的の情報にすぐにたどり着ける様にします。

例：○○店の記事ページ構成

　写真一覧、おすすめポイント、住所、メニュー料金

上記の様にしておくとすぐに住所のコンテンツ箇所に行けるので、ユーザーにとって使いやすいページとなります。

この辺りが決まってきたらイメージカラーや使える素材を整理し、サイトにあったビジュアルを作りこんでいきます。
ここの作業をおろそかにするとせっかく途中までいい感じに進んでいたサイト制作も残念な結果に終わってしまうので、慎重に進めていきたい所です。
ちなみに、上にフォントの選定と書いていて、なんで？と思われる方がいたかもしれませんが、昔は使われているフォントがどのサイトも似た様な感じで代わり映えしなかったと思います。
ですが、現在ですとcssの進化により、WEBフォントと呼ばれる、昔は使うのが難しかったフォントが簡単に使える様になりました。
これを使うことによりサイトのイメージを大きく変えることができる様になりました。
ですので、現在はフォントの選定は割と重要な項目となったのです。

コーディング

ここまできたらあとはビジュアル通りにコーディングしていくだけです。
ここで詰まる主な理由は、イメージ通りにコーディングすることが出来ないといった物です。
その大半は知識不足が原因だと思いますが、中にはどうにか出来るorどうにも出来ないケースというのがあります。

例：どうにか出来るケースorどうにも出来ないケース

・レイアウトが難しくcssでは困難

画像を使って対応するという選択肢があります。
ちなみに古いサイトはbackgroundと呼ばれるcssで複雑なレイアウトほど背景として設定しているものが多かったです。
script等を用いてレイアウトを実現するという選択肢もありますが、こちらは少し難易度が上がるので、誰でも出来るという訳ではありません。

・文字間隔が統一されない

文字を画像にして対応するという選択肢があります。

・フォントサイズが一定以上小さくならない

文字を画像にして対応するという選択肢or無理やりcssで小さくするという選択肢がありますが、cssで無理やり小さくする方法に関しては、恐らく推奨されたサイズ以上に小さくしようとしている為、それ以上小さくならないのであって、それを無理やり小さくするのは非推奨だと私は思っております。

・cssが効かない

記述が間違っているか、何か別のcssが効いているのが原因です。
cssを整理するか、不要なcssを削除すると直る場合があります。
どこかからコピペしてきたcssだと余計なものが入っていたりしてそれが原因でcssが効かなくなることもあります。
コピペが悪い訳ではありませんが、どういったcssが現在自分が弄りたい箇所に利いているか把握するのは重要です。

最後に

ここまで長々と書いていきましたが、私なりに一言でまとめると・・・WEBサイト制作には下準備がとても大事。
準備を怠ると必ずどこかで穴が空き、それが後に返ってきます。
皆さんもWEBサイトを作る際はその辺りを意識して作ってみてはどうでしょうか。