Webデザイナーのhazukiです。

私はもともと新卒時は営業職を務めていました。
ですのでいわゆる「未経験からWebデザイナー」です。
ここで言う未経験は一度別の職種に務めたが…という意味です。

今回はコーディングをどう勉強したのかをまとめたいと思います。

初心者からのコーディング勉強方法

私はずっとprogateを何周もしていました。
それが役に立たなかったことはないですが、そこからもう一歩が踏み出せませんでした。
スクールに通い勉強を続けることで少しずつ自分でコーディングができるようになりました。

その手順をまとめていきます。

progateブラウザ版で手に指の動きを覚えさせる

まずprogateはアプリではなくブラウザ版(PC版)で進めました。
最初はアプリを使っていましたが、手打ちでできないと意味がないのでは…と考えブラウザ版に移行しました。

ブラウザ版を始めた当初は、『アプリで覚えたつもりだったけど、いざ自分でコードを書くとなると書き方が思い出せない…』ということが多々ありました。
なのでアプリで勉強している人はぜひブラウザ版でも進めてみてください。

最初は思うように進まず嫌になることもありますが、ある程度タグの書き方を覚えてくるとストレスもかなり緩和されます。

この時は全て何も見ずにコードを書くというよりかは、pタグなどタグそもそもの書き方を覚えるフェーズにすると良いかもしれません。

また私はHTML&CSS以外にもJavaScriptやjQueryなど色々手を付けましたが、最初はHTML&CSSだけで十分かと思います。

自力でHPを作れるようになったと感じてからJavaScriptやjQueryを始めても全然遅くありません。
むしろ同時並行でやると『全然JavaScriptもjQueryも覚えられない、できない…』と自己嫌悪に陥り、progateを何周もするだけで終わってしまいました。

まずはHTML&CSSである程度コードの書き方を手に覚えさせることを目指しましょう。

シンプルなサイトで3回コーディングタイムアタック

progateのブラウザ版でコードを書くこと自体に慣れてきたら、次は何も見ずに書けるようになると一気に楽になります。
個人的にこの段階がクリアできたら、コーディングに関する苦手意識はかなり緩和されると思います。

私はスクールに通った際に、シンプルなデザインのサイトを何も見ずに3回コーディングするという課題をもらいました。
時間を計ってなるべく短い時間で書くことを目指します。

この課題のおかげでシンプルなデザインのサイトなら何も調べずにコーディングができるようになりました。

自力でコーディングする時に書き方が思い出せない→調べるのも時間がかかる→結局作るのに時間がかかってモチベーションダウン…となってしまいました。

まずひな形を記憶することでストレスを最小限に抑えてコーディングができるようになりました。

シンプルなデザインがない、コーディングの正解がわからないという方は「コーディング　課題」で検索すると、様々なデザインカンプ(見本)を作っている方がいらっしゃいます。

例えばKOWLさんのコーディング課題は初心者の方にピッタリかと思います。

https://krowl.jp/academy/subject/coding

ひたすらに調べてトライ&エラーを繰り返す

progateで基本を知り、3回タイムアタックでコーディングの型を覚えられたらあとはひたすら制作あるのみです。

ここまで進められたらシンプルなサイトはストレスなく完成させられると思いますし、もしわからないことはドンドン調べて知識をつけていくのが良いと思います。

全てを完璧に網羅しようとするのではなく、わからないことはその都度調べれば大丈夫というスタンスで進めるとモチベーションを長く保てると思います。
それと全てを覚える必要もなく、忘れたら調べたら良いやと考えて作るとプレッシャーや自己嫌悪で悩まされることも少ないのではないでしょうか。

まとめ 常に情報収集しよう

これができたらコーディングは完璧！というわけではなく、勉強や情報収集を続けることは必須になります。

ですが初心者の頃はそもそもサイトのコーディングを完成させるのが一苦労ですよね。
まずはコーディングがある程度自力でできるようになればその後の学習も続くのではないかと思いまとめました。

progateをしているけど次にどうしたら良いかわからない、コーディングを始めたけど学習方法がわからずモチベーションが続かなくなった…とお悩みの方のさんこうになれば幸いです。

CSSが読み込めなかったけど解決した記事も書いています。

• HTML&CSS
• プログラミング