こんにちは！デザイナーのてれすたです！
この記事では、
Webデザインを学びたいんだけど、何から始めたらいいの？
具体的にどうやって学べばいいの？
という人のために、『独学でWebデザインを学ぶ手順』と『具体的な学習方法』をご紹介していきます。
この記事を読めば、今何をすればいいのかがわかるよ！
Webデザインの独学を始める前に
まずは、自分がどんなWebデザイナーになりたいのかを考えてみましょう！
Web制作者といっても、
- コーディング&デザインどちらもやりたい
- デザインだけやりたい
- コーディングだけやりたい
など、どんな働き方を目標とするかによって学ぶべき内容が大きく異なります。
どんなWebデザイナーになりたいのかまだわからないなぁ…
という人は、まずはどちらもやる前提で学習を進めていきましょう。
ポイント
とりあえず学習を進めていくと、自分がどうなりたいのかわかるようになる。それまではどちらも学習していこう！
「デザインだけ」「コーディングだけ」をやるメリット・デメリット
学習を進めていくと、
自分はデザインは好きだけど、コーディングは苦手だなぁ
コーディングは簡単にできるけど、デザインって難しいかも…
など、自分の得意不得意が見えてきます。
そんなときに「デザインだけ」「コーディングだけ」のWeb制作者になったら、どんなメリットデメリットがあるかを知っておきましょう。
メリット
- 「コーディングorデザイン」に専念できる
- 両方学ばなくていいので、学習期間が短い
- 効率的にスキルアップできる
これらのメリットがあります。
やはり１つのことに専念できるので、学習期間の短縮ができたり、スキルアップをするのにも時間がかかりません。
デメリット
- 1人ではWebサイトを作ることができない
- デザインのみの案件を獲得するのは、比較的難しい
- 「コーダーorデザイナー」のパートナーを見つけないといけない
メリットも魅力的でしたが、これらのデメリットも理解しておきましょう。
とはいえ、同業者とのつながりが多ければ、パートナー探しに苦労することはなさそうです。
身近なweb制作者たちも、デザインとコーディングを分担している印象だよ！
まずはどちらもやるつもりで学習を始めて、自分の好きがわかったら特化して学習してもいいですね。
Webデザインは何を学べばいいの？
Webデザイナーになるために、学ぶべきことはこの３つです。
- デザインの基礎知識
- コーディングの基礎知識
- Web制作ソフトの操作
これらの基礎知識やスキルをつけてることで、Webデザイナーとして活躍することができます。
順番に解説します。
デザインの基礎知識
Web制作に必要なデザインの基礎知識とは、
- レイアウトや配置
- 余白
- フォントの使い方
- 写真の選び方
- 配色
などのことです。
見やすいWebサイトを作るために、これらの知識とスキルが最低限必要となります。
学べば学ぶほど、いいデザインが作れるようになるよ！
コーディングの基礎知識
Web制作に必要なコーディングの基礎知識とは、
- HTML（サイトの骨組みを作る）
- CSS（サイトのデザイン性を高める）
- JavaScript（サイトに動きを出す）
などのことです。
考えたデザインを形にするためには、それなりの技術が必要となります。
しっかりと勉強しないとね！
Web制作ソフトの操作
Web制作に必要なソフトとは、
- Photoshop
- Illustrator
- Adobe XD
- Sketch
- STUDIO
- Figma
- WIX
- InVision Studio
これらのことです。
Web制作に使えるソフトはたくさんあるのですが、一般的なソフトである「Photoshop」から学ぶと良いでしょう。
ちなみに、操作の学習には、ソフトも付いて格安で学べる「たのまな」や「デジハリ」などの通信講座を活用するのがオススメです。
「ソフト」と「操作を学べる教材」を別で買うと高くなってしまうことが多いのが現状。
そんなときは、セットで購入すると費用を安く抑えることができます。
お得に学べるなんて素敵！
ポイント
Web制作コースなどを購入すれば、「Web制作の知識」「デザインの知識」「操作方法」の３つを同時に学ぶことができます。※こちらもソフトが付いてくるのでお得！
Webデザインの具体的な学習手順
webデザインを学ぶなら、下記の流れで学習していきましょう。
デザインだけを学習したい人
- デザインの基礎知識を学ぶ
- デザインソフトの操作を学ぶ
- Web制作の知識を学ぶ
- コーディングの基礎知識を学ぶ
- サイトを制作してみる
- 案件に挑戦する
コーディングだけを学習したい人
- コーディングの基礎知識を学ぶ
- Web制作の知識を学ぶ
- サイトを制作してみる
- デザインの基礎知識を学ぶ
- 案件に挑戦する
デザイン&コーディングを学習したい人
- デザインとコーディングの基礎知識を学ぶ
- Web制作の知識を学ぶ
- サイトを制作してみる
- デザインソフトの操作を学ぶ
- デザインソフトの操作を学ぶ
- サイトを制作してみる
- 案件に挑戦する
このような手順で学習していけばOKです。
迷わないように手順をお伝えしましたが、実は学習の手順に明確な決まりはありません。
デザインから学んでもいいし、コーディングから学んでもいいし、両方やりながら学んでもいいんです。
大切なのは、挫折しないこと。
自分の好きな手順で学んでいこう！
Webデザインを学ぶには、どんな学習方法があるの？
Webデザインを学ぶ方法はたくさんあります。
たとえば、
- デザインスクール
- 学習サイト
- オンラインサロン
- ※本
- ※専門学校
などが一般的です。
一昔前なら、本や専門学校で学んでもよかったのですが、今は学習サイトで簡単に学ぶことができる時代です。
特にこだわりがないのであれば、学習サイトやスクールで学ぶので十分でしょう。
人気の学習サービスを上げると、
- TechAcademy
（プログラミングが学べるスクール）
- codebegin（マナブさんの初心者向けプログラミングコミュニティ）
- chot.design（デザイン特化学習サイト）
- Progate（プログラミングが学べるサイト）
- ドットインストール（プログラミングが学べるサイト）
- サルワカ（Web制作全般が学べるブログ）
- Udemy（さまざまな講座があるサイト）
これらのサイトやサービスは、Web制作を学ぶ人たちにとっても人気なんです。
まずはどれか１つ試してみてね！
ちなみにcodebeginは、私も所属しているオンラインサロンです。web制作が学べるのはもちろん、雰囲気がいいのでとてもオススメ。
最近も、コミュニティのイベントで楽しい時間を過ごしました。
海の作業会に参加してきましたー！✨
— てれすた🍎ロゴデザイナー8年生 (@telesta_design) April 9, 2023
楽しかったー！！
とくにじゅんぺいさん(@junpei_sugiyama )やかんさん(@minimal_kan )とのブログやBrainの話は、めちゃ刺激になりました。ノグチさん(@n_seitan )の話もほんとためになりました…！
よしおさんのイベントは最高です☺️🍎 https://t.co/MRvpkzIiNq pic.twitter.com/FiOFOXY2EW
まとめ
それでは今回のまとめです。
学習の前に、まずやるべきこと
- どんなwebデザイナーになりたいのかを考える（コーダーのみ？デザインのみ？）
まずは、どんなWeb制作者になりたいのを考え学習に取り掛かりましょう。
学ぶべき３つのこと
- デザインの基礎知識
- コーディングの基礎知識
- Web制作ソフトの操作
学ぶべきことは、以上の３つです。
全て学ぶことができたら、案件に挑戦してみましょう。
具体的な学習の手順
- デザインとコーディングの基礎知識を学ぶ
- Web制作の知識を学ぶ
- サイトを制作してみる
- デザインソフトの操作を学ぶ
- デザインソフトの操作を学ぶ
- サイトを制作してみる
- 案件に挑戦する
具体的な学習手順は、以上のとおり。
でも厳密な順番はないので、自分のやりやすいように勉強してみてね！
いよいよ学習していこう！となったら、下記のサービスがオススメ。
- TechAcademy
- codebegin（マナブさんの初心者向けプログラミングコミュニティ）
- chot.design（デザイン特化学習サイト）
- Progate（プログラミングが学べるサイト）
- ドットインストール（プログラミングが学べるサイト）
- サルワカ（Web制作全般が学べるブログ）
- Udemy（さまざまな講座があるサイト）
どれもWeb制作学習にオススメのサービスです。
codebeginは私も入っているコミュニティなので、個人的にもオススメ！笑
以上、『独学でWebデザインを学ぶ手順』と『具体的な学習方法』でした。
やるべきことがたくさんあって動けなくなってしまいそうな人は、まずは１つ、学習サービスを選んで即実行してみるのがおすすめです。
学習意欲のあるうちに早く行動してしまうことで、やる気を保ったまま学習を始めることができます。
結果、早く習得することができます。
サイトやサービスをうまく活用して、学習を始めてみてね！
本格的に学びたい人は、こちらの記事もオススメ
