僕は独学で勉強を行い、未経験からWebデザイナーとしてWeb制作会社に入ることができました。
独学で勉強するにあたって、どのような方法があるのか。
どう進めれば効率よく勉強できるのかやWeb制作会社の求人に応募するまでの全体的な流れを紹介します。
全体的な流れ
| STEP.1 | デザイン・コーディングの基礎知識を身につける デザインツールの基本操作をマスターする WordPressの基礎知識を身につける |
| STEP.2 | ポートフォリオを制作する |
| STEP.3 | Web制作会社の求人に応募する |
ざっくりと上記の流れです。
期間としては、それぞれの就業状況などの環境により異なると思います。
なので一概には言えませんが、勉強をスタートしてから約半年ぐらいでポートフォリオを完成させ、Web制作会社の求人に応募できる段階まで進めることができたら、早い方だと思います。
僕は会社を退職してから、本格的に勉強をスタートさせました。
期間としては、Web制作会社に入るまでに転職活動を含め、約10ヶ月間かかりました。
少し、時間をかけ過ぎたかなと思いましたが、しっかりと基礎を身につけることができたので、現在の実務に役立てることができています。
自分で半年や一年と期間を決めて、進めていければいいんじゃないかなと思います。
ここからはそれぞれの勉強方法の紹介です。
デザイン・コーディングの基礎知識を身につける
デザインの勉強方法
実務未経験からだとレベルの高いデザイン力を求められることはほとんどないです。
勉強の第一歩として、デザインの４大原則「近接」「整列」「反復」「対比」を理解しておきましょう。
デザインの勉強は主に書籍で勉強するのがおすすめです。
現役のWebデザイナーの方やネットでも評判の高い書籍を紹介しておきます。
- なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
- ノンデザイナーズ・デザインブック
デザインの勉強の第一歩は、上記の本からスタートするのが良いです。
デザインの詳しい勉強方法はこちらの記事で紹介しています。
コーディングの勉強方法
コーディングに最低限必要な言語、HTML、CSS、jQuery（JavaScript）の知識です。
最初は難しく感じることもありますが、何度も繰り返すことにより理解できるようになるので大丈夫です。
僕も最初は何が何なのか分からないレベルでした(笑)。
簡単にそれぞれの役割を説明すると
HTML＝文章構成をするもの
CSS＝デザインをつけていくもの。色、サイズ、レイアウト、アニメーションなど。
jQuery＝動きをつけるもの。ローディングアニメーションやスライドしている画像などの実装に使用。
コーディングの基礎知識を身につけるために書籍や動画教材、学習サービスなど様々なものがあります。
初めて勉強する人にとってはどれから手をつけたらいいのか分からないと思います。
振り返ってみて、まとめると個人的にこの流れで勉強していくのがおすすめです。
Progate
このサイトは実際にコーディングしながら学ぶことができます。
最初にスライド式の解説を見てから、進めるのですごく分かりやすいです。
コーディングの初学教材としても、とても有名な学習サービスです。
※有料会員：税込 1,078円/月
Progateの詳しい勉強の進め方はこちらの記事で紹介しています。
ドットインストール
このサイトは動画を見ながら学ぶことができます。
各動画は短く、空いた時間にも簡単に勉強することができます。
最初は解説や進めるスピードが速く感じると思うので、倍速の切り替えで遅くしながらゆっくりと理解できるようにするといいです。
progateで勉強しながら、並行して復習がてらに動画を見ると知識が定着しやすいです。
※有料会員：税込 1,080円/月
コーディングの勉強の初めは、この２つの学習サービスから始めましょう。
どちらも無料会員だと制限があるので、有料会員になるのがおすすめです。
初学者にとっても質も高いので、自己投資だと思えばめちゃくちゃ安いです。
僕は最初の勉強の時と分からなくなった時に各分野を復習するのにかなりお世話になりました。
次のステップとしては、復習をしながら動画教材を進めるのがおすすめです。
Udemy
ここは様々な動画教材を購入できるサイトです。
頻繁にセールをしているので、その時に買うのが良いです。
今回はコーディングの復習と実際にサイトを制作する練習をするためのおすすめの動画コースを紹介します。
Photoshopの使い方もまとめて学ぶことができるので、おすすめの動画です。
ここまで進めることができたら簡単なサイトは制作することができると思います。
次のステップとしては模写コーディングをしてみることをおすすめします。
模写コーディング
模写コーディングは既存のサイトとまんまそっくりコーディングをすることです。
と言っても、どんなサイトを模写すればいいのか。
模写するのにおすすめなサイトを紹介します。
いきなりは難しく感じると思うので、簡単なサイトから挑戦しましょう。
初めて模写するのにおすすめなサイトが、
次は模写コーディングで定番になってるのが、
このサイトを模写コーディングしている方も多いので、難しいところがあれば検索すると解決策が見つかることが多いのでおすすめです。
最初は分からないところも多く、つまづくことが多いと思います。
分からなければ、Chromeの検証ツールを使用してコードを見て、どのcssがどういう役割をしているのかを理解するだけでいいです。
コツとしては完璧再現するのではなく、６割７割できたら良いや。ぐらいで取り組むのが良いです。
今は出来なくても、後で必ずできるようになる時が来ます。
ここで紹介しているサイトは僕が挑戦したサイトなので、自分で他にサイトを探すのも良いと思います。
お気に入りのサイトを模写した方がモチベーションも上がると思います。
Progateやドットインストールで振り返りながら、模写サイトを完成させましょう。
ここまで来ればコーディングの基礎知識は十分身に付いている状態だと思います。
デザインツールの基本操作をマスターする
使用するデザインツールは主にPhotoshop、Illustrator、XDです、
これはデザインカンプ、バナー、アイコンを制作するのに使用します。
どれも使いこなせれば高度なことができますが、 Web制作会社に入るまでは基本操作が出来れば良いです。
制作会社によってはどう使用しているかは異なると思いますが、各デザインツールの使用用途としては
Photoshop＝画像加工・リサイズ、デザインカンプ、バナー制作
Illustrator＝イラスト、アイコン、バナー制作
XD＝デザインカンプ制作
こんな感じですかね。
と言っても会社や人によって違うので参考程度にして下さい。
個人的に思ったのが、これらのデザインツールの使い方を勉強するのに書籍も良いのですが、最初は動画教材がおすすめです。
動画の方が実際の操作しているところを見ながらできるので、真似しやすく理解しやすいです。
これもUdemyの動画教材を使用します。
Photoshopの学習は
これは上のコーディングの練習でも紹介した動画です。
コーディングの勉強だけではなく、Photoshopの勉強もできるのですごくお得な動画です。
Illustratorの学習は
この動画は順を追って、ゆっくりと解説してくれているので分かりやすく、おすすめです。
PhotoshopとIllustratorは、この二つの動画で基本操作はマスターすることができます。
何度も動画を見返しながら、操作を覚えたら、自分で簡単なイラストやバナーを制作することができるようになってくるので楽しいですよ！
この動画の他にも色々種類があるので、探してみると良いですよ！
XDに関しては本当に基本操作が簡単なので、PhotoshopとIllustratorの使い方が分かれば直感的に操作ができると思います。
基本操作でできること以外にもしっかりとした機能もあるので、使いこなすことができると面接時のPRにもなると思います。
僕はWeb制作会社に入ってから、本格的にXDの勉強をしようと思って、下記の書籍を買いました。
- Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル
WordPressの基礎知識を身につける
WordPressはブログやサイトを制作できるコンテンツ管理システム（CMS）です。
どこのWeb制作会社でもほぼ案件があるので、カスタマイズができると面接時にもPRできます。
高機能な実装をしようと思うと幅広いPHPの知識も必要になってくるのですが、今の段階では静的なサイトを動的なサイトに実装ができるぐらいまでになっておければいいと思います。
動的なサイトとは簡単に言うと、ブログやお知らせを投稿することができる機能を持ったサイトのことです。
まず、WordPressが何なのかということを理解するといいと思います。
僕はネットで記事を見たり、Youtubeで基本的な概念を勉強しました。
おすすめの記事は
WordPressの勉強方法
静的なサイトを動的なサイトにする（ワードプレス化）勉強は
このUdemyの動画が理解しやすかったです。
WordPressは実装できる機能も多く、奥が深いのでそんな難しいことはできなくても大丈夫だと思います。
僕はWeb制作会社に入社段階では、上の動画のワードプレス化をやっとできるレベルでした。
面接の時にWordPressを触れるのかをよく聞かれたので、できるだけ触れるようにしておくと良いですよ！
ポートフォリオの制作
ポートフォリオは自分のプロフィール、保有スキル、制作実績などを載せるものです。
ここで問題になってくるのが制作実績はどうしたら良いのかということだと思います。
僕もそうでしたが、実務未経験だと制作実績がありません。
なので架空のサイトを制作していました。
今まで勉強してきたことのまとめとして、デザインツールを使用して簡単なデザインカンプを制作してみましょう。
それを元にコーディングしていき、架空のサイトを制作して制作実績を増やしていきます。
スクールに通っている人は課題で制作したものを載せている方が多いらしいのですが、オリジナルで1から作るのが良いと思います。
実務未経験からだとスキルよりも熱意を重要視されるので、自分でデザインも考えて制作しました！と言える方が他の応募者と比較しても、差別化することができます。
ここで大切なのが、デザインに関しては実務で通用するレベルではなくても、なぜここのデザインはこうしたのかを全て答えられるぐらいの気持ちを持って制作することです。
詳しいポートフォリオの制作方法はこちらの記事で紹介しています。
Web制作会社に応募する
ポートフォリオが制作できたら、いよいよWeb制作会社の求人に応募してみましょう。
実務未経験だと書類選考の段階で落とされることがほとんどです。
面接に呼んでもらえるようにポートフォリオと職務経歴書をブラッシュアップしながらどんどん応募してきましょう！
Web制作会社の探し方や面接で聞かれたことはこちらの記事で紹介しています。
まとめ
- Web制作会社に応募するまでの全体的な流れを把握する。
- 今の自分に必要なものを身につける。
- 面接でWebデザイナーになりたい！という気持ちをぶつける。
現在、Web制作会社で働くことができて、毎日がとても楽しくなりました。
どうせ仕事をするなら、楽しく仕事をしたいですよね。
大変な時もありますが、日々勉強でも自分が好きなことをやっているので、本当にWebデザイナーになれて、良かったと思っています。
自分と同じような気持ちになれる人が増えることを願っています。
コメント