- HTMLコーディング技術を効率的に身につけたい ｢初学者｣の方
知識0から3週間で以下のようなサイトを｢デザインからコーディングまで｣行いました。
この経験を通し、更に効率化したHTMLコーディング学習ロードマップを作成しました。
HTMLコーディング学習を行う方々の参考になれば幸いです。
学習ロードマップ
各Stepの簡易説明
詳細については順次記載していきます。
- Visual Studio Code
- Adobe XD
- Adobe Photoshop
Visual Studio Codeを用いる最大の理由が拡張機能にあります。
インストールするだけで、作業効率が冗談抜きで｢数十倍｣になるため必ず導入します。
HTMLとCSSがどの様なものか何となく理解する。
Visual Studio Codeを用いたコーディングを行うほうが学習効率が良いです。
時間がもったいないので、Progateでの演習は｢行いません｣。
練習用のデザインを無料で提供して頂けるサイトがありますので、活用させていただきます。
解説記事がありますので、ここからで初めてHTML、CSSについて実戦形式で身につけていきます。
次は先程の解説記事は使わずに、Google先生らと相談しつつ自力でコーディングを行います。
この時点では｢大体合ってる｣ものが作れればいいので、細部の違いは許容し次に活かしましょう。
練習用のデザインを無料で提供して頂けるサイトがありますので、活用させていただきます。
Adobe Photoshopの使い方を身につけるのが主目的です。
お仕事の実績を持たない段階にて、自身を評価してもらうただくために用います。
デザインの基礎、及び新しい技術を試してみましょう。
学習上の注意点
作成物の完成ではなく、｢目的達成｣にすること注力して下さい。
作成物は完璧に仕上げたくなりますが、時間の無駄なのでやめましょう。
パレートの法則の如く完成に近づくにつれて必要な労力は指数的に増加します。
達成感は味わえますが、身につく知識は少なく効率が悪いです。
各Stepでの目的達成を第一に考え、次に進むことを優先して下さい。
Step1 ソフトウェアの準備
学習の際に必要なソフトウェアになります。
Visual Studio Code
HTML、CSS等のコードを入力していくソフトウェア(エディタ)になります。
STEP3で後述しますが、拡張機能が非常に優れているので使用します。
Adobe XD、 Adobe Photoshop
HTMLコーディング学習ですが、Adobe XD、Photoshopのデータをもとにコーディングを行うためです。
体験版または、1ヶ月の契約で試しに契約しておきましょう。
HTMLコーディング、自分に向いてないわ…となれば解約すればいいだけですので。
Step2 VS Code 拡張機能導入
目的
作業効率向上、ストレス低減
Visual Studio Codeは有志が作成したツールをボタン一つで導入することが出来ます。
多い印象を受けますが、効率、ストレス抑制を追求した結果、私には最低限これだけ必要でした。
アンイストールもボタン一つで行えますので、拡張機能は取りあえず試してみてください。
リアルタイムでコードを確認する
入力支援
コードの整形
タイプミス確認、インテンド、ネストの確認を容易にします。
Step3 Progate HTML & CSS 初級編スライドを｢ながめる｣
学習準備は以上で終了です。
初めにHTMLとは何かをざっくり理解していきましょう。
目的
HTML、CSSがどんなものか｢なんとなく｣理解すること
Progateはエディタが｢あれ｣なので演習は行わず、｢無料で見れるスライドを読むだけ｣で十分です。
VS Codeの優位点を確認するために演習を行ってもいいですが、時間の無駄なのでおすすめしません。
手を動かし、悩みながら実際にものを作ったほうが圧倒的に学習効率がいいためです。
Progate
Step4 解説記事を見ながらコーディング
目的
HTML、CSS、jQueryの理解度を高める
どのようなコードを書くと、どう表示されるのかを理解していきましょう。
｢完成したものがなんか違うわ…｣となっても、気にせず次のStep5に進んで下さい。
Step3でProgateのスライドを見たときより知識が増えていれば目的は達成となります。
コーディング対象
クリ★スタ様の上記記事よりAdobe XD、画像ファイルを入手して下さい。
上記の記事を参考に、｢だいたいあってる｣サイトを作成して下さい。
この時期ではリンク先移動後、ハンバーガーメニューが閉じられません。
jQueryの勉強がてら修正してもいいですが、目的からそれるので無視してもいいです。
Step5 Google先生と協力してコーディング(XD編)
目的
Googleを使い、自己解決能力を鍛える
Adobe XDの雰囲気を掴む
デザインデータからコーディングを行う際に、わからないことがいくつも出てきます。
そのときはGoogle先生と協力し答えを導き出す力が必要となります。
このStepではその練習として、Google先生と協力してAdobe XDデータからのコーディングを実施することが主目的です。
従って、今回も作成物は｢だいたい｣あっていれば良いです。
Google先生のこき使い方が上手くなったわと自覚できれば目的達成です。
また、この段階でHTMLコーディングの感覚が何となくつかめ、成長を実感してきます。
コーディング対象
10分間Google先生と相談しても、にっちもさっちもいかない場合は大人しく解説記事を参照しましょう。
悩み、自己解決できたことは記憶に残りますが、長時間悩むくらいなら手を動かしたほうが効率的です。
補足
このあたりから、CSSコーディングの煩雑さにストレスを感じてくると思います。
対処法は先人の知恵を拝借しましょう。
私は下記記事にお世話になりました。
他にもGoogle先生は多様な回答を提案してくれます。自分に馴染む手法を試し、最適解を作り上げましょう。
迅速な改善は、先の効率を大きく向上させます。
Step6 Google先生と協力してコーディング(PSD編)
目的
コーディングで使うAdobe Photoshop機能を身につける
PSDデータからコーディングを進めていきます。
データの扱い方等は、Google先生を使い自分に適した方法を見つけましょう。
このあたりから、デザインデータと比較して｢かなり近い｣ものが作れてくる様になってきます。
コーディング対象
気に入ったものを1つ選んでコーディングを行って下さい。
フリー素材の画像データを使用すると見栄えが良くなるので、以下のサイトからいい感じのやつを拝借しましょう。
Step7 XDを用いたポートフォリオ作成
目的
デザインの基礎を身につける
Adobe XDの使い方を身につける
この時点でコーディング能力、問題解決能力は十分身に付いています。
依頼を受ける際には、｢自身の紹介かつ、能力を評価してもらうため｣のポートフォリオが必要となるので作成します。
ポートフォリオサイト作成により、デザインの基礎、及びAdobe XDの使い方がおまけで身につけられます。
また、デザインの基礎は発表用スライド作成、及び書類作成にも応用が効く、優秀なスキルです。
選択肢1 – デザインの基礎知識の学習方法
冒頭のポートフォリオサイトデザインは、この本の規則に従って作成したものです。
デザイン知識0であった私でもこの本を参考にするだけで、これだけのものが作成できました。
選択肢2 -デザインの学習は行わない
一方でデザインの学習は行わず、自分好みのポートフォリオサイトを徹底的に模倣するのも有効です。
デザイン学習を行っても所詮素人に毛が生えたようなもので、プロの制作物には及びません。
とっとと実践に移るためのポートフォリオサイトを作るのであれば、模倣が効率的ですね。
終わりに
以上が自分の軌跡に改善点を加え、効率化したものになります。
WEBエンジニアを目指し、学習を初めたばかりの方の助けとなれば幸いです。
