こんにちは、わたるです。
今回は、「Webデザイナーになる為のロードマップ」について、分かりやすく解説していきます！
こんな悩みがあるあなた向けの記事
未経験からどうやってWebデザイナーになるの？
デザインを学んだこと無いけど本当に身に付けることができるの？
Webデザインの勉強方法について知りたいけど情報がまとまっていない…
こういった疑問や要望に答える記事です。
僕もWebデザインを学ぶ時に、何から勉強すればよいのか分からず悩みました…
Webデザインはコーディングなどに比べて意外と学習ルートが確立されてないんですよね。
ネット上にポツポツと情報はありますが、結局どの手順で進めるのが失敗しないか判断ができない状態です。
この記事だけを読めばWebデザインの学習が最短で進められるよう、ロードマップを分かりやすくまとめてみました。
※今回はコーディングよりもデザインの学習比率が多くなっていますので、ご了承ください。
初めましての方も多いかと思いますので、簡単な自己紹介をさせてください。
【執筆者紹介】
・完全未経験から副業でWebデザイナーのお仕事をするように
・本業：コーダー、副業：Webデザイナー
・Webデザインの学習開始から3ヶ月で業務提携2社＋20万円売上げ達成
紹介を見ていただければ分かりますが、至って普通の人間です。
数ヶ月前の僕と同じように、これから学習をする方や駆け出しの方もいるかと思います。
しっかりと手順を踏むことによりWebデザイナーとしてお仕事をできるようになりますので、一緒に頑張りましょう！
Web制作の流れを知ろう
まず1番最初にWeb制作がどのような流れで作られているのか把握しましょう。
Web制作には一般的に下記のような流れがあります。（※案件によっては異なる場合もある）
一般的なWeb制作の流れ
- クライアント様（お客様）がWeb制作の案件を依頼をする
- Webディレクターがヒアリングして案件の内容や要件をまとめる
- Webデザイナーがデザインを制作する
- コーダーがデザインを元にコーディングをする
- 完成した制作物をクライアント様に納品して完了（公開・運用まですることもある）
ざっくり説明するとこのような流れに。ざっくり過ぎてごめんなさい…
案件によっては、Webデザイナーがコーディングをしたり、コーダーがWebディレクターを兼任したりなど、完全に作業が分担されていない場合もあります。
Webデザイナーに必須なスキルを知ろう
結局、Webデザイナーに必要なスキルが分からないんだけど…何から勉強するの？
このように感じたことありませんか？
まずは、Webデザイナーになる上で必須なスキルを確認しておきましょう。
Webデザイナーに必須なスキルは「コーディング」と「デザイン」の２つに大別されます！
コーディングに関するスキル
コーディングに関するスキル
- HTML
- CSS
- WordPress（ワードプレス）
- ノーコードツール（STUDIOなど）
上から3つ（HTML、CSS、WordPress）は最低限Webデザイナーでも知っておいて欲しい、コーディングに関するスキルです。
そもそもなぜ、Webデザイナーがコーディングを把握しておかないといけないのか。
疑問に思いますよね？
先ほど、「Web制作の流れを知ろう」でもお伝えしたように、Webデザイナーが作ったデザインを元にコーダーがコーディングをします。
コーディングを知ることで、「どんなデザインならコーディングできるかを知れる」から。
デザイナーの好きなようにデザインされても後に作業するコーダーが困りますよね。
コーダーがコーディングし易いデザインを作れるWebデザイナーは重宝されます！
また、WordPressは案件の単価も高く安定的に稼ぐ上では必要なスキルです。
簡単なオリジナルテーマ（コーディングしたサイトをWordPressに実装すること）を作れるだけのスキルがあれば収入は上がってきます。
そして今回、僕が是非とも習得して欲しいスキルがノーコードツールです！
特に「STUDIO」というノーコードツールはオススメなので、後ほどご紹介致します。
デザインに関するスキル
デザインに関するスキル
- Photoshop（フォトショップ）
- Illustrator（イラストレーター）
- Figma（フィグマ）
- デザインの考え方、知識
Webデザイナーとして要求されるデザインスキルは画像加工・ロゴなどの作成・サイトのレイアウト構成などがあります。
当たり前ですが、デザイン自体の考え方や知識の勉強も必要です。
具体的なデザインの学習方法は後ほど紹介します。
Webデザインを学習する方法
Webデザインを学習する方法はこちらです。
Webデザインを学習する方法
- Progate（プロゲート）
- chot.design（ちょっとデザイン）
- Udemy（ユーデミー）
- 書籍
- 模写（トレース）
- デイトラ
Webデザインを勉強できる所は色々ありますが、僕が実際に使ってみて良かったモノを厳選して紹介しています。
Webデザイナーになる為のロードマップ
今回のロードマップとしては、学習〜ポートフォリオの制作まで７ステップになります。
※今回はデザイン未経験の方が、なるべく費用を掛けずに学習する方法を記載しました！
ですが、1つの教材で体系的に学習したい人向けには『デイトラ 』のWebデザインコースもオススメです。
記事の最後に『デイトラ 』についても記載しているので、そちらも参考にしてください！
ロードマップ（7ステップ）
ロードマップ（7ステップ）
- Progateを使いゲーム感覚でコーディングに慣れる
- ちょっどデザインでデザインの基礎やデザインツールの使い方を覚える
- Udemy（動画教材）で足りない部分を補足・知識の深堀りをする
- 書籍で足りない部分を補足・知識の深堀りをする
- PhotoshopかFigmaを使用してバナーの模写（トレース）をし、デザインに慣れる
- PhotoshopかFigmaを使用してポートフォリオをデザインする
- STUDIOを使用してポートフォリオをコーディングする
上記のロードマップを順番にやっていくことで基本的な学習やスキル習得はバッチリです。
Progateとちょっとデザインはどちらから始めても問題ありません！
・コーディングを先に学びたいなら→Progate
・デザインの基礎を先に学びたいなら→ちょっとデザイン
ぐらいの感覚で良いので、とにかくやってみることが大事です。
また、「STUDIOを使用してコーディングする」と記載しましたが、ノーコードツールなので実際にコーディングすることはありません。
便宜上コーディングという言葉を使用させて頂きます。
具体的なロードマップの学習方法
では、実際にどのようにしてロードマップの7ステップを学んでいくのか？
ここからは具体的な学習方法をまとめていきます。
Progateを使いゲーム感覚でコーディングに慣れる
Progateは、ゲーム感覚でコーディングが学べるお勧めのオンライン学習ツールです。
初めてコーディングを学ぶのに使うオンライン学習ツール＝Progateという方も多いかと思います。
それぐらい知名度と分かりやすさは群を抜いている印象です！
また、無料で始められるので初心者も勉強を始めやすいのがメリットでしょう。
コースの途中までは無料で、勉強を進めていくと有料コースに変更する必要がありますが有料プランはたったの月額980円です！
「HTML & CSS」コースはすべてやりましょう！
コーディングの基礎はこれで身につきます。
ちょっどデザインでデザインの基礎やデザインツールの使い方を覚える
ちょっとデザインは、スキマ時間で記事を読み進めることによって学習できるオンライン学習ツール。
こちらもProgateと同様にゲーム感覚で学べて、成長を実感できる「レベル」や「経験値」などの要素もあり、学習が飽きないようになっているんです！
しかも記事は現役のクリエイターが執筆しており、毎月約数十本のペースで記事が増えていてます。
ちょっどデザインもカリキュラムの途中までは無料で、勉強を進めていくと有料コースに変更する必要がありますが有料プランはたったの月額1,100円です！
Webデザイナーの基礎的な知識はちょっとデザインで学習できると思えるぐらい豊富なカリキュラムがあるので、是非有料プランで学習しましょう！
豊富なカリキュラムの中でも、下記が学習してほしいカリキュラムです。
- デザイン基礎 -
- HTML&CSS -
- WordPress -
- デザインツールの使用方法 -
- ノーコードツール（STUDIO）の使用方法 -
ちょっとデザインは学べることが多いですがあくまで基礎です。
ですが、これだけでもボリュームはかなりあります！
少なくとも「- デザイン基礎 -」と「- デザインツールの使用方法 -」は学習したほうが良いです。
Udemy（動画教材）で足りない部分を補足・知識の深堀りをする
Udemyは動画のオンライン講座サイトで、僕もWebデザイナー向けの講座で知識の深堀りをしました。
自分で学習する方法の中では1番おすすめできる最強の教材になっています！
Udemyでしっかり時間とコストをかけて学習しましょう。
UdemyではWebデザインはもちろんの事、開発やマーケティングなど様々な講座を動画で販売しています。
普段は2万円を超える少し高めの講座も、不定期に開催される破格セールで2000円以下で購入できるようになっており、その時に講座購入をオススメします！
充実した講座ばかりなので、空いた時間を見つけてはスマホなどで視聴していました。
下記に、Udemyで受講してほしい講座を紹介します。
紹介する講座は実際に僕が購入してみて、満足したものだけを厳選してみました！
- デザイン全般 -
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
- HTML&CSS -
実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
- WordPress -
初めてでもできるWordPressで作る人気の出るホームページ作成- Photoshop -
未経験からプロを目指す！実践PhotoshopCC講座
- Illustrator -
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
- Figma -
初心者から始めるアプリデザイン＜UI/UXデザインをFigmaで学ぼう！＞Webデザインにも応用可能
以上になります！
僕は全ての講座を購入して学習しましたが、何度も言うようにボリュームがすごくて一気に勉強するのはかなり大変です。
セールの時にまとめて購入しておき、必要なタイミングになったら講座を見るのが1番効率が良くモチベーションも保ち易いですね！
書籍で足りない部分を補足・知識の深堀りをする
先ほど、「動画のオンライン講座サイトで、僕もWebデザイナー向けの講座で知識の深堀りをしました。」
とお伝えしましたが、書籍でも知識の深堀りは可能です！
この辺はご自身のお好みで問題ないので、動画での勉強が好きなのか？書籍での勉強がやりやすいのか？を考えると良いでしょう。
また、下記にも書籍でのオススメを紹介します。
書籍の良い点は、知識を体系的に学べること。
余計な情報を入れずに、本当に必要な情報のみをぎゅっとまとめているので書籍での学習も全然ありですね！
PhotoshopかFigmaを使用してバナーの模写（トレース）をし、デザインに慣れる
デザインの基礎は身についたけど…ここからどうするの？
1からデザインや要件を決めるのは難しいよ…
ベテランのデザイナーでも1から作り出すのは簡単ではありません！
まずは、バナーの模写（トレース）をしてデザイン制作に慣れましょう。
デザインの基礎は身につけたものの、いきなりデザインを作るのは簡単ではありませんよね？
そんな時は他の方の力を借りましょう！
模写については、こばやす（@kobayas_s）さんがTwitterで模写のやり方を紹介しています！
僕も時間があれば、こばやすさんのツイートしているバナー課題などに取り組んでいました。
#バナーお題 に挑戦しようかな？と思っているWebデザイナー駆け出しさんへ。
こちらにお題参加のやり方や規約があるので確認してみてね。
基本的にポートフォリオ掲載は🆗ですが、お題内容は著作権放棄して無いので、掲載元や私の名前を入れてくださいねー！https://t.co/BJ5tBiFL0U— こばやす🍟現場のWebデザイナー (@kobayas_s) February 8, 2021
模写のメリットは、デザインの構成・配所・フォント情報・文字組みなど様々なことを学べる事です！
そして、タイトルにもあるようにデザインツールは「Photoshop」か「Figma」を使用しましょう。
なぜ、2つのデザインツールを提示したのか疑問に思いませんでしたか？
理由としては下記になります。
デザインツールの違い
- Photoshop：Webデザインをする上で1番使われているツール。案件の多くがPhotoshopで作成したデータにて納品を求められることが多い
- Figma：最近、普及してきた無料で使えるツール。操作も簡単で初心者でも勉強すれば十分にデザイン制作に対応できる
どちらを使用しても問題はありませんが、Web制作会社から依頼される案件はほとんどがPhotoshopで作成したデータでの納品が求められます！
Figmaは便利な一方で、まだそこまで普及はしておらずFigmaでの納品を受け付けていない企業も多いのが現実です…
Photoshopが使えればFigmaの操作もすぐに覚えられるでしょう。
つまり、Photoshopでデザインを制作するのが無難ということになりますね。
ツールにはそれぞれ、メリット・デメリットは存在するので案件によって適切なツールを選択しましょう！
ここは非常に重要ですが、駆け出しの方はあまり意識しない点だったりするのであえて「Photoshop」か「Figma」を使用しましょう！と記載しました。
PhotoshopかFigmaを使用してポートフォリオをデザインする
バナー制作に慣れてきたらポートフォリオを作りましょう！
また、ポートフォリオは必ず自分でデザインしてください。
理由としては、ポートフォリオ自体があなたの作品だからです。
実績が少ないあなたの「作品」として見られますし、デザインのレベル感も判断されます。
ですが、先ほどもお伝えしたように"1"からデザインを考えるのは簡単ではありません。
そんな時は「プロが作ったデザインを見る」ようにしましょう！
こちらの理由としては、売れるデザインを学ぶことができるからです。
お客様の目的を達成するために、プロが試行錯誤して制作したものなのでとても勉強になりますよ。
デザイン参考におすすめのサイト
SANKOU!
国内のみのサイトを集めたギャラリー･リンク集で、Webデザイン制作の参考になります。
｢ビジュアルやコンテンツが魅力的｣ ｢技術を駆使｣ ｢UI/UXに優れている｣など、魅力的なサイトを厳選して紹介しています。
I/O3000
国内、国外を問わず、Web制作の参考となるサイトが集められているサイト
色、タグやカテゴリなどからWebサイトを探すことができる。
また、シャッフルボタンを押せばサイトの中からランダムでページを表示できるのも便利です。
Parts.
PartsはコーポレートサイトやLPのデザイン参考サイトです。
ヘッダー、メインビジュアル、フッターなど、パーツやセクションごとのデザインを部分ごとにまとめてあるので、必要なパーツをピンポイントで探せます！
上記で紹介したサイトを元に参考になるデザインを集め、実際にデザインしてみましょう！
集めるデザインは沢山あった方が良いです！
最低でも10個以上は集めてください。
理想は20個以上集めるとデザイン制作もスムーズに進むかと思います。
レビューをしてもらう
参考デザインを集めて自分でデザインを作ったら一度、他人に見てもらいレビューをしてもらいましょう！
実はこの「レビュー」というのがとても重要なんです。
僕も実際にレビューをして貰ったことで初心者がやりがちなミスに気付いたり、自分には無い発想のタネを頂くことができました！
レビューを貰うのにオススメなのが、「MENTA」というサービスになります。
MENTAは「教えたい人」と「学びたい人」をオンラインでマッチングするサービスです！
MENTAではプロとして活躍されているデザイナーさんや、コーダーさんも登録されています。
プロのデザイナーさんに自分が作ったデザインをレビューしてもらうことで、かなりデザインのレベル感も上がるのでレビューは必須ですね。
STUDIOを使用してポートフォリオをコーディングする
コーディングする時は、WordPressとかを使ってコーディングしなくていいの？
もちろんWordPressを使ってコーディングするのも全然OKです！
ですが個人的にWordPressでポートフォリオを作らなくても、ノーコードツールなどで作成しても良いかなと思います。
WordPressを使用してポートフォリオやサイトを制作する場合、意外と時間が掛かり少しだけ学習コストも高いです。
当たり前ですがWebデザイナーとして仕事をするには、コーディングのスキルよりデザインのスキルを伸ばしていくのが良いかと思います。
コーディングはコーダーに任せることで自分でするより早く制作してくれるし、何よりデザインに専念できますよね！
上記の考えからWordPressに時間を掛けるより、STUDIOなどのノーコードツールを使用して短期間でポートフォリオを作る。
完成したポートフォリオを見せながら実際の案件受注を目指すという手順が、1番効率が良いと考えています！
実際に僕もWordPressに関してはそこまで詳しく無いですし、基礎を学習した程度のスキルしかないです笑
最終的には「どのツールを使用して制作するか？」はあなた次第なので、1つの選択肢として捉えてもらえれば大丈夫でしょう。
では、実際にSTUDIOを使用してポートフォリを作るとしてSTUDIOが何なのか知らない方も居るかもしれません。
STUDIOとは、コーディングなしでWebサイトがつくれるノーコードツールです！
今まで、HTMLやCSSを学習してきた方からすると「そんな簡単にWebサイトが作れるのか…」と感じる方も少なく無いかと思います。
僕も初めてSTUDIOに触れた時に、驚きと感動でイスから転げ落ちそうになったのを覚えています。
しかもプランによっては無料でWebサイトをお手軽に公開できるのも魅力です！
STUDIOの使い方についてはちょっとデザインでも学べますし、僕はSTUDIO公式のYouTubeで勉強しました！
下記が勉強した3つのコースです。
・STUDIOチュートリアルコース
・STUDIO Tips
・公開
基本操作はSTUDIO公式のYouTubeを見れば問題なく行えるかと思います！
STUDIOの使い方を覚えたら、あとは自分で制作したデザインをSTUDIOで実装するのみです。
僕が実際にSTUDIOを使って制作した事業サイトを掲載しておきます！
これぐらいのサイトでしたら皆さんも簡単に作れるので是非、STUDIOを有効活用してみてください！
※今後、「STUDIOを使ってサイトを1から作る」という内容を記事にまとめて公開する予定です。
本記事に関しても随時、内容を追記しますので定期的に確認して頂けると嬉しいです！
ポートフォリオが完成したら早速、営業をスタートしてみましょう！
営業に関してはこちらの記事でも少しですがまとめています。
営業についてまとめた記事も今後、追加する予定です！
追加予定が多くてすみません…さらに内容を充実できるように追記していきますね。
『デイトラ Webデザインコース』を受講すると体系的に学習できる
※2021/4/04 追記
ここまで、未経験の方がWebデザイナーになるためのロードマップをまとめてきました。
今回はデザインを学び始めたばかりの方をターゲットに記事を書いています。
「なるべく費用を掛けたくない」「高額の教材に手が出しにくい」
このような考えを持つ場合も想定して、なるべく費用が掛からない手順を記載しました！
ですが、「少し高くてもいいから、挫折せず体系的に学習したい」と思うことはありませんか？
そこでオススメなのが『デイトラWebデザインコース』です！
実際に僕自身も『デイトラ』を受講しており、デザイナーとして未経験から一気にレベルアップできました。
『デイトラ Webデザインコース』については下記の記事にまとめているので、あわせて読んでみるのをオススメします！
未経験からWebデザイナーになる為のまとめ
以上、未経験向けからWebデザイナーになる為にすることをまとめてみました。
本記事の要約
本記事の要約
- Web制作の流れを理解する
- Webデザイナーに必要なスキルをロードマップを参考に身に付ける
- ポートフォリオを作成して案件を獲得する
おすすめの書籍
おすすめの書籍
Udemyセールの時に買いましょう！
Udemyでオススメの講座
- デザイン全般 -
未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース
- HTML&CSS -
実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
- WordPress -
初めてでもできるWordPressで作る人気の出るホームページ作成- Photoshop -
未経験からプロを目指す！実践PhotoshopCC講座- Illustrator -
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材- Figma -
初心者から始めるアプリデザイン＜UI/UXデザインをFigmaで学ぼう！＞Webデザインにも応用可能Webデザイナーは名前の響き的にもキラキラしていてカッコいいと思うかもしれません。
ですが、輝いて見える人も今の僕たちのように、苦労しながら沢山の失敗を経験してきています。
誰しもが通る同じ道です。
今が1番キツくて大変な時かもしれませんが、一緒に乗り越えましょう！
少しでも有益だと感じて頂けたら、感想付きでシェアしていただけると大変励みになります。
僕もリツイートしに行きます！
何か不明点があればいつでもDMしてください！
わたる
↓拡散いただけると執筆の励みになります！
