みったに

Web制作に必要なスキルは3つだけでOK【初心者向けの学習方法】

work

Web制作に必要なスキルを知りたい人「Web制作に必要なスキルを知りたい。完全に初心者だけど、スキルを習得できるか不安。Web制作を仕事にしたいと思っており、最低限、身につけておくべきスキルや学習方法が知りたい。」

こういった悩みをお持ちではないですか?

現在の僕は、フリーランスとしてWeb制作をしている現役コーダーです。今回は、Web制作に興味があるけど、不安を感じている方に向けて、必要なスキルについて解説します。

もくじ

  • Web制作に必要なスキルは3つだけ
  • Web制作に必要なスキルを身につけるための学習法
  • Web制作に必要なスキルを習得後にやるべきこと

Web制作に必要なスキルは3つだけ

Web制作に必要なスキルは3つだけ
Web制作に必要なスキルは3つだけです。

必要なスキルとは

いきなりですが、必要なスキルをまとめます。

  • HTML
  • CSS
  • jQuery

順番に解説します。

HTMLについて

HTMLが必要なのは、Webページの基本だからです。

HTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。名前の通り、「マークアップ」がHTMLの役割です。

マークアップというのは、ざっくり下記の通りです。

マークアップとは、文書構造(テキスト)や視覚表現(装飾)などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。
引用:teratail(テラテイル)

ざっくりまとめると、僕たち人間が文章を読んでいるように、コンピュータにも読めるように手を加えることです。

なので、このブログもHTMLで書かれています。例として、下記のようなものです。

<h3>見出しです</h3>

これは、「見出しです」 という文に 「h3」を指定したことを、コンピュータが認識できるように手を加えた文です。

ちなみに、h3というのは3番目の階層の見出しという意味です。そして、コンピュータはそのことを知っています。なので、僕たちは、そのコンピュータに伝えられるように学ぶわけです。

外国人の話す言語を学ぶような感覚に似ているかもですね。

CSSについて

CSSはCascading Style Sheets (カスケーディング・スタイルシート)の略です。

CSSが必要なのも、HTMLと同じ、Webページの基本だからです。そして、こちらも名前の通り、「スタイル」を適用するのが、役割です。

今、みなさんが読んでいるこのブログにも使用されており、文字のサイズや、色、画像の大きさや形など、視覚に関する情報を設定します。

例としては、下記のようなものです。

h3{
 color: red;
}

先ほどの、HTMLで使用したh3の文字に対して、赤色で指定するように示したものです。「color」は「何を」の部分を表し、「red」が「どうするか」を指定している感じですね。

実際に表示させると下記の感じになります。

見出しです

jQueryについて

実は、先ほど述べた2つだけで、Webページを作成することは可能です。ですが、最近のWebページには動きがついているものが多いです。例えば、スクロールしたときに画像が表示されるなど。

こういった動きの実装方法は色々ありますが、その中でも身につけやすいのは「jQuery」と言われるものです。

jQuery自体はJavaScriptという言語のライブラリと呼ばれるものですが、ここでは、直接関係しないので、「そういうものなんだな」という理解で大丈夫です。

ここまでざっと説明しました。もしかしたら、下記の疑問があるかもです。

他にもスキルがあると思うけど、3つだけでいいの?

まずは3つでOKです。なぜなら、今回の3つのスキルでWebページが作れるからです。

実際に、僕もWebページを初めて作成したときも、3つのスキルだけで作成しました。当時はjQueryの知識もなかったので、正確にはHTMLとCSSの2つだけでした。

Web制作に必要なスキルを身につけるための学習法

Web制作に必要なスキルを身につけるための学習法
まずは動画での学習がおすすめです。そして、最初は無料が良いです。

理由は、動画は情報量が多いためです。そして、無料だと、挫折したとしてもダメージゼロです。主な学習法の選択肢としては、下記の通り。

  • ドットインストールなどの動画教材を使用
  • 勉強会に参加
  • 職業訓練校に通う

ドットインストールなどの動画教材を使用

動画教材は、マジでおすすめです。

理由は、コードを書く様子をそのまま見ることができるからです。

重要なのは、実際に自分で書いてみること

見ながら、自分でも書くことができるので、体験しながら進めることができます。
≫ ドットインストールで学習する

サポートを受けながら勉強したい方へ

しっかりした教育プランで、サポートを受けつつ学習したいという方は、スクールに通うのもありだと思います。

スクールのメリットとしては、いつでも質問が出来たり、進捗のサポートがあったりするので、続けやすいですし、中には転職を助けてくれるところもあります。やはり、お金を払うだけあって、教育の質は高くなりますね。

個人的には下記がおすすめです。
≫ TechAcademyを無料で体験する

勉強会に参加

世の中には、無料で参加できる勉強会があります。

ここ最近では、世の中の流れもあり、オンラインの勉強会も増えています。家にいながら、有益な情報を手に入れられますね。

開催されている勉強会については、下記から確認することができます。
≫ https://connpass.com/

職業訓練校に通う

ここに通う人は限られると思いますが、就職のための訓練として、「Webデザイン」コースが各自治体によって用意されています。自治体によっては、交通費まで出ることもあり、無料で受講できる場所もあります。

経済状況によっては、生活費の補助が出るところもあるので、自分の住んでいる自治体で調べてみると良いとかな思います。

就職がメインなので注意

職業訓練は就職がメインです。なので、面接の練習や社会人のマナーなどを学ぶ時間が設けられていたりします。

なので、スキルアップだけが目的の場合は、別の選択肢も考慮した方が早いかもしれないですね。

必要な学習期間は

これは、1日の作業時間にもよりますが、1日3〜4時間ほど勉強した場合、3ヶ月〜半年ほどあれば、かなり身に付くと思います。

僕の場合は、学習して3ヶ月後に1つのWeb制作案件をこなすことができました。それで、当時は3万円ほど稼げました。

Web制作に必要なスキルを習得後にやるべきこと

Web制作に必要なスキルを習得後にやるべきこと
おすすめは、自分のポートフォリオを作成することです。

理由は、自分の力試しになるし、それを使用することで、就職するときに有利になったりするからです。

就職や転職活動で、自分のポートフォリオを持っている人は少数派です。これだけで、実は差別化になったりします。

参考になるかわかりませんが、僕のポートフォリオも載せますね。このポートフォリオも今回紹介した3つのスキルしか使用していません。
僕のポートフォリオ

というわけで、今回は以上となります。

最初は不安も多いと思いますが、一番大変なのが、最初の1歩だったりします。今回の記事で少しでも1歩のハードルが下がったら嬉しいです。

【プログラミングスクール】ココを選んでおけば失敗しない格安3校を厳選
「プログラミングスクールに通いたいけど、学費も高いし、挫折して失敗したくない。プログラミングスキルを身につけて、エンジニアとしてお仕事ができるようになりたい。」 こういった悩みをお持ちではないでしょうか? そこで今回は、......