私の最高の勉強法～IT知識ゼロでもウェブサイトが作れるようになった話～

「こんにちは！パッキャオと言います！！」

私は未経験から独学でウェブサイト制作を勉強して、今ではウェブ制作会社で働いています！！

全くの素人からでもウェブ制作会社で働くようになれます！！
そんな私の勉強方法を紹介したいと思います！

自己紹介

自己紹介です。
私は、普通の学校を卒業して、普通に就職した、普通の30代中年男子です。
普通にパソコンを使って、普通の事務仕事をしていました。
ウェブの仕事に関ったことがきっかけとなり、独学でウェブ制作の勉強を始めました。
社会人を対象とした学校に行った訳でもなく、通信制の講座を受講していた訳でもありませんが、いまではウェブ制作会社で働いています。
ちなみに、ボクサーではありません。

私を踏み台にして!

私の経験を参考にして効率よく勉強してください！

「参考書を読んで知識を入れて、それから試験問題を解いていく」私の勉強方の定番です。
私は知識吸収のため、すぐに無料サイトでHTML・CSSについての勉強を始めました。

利用したのは、無料オンラインツールの「Progate」。
テキストとなるスライドは、大きな文字とカラーリングされた重要項目が特徴的で読みやすくなっています。
また、画像もたくさん使用してあって、利用者が理解しやすいように工夫されています。

しかし！！私には難しかった。。。

そもそも、私が勉強していた項目が、どんな場面でどのように使用されるのかが理解できていなかったため、知識が全く頭に入ってきませんでした。

たとえば

「sectionタグは、一つのまとまりであることを示す」
「articleタグは、独立した記事であることを示す」

ふむふむ。。。む？

文章の意味は理解できるけど、sectionタグとarticleタグの使いかたがイメージできないな。
しっくりこないから全然頭に入ってこないな。

最高の勉強法！！

たとえば

「肩と腕の力を抜いて軽くハンドルを握ります。ペダルに足をかけてバランスを取りながらゆっくりとこいでいきます。」
初めて自転車に乗る人向けに、こんな説明があったとします。

この説明を聞いただけで自転車乗れますか？
乗れないですよね？

自転車に乗る説明を聞くよりかは、まず乗った方がいい。
ウェブの勉強を始めるよりは、まずウェブサイトを作ってみる方がいいということです。

具体的な勉強内容

私が使ったテキスト

1. 「作りながら学ぶHTML/CSSデザインの教科書」
   タイトル通りサイトを作りながら勉強できます。
   
2. 「HTML5&CSS3デザインブック」
   説明が分かりやすいのでメインとしても使えるテキスト。
   
3. 「HTML5/CSS3モダンコーディング」
   中級者向けテクニックが詰まっています。
   

ステップ1（目安期間：4ヶ月）

最初に、「作りながら学ぶHTML/CSSデザインの教科書」を購入して、手順通りににサイトを作っていきました。

作業を進めていると、何度読んでも理解ができない箇所がありました。
そんな時に購入したのが、「HTML5&CSS3デザインブック」です。
同じ項目についても異なる図や説明が書かれているので理解の助けになりました。

個人的に、「HTML5&CSS3デザインブック」は読みやすかったのでおすすめしておきます。
もちろん、ネット検索を併用する方法も効果的だと思います。

「作りながら学ぶHTML/CSSデザインの教科書」を読み終えたとき、1つのサイトが完成していました。
「すごい、できた！！」感動しました。

ステップ2（目安期間：2ヶ月）

その次に、「HTML5&CSS3デザインブック」を最初から勉強していきました。
2度目ましてなので、知っている項目ばかりですが、忘れている項目は多かったです。

広く深い範囲で理解ができたように感じました。
ステップ２での吸収力はとても高く、良い復習となりました。

ステップ3（目安期間：2ヶ月）

ある程度の基礎知識が頭に入って、サイトが作れるようになった時に「HTML5/CSS3モダンコーディング」を購入しました。

すでに吸収した知識ですが、使用されている場面が変われば、新しい発見となります。
また、組み合わせが変わることでも脳は新しい知識と認識してくれます。
ステップ3は、知識の定着と理解を深めることに役立ちました。

ここまでできれば、もう初心者ではないかと思います。
ここから更なる成長を望む方には、異なるデザインのウェブサイトを模倣したりするなどして、たくさんの知識と経験値を増やしていくという方法もあるかと思います。

勉強方法・ステップ4（目安期間：6ヶ月）

仕上げとして、前職場のホームページをリニューアルしました。
デザインと内容は以前使用していたウェブサイトとは、全く異なるものにしたので、ゼロから作成したようなものです。
転職の際に、自分の作品としてアピールする目的もありました。

就職したいならこれを読め！！

もし、ウェブ制作会社への就職を最終目的としているのであれば、自作のウェブサイトを必ず準備しておきましょう！！
私は、約1年間の独学で前職のコーポレートサイトを作成しました。

なぜ、自作のウェブサイトが必要なのでしょうか？

作品は目安になります。
「どの程度の作業を任せられるのか」「どの分野の仕事をお願いできるのか」など作品から判断することができます。

また、応募者側からすれば、能力や技術力をアピールするポイントになります！！

私の場合は、独学で下層のあるサイトを作成できた点は評価してもらえましたし、サイト作成にかかった時間や作業量を追加説明することで仕事をしながら勉強をしたことが伝わり、やる気を評価してもらえました。

あの時こうしておけば

経験値が増えた今の私だから言えます。
「あの時こうしておけば、よかった」というポイントを書いておきます。

書籍だけでなくネット検索など様々な情報を見てみましょう！！

似ている意味なのに効果が全然違うということがあり理解に時間がかかったものがありました。

先人たちが親切にも様々な情報を分かりやすく書き込んでくれています。
別の説明を読めば理解できることもあるので、調べ方を工夫してみましょう！！

分からなくても進んでみましょう！！

説明を何度も読んで、実際に使ってもみたけど理解できない。。。

どうしても分からないときは、勇気を持ってスキップしてみましょう。
他の知識がついた後で、再度やってみると理解できることがあります。

clearfix苦手でした。。。
私はテキスト3週目ぐらいでやっとの意味や使いかたが分かりました。

「Chrome Developer Tools」を知っておきましょう！！

とても便利な機能があります。
初心者の書籍にはほとんど出てこなかったので、見逃していました。。。

しかし、ウェブ制作会社で働き始めると、使用頻度は爆発的に高くなります。

とっても便利なツールです。
こちらで基礎が勉強できます。

ショートカットキーを覚えましょう！！

作業スピードが全く違います。
作業の早い同僚たちは、いくつものアプリで様々なショートカットキーを使いこなしています。

あまり馴染みがない人は、こちらから始めてみてもいいかもしれません。

終わりに