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

↑私が10年以上利用している会計ソフト！

いろんなWebサイトを見る

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

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

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

• SANKOU!
• I/O 3000
• Siteinspire
• MaxiBestOf

短時間でも毎日学習する

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

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

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

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

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

• Parts.
• Landingfolio

コードを残す

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

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

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

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

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

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

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

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

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

やっと公開できたー🎉無料利用できる白黒写真素材の検索サイトです！ @yando さんGitHubのSecretsの設定教えていただき感謝です！デモ版だからあんまアクセスできないかも🙃 https://t.co/FfCkwt7F27 #ManaのReact勉強日記 pic.twitter.com/I8HHIZbec9

— Mana (@chibimana) February 28, 2022

良き独学ライフを！