Web制作を学びたい初心者にとって、

と思う人って多いですよね。

何から始めるのかも重要ですが、しっかりとゴールまでの道筋が見えていないと、途中で飽きてしまったりなんとなくやる気が下がってしまい挫折してしまう人がたくさんいます。

そこでこの記事では、ステップ形式でWeb制作について解説します。順番がはっきりしているので、次に何をすればいいのかも丸わかりで悩む必要がありません。

この記事を読んでWebサイトには何が必要か、何を学ぶべきかをしっかりとおさえましょう。

【ステップ1】Webサイトの仕組みについて理解しよう

Webサイトはどのような仕組みで動くのか理解することは、Webサイトを作成する上で非常に大切です。

Webサイトはインターネット上で利用するサービスの一つです。Webサイトには、クライアントサイドとサーバーサイドというものがあります。

クライアントサイドとは、普段私たちが見たり触れたりできるユーザー側のことを言います。あなたが今見ているこの記事もクライアントサイドなんですよ。

逆にサーバーサイドとは、私たちユーザーが見たり触れたりすることができない裏側のことを指します。この2つが一つになって、Webサイトを作っています。

Webサイトはコンピュータがわかる言語（コード）で作られているため、私たち人間がそのまま理解することは不可能です。そのため、ブラウザーが人間にわかるように、コードを翻訳してくれています。

Webブラウザ例

私たちも次の手順で、気軽にコードを見ることができます。

実はWebサイトを作るには複数の言語が必要！ 何が必要か徹底解説

更新日 : 2020年6月19日

【ステップ2】Webサイト制作の流れ

Webサイトを作る流れは大きく分けて5つあります。

企画とはWebサイトのコンセプトやデザイン、機能など、これからどんなWebサイトを作っていくかを決めます。この企画がしっかりしていないと、目的がずれてしまったり変更や追加が後から増え続けてしまいます。

サーバー契約とはインターネット上であなたのWebサイトを公開するために、Webサイトを保存しておくスペースを借りることです。Webサイトを作っても、あなたのパソコン（ローカル）に保存されているだけでは他の人は見ることができません。

そのためインターネット上で保存しておくスペースが必要になります。レンタルサーバーを利用するのが一般的です。無料と有料があるので、自分に合ったサーバー契約を行います。

ドメイン取得とは、インターネット上での住所をもらうことです。サーバーを契約してもあなたのサイトがどこにあるのかわからないと、Webサイトを見ることができませんよね。そのためドメイン名を指定して、見たいWebサイトを指定する必要があります。

ドメインも無料と有料があり、自分で決めることができます。しかし他のサイトがすでに使用しているドメインは利用ができませんので注意が必要です。

ドメインの取得はサーバーを契約するときにまとめて取得でる場合がほとんどですので、サーバーとドメインをセットにする方が手間が省けますね。

ここまで大きな流れを解説しましたが、Webサイトの目的や便利ツールを利用するかによって、順番が前後したり作業をスキップできたりします。こちらの記事では目的別にWebサイト制作の流れを解説しています。

実は自分でwebサイトを作る方法は3つのパターンしかない!?

更新日 : 2019年6月18日

【ステップ3】必要なものを準備しよう

手軽に誰でも始められるWeb制作ですが、最低限必要なものがあります。それは以下の4つです。

パソコンは言わずもがなですよね。インターネットも同様で、家庭用のインターネットで十分です。他に必要なのは画像編集・加工ソフトとスマートフォンです。

画像編集・加工ソフトとは、Photoshopなどの画像を編集したり加工したりするソフトウェアのことです。Photoshopの他にも色々な種類のフリーソフトがあります。Webサイトを作る際、バナーや挿入する画像などが必要になってきます。

専門のデザイナーさんがいれば自分で行う必要はありませんが、画像編集や加工するスキルはWeb制作の仕事でもプライベートでも役立ちます。仕事の幅が広がると同時に画像編集や加工の知識があるとデザイナーさんへの依頼やしやすいですし、相手が言いたいこともスムーズに理解できます。

