こんにちは！たく丸です！
今回は、Webサイト制作の流れをご紹介します。

「Webサイトを作りたいけど、何から始めればいいかわからない」という方も多いのではないでしょうか？
サイト制作は、手順さえ押さえればそこまで難しいものではありません。
ステップごとにまとめたので、順番に見ていきましょう。

目次

ステップ1：企画を考える

サイトの企画を考えるイメージ
まずは、どんなWebサイトを作るのかを考えます。

・サイトを作る目的は何か？（集客、採用、商品販売など）
・誰に見てほしいのか？（ターゲット）
・見た人にどんな行動をしてほしいのか？（問い合わせ、購入など）

これらをはっきりさせたうえで、必要なコンテンツを洗い出します。
たとえば会社のサイト（コーポレートサイト）なら、「事業内容」「会社概要」「アクセス」「お問い合わせフォーム」などが必要ですね。

目的とターゲットを明確にするほど、成果の出るサイトになります。

ステップ2：サイトの設計（ワイヤーフレーム）

サイト設計のイメージ
企画が決まったら、サイトの骨組みを設計します。

サイトマップを作る

企画で洗い出したコンテンツを整理し、「トップページ」「会社概要」「サービス紹介」など、ページ構成を決めます。

ワイヤーフレームを作る

各ページに「どの情報を、どこに配置するか」を決めた設計図をワイヤーフレーム（WF）と呼びます。
色や装飾はつけず、レイアウトだけをシンプルに描くのがポイントです。
今はFigmaなどのツールで作るのが一般的です。スマホでの見え方もこの段階で考えておきましょう。

ステップ3：デザインする

ワイヤーフレームをもとに、色・フォント・画像などを決めてデザインを仕上げます。
デザインを良く見せるテクニックをご紹介します。

・使う色は基本3色までにする
・余白をしっかりとる
・メリハリ（強弱）をつける
・揃え（整列）を意識する

使う色は基本3色までにする

色を使いすぎると、統一感がなくなり安っぽい印象になります。
ベースカラー・メインカラー・アクセントカラーの3色を基本に組み立てるとバランスがよくなります。

余白をしっかりとる

「余白が多い＝手抜き」と思われがちですが、情報を詰め込みすぎると読みにくくなります。
十分な余白をとることで、伝えたい情報が際立ち、洗練された印象になります。

メリハリ（強弱）をつける

特に目立たせたいところは、大きな文字やインパクトのある画像で表現しましょう。
ただし全部を大きくするとメリハリがなくなり、どこを見ればいいかわからなくなります。

揃え（整列）を意識する

テキストの左寄せ・中央寄せがバラバラだったり、画像の高さが不揃いだったりすると、見ていて疲れるサイトになります。
揃えるべきところを揃えるだけで、見違えるほど整ったデザインになります。

また、色のコントラスト（背景と文字色の差）や文字サイズに気を配り、誰にとっても読みやすいデザイン（アクセシビリティ）を意識しましょう。

ステップ4：コーディングする

コーディングするイメージ
デザインが完成したら、ブラウザで表示できるようにコーディングします。
主に「HTML」「CSS」「JavaScript」を使い、スマホでもパソコンでも見やすいレスポンシブデザインで作ります。

更新が多いサイトは、WordPressなどのCMSに組み込むことも多いです。
また、コーディングせずに作れるSTUDIOやWixといったノーコードツールを使う方法もあります。

ステップ5：テストして公開する

コーディングが終わったら、公開前に次のような点をチェックします。

・スマホ、タブレット、パソコンで表示崩れがないか

・リンク切れや誤字脱字がないか

・お問い合わせフォームが正しく動くか

・表示速度は遅くないか

問題がなければ、サーバーにアップロードしてインターネット上に公開します。
公開後は、Google Search ConsoleやGoogleアナリティクスを設定して、アクセス状況を見ながら改善を続けましょう。

まとめ

Webサイト制作の流れをおさらいします。

1. 企画を考える
2. サイトマップとワイヤーフレームで設計する
3. デザインする
4. コーディングする
5. テストして公開する

Webデザイナーやフロントエンドエンジニアを目指す方も、この流れを知っておくだけで仕事の理解が全然違います。
ぜひ今後のWeb制作に役立ててください！