初心者必見!web制作に必要な4つの言語について[始め方も解説]

「プログラミングは稼げるっていうけど何を勉強していいかわからない」

「HTMLとCSSは少し触れたけど次に何を勉強したほうがいいのかな…」

「早く案件を獲得したい!!」

 

そんな方々に向けての記事になります。

・Web制作に必要なスキルとは
・これから勉強を始めたい人は何をしたらいいのか
この記事の筆者はweb制作歴1年以上。初案件はWordPressでのサイト作成(4万円ほど)。本記事では、多くのweb制作者と体験談から必要スキルについてまとめています。

 

昨今の副業ブームでよく聞くプログラミングですが、特に、「web制作が稼げる」といったお話をよく聞くと思います。

この記事を読んでいる皆さんの中にはこの情報をもとに本記事にたどり着いた方もいるのではないでしょうか?

「web制作は稼げる」

 

この言葉は本当なのか?と疑っている方もいると思いますが、結論から言うとしっかりとしたスキルを持てば結構稼げます

 

でも「稼げる稼げる、っていうけど具体的に何を勉強したらいいの?」と悩んでいる方も多いのではないでしょうか。

この記事を読まれている方はweb制作を志している方や独学でスキルを身につけたい!と思われている方が多いと思います。

ですので本記事ではweb制作を独学で1年間で勉強してきた僕が案件までに必要なスキルを4つ紹介します。

 

web制作で案件をとるのに必要なスキル、それは以下の4つになります。

・HTML
・CSS
・Javascript(JQuery)
・PHP

急によくわからない単語を羅列されても困りますよね(笑)。

なので、本記事ではそれぞれのスキルの説明と習得までの時間・難易度を紹介し、具体的には何から始めたらいいのか解説しています。

プログラミング、特にweb制作で副業したい!という人の背中を押す、そんな記事になっていますので、ぜひ最後までご覧ください。

web制作に必要な4つの言語

では早速、Web制作に必要な4つの言語を紹介します。

HTML

(説明)

htmlはマークアップ言語といい、正確にはプログラミング言語でありませんが、ほかの言語と比べると簡単だとと思います。書籍やwebサイト、youtubeも含めて、1から説明してくれる教材が多いので、この言語を一番初めに習得することでほかの言語に進む際の障壁が下がると思います。

 

これさえできれば、webサイトの骨組みを作れるようになったり、メールのフォームを作れるようになるので「web制作ってこんな感じか」と感覚がつかめるようになりますよ!

この言語はwebサイトのレイアウトを考える際のひな型となります(人体でいうところに骨組みに当たります)。

 

難易度 2.0
かかる時間 2.0

 

 

CSS

(説明)

CSSも厳密にはプログラミング言語ではありませんが、htmlを勉強した後に学ぶと理解しやすいです。イメージとしては、骨に肉付けをする役割になります。主にhtmlで作成したwebサイトに色彩を与える役割を果たしています。

文字の色や位置、大きさなどの設定や背景画像の設定、カラムの変更などがこの言語によって決められます。css自体の基本操作の難易度は決して高くありませんが、センスによるデザインの差が出やすく、自由度も高いのでここでは難易度が高いものとしました(ちなみに僕自身はセンスがなく、とても苦労しています(笑))。

「このサイトかっこいいな!」とか「見やすい!!」など、webサイトを見たときに思う方は多いと思いますが、大体はCSSのデザインによるものです。

同じwebサイトでもCSSによってこんなに違う、っていう例を挙げときます。

・株式会社ユニクロ(https://www.uniqlo.com/jp/ja/contents/lifewear-magazine/
株式会社浅井良工務店

 

ここでは2つの例を挙げましたが、いろんなサイトを見てみると面白いですよ!!

 

難易度 4.0
かかる時間 2.0

 

HTML&CSSはプログラミングの中では比較的習得にかかる時間やスキルが少ない部類に入りますが、そのやり方や教材によっては挫折してしまう可能性があります。

そこで、僕が実際に使ってみた参考書やもっと早く知りたかった教材については以下の記事で解説しています。

関連記事

質問者 web制作を始めたいんだけど、オススメの教材ある? Progateは終わったけど、次に何をやればいいの? 挫折しない教材を選びたい 今回はこのような疑問に答えます。 結論から言う[…]

初心者

Javascript

(特徴)

Javascriptは上記の二つと違い、れっきとしたプログラミング言語となります。この言語は「○○と10回表示しろ!!」という命令を出せば、自動的に命令に沿った表示をします。また、「動的なwebサイト」をつくるうえでも必要不可欠な言語です。

「6時になったらアラームを鳴らす」とか「月曜日以外は自動でメールを送る」といったこともできるので、興味のある人はweb制作以外でも勉強してみると面白いと思います。

 

HTML/CSSの2つでもwebサイトの作成は可能ですが、現在使用されているwebサイトのほとんどはJavascrptが使用されているので、この言語の習得は必須となります。

実際に必要なのはJavascriptをもとにつくられたJQueryであり、JQueryが使えれば差し支えないです。しかし、ルーツはJavascriptなので、両方の習得をするのがベストだと思います。

 

難易度 3.0
かかる時間 2.5

 

 

PHP

(特徴)

Javascriptと同じく「動的なwebサイト」の構築に欠かせない言語です。
この言語は、ほかの3つのようにがっつり学ぶのではなく、基本文法を理解するだけでオッケーです
理由として、Web制作ではWordPressの案件が多いですが、このWordPressはPHPで書かれているためです。

 

また、PHPにて記述する内容がそこまで多くないため、ルールを理解するだけで大体の案件は十分だからです。このがっつりというのは、「Progate」の初級編レベルが分かれば十分だと思います。
後は実践で身に付ければOKって感じですね。

難易度 1.0
かかる時間 1.0

まとめ

以上の4つがWeb制作に必要なスキルです。いかがでしたか?

もう一度まとめると

Web制作では、HTML,CSS,Javascript,PHPの4つのスキルを身につけよう!!

ということになります。

 

「こんなにやること多いのかよ」と思った方が多いと思いますが、大切なのは理解し、こんなことができるんだ、と引き出しを増やすことです。
コピペもカンニングもオッケーなので暗記しなきゃ…といった焦りは不要です。

 

ぜひ楽しんでいきましょう!!

 

これ以降は「じゃあ具体的に何をしたらいいの?」という疑問に答えていきます。

まずはProgateから始めよう!!

これからプログラミングを勉強したい!と思っている人は「Progate」がオススメです。

Progateは、スマホやパソコンでプログラミングの基本が学べるアプリです。

progateは基本無料で使えて、主要な言語の基礎が学べるので「登竜門」としてオススメする人が多いですね。
無料版と有料版がありますが、まずは無料版だけで「web制作ってこんな感じか…」と感覚を掴んでみてください!!

無料版は2~3日くらいあれば終わりますが、そのあとに教材を買うなり、有料版を買うなりすると効率よく学習できますよ。

Progateのリンクはこちらから

僕は移動時間を使って隙間の5分間を使ってよく「HTML&CSSコース」を勉強していました。
移動中に勉強したり、短い時間での学習にも向いているので、無料版を始めるときには携帯でのインストールがオススメです。

ひとつアドバイスをするなら「暗記をすることよりも、勉強してる言語で何ができるのかを理解する」ことを心掛けてみてください!!

 

では、頑張ってください。

 

 

関連記事

質問者 web制作を無料で勉強したいから独学にしようかな 独学で勉強するのは時間が少しかかるだけだろう 今から独学で勉強しようと思ってる 今回はこのような考えを持つ人に向けた記事になります。 […]

サイレン(警告)