こんにちは。たび男（@tabio1122）です。
以前、社員数20人のHP制作会社に未経験で入社してWebディレクターをやっていたという記事を書きました。
[post id=”155″ style=”thumbnail”]
Webディレクターとしても未経験でしたが、HP制作に必要なHTMLやCSSの知識も入社4ヶ月前の時点では皆無の状態でした。
『HTML？CSS？聞いたことはあるよ。でもそれでどうやってHP作るの？』
ってくらいのど素人レベルの知識しか持っていなかった僕ですが、僅か4ヶ月間の勉強でHP制作会社の入社試験時に課されたHTMLコーディング試験で歴代最高点を叩き出すまでに成長しました。
では、その間、どのような勉強をしていたかを時系列で書いていきたいと思います。
手を動かしてナンボ
時系列で書いていく前にプログラムを最も速く学ぶ方法は何だと思いますか？
プログラムに関しての本を読む？
勉強会に参加する？
いいえ、どれも違います。
答えはプログラムを書いてみる。
つまり、手をたくさん動かすことです。
まさに習うより慣れろです。
この方法が1番速く上達する方法です。
僕も4ヶ月もの間、常にプログラムを書き続けてきました。
初めは当然上手く書けませんでしたけど、書いていくうちにどんどん正確にそして速く書けるようになりました。
そして、そのプログラム学習を手助けしてくれるツールがたくさんありますのでそちらをどんどん紹介していきたいと思います。
CODEPREP
まず最初に始めたのがCODEPREPというオンライン学習ソフト。
目的に沿ってコースが設けられており、コースは穴埋め方式で正解したらどんどんポイントがもらえる設定でした。
現在は、僕が始めた時よりコンテンツがかなり充実されていますが、その当時あったコースは1週間で全部クリアしました。
1週間でクリアはしましたけど、HTMLやCSSの理解が出来ていたかと聞かれれば、正直言って全くっていうほど理解できてなかったです。
ヒントを見て、トライアンドエラーを繰り返しながらなんとかクリアできたという感じです。
HTMLとCSSって<>を使うんだなー、とかclassで色々指定できるんだなーとかそれくらいの感覚でした。
Progate
お次も先程と同様の無料で使えるオンライン学習ソフトでProgate。
CODEPREPといい、Progateといい、全部無料で使うことができるなんて素晴らしいです。
コースの中には有料のものもありますが、初心者コースは無料で使用できますし、とっかかりとしては無料コースで十分だと思います。
プログラムの本を買ったり、スクールに通ったりするより安いし、なんといってもプログラムの力が身につきます。
Progateのコースの中には、HTML&CSSやPHP、jQuery、Rubyなど様々な言語がありますが、まずはHTML&CSSをやってみて、余裕があればPHPやjQueryなども触ってみたら良いでしょう。
僕はまず、HTML&CSSを全部クリアした後、PHPを覗いてみましたが、さっぱりでしたのでそっとブラウザを閉じました。。
でも、まず大事なのはHTMLとCSSを理解することですので、これはこれで良しとしましょう笑
プログラムを始めてからこの時点で2週間ほど経ちましたが、何となくHTMLとCSSの仕組みがわかってきたところでした。
ドットインストール
CODEPREPとProgateのHTMLとCSSのコースを一通り終えた後は、ドットインストールというサイトでこれまでの復習をしました。
ドットインストールは各分野の解説動画が3分に小分けにまとめられています。
長時間の動画ですと、なかなか最後まで観終わる前に飽きてしまいますが、3分に簡潔にまとめられているところが非常に良いです。
で、このドットインストールをより効率的に使う方法があります。
それは一通り、手を動かしてから（HTMLやCSSを書いてから）使うことです。
全く手を動かさないまま、ドットインストールを見ても上達するスピードは遅いと思います。
あなたも経験あると思いますが、学校の授業で話を聞いて理解した“つもり”になっていたけど、試験になったら全く解けなかった経験が。
ドットインストールも同様です。
動画を見て、HTMLやCSSのことを理解した“つもり”になっていても、実際にコードを書こうとしたら全く書けないと思います。
というか、実際に僕もそうでした。
十分に手を動かしてない段階でドットインストールを見て、理解したつもりになっていましたけど、全然コードが書けなかったですね。
ただ、ある程度、手を動かした後にドットインストールをもう一度見たら、自分が勘違いしていた箇所が明確になったり、『floatの理解が不十分だからfloatに関しての解説動画を見てみよう』といった風に有効的にドットインストールを使えるようになりました。
大体、ここまでで勉強し始めてから1ヶ月から1ヶ月半が経過していました。
実際に公開されているサイトのプログラムを書いてみる
ここから2ヶ月間くらいは来る日も来る日もひたすらコードを書いていました。
ただコーディングをしていても面白くないので、実際に公開されているHPのコーディングをしていました。
では、僕が実際にコーディングしたHPをいくつか紹介したいと思います。
株式会社ナレンジさん
URL:http://www.narange.com/
人生で初めてコーディングしたサイトはこちらです。
非常にシンプルなデザインですが、floatなど初めは手こずりやすい要素が入っていますので、超初心者にはこのサイトはオススメです。
TOPページだけのコーディングで大体５時間位かかった記憶があります。。
ただ、「自分の力でちゃんとコーディングできたんだ」っていう自信がついたんで、これを機に加速度的にコーディング力が付いていったような気がします。
アロハヘアー町田さん
続いてはこちらの美容室さん。
現在は、HPがクローズしてしまって見れないのが残念ですが、floatを始め、簡単なJavaScriptも入ってきました。
分からないところは、先に紹介したオンラインのプログラム学習ツールやドットインストールを使いながらコーディングをしていました。
一つ目のHPより難しいコーディングでしたが、所要時間は同じ５時間だったでしょうか。
まだまだ、遅いですが確実に実力がついてきました。
美容院 Le Cielさん
URL：http://leciel-hairsalon.com/
これまでの２つのサイトはPC用コーディングだけでしたが、このサイトは遂にレスポンシブル対応しました！
これは本当に大変でしたが、jQueryも使ったりとHP制作に必要な要素は大体入っていますので非常に勉強になりましたね。
ここまでくると、ビジュアルを見ただけで「あ、ここはclearfixが必要だな。」ってのが分かってきます。
りょう施術院さん
URL：http://ryo-doorway.com/
このサイトは自分の中で集大成でした。
というのも、先程の美容室のサイトと同様にレスポンシブというのは同じですが、今回は全部WordPressで作っています。
WordPressはオンライン教材だけでは足りなかったので、本も購入して活用しました。WordPressは非常に人気のCMSですので、ネット上に情報がたくさん転がっていますので、検索すれば欲しい情報を手に入れることができるんですが、初心者は特に検索に時間がかかるんですよね。
ですので、こういう時は体系的にまとまっている本を活用することが僕は多いですね。多少のお金はかかってしますが分かりやすさは本の方が優れています。
実際に僕が購入した本は以下です。
これ以外の本は購入していません。これだけで十分だと思います。
まとめ
約4ヶ月間、上記で書いたことをひたすらやっていた結果、HP制作会社のHTMLコーディングの入社試験で歴代最高点を叩き出しました。
コーディングが上達するコツはただ一つ。
手を動かすこと
です。
怠けずにコードを日々書いていけば、必ず短期間でHTMLコーディングのスキルはアップしますので、是非頑張ってみてください。
コメント