Web制作の学習手順と最短ルート

前回の記事『未経験から独学でWebクリエイターになった話』では、学習を始めるファーストステップとして、情報収集の重要性について書かせていただきました。

この記事では、その情報収集をもとにどのように学習を進め、お仕事につなげていったのかをお話ししたいと思います。これからWeb制作やデザインの学習をはじめる方の参考になれば幸いです。

１　目的を設定する

まず、目的を設定します。Web制作での目的は、趣味でWeb制作をしている方は別として、「Web制作をして対価（収入）を得ること」が一般的だと思います。制作するWebサイトのクオリティーが高ければ、クライアントの要望に応えやすくなりますが、だからと言ってクオリティーを追求するがあまり、目的達成までの時間をかけすぎるのは効率が悪いと感じます。なので、Web制作で言うと、HTML・CSSの基礎を理解できており、調べれば簡単なJavaScript（jQuery）が実装できる程度（私の場合は上記に加え、WordPressでブログとお問い合わせページが実装できる程度）を最初の目標にしました。

２　目的達成のために必要な手段をまとめる

次に、上述の目標を達成するには何をする必要があるのかを考えます。このときに、前回の記事で紹介した情報収集が役に立ちます。

私の学習計画としては、まずドットインストール・ProgateでHTML・CSS・JavaScriptの具体的な使い方、何ができるのか、コードを書くとどうなるのかなど、実際に手を動かして実践形式で体験してみます。この段階では、少し体験してみる程度でOKです。実際にコードを書いてみるのと、頭の中だけで理解するのでは修得のスピードが違うので、ぜひコードを書いて体験してみて下さい。

次に、各言語（HTML・CSS・JavaScript）で何ができるのかをある程度つかんだら、文法的なことを理解するためにHTML・CSSの本を一冊読みます。一通り文法的なことを読んでおけば、あとは実際に使う時にまた見返して理解すればいいので、「この要素、見覚えがあるな」くらいにしておくと後々便利です。

また、インターネットやサーバーの仕組み、テキストエディタやブラウザの種類、HTML・CSSのバージョンのことなど、YouTubeやTwitterなどと違って、Web制作をする上で最低限知っておいた方が便利な情報が本では一冊にまとまっているのでおすすめです。

ここまでくると、ある程度HTMLとCSSの文法的な基礎は理解できると思うので、実践形式の学習に戻ります。私はドットインストールでHTML・CSS・JavaScript（jQuery）のコースを一通り学習しました。一本あたり数分程度にまとめてくれているので、時間はそこまでかかりません。

HTMLとCSSは上記の学習で充分対応できるレベルになると思うので、あとは実践を重ね、実装できるコーディングの幅を広げていくだけです。

ここまででコーディング（HTML・CSS等）の基礎はつくと思いますが、デザインに関しては全く触れていませんでした。デザインに関しては、色々な情報や実物のデザインを見て学び、デザインし、経験を積んでいくしかないと思いますが、Web制作をする上で、どのようなツールを使ってデザインし、そのデザインをコーディングしていくのかという流れは必須の学習事項だと思うので、簡単に説明したいと思います。私の場合、SketchとAdobeのXDを使ってデザインをしています。ツールは一つで充分なので、自分の使いやすいものを選んでください。一般的にはXDを使っているデザイナーの方が多い印象です。使い方はどれも似ているので、一つ使えれば他のものに変えても使えると思います。

あとは画像の加工にPhotoshopを使ったり、自分でイラストやロゴなどを制作するときにillustratorを使ったりします。これらも少しづつ触って、使い方を覚えていくと良いと思います。

デザインに関してはSketchを使って実際にデザインからコーディングまでの流れを解説してくれているUdemyの「Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座」がとても分かりやすかったので紹介しておきます。

内容としては、クライアントからのヒアリングの仕方やデザインの基礎、見積書の作成方法などWeb制作に必要な一通りの知識を分かりやすく解説してくれています。なので、実際に自分がお仕事をする際の流れはこの講座である程度つかめると思います。

次に行ったのがWordPressの勉強です。WordPressは初めのうちは苦労しました、、、。最初は、WordPressの本を読んでいたのですが、WordPressを分かりやすくまとめてくれている書籍は少ないです。なので、結果的に一番分かりやすく、理解が急速に進んだのは、UdemyのたにぐちまことさんのWordPressの講義です。この講義は最高に分かりやすいので、今となっては一択です。基礎から応用まで説明してくれるので、今でも応用部分を見返したりして重宝しています。この講義とアキユキさんのYouTubeのWordPress講座を組み合わせると、かなり理解が深まると思います。

３　まとめた手段を淡々とこなす

ファーストステップで必要な学習内容は上記で説明した内容で充分だと思います。あとは、理解できるまで淡々と繰り返し学習するだけです。

４　早い段階でアウトプットする

個人的にはここが一番重要だと思うのですが、アウトプットは早い方が良いと思います。インプットだけしている状態の時は、自分に何が足りないのか、どこでつまずくのかが全くわかっていません。頭では理解しているつもりでも、実際にコーディングしてみると、初めのうちは手が止まってしまうと思います。わからないから調べる、調べてコードを書いたらできるようになったという経験の繰り返しで上達していくことを身をもって実感したので、ぜひアウトプットは早めにしてください。

５　アウトプットでの反省点をふまえさらにインプットする

上記４と内容は少し重なりますが、アウトプットをしていくうちに、この点は次回からの課題だな、次はこういう機能を実装してみたいな、このデザインを取り入れたいなという段階に進んでいくと思います。簡単なものであれば、Googleで少し探せばコピペして使えるようなものもありますが、難易度が上がるにつれ、じっくり腰を据えて学習する必要があるものも出てきます。また、コピペするのは楽ですが、本質的な理解にはつながりません。難しいからと諦めずに地道に知識と技術のインプットをし、それをアウトプットする作業が重要になってくると思います。

６　おわりに

以上が、私がWeb制作をする上で実際に学習してきた手順です。タイトルには最短ルートと書いていますが、結局、最短ルートは地道に継続することだと思っています。楽して手に入れた知識や技術は誰でも手に入れることができるということなので、大したものではないですよね。ということで、私も引き続き地道に知識と技術の修得を繰り返していきたいと思います！

長くなってしまいましたが、最後まで読んでいただきありがとうございました。

次回は、Web制作での初案件のお話しをしようと思いますので、よければ見にきてください٩( 'ω' )و