Web制作

Webサイト制作の基本的な流れを初心者向けに解説

Webサイトを作ってみたいと思ったとき、「まず何から始めればいいの？」と迷うことがあるかもしれません。

Webサイト制作というと、HTMLやCSSを書いてコードを作るイメージが強いですが、実際にはコードを書く前にもいくつかの工程があります。

何のためにWebサイトを作るのかを考え、誰に見てもらいたいのかを決め、必要な情報を整理する。

その後にページの構成やデザインを考え、HTML・CSS・JavaScriptなどを使って実際のWebページを作っていきます。

そして、完成したらスマートフォンやパソコンで表示を確認し、Web上に公開します。

この記事では、Webサイト制作を始めたばかりの方に向けて、Webサイトが完成するまでの基本的な流れを順番に解説します。

Webサイト制作はどんな流れで進める？

Webサイト制作には、いくつかの工程があります。

制作するサイトの種類や規模によって細かな作業は変わりますが、基本的には次のような流れで進めていきます。

STEP工程内容
1目的を決める何のためのサイトなのか考える
2ターゲットを考える誰に見てもらいたいのか考える
3情報を整理する必要なページや内容をまとめる
4構成を考えるページの構造や導線を決める
5ワイヤーフレームを作る情報の配置を考える
6デザインを作る色・文字・レイアウトなどを決める
7HTMLを書くWebページの構造を作る
8CSSを書くWebページの見た目を整える
9JavaScriptを加える必要な動きや機能を加える
10動作確認をするPC・スマートフォンなどで確認する
11Webサイトを公開するサーバーなどに公開する
12公開後に改善する内容やデザインなどを更新する

最初は工程が多く感じるかもしれません。

ですが、一つずつ順番に見ていくと、それぞれの作業にはきちんと役割があります。

ここから、それぞれの工程について詳しく見ていきましょう。

STEP1｜Webサイトを作る目的を決める

Webサイトを作るとき、最初に考えたいのが「何のために作るのか」という目的です。

例えば、次のような目的があります。

  • お店や会社を紹介する
  • サービスを紹介する
  • 商品を販売する
  • お問い合わせを増やす
  • ブログで情報を発信する
  • 自分の作品を紹介する
  • ポートフォリオとして活用する

同じWebサイトでも、目的によって必要な情報やデザインは変わります。

そのため、いきなりコードを書き始めるのではなく、まず「このWebサイトで何を実現したいのか」を考えることが大切です。

STEP2｜誰に向けたWebサイトなのかを考える

目的が決まったら、次に「誰に見てもらいたいのか」を考えます。

例えば、同じWebサイトでも、

「Web制作を始めたい初心者」

に向けたサイトと、

「Web制作会社を探している企業」

に向けたサイトでは、必要な情報やデザインが大きく変わります。

誰に向けたWebサイトなのかを考えることで、掲載する内容や文章の書き方、デザインの方向性などを決めやすくなります。

ターゲットを考えるときのポイント

  • どんな人が見るのか
  • 何に悩んでいるのか
  • 何を知りたいのか
  • Webサイトを訪れた目的は何なのか
  • どんな情報があると役立つのか

STEP3｜必要なページや情報を整理する

次に、Webサイトにどんなページや情報が必要なのかを整理します。

例えば、個人経営の塾のWebサイトなら、次のようなページが考えられます。

  • Home
  • 教室について
  • コース紹介
  • 料金
  • 講師紹介
  • よくある質問
  • お問い合わせ

ブログサイトであれば、記事一覧やカテゴリー、プロフィール、お問い合わせなどが必要になることもあります。

この段階では、「どんな情報を掲載する必要があるのか」を整理しておくことが大切です。

STEP4｜Webサイトの構成を考える

必要なページが整理できたら、それぞれのページをどのようにつなげるのかを考えます。

例えば、サービスを紹介するWebサイトなら、次のような流れを考えられます。

01 Home サイトを知ってもらう
02 サービス紹介 内容を知ってもらう
03 詳しい内容 必要な情報を確認する
04 お問い合わせ 次の行動につなげる

このように、訪問者がWebサイトを訪れてから、最終的にどんな行動をしてほしいのかを考えながらページ同士のつながりを作ります。

Webサイトは、情報をただ並べるだけではなく、訪問者が迷わず必要な情報にたどり着けるようにすることも大切です。

STEP5｜ワイヤーフレームを作る

Webサイトの構成が決まったら、次はページの中にどのように情報を配置するのかを考えます。

そこで使われるのが「ワイヤーフレーム」です。

ワイヤーフレームは、Webページの完成したデザインを作る前に、見出しや画像、文章、ボタンなどをどこに配置するのかを考えるための設計図のようなものです。

Header
Hero
メインビジュアル
About
サービス紹介
Service
サービス内容
CTA
お問い合わせはこちら
Footer

この段階では、色や細かな装飾を決める必要はありません。

まずは「何をどこに配置するのか」を整理することがポイントです。

STEP6｜Webデザインを作る

ワイヤーフレームでページの大まかな配置が決まったら、次はWebサイトのデザインを作ります。

ここでは、Webサイトの雰囲気や使いやすさを考えながら、具体的な見た目を決めていきます。

  • 色
  • フォント
  • 文字サイズ
  • 画像
  • ボタン
  • カード
  • 余白
  • レイアウト
  • 背景
  • アイコン

デザインを考えるときは、見た目の美しさだけではなく、情報が分かりやすく伝わるか、操作しやすいかという点も意識します。

また、パソコンだけではなく、スマートフォンで見たときの表示も考えておくことが大切です。

STEP7｜HTMLでWebページの構造を作る

デザインが決まったら、実際にWebページを作っていきます。

まず使うのがHTMLです。

HTMLは、Webページの構造を作るために使います。

例えば、見出し、文章、画像、リンク、ボタンなど、「Webページに何があるのか」をHTMLで表現します。

<h1>Web制作を始めよう</h1>

<p>
    Web制作について学んでいます。
</p>

<a href="#">
    詳しく見る
</a>

HTMLについては、前回の記事で詳しく紹介しています。

HTML・CSS・JavaScriptそれぞれの役割を知りたい方は、そちらも参考にしてみてください。

Related Article

HTML・CSS・JavaScriptの違いを初心者向けに解説

STEP8｜CSSでWebページの見た目を整える

HTMLでWebページの構造を作ったら、CSSを使って見た目を整えます。

文字の色や大きさ、背景、余白、レイアウト、ボタンのデザインなどをCSSで設定します。

h1 {
    color: #5E5A57;
    font-size: 32px;
}

p {
    color: #8B8580;
}

HTMLがWebページの「構造」だとすると、CSSは「見た目」を担当します。

HTMLで作ったページにCSSを加えることで、デザインされたWebサイトに仕上げていきます。

STEP9｜JavaScriptで動きや機能を加える

必要に応じて、JavaScriptを使ってWebページに動きや機能を加えます。

例えば、次のようなものがあります。

  • ハンバーガーメニューの開閉
  • 画像スライダー
  • タブの切り替え
  • アコーディオン
  • モーダルウィンドウ
  • ボタンをクリックしたときの処理
  • スクロールに合わせたアニメーション

ただし、すべてのWebサイトにJavaScriptが必要というわけではありません。

HTMLとCSSだけで作れるシンプルなWebサイトもあります。

サイトに必要な機能に合わせてJavaScriptを使っていきます。

STEP10｜スマートフォンやパソコンで動作を確認する

Webサイトが完成したら、実際の画面で表示を確認します。

パソコンでは問題なく表示されていても、スマートフォンではレイアウトが崩れてしまうことがあります。

そのため、さまざまな画面サイズで確認することが大切です。

確認したいポイント

  • 文字が小さすぎないか
  • 画像がはみ出していないか
  • 横スクロールが発生していないか
  • ボタンを押しやすい大きさになっているか
  • メニューが正常に開閉するか
  • リンクが正しく動作するか
  • 文章が読みやすく配置されているか

このように、制作したWebサイトを実際に操作して確認することも、Web制作の大切な工程です。

STEP11｜Webサイトを公開する

動作確認が終わったら、Webサイトをインターネット上に公開します。

Webサイトを公開するためには、一般的にドメインやサーバーなどを用意します。

自分のパソコンで作ったWebサイトをサーバーにアップロードすることで、インターネットを通して他の人にも見てもらえるようになります。

WordPressを使っている場合は、サーバーにWordPressを設置して、テーマや記事などを設定していく方法もあります。

Webサイトの種類や制作方法によって公開までの手順は変わりますが、「作ったWebサイトを実際にWeb上へ公開する」という工程が最後にあります。

STEP12｜公開後もWebサイトを改善する

Webサイトは、公開したらすべて終了というわけではありません。

公開後も、実際に使ってみたり、アクセス状況を確認したりしながら、少しずつ改善していきます。

  • 古くなった情報を更新する
  • 文章を分かりやすくする
  • デザインを改善する
  • スマートフォンでの表示を見直す
  • ページの表示速度を確認する
  • アクセス状況を確認する
  • ユーザーが使いやすいように改善する

Webサイトは「作って終わり」ではなく、「公開してから育てていくもの」と考えると分かりやすいでしょう。

Webサイト制作で初心者が意識したいこと

最初から完璧を目指さない

Web制作を始めたばかりの頃は、すべてを完璧に作ろうとしなくても大丈夫です。

最初から高度なアニメーションや複雑な機能を入れるよりも、まずは小さなWebサイトを一つ完成させてみることをおすすめします。

実際に手を動かして作ってみる

HTMLやCSSについて本を読んだり、動画を見たりすることも大切ですが、実際にコードを書いてみることで理解しやすくなります。

「見出しを作る」「色を変える」「ボタンを作る」といった小さなところから始めてみましょう。

分からないことがあっても大丈夫

Web制作では、コードを書いていると「なぜ表示されないんだろう？」ということがよくあります。

原因を調べて、コードを修正して、もう一度確認する。

この繰り返しもWeb制作の学習の一つです。

最初からすべてを理解しようとせず、分からないことを一つずつ解決していきましょう。\

まとめ

今回は、Webサイト制作の基本的な流れについて紹介しました。

Webサイト制作は、単純にHTMLやCSSを書くだけではありません。

目的を決める
↓
ターゲットを考える
↓
必要な情報を整理する
↓
Webサイトの構成を考える
↓
ワイヤーフレームを作る
↓
Webデザインを作る
↓
HTMLで構造を作る
↓
CSSで見た目を整える
↓
JavaScriptで必要な機能を加える
↓
スマートフォンやパソコンで確認する
↓
Webサイトを公開する
↓
公開後も改善する

というように、いくつもの工程を経てWebサイトが完成します。

最初はすべてを一度に覚える必要はありません。

まずは小さなWebサイトを実際に作りながら、一つずつ工程を経験してみましょう。

Noah Labでも、これからWeb制作について学びながら、実際にWebサイトを作る過程を少しずつ紹介していきます。

Web制作におすすめのサービス

Web制作を始めるときに役立つサービスを紹介しています。 気になるものがあればチェックしてみてください。

サービスをチェックする

Related

関連記事