【未経験スタート】Webディレクターになるまでの勉強方法｜コーディング編

おんたまがWebディレクターになるまでに勉強してきた方法を「デザイン編」「コーディング編」「IT知識編」に分けてご紹介します。今回は「コーディング編」です！

デザインは印刷物の制作で前職の時から実務経験がありましたが、コーディングについては全くの素人でした。特にど文系人間のおんたまからしてみると、コードの文字列は最初ちょっと苦手意識が強く…。ただ、Web業界を経験するにあたってコーディングは一から書き上げられずとも内容の理解は最低限の必須事項だと思い勉強しました。

おかげでWebディレクターに転職した時もコードをある程度理解できていたのでその点は勉強しておいてよかったととても感じました。コーディングはスクールに通わず独学で学んだので、その方法をご紹介したいと思います。

勉強法①｜本を読んで勉強

HTML、CSSの基礎知識についてはManaさんの書籍を２冊購入して勉強しました。内容がわかりやすいことはもちろん、書籍を購入するとサンプルサイトなどの教材一式がダウンロードできるので本で学んだ知識を実際にテキストエディタで書いてみて覚えることができました。サンプルサイトのデザインがおしゃれな点も勉強していてテンションが上がるポイントです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

こちらはそもそものWebの仕組みについてや、「HTMLとは」「CSSとは」という基礎的な説明をしてくれる1冊です。初めてコーディングをする人におすすめの一冊です。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

こちらはCSSを使ったグラデーションや写真の加工、 JavaScriptなど最初に紹介した入門講座よりもワンランク上の知識を学ぶことができます。また、コードの知識以外にSassやカスタム変数など、より効率よくコーディングするためのTipsも紹介してくれています。

以上２冊をやり込めば知識としては一通りコードの読み方や理解は深められる思います。ネットでも無料記事で様々なコーディングの知識が拾えるのですが、書籍として知識が集約されていると後から確認したいことがあった時にさっと見れるのでおすすめです。

ちなみに著者のManaさんはWordPressの書籍も出されたのですぐに購入しました！おんたまBLOGを始める際のWordPressの使い方もManaさんの書籍で学びました。

またManaさんはブログもやっていてWeb・デザインを中心に様々な記事を発信されています。

勉強法②｜コーディング学習サイトを利用する

本で知識としてコーディングを理解することができましたが、やはり実際に一からコーディングする経験が必要だと思いました。ただ最初は既存サイトの模写で実践経験を積もうと思ったのですが、レベルの高いサイトの模写はまだJavaScriptなどの知識が浅かったりして、再現が難しい＋既存サイトのコードを見ても理解が追いつかない状態で挫折をしてしまいました…。

そこでたまたま見つけたのがCodejumpという無料のコーディング学習サイトでした。

レベルに合わせて模写するサイトのお題が用意されていてダミーですが使用する画像素材も用意してくれています。また、作成途中でつまずいた時のヒントも用意されているので初めて模写コーディングする人にはうってつけの学習サイトです。

私はCodejumpでまだ入門編を一通りやってみた状態ですが、それでもお題を5個ほどこなすと段々一からでも書き上げることができてきました。まだ入門編だけなので他のレベルも順にやっていきたいと思います。

また、最近有料ですがCodejump Proという実案件をベースにしたより実践的な学習サービスもできたみたいです。申し込みのできるタイミングが不定期のようですが、実案件を元にして納期設定もあるということでより本番に近い状態で勉強できるのは良いなと思いました。

まとめ

以上が私のWebディレクターに転身するまでのコーディングの勉強方法でした。まだまだ初級レベルの知識しかない状態ですが、書籍代以外はお金をかけずに基礎的な知識を身につけることができました。また冒頭でコーディングに苦手意識があったと言いましたが、デザインしたものをコーディングすることでWeb上に表現されていく様はやってみて面白いと感じるようにもなってきました。

読めるだけでなく自分で一から書くこともできるようになりたいと思っているので、これからもコーディングの勉強は続けていきたいと思います。

---

Webディレクターに転身してから1年、業務をこなす中でさらにコーディングの知識を体系的に理解したいと思い「HTML5プロフェッショナル認定試験レベル1」という資格を取得しました！

資格をとってさらに業務がしやすくなったと感じたので、よければ受験記録の記事もご参考ください。