Webサイト開発に必要なプログラミング言語とか、必要なスキルが知りたい
近年ますますWebサイト開発が盛んに行われ、需要が増えてきたこともあり、プログラマーなど Webサイトの開発を仕事にしようと考える方も多いのではないでしょうか。
そして上記のような疑問を抱いていませんか？
この記事ではそんな疑問にお答えすべく、
- Webサイト開発の大まかな流れ
- Webサイト開発に最適な環境の作り方
上記の2つを中心にわかりやすく解説します。
Webサイト開発の仕事を志すあなたは是非ご一読を。
- Webサイト開発は要件定義から始める
- Webサイト開発にはWebデザインやサーバーの知見も求められる
- Webサイトの開発環境構築はエディタやブラウザの用意から始めよう
なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。
受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。
本記事の解説内容に関する補足事項
本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。
また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。
記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。
Webサイト開発の仕事は需要が高い！
はじめにお伝えしておきたいのが、Webサイト開発の仕事の需要はとても多いということ。
まず、大手転職サイトでのWebサイト開発系の職業（プログラマーやエンジニア）の求人件数はそれぞれ以下の通りです。
※いずれも2019年5月22日時点のもの
次に、フリーランスの求人サイトで、HTML/CSSやPHP等、Webサイト開発系の案件を検索した結果は以下のとおりです。
- クラウドテック：887件
- ギークスジョブ：362件
- レバテックフリーランス：253件
※いずれも2019年5月22日時点のもの
会社員として就職する場合も、フリーランスとして業務委託する場合も、多くの案件があり引く手あまたの状態。給料・単価も高く、会社員としては年収500～600万円は十分に期待できますし、フリーランスとしては月収60万円を超える高単価案件も豊富にあります。
このように、Webサイト開発にはたくさんの需要があるので、開発の大まかな流れと、プログラミング言語等の必要なスキルを学んでいきましょう。
Webサイト開発の大まかな流れ
まずはWebサイト開発がどのように進むのか、大まかな流れを把握しておきましょう。
要件定義書を作る
要件定義書とは、クライアントと受注者の情報共有のために、Webサイトに実装すべき機能や満たずべき性能を明確に記載した資料のことです。
どんな目的でどんなWebサイトを作るのか等のコンセプトや、ターゲットとするユーザー等を様々な項目を設定していくので、要件定義書があることでプロジェクトをスムーズに進めることができます。
サイト設計（サイトマップ・ワイヤーフレーム）
続いては、サイトマップとワイヤーフレームの作成に移ります。
- サイトマップ
- サイト全体のページ構成を地図のようにまとめたものです。実際にWebサイトに訪れるユーザーの視点で、欲しい情報をスムーズに見つけられるように、情報を整理し階層化してまとめていくことが重要です。
- ワイヤーフレーム
- ワイヤーフレームは、Webサイトの画面の設計図のこと。Webサイトを開発する前に「何を・どこに・どのように」画面に配置するかを明らかにすることができます。/ 詳細はこちら
上記２つを作成することで、Webサイト全体がどのような構造になっていて、画面上にどのようなコンテンツがあるのかがイメージしやすくなります。
Webサイトの見た目のデザインを作成
続いては、ワイヤーフレームを元にWebサイトの見た目のデザインを作っていきます。
要件定義書で決めた目的やターゲットとするユーザーを踏まえ、サイト全体の雰囲気やカラーリングなどをすり合わせつつ、デザイン作成を行ないます。
Googleのツールの導入準備
ここで一旦、開発フローからは少し逸れますが、アクセス解析ツール「Googleアナリティクス」やタグ管理ツール「Googleタグマネージャ」の導入準備も進めておきます。
Webサイトは作って終わりではなく、長期間に渡って運用していくものです。そのためにアクセス解析やサイトを改善するための様々なツールは役に立ちます。
タグを導入するのはこの時点ではなく、次項の「コーディングやCMSの導入」の段階ですが、まずはアカウントを開設しタグの発行を行っておきます。
コーディングや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ですが、他にも色々と優れたエディタがありまして、以下の記事にまとめています。
ご参考にいただき、自分に合ったものを選んでみてください。
ブラウザを用意する。
もうひとつ必要なツールが、インターネットを表示するためのWebブラウザです。
これはお好みのもので構いませんが、実際にWebサイトを閲覧するユーザーがよく使っている、シェア率の高いブラウザを使うのがいいでしょう。ちなみに、ウェブレッジによれば日本国内で最も使用率が高いブラウザは、「Google Chrome」です。
※参考：WebブラウザシェアランキングTOP10(日本国内・世界)
専用のフォルダを作成する
2つのツールの準備が整ったところで、Web開発作業専用のフォルダを作成しておきましょう。特にフォルダを作る場所に指定はありませんので、デスクトップ等あなたのわかりやすい場所でOKです。
これから作成するHTMLやCSSのファイルをまとめるために、こうして専用の作業フォルダを準備しておくと便利です。
HTMLファイル・CSSファイルを作成する
ここまでの準備が整ったところで、あとはHTMLとCSSの両ファイルを作成し、サイトマップとワイヤーフレームを元に随時コーディングを行っていくだけです。
バックアップを取りつつ開発を進めましょう。
※なお、HTMLとCSSの書き方については以下の記事に書いていますので、確認・復習にお役立てください。
まとめ
以上、Webサイト開発の一連の流れと、最適な開発環境について書いてきました。
Webサイト開発の求人は多く、会社員・フリーランスによらず好条件で仕事することができますので、この記事をご覧になって興味がわいた方は、ぜひ一歩踏み出してみてください。
