Webマーケティング2021.03.31
ツイート目次
Webサイト（ホームページ）を作ろうと思っても、どのような知識が必要で、何から学ぶべきかわからないという人は多いのではないでしょうか。
また、Webサイトを発注する際に前提知識が無いと上手く発注できないという問題や、Webサイトの制作を全て外注してしまうと、サイトの更新が滞ってしまうという問題が起きます。
今回は、Webサイト制作に必要な技術と、それらを学べるサイトを紹介します。
Webサイト制作に必要な技術
Webサイト制作に必要な技術は、大きく分けると「フロントエンド」「サーバサイド」「インフラ」の3つに分けられます。
フロントエンド
フロントエンドは、Internet ExplorerやGoogle ChromeなどのWebブラウザで見える部分です。
この部分に関する知識があれば、簡単なWebサイトの更新やレイアウト変更が可能になります。
フロントエンドの技術として、HTML、CSS、JavaScriptなどがあります。
この記事ではこの部分を学ぶためのサイトを紹介します。
サーバサイド
サーバーサイドはアプリケーションを動かす部分です。例えば、商品の検索やリアルタイムでの人気商品のランキング、人気ページのランキングといった機能をWebサイトに持たせる場合には、サーバサイドの技術が必要となります。
サーバサイドで必要な技術として、Java、PHP、Ruby、Perlなどがあります。
インフラ
インフラは、Webアプリケーションを動かすための環境構築の部分です。Web
サーバの構築や、ファイヤウォールの設定などがあります。
簡単にWebサーバを構築出来るサービスは多数ありますが、大規模なサイトの場合には、サーバの設定や管理が出来る体制で無いと、致命的なトラブルにつながります。
まずは「フロントエンド」を知ることから始める！
よくわからない横文字が多数出てきて、戸惑う人もいるかもしれませんが、フロントエンドを触って動かすことは、簡単に出来ます。
フロントエンドを学ぶために必要な環境
フロントエンドを学ぶためには、日常的にもよく使う、次の2つがあればできます。
・ Webブラウザ（Internet Explorer、Google Chromeなど ）
・ エディタ（メモ帳、サクラエディタ、miなど）
フロントエンドの技術の役割
フロントエンドの3つの技術は、それぞれ次のような役割を持ちます。
HTML（Hyper Text Markup Language）
HTMLは「構造」を記述します。
CSS（Cascading Style Sheets）
CSSは「装飾」を記述します。
JavaScript
Javascriptは「動的な処理」を記述します。
まったく分からない場合におすすめ！ゲーム感覚で学べるサイト
Progate
Webブラウザさえあれば、HTML、CSSを学べます。丁寧な解説のあとに実際に入力して、練習します。
カリキュラムを進めていくと、進捗が表示され、モチベーションアップにつながります。
非常に丁寧な解説があるので、HTMLやCSSが全く分からない状態からでもしっかりと学ぶことができます。
CODEPREP
Progateと同様にWebブラウザさえあれば学べます。Progateよりも課題が豊富なので、Progateのカリキュラムを終えてから、CODEPREPで学ぶという方法もおすすめです。
Progateとの違いとして、分からないときに他の人に相談できるディスカッションが用意されています。
エディタを使って、実際にWebページを作るときにおすすめのサイト
ドットインストール
プログラミングを学ぶ上での定番サイトと言えば、ドットインストールです。動画でHTML、CSSの書き方を学べます。
実際の操作を見て、マネをすることで、HTML、CSSを学べます。
基本が分かったら、Webページを作ってみる
基本が分かったら、何らかの題材を自分で決め手Webページを作ってみるのがもっとも効率的な勉強法です。サイトを見たり、本を読んでいても作れるようにはなりません。手を動かしてみることをおすすめします。
実際に作ってみると、思った通りの挙動を示さない場合があり、そういった場合におすすめのサイトは次の2つです。
HTML クイックリファレンス
HTMLクイックリファレンスでは、「アルファベット順」と「目的別」でまとめられています。サンプルソースと表示例が乗っていてわかりやすいサイトです。実際の業務でフロントエンドを担当している人も、多く利用しています。
TECH ACADEMY
TECH ACADEMYでは初心者向けの記事が豊富に掲載されているので、流し読みして、実際にコーディングしてみることで、学べることが多いです。
まとめ
今回は、Webサイトに必要な技術と、HTML・CSSを学べるサイトについて紹介しました。
Webサイトを外注する場合にも、知っていると知っていないとでは、業務の進めやすさが大きく異なります。
週末や、長期休暇のタイミングで一度、学んでみてはいかがでしょうか。