スマートフォンは、作ったWebサイトがスマートフォンでどのように表示されるかなどを確認するために利用します。スマートフォンの普及が進み、パソコンよりもスマートフォンで閲覧をされているWebサイトが増えてきています。

そのためスマートフォンで問題なくWebサイトを利用できるかや、パソコンとスマートフォンそれぞれの画面で最適な表示されているか確認するのはとても重要なことです。

パソコンのスペックなど詳細はこちらから。

【ステップ4】Webサイト制作に必要な言語とは

実はWebサイトは、複数の言語から作られています。その代表となる3つの言語は以下の通りです。

どれか一つじゃダメなの？　と思いますよね。残念ながら3つとも必要で、Web制作の仕事は上記の3つの知識とスキルが最低限必要です。以下がそれぞれの大まかな役割です。

上記をみていただくとわかるように、それぞれの言語で役割が違いますね。Web制作をお仕事にする場合、これらの言語を使ってクライアントの希望を再現します。それぞれの言語の役割や書き方をしっかり把握しましょう。

実はWebサイトを作るには複数の言語が必要！ 何が必要か徹底解説

更新日 : 2020年6月19日

【ステップ5】HTML基礎

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。HTMLはマークアップ言語とよばれるもので、WebページならびにWebサイトの骨組みを作る言語として欠かせません。

HTMLはタグとよばれる印をつけて、コンピュータへ指示を行います。例えば文字の大きさを変えたり、画像や動画などを挿入する時に使用します。さらに詳しいHTMLの解説やよく使われるタグの紹介はこちらから。

HTMLとは？初心者でも分かる基礎知識から書き方まで詳しく解説

更新日 : 2020年6月22日

【ステップ6】CSS基礎

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、スタイルシート言語と言われています。CSSを実際に記述するのもスタイルシートとよばれるファイルです。CCSはHTMLで作った骨組みに高度なデザイン性を追加します。

具体的には背景や文字の色・サイズなど様々です。そんなのHTMLでもできるじゃん！　と思いますよね。確かにHTMLでもできますが、HTMLは本来ページの構造（骨組み）をつくる役割の言語です。HTMLでデザインまで行うと、使用するタグの量が多くなったり長くなったりします。

そうなるとコンピュータに理解されにくい状態になると同時に、変更があった場合に修正に手間がかかったりとよくありません。またHTMLはブラウザによって表示が変わる場合があり、自分がみているブラウザ以外ではデザインが崩れてしまう危険性があります。

そのためCSSを利用しどのブラウザでも同じように表示されるようにすると同時に管理と運用もしやすくなります。またCSSはHTMLよりもはるかにデザイン性に優れているので、見栄えがいいデザインにするにはCSSが欠かせません。

HTML/CSSとは？初心者向けの基礎知識と学習サイト5選

更新日 : 2020年7月15日

【ステップ7】JavaScript基礎

JavaScriptとは、主にWebサイトやWebアプリ、Webサービスなどを開発する時によく利用されている言語です。JavaScriptは実はあらゆるところで利用されていて、あなたが普段みているWebサイトのほとんどでも利用されています。

JavaScriptの最大の特徴は、ブラウザにJavaScriptが利用できる環境が標準で備わっていることです。手軽に開発と利用ができるので、多くのWebサイトやWebアプリ、Webサービスなどで利用されています。

JavaScriptはよくトップ画面の上部でみられる画像が流れていくスライダーや問い合わせフォームなど、何かしらのアクションが起こる機能で使われています。他にも色々な場面で活躍しているので、詳しくはこちらをチェックしてくださいね。

JavaScriptとは？概要・始め方・将来性を初心者にもわかりやすく解説

更新日 : 2020年7月23日

まとめ

Web制作のスキルを身に着けるためには、様々なことを学ぶ必要があります。最初から無理せずに、少しずつ確実に学んでいきましょう。

またWeb制作で重要なのはアウトプットです。実際に手を動かしながら学ぶことで、効率的かつWebサイトを作れたという自信がつきます。

Web制作の学習をするときは、常にアウトプットを意識しながら勉強に取り組んでくださいね。