スライドショースライドショースライドショー

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

Webサイト開発ってどんな流れでやるものなの?
Webサイト開発に必要なプログラミング言語とか、必要なスキルが知りたい

近年ますますWebサイト開発が盛んに行われ、需要が増えてきたこともあり、プログラマーなど Webサイトの開発を仕事にしようと考える方も多いのではないでしょうか。

そして上記のような疑問を抱いていませんか?

この記事ではそんな疑問にお答えすべく、

  • Webサイト開発の大まかな流れ
  • Webサイト開発に最適な環境の作り方


上記の2つを中心にわかりやすく解説します。

Webサイト開発の仕事を志すあなたは是非ご一読を。

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


画像:Shutterstock

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

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

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

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

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

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

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

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


画像:Shutterstock

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

要件定義書を作る

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

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

サイト設計(サイトマップ・ワイヤーフレーム)

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

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

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

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

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

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

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

Googleのツールの導入準備

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

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

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

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

コーディングやCMSの導入

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

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

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

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


一発で成功するWordPressのダウンロードとインストール方法
更新日 : 2019年5月31日

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

コーディングが終了、または同時並行でサーバーとドメイン(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選
更新日 : 2019年8月15日

ブラウザを用意する。

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ナカガワダイキ

ナカガワダイキ

■筆者について
他業種からIT業界へ転身しました。
初心者目線で誰でもわかりやすい記事の執筆を心がけます。
■プログラミングに対して一言
プログラミングは人生を変えるスキルだと思います。このブログからプログラミングに興味を持っていただける方が1人でも増えれば嬉しいです!
■好きなプログラミング言語
Swift
■フォローしているエンジニア
KBOYさん、KENTAさん

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説