主にHTMLコーディングでwebサイトを作る為に勉強方法を知りたい方向けの記事です。
HTMLコーダーになる為の情報は以下の記事でもまとめていますので参考にしてみてください。
コーディングの勉強方法
覚えなければいけないのは主に以下の3つです。
- HTML
- CSS
- JavaScript
HTML
webサイトを構築するマークアップ言語となります。プログラミング言語とは異なり、何か処理を記述するわけではないので難易度は低いです。
習うよりなれろで入門書か、無料でオンライン学習できる範囲でまずはやってみるのが手っ取り早いです。
ここは基本構造がわかればさっさと次のステップへ移ってしまってOKです。
CSS
HTMLは各要素を配置するだけ、CSSでは文字の色やサイズ、レイアウトなどスタイルを指定する言語になります。
こちらもプログラミング言語とは違い、ただ決められた記法で各々のスタイルを指定していくだけなので難しくないです。
HTMLの学習を始めた時点でセットで覚えていくことになるので、CSSだけ別途勉強しなくても並行で進められます。
JavaScript
こちらはプログラミング言語になりますので少し難易度が上がってきます。webサイトではスライダーやアニメーションなどの動きを実装する際に利用します。
ただHTMLコーディングではイチからJavaScriptを書くようなことはなく、既に用意されたライブラリを使うことがほとんどです。
ファイルをダウンロードしてきて設置、指定の記法で読み込んで利用するということができれば最低限OKです。
大抵のライブラリはドキュメントが英語なので、英語ページを見るか、日本語の解説記事を探すことができれば大方何とかなります。
勉強の次にすることは
HTMLまわりの勉強は上記の基本的なことを1週間もやれば十分でしょう。あとはいくら勉強しても実践的なことは学べません。
では実践的なことを学ぶにはどうするか？ということですが、それは実際のサイトを同じように作ってしまえばOKです。
現在公開されているサイトはプロのエンジニアが作成したサイトですので、同じものを作れるならあなたもコーディングができるレベルと言っていいでしょう。
何をつくればいいのかわからない
とはいえいざ真似して作ってみようとすると、どのサイトを参考にすればいいのか結構迷うんですよね。
そういう場合は実際に仕事としてどんなサイトの作成依頼があるかを参考にしてみたらいいです。
たとえばクラウドワークスやランサーズといったサイトでは「こういったサイトを作ってください」という依頼がたくさんあります。
こういうサイトの様に、といった具合に参考サイトのURLがある場合もあるのでそれを真似してもいいでしょう。
全部真似しなくてもいい
真似するサイトは見つかったけど、縦にとても長く、これをすべて模倣するにはくじけてしまいそうだっていう場合も多いと思います。
そういう場合は同じような構成のブロックはカットしてしまってOKです。極端な話、同じ手法で組めるような場所は省いてしまっても大丈夫です。
コーディングの練習なので、組んだことが無い部分だけをピックアップして練習台にすれば良いでしょう。
実際に私が練習用にXDで作成した記事を参考までに載せておきます。
あなたが就職を目指している場合
もしあなたがコーディングスキルを磨いて正社員としてどこかの企業に就職しようという目的がある場合は、少し注意した方が良いかもしれません。
はっきりいってHTMLコーディングだけができる正社員の募集というのはかなり少ない、というかほぼない印象です。
それは正社員として働くようなwebデザイナーは自分でコーディングもできてしまう場合がほとんどだからです。
なのでもし正社員としてどこかの企業で働くことを目指しているなら次のステップとしてwebデザイナーやwebエンジニアを検討するのが良いと思います。
副業としては最適
一方で、家で出来る仕事を探している、フリーランスで仕事をしたいという場合にはHTMLコーディングの案件はちょうど良いです。
企業としては正社員として雇ってまでじゃなく、必要な時だけ払いきりでコーディングを任せたいというニーズにもマッチします。
今の仕事を続けながら、まずはコーディングを副業で始めて経験を積むという選択も有りだと思います。
ただそういった仕事を取るにも実績作りやアピールが必須になってきますので、決して楽な道というわけではないです。
コーディングを仕事として受ける際の別費用
コーディング案件を仕事として受けるのに一つ注意点があります。
案件ではデザインカンプと呼ばれるデザインを頂き、それを参考にコーディングを行っていくという流れがほとんどです。
そしてそのデザインカンプがフォトショップやイラストレーターで作られていることが多いという点です。
adobe製品の利用料
フォトショップやイラストレーターはadobeの製品となり、購入しなければ利用できずファイルも開けません。
しかも買い切りではなく月額制、年額で月税抜き2480円（フォトショップは980円のプラン有り）
さらに単月で利用しようとすると税抜きで月3480円。めちゃめちゃ高いです。
なので2～3万円の案件を受けるだけではadobe製品の利用料だけで下手すれば赤字になる可能性すら出てきます。
オンラインスクールでの学生割は大人も可能
デジタルハリウッドやヒューマンアカデミーといった社会人でも利用可能なコースでadobe製品を学割で利用することができます。
現時点では年4万円いかない程度といった値段感です。これであれば4万円前後の案件を1件取れればひとまず利用料は回収できるので、あとは1年間でどれだけ仕事を受けられるかですね。
実はどちらも7日間ほどの無料試用はできるので、ある程度準備が整ったら実際に使って練習してみるのがいいでしょう。
その7日間でがっつり練習して問題なさそうであれば、ひとまず利用はせずに仕事を取れるように頑張り、実際に仕事が取れたらお金を払って利用を始めるという方法が一番効率が良いかもしれませんね。
XDは無料
最近ではフォトショップやイラストレーターだけでなく、XDでデザインカンプが上がってくることも増えています。
XDも同じくadobe社の製品ですが、こちらは無料プランで普通に利用が可能です。
お金が勿体ないという方はデザインカンプがXDの案件を選んで受注するという選択も有りでしょう（確実に対象案件数は減ります）
XDによるデザインカンプからのコーディング練習記事もありますので参考にしてみてください。
まとめ
コーディングの勉強は、正直基本だけ抑えたら後は実践で調べながら、学びながらといった形になります。
どんな本やサイトにもあなたが作るサイトそのものの作り方はそのものズバリで載ってはいないので、調べて自分なりに組んでみて、動かして確認するというフローが必要不可欠です。
はまるとしんどいことも多いですが、その分うまく動いた時の達成感もあるので、是非頑張ってみてください！