初心者がWebサイト開発をするための流れと環境構築する5ステップ

この記事では、環境構築の手順も交え、初心者がWebサイト開発する流れを解説します。

Webサイト開発の仕事は需要が高い！

はじめにお伝えしておきたいのが、Webサイト開発の仕事の需要はとても多いということ。

まず、大手転職サイトでのWebサイト開発系の職業（プログラマーやエンジニア）の求人件数はそれぞれ以下の通りです。

※いずれも2019年5月22日時点のもの

次に、フリーランスの求人サイトで、HTML/CSSやPHP等、Webサイト開発系の案件を検索した結果は以下のとおりです。

※いずれも2019年5月22日時点のもの

会社員として就職する場合も、フリーランスとして業務委託する場合も、多くの案件があり引く手あまたの状態。給料・単価も高く、会社員としては年収500～600万円は十分に期待できますし、フリーランスとしては月収60万円を超える高単価案件も豊富にあります。

このように、Webサイト開発にはたくさんの需要があるので、開発の大まかな流れと、プログラミング言語等の必要なスキルを学んでいきましょう。

Webサイト開発の大まかな流れ

まずはWebサイト開発がどのように進むのか、大まかな流れを把握しておきましょう。

要件定義書を作る

要件定義書とは、クライアントと受注者の情報共有のために、Webサイトに実装すべき機能や満たずべき性能を明確に記載した資料のことです。

どんな目的でどんなWebサイトを作るのか等のコンセプトや、ターゲットとするユーザー等を様々な項目を設定していくので、要件定義書があることでプロジェクトをスムーズに進めることができます。

サイト設計（サイトマップ・ワイヤーフレーム）

続いては、サイトマップとワイヤーフレームの作成に移ります。

サイトマップ

サイト全体のページ構成を地図のようにまとめたものです。実際にWebサイトに訪れるユーザーの視点で、欲しい情報をスムーズに見つけられるように、情報を整理し階層化してまとめていくことが重要です。

ワイヤーフレーム

ワイヤーフレームは、Webサイトの画面の設計図のこと。Webサイトを開発する前に「何を・どこに・どのように」画面に配置するかを明らかにすることができます。/ 詳細はこちら

上記２つを作成することで、Webサイト全体がどのような構造になっていて、画面上にどのようなコンテンツがあるのかがイメージしやすくなります。

Webサイトの見た目のデザインを作成

続いては、ワイヤーフレームを元にWebサイトの見た目のデザインを作っていきます。

要件定義書で決めた目的やターゲットとするユーザーを踏まえ、サイト全体の雰囲気やカラーリングなどをすり合わせつつ、デザイン作成を行ないます。

Googleのツールの導入準備

ここで一旦、開発フローからは少し逸れますが、アクセス解析ツール「Googleアナリティクス」やタグ管理ツール「Googleタグマネージャ」の導入準備も進めておきます。

Googleアナリティクス
Googleタグマネージャ

Webサイトは作って終わりではなく、長期間に渡って運用していくものです。そのためにアクセス解析やサイトを改善するための様々なツールは役に立ちます。

タグを導入するのはこの時点ではなく、次項の「コーディングやCMSの導入」の段階ですが、まずはアカウントを開設しタグの発行を行っておきます。

なお、IT企業への転職や副業での収入獲得を見据え、独学でWebサイトの開発スキルを習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

コーディングやCMSの導入

続いては、Webサイトの見た目のデザインを元にWebサイトとして反映させるための作業を行っていきます。

この作業が一般的に「Webサイト開発」と言われ、主にHTMLやCSSなどのプログラミング言語を用いてコードを書きWebサイトを作り上げる「コーディング」と、WordPressなどのCMS（サイト構築を自動的に行うことができるシステム）を導入する2つのやり方があります。

この際に、上記で取得したGoogleツールのタグも導入しておきましょう。

なお、コーディングについてはそれぞれ以下の記事をどうぞ。

サーバーとドメインを取得

コーディングが終了、または同時並行でサーバーとドメイン（URLのこと）を取得しておきましょう。

Webサイト開発を家を建てることに例えると、サーバーは土地で、ドメインは住所に当たるものですので、どちらも必要です。サーバーはレンタルするのが一般的で、ドメインは「お名前.com」などのドメイン登録サービスで取得することができます。

Webサイトを公開

サーバーとドメインを取得しWebサイトの公開準備が整ったら、まずはテスト環境でWebサイトを公開し、動作異常がないかデザインは正しく反映されているのか等を確認します。

確認し、問題がなければいよいよ本番環境に公開します。

動作確認

本番環境にWebサイトが公開されたら、再度動作確認をしていきます。

PC・スマホ・タブレット別で正しく表示されているか、動作異常がないか、また、Googleアナリティクス等のツールが正しく動作しているか等まで細かくチェックします。

以上ここまでが、Webサイト開発の大まかな流れです。

Webサイトの開発環境を構築する5ステップ

Webサイト開発の流れをざっと把握したところで、続いてはコーディングを効率よく行うための方法をご紹介していきます。

なお、ここではWebサイト開発の基本となるHTMLとCSSの2つを用いてコードを書く（開発する）ための環境の構築方法に絞って、5ステップで書いていきます。

HTMLエディタを準備する

Webサイトの開発に主に用いるツールは2つだけでOKです。そのうちの1つがHTMLエディタでテキストエディタとも呼ばれます。HTMLタグの入力補助機能やタグの校正機能、色分けなど様々な機能が搭載されていて、効率的にHMTLを書くことができます。

最もおすすめするのはAtomですが、他にも色々と優れたエディタがありまして、以下の記事にまとめています。

ご参考にいただき、自分に合ったものを選んでみてください。

HTML/CSS、JavaScriptで使える超優秀フリーエディタおすすめ5選

更新日：2024年11月6日

なお、IT企業への転職や副業での収入獲得を見据え、独学でWebサイトの開発スキルを習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

ブラウザを用意する。

もうひとつ必要なツールが、インターネットを表示するためのWebブラウザです。

これはお好みのもので構いませんが、実際にWebサイトを閲覧するユーザーがよく使っている、シェア率の高いブラウザを使うのがいいでしょう。ちなみに、ウェブレッジによれば日本国内で最も使用率が高いブラウザは、「Google Chrome」です。

※参考：WebブラウザシェアランキングTOP10(日本国内・世界)

専用のフォルダを作成する

2つのツールの準備が整ったところで、Web開発作業専用のフォルダを作成しておきましょう。特にフォルダを作る場所に指定はありませんので、デスクトップ等あなたのわかりやすい場所でOKです。

これから作成するHTMLやCSSのファイルをまとめるために、こうして専用の作業フォルダを準備しておくと便利です。

HTMLファイル・CSSファイルを作成する

ここまでの準備が整ったところで、あとはHTMLとCSSの両ファイルを作成し、サイトマップとワイヤーフレームを元に随時コーディングを行っていくだけです。

バックアップを取りつつ開発を進めましょう。

※なお、HTMLとCSSの書き方については以下の記事に書いていますので、確認・復習にお役立てください。

まとめ

以上、Webサイト開発の一連の流れと、最適な開発環境について書いてきました。

Webサイト開発の求人は多く、会社員・フリーランスによらず好条件で仕事することができますので、この記事をご覧になって興味がわいた方は、ぜひ一歩踏み出してみてください。