logo
仕事術

更新日

初学者向け！Webサイト制作の独学勉強のコツ

Webデザイナーやフロントエンドデベロッパーを目指す方から、よく勉強方法を聞かれることがあります。彼らなりに調べて、あれこれ学習を続けているようなのですが、「このやり方でいいのか？」と不安に感じるときもあるようですね。ということで今回は私の経験をもとに勉強するときのコツをまとめてみます。具体的な学習内容については各々の目的によって異なると思いますし、「ロードマップ」なるものが巷で出回っているので今回は割愛。

いろんな Web サイトを見る

初学者と経験者では見てきた Web サイトの数が圧倒的に違います。いろんなジャンルの Web サイトを見る習慣をつけるといいでしょう。ただ眺めるだけではもったいない！いいなと思ったところや改善できそうなところを探っていくと、自分の引き出しが増えていくはず。コーディング面ではデベロッパーツールを使ってどんなコードになっているのか確認したり、使用しているフレームワークやプラグインを考えてみるといいですね。

マネるデザイン研究所は、素敵な Web サイトを掲載するだけではなく、思わず真似したくなるポイントや応用できそうな場面、懸念点も記載されています。

他にも素敵な Web サイトを掲載したギャラリーサイトは多数あるので要チェックです！

短時間でも毎日学習する

休日に丸一日使ってお勉強している人も多いでしょう。もちろんそれもいいのですが、おすすめは少しの時間でも毎日続けることです。忘却曲線というものがあって、繰り返すことで記憶に定着しやすくなるそうです。

思い起こせば中学三年生の頃の Mana 少女は、受験生なのに勉強する習慣がありませんでした。そこで毎日 15 分だけ机に座ってみるというところからはじめ、15 分が 20 分になり、30 分になり、1 時間になり…という感じで日々の勉強習慣を身に着けました。今でもそれは変わらず、勉強と筋トレは毎日最低 15 分は続けています。15 分程度なら案外簡単に時間は作れるものです。

コンポーネント単位で作ってみる

コンポーネントとは Web サイトで使用する各パーツのこと。例えばボタンやナビゲーションメニュー、検索フォーム、料金表、カード型リストなどなど。Web デザインや HTML/CSS/JavaScript を学び始めたばかりだと、一から Web サイトを作るのは時間もかかりますしハードルが高いかもしれません。そこでこういったコンポーネント単位でデザインしたり、コーディングしてみると、小さな成功体験を積み重ねられるので挫折せずに続けられます。

前述した Web デザインのギャラリーサイトの他に、コンポーネントごとに分類されたギャラリーサイトもあります。「今日はこのパーツを作ってみよう！」という感じで自分に課題を出して挑戦していくといいですね！

コードを残す

コーディングの学習の場合、一度書いたコードは消さずに保存して残しておきましょう。後から復習もできますし、次に似たようなコードが必要となったときにコーディングの時間短縮にもなります。ローカルで毎回ファイルを作成していってもいいのですが、CodePenやJS Binなどのブラウザーで動作するコード共有サイトを利用すれば、コードを書いたらすぐにプレビューで確認できて便利です。会員登録すれば保存も可能！

ひとつの情報源に頼らない

学習用の書籍や動画、サービスを完遂することで、全体像が見え、達成感も得られるはずです。ただ、解説する人が変わればやり方も変わるはずなので、「自分にはなんだか合わないな」「わかりづらいな」と思ったら別のリソースに変えても OK です。いつも動画を見て勉強していたなら、書籍を読んでみたり、その逆もまた然りで、学習媒体を変えるだけでも見えてくるものが変わるはず。特に Web デザインやフロントエンド周りでは情報源も多いので、無料〜低料金で学習環境が整えられます。

そしてひとつのリソースを無条件に信じないこと。ひとつの作業をするにしても、様々な方法があります。いろんなツールを試して、いろんな方法を試して、いろんな可能性に触れてください。初学者のうちに頭が凝り固まってしまうと応用力がつきません。確実に信じていいのは公式のドキュメントだけです。

作った Web サイトを公開する

趣味でデザインやプログラミングをしているのであれば自己満足できればそれでいいかと思いますが、仕事にしたいのであれば**大事なのは「勉強したこと」ではなく、「勉強したことで何ができるのか」**です。結局なにか作品として残さないと評価されません。作るものは自分の趣味サイトや、自分が使うための簡単なツールからで OK です。一から自分で作成し、公開するまでを一通りやっておきましょう。作って終わり！ではなく、運営することで改善案が見えてきたり、次に作る時のより良い方法がわかったりしますよ。

もちろん最初からすべてうまくいくとは限りません。しかし、生産的な失敗は未来の糧となります。たくさん失敗して、改善して、成長していきましょう！

仕事の探し方は過去記事『フリーランス Web デザイナーが初案件を獲得する方法』も参考にしてみてください！

ちなみに私も絶賛 React の勉強中！拙いながらも作ったものを公開していますよー！勉強したことは日々「#Mana の React 勉強日記」ってタグで Tweet しております！

良き独学ライフを！