「WEBデザイナーに興味はあるけど、独学でなれるんだろうか？」
「スキルを獲得するまでの道のりが長そうだ…」
こんな悩みを抱えているWEBデザイナー志望の方は多いのではないでしょうか。
今回は、WEBデザイナーになるまでのロードマップを解説していきます。
必要なスキルや独学できるサイトを解説いたしますので、ぜひ学習前の参考にしてください！
WEBデザインスキルを身につけるためのロードマップ
Step①WEBサイトの仕組みを理解する
まずは、Webサイトの仕組みを理解しましょう。
- ホームページがどのような仕組みで成り立っているのか
- インターネットはなぜ繋がるのか
- Webサイトが表示される裏でどのような処理が行われているのか
WEBデザインは様々なスキルで成り立っている
WEBデザインは下記のスキルから成り立っています。
| HTML | Webサイトの構造を入力する言語 |
| CSS | 構造に装飾を加える言語 |
| JavaScript | Webサイトに機能をつけるプログラミング言語 |
| jQuery | JavaScriptを簡単に使えるフレームワーク |
| Bootstrap | HTML、CSSを簡単に使えるフレームワーク |
| WordPress | Webサイトを簡単に作れるサービス |
| PHP | WordPressで使われるプログラミング言語 |
| adobe Photoshop | 画像編集ソフト |
| adobe Illustrator | デザイン制作ソフト |
| adobe XD | Webサイトのワイヤーフレーム作成ソフト |
| SEO | 検索エンジン最適化のノウハウ |
| セールスライティング | 商品を売れるようにするための文章術 |
すべてのスキルを学んでからじゃないとWEBデザインで稼げないということはありませんが、実際にどのようなスキルでWEBデザインが成り立っているのかは理解しておくと良いでしょう。
Step②WEB制作のできる環境を整える
Web制作学習は、パソコンやテキストエディタなどを用意するだけですぐに勉強を始められます！
スムーズに勉強を始めるために、まずは下記を用意しましょう。
必要なもの
- パソコン（Windows、MacどちらでもOK）
- エディタ
- タイピングスキル（ある程度あればOK）
- プログラミングに関する基礎知識
プログラムを書くためには、専用のテキストエディタが必要です。
【主なエディタの例】
- VS Code（Visual Studio Code）
- Atom
- Sublime Text
Step③HTML/CSSを勉強する
Webサイトの仕組みについて学ぶと、同時に様々な専門用語の理解もできます。
仕組みを理解できたら、Webサイトを構築している技術について実際に学んでいきましょう。
まず勉強すべきなのが、HTMLとCSS。
| ドットインストール | 短い動画で少しずつ学べるので、自分のペースで学習可能。 |
|---|---|
| Progate | ゲーム感覚で学習できるので、超初心者でもスムーズに学習可能。 |
Step④JavaScript・JQueryを勉強する
HTML、CSSについて学んだ後は、JavaScriptについて学習しましょう。
JavaScriptとは・・・Webサイトに動きをつけることができるプログラミング言語。
例えば、Webサイトでカーソルを合わせると文字の色が変わったり、メニューがふわっと出てきたりするのは、JavaScriptによるものです。
jQueryとは・・・JavaScriptでできることを、より簡単に実現できるライブラリ。
より簡単かつスムーズにWebサイトに動きをつけられます。
JavaScript・JQueryも、オンライン教材で学ぶことができます。
Step⑤既存サイトの模写を5サイトやってみる
一通りの学習が終わったら、実際に手を動かしながら知識を自分のものにしていきましょう。
実際に手を動かして作業するのが一番身につきます！
Step⑥WordPressを学ぶ
副業やフリーランスでWeb制作の仕事をしたい場合、WordPressについても学習しておくといいでしょう。
WordPressとは・・・オープンソースのポピュラーなブログ作成ツール。
クラウドソーシングサイトにもWordPressを使ったWeb制作の案件が多数あるため、WordPressのスキルを身につけることで、仕事が受注しやすくなります。
スキルを身につけるために必要な時間は？
上記で、WEBデザインのスキルを身につけるために必要な勉強について解説してきました。
次に、それらのスキルを身につけるためにどれくらいの学習時間が必要なのか解説いたします。
以下がそれぞれのスキル習得の最低限の目安です。
| HTML | 8時間 |
|---|---|
| CSS | 12時間 |
| Bootstrap | 3時間 |
| jQuery | 5時間 |
| WordPress | 3時間 |
| adobeXD | 1時間 |
| Photoshop | 8時間 |
| Illustrator | 8時間 |
| JavaScript | 20時間 |
| PHP | 20時間 |
これらが最低限の勉強時間の目安です。
上記に、模写の時間が加わってきます。HTMLとCSSの基礎を学んだ状態だと、1つのサイトを模写するのにかかる時間は5〜10時間ほどはかかると思いましょう。
まずは、HTMLとCSSについて20時間ほど勉強してみると、Webデザインの骨格が見えてくるはずです。
1日1時間の勉強時間を確保すれば、1ヶ月弱でHTMLとCSSの基礎が学べます。
1日1時間なら働きながらでも時間を作ることができるのではないでしょうか？
副業・フリーランスとしてWEBデザインで稼ぐ
Web制作のスキルを身につけても、すぐに仕事が受注できるとは限りません。
次に、Web制作で稼ぐために行うべきことを解説していきます。
ポートフォリオを作成する
ポートフォリオとは・・・デザイナーやエンジニアにとっての履歴書のようなもの。
ポートフォリオを通して、自分のスキルや実績を発注者にアピールできます。
クラウドソーシングサイトで案件を探す
知人や知り合いを通じて仕事を受注する方法もありますが、そういったコネがない場合にはクラウドソーシングサイトの活用がおすすめです。
有名なサービスとしては、
- クラウドワークス
- ランサーズ
などがあります。
最後に
WEBデザイナーとして必要なスキル獲得までのロードマップを解説してきました。
フリーランスのWEBデザイナーになって稼いでいきたいとお考えの方は、ぜひ参考にしてください！
「独学でスキルをつけるのは難しそう…」
「1人で副業フリーランスを始めるのは不安」
中々１歩を踏み出せない方もいらっしゃるのではないでしょうか。
そんな方には、リモラボがおすすめです！！↓
