Webデザイン学習ロードマップ！Webデザインの仕事をするのに必要なスキルとは？

未経験からWebデザイナーになりたいけど何をどう勉強すればいいのか全然、分からない…
向いているかどうかも分からないしスクールの学費も高いから独学する方法はないかな？

未経験からWebデザイナーになるための学習ロードマップを知りたい
スクールはお金もかかるからまずは独学でWebデザイナーになる勉強をはじめたい
勉強で終わらず実際に仕事にできるWebデザインスキルを習得したい

スクールは学費もかかるし、向いているかどうかも分からないから、独学からはじめたいと考えているWebデザイナー志望者も多いのではないでしょうか。

残念ながらWebデザインを独学するのは簡単ではありません。デザインは実際にプロから添削されて、はじめて改善点や見えてくるものもあるからです。しかし、まずは独学からはじめて適性を確認したい方や学費をかけられないなど様々な事情がある人もいますよね。

そこで本記事では

お金をかけずにWebデザインを独学できる
Webデザイナーとして独立できる
無駄な勉強は徹底的に省く

この3つにこだわったWebデザイン学習ロードマップをご紹介します。
決して独学は簡単ではありませんが実践できれば再現性の高い学習ロードマップです。

東京フリーランスCEOでWebデザイナーとして独立・デザイン会社を起業した船越良太さんが実践した徹底的に無駄を省いた学習ロードマップを無料でご紹介します✨

1. Webデザインの学習ロードマップ
2. 【PR】学習ロードマップからオンラインスクール化したデイトラの強み
3. デイトラデザインコースを受講する8つのメリット
4. まとめ

Webデザインの学習ロードマップ

学習ロードマップ考案者：船越良太

本当にWebデザイナーって独学でもなれるロードマップなんてあるの？

今回、紹介するロードマップはデイトラのWebデザインコースを作った船越良太さんが実際にWebデザイナーとして独立・起業するまでに実践したことをもとに作ったんだ✨

実際に独立してデザイン会社を起業するまでにやった内容なんだ。
それなら再現性もありそう。

STEP1：デザインの原理・原則・配色とフォントの理論を学習する

最初はデザインの原理・原則から勉強しよう！
市販されているデザイン関係でおすすめの書籍を紹介するね。
デザインの原理・原則や配色・フォントのことまで扱っていて手元に置いておきたい本だよ✨

まずデザインの原理・原則のインプットからはじめるのがおすすめ✨
デザインの４大原則や配色・フォントは上のおすすめの書籍で勉強できるよ。

デザインの４大原則（紹介した書籍に詳しい解説が載っています）

近接（関係する情報を近づけてまとめる）
整列（要素を見えない線で揃える）
強弱（情報の優先度を明確する）
反復（特徴的なパターンを繰り返す）

あれ？最初はデザインツールの使い方を勉強するんじゃないの？

デザインツールは流行り廃りがあるからね。
でもデザインの原理・原則はトレンドはあっても根っこの部分は、あまり変わらないんだよ。

そうなの？？

デザインの原理・原則や根本的なところって、あまり変わらないんだよ。
例えば配色なら赤色ってどんなイメージがある？

うーん、赤色は情熱的、エネルギッシュ、暑い、挑戦的な感じがするよ。

そうだよね。
赤色で安心・安全、誠実といったイメージを連想する人ってほとんどいないと思うよ。安心・安全・誠実は青色のイメージだよね。
国や文化によって異なることもあるんだけど、色それぞれがもつイメージってあるんだよ✨

色それぞれがイメージをもっている

たしかに来年、青が情熱的、挑戦的なイメージの色に急になるとは思えないもんね。

あとフォントの理論も勉強すると良いよ。
フォントは書体や文字の配置の仕方のことだと考えてくれれば分かりやすいかな✨

うーん、いまいちイメージつかない。

フォントによってデザインのイメージが変わる！

上のフォントを見てみて。
使われるフォントによって印象って結構、変わるんだよね。

本当だ！
明朝体は高級感があるし、ゴシック体や手書き風だと親しみやすい感じがするね。

そうだね。書体を変えるだけでも印象はかなり変わるよ。
他にも文字の間隔を広めにとると、ゆったりとした高級な印象になるとか文字の配置もデザインでは重要なんだよ。

フォントも、なかなか奥が深いね。

デザインの原理・原則や配色、フォントの基礎知識を知らずにいきなり手を動かしても良いものは、なかなか作れないよ✨
まずは最低限の基礎を本で一通り勉強しよう！

デザインの原理・原則や配色、フォントの理論をまずはインプットしよう
『ノンデザイナーズブック』や『デザイン入門教室』がデザインの基礎を勉強するのにおすすめ

STEP2：Figmaの操作方法を学習する

ステップ２では、デザインツールFigmaの操作方法に慣れよう✨
Figmaは2020年には世界で1番支持されたデザインツールだよ。
Figmaの特徴は以下の通り。

無料でも使える
アプリをインストールする必要なし
直感的な操作で学習コストが低い
軽い
複数人で同時編集ができる
プラグインで多機能にできる

Figmaを使っている人も最近、よく聞くよね。
でもAdobeのPhotoshopやIllustratorじゃなくて、どうして最初はFigmaがおすすめなの？

Figmaの方が直感的に操作できてAdobeのデザインツールよりも学習コストが低いからだよ✨
Adobeのデザインツールは多機能なんだけど、だからこそツールの使い方だけ勉強して息切れすることも多いんだよね。

Figmaなら無料ではじめることもできるし、すぐにデザインをはじめられるのが強みかな。
デザインツールは操作方法も似ているから必要になってからPhotoshopやIllustratorの勉強をはじめても遅くはないよ。

無料で最初、はじめられるのはFigmaのメリットだね！

でもFigmaの操作方法ってどこで勉強すればいいの？
あんまりFigmaの使い方って本とか見ないんだよね。

Figmaをお得に学習するなら、例えばUdemyのFigmaの講座をセールで買うか、YouTubeでFigmaのことを検索してみると解説動画を探すのがおすすめだよ。海外の解説動画が中心だけど最近は日本語の解説も増えてきたよ✨

Figmaの操作方法を覚える
学習コストが低く多機能、しかも無料なのでデザイン学びはじめの人にもやさしい

STEP3：バナーデザインを2枚する

ステップ3ではバナーを２枚デザインしてみよう。
バナーっていうのはWebサイトでよく見る広告や宣伝の画像のことだよ。

よくWebサイトで見かける小さめの画像だね。
でもバナーのデザインなんてやったことないから、どうすれば良いのか分からないよ。

お題や仮のバナーを見せたいターゲットを決めてFigmaで見よう見まねでいいから、まずは手を動かして作ってみよう✨
参考サイトはバナーデザインさんがおすすめだよ✨

Figmaの操作を覚えたらバナーを２枚デザインしてみよう

STEP4：Webサイトのトレースをしてなれる。感覚を身につける

ステップ4ではWebサイトのトレースをしながら余白や文字の大きさなどの感覚を身につけるよ✨

デザインを練習するときはトレースや模写をしよう！ってよく聞くけど具体的な方法がよく分からないんだよね。

トレースや模写をしようってよく聞くけど具体的なやり方って分かりづらいよね。トレースのやり方は以下の通りだよ✨

お手本のサイトを探す
サイト全体をスクリーンショットで撮影する（GoFullPage)
並べて真似してみる

(デイトラWebデザインコースより）

なるほどね。なんとなく分かってきたよ！
でも、いまいち画像と説明だけだとイメージが湧かない部分もあるね。

ちなみにデイトラのWebデザインコースでは実際にトレースしている動画を丸ごと載せているから、動画を見ながら進められるようにしているよ✨

余白や文字の大きさなどを意識しながらトレースしてデザインの感覚を身につけよう

STEP5：LPデザインの型を学習する

STEP5ではLPデザインの型を学習するよ✨

LPデザインの型ってどうやって勉強するの？

一番、良いのは沢山のLPを見て真似してデザインすることだね✨
例えば以下のサイトが参考になるよ。

LPが沢山、載ってる！

沢山のLPを見て、どんなデザインになっているのかを参考にしながら沢山、トレースしてみると型が身につくよ✨

どこで読者の悩みに寄り添っているのか？どうやって読者の背中をおすようなコンテンツを作っているかを意識しながら沢山LPを作ってみるのがおすすめだよ。

お手本になるLPを沢山、参考にして型を身につけよう
良いLPはトレースしてみよう

STEP6：コーポレートサイトの型を学習する

ステップ６ではコーポレートサイトの型を学習しよう✨
よくある定番の構成は以下の通り。

トップ
about us
会社情報
お知らせ
採用
お問い合わせ
プライバシーポリシー

コーポレートサイトって普段、何となく見ているけど実際にどんな構成かパッと出てこないよね。

そうだね。
実際にコーポレートサイトを沢山、見てどんなページ構成になっているかを見てみるのがおすすめだよ✨

コーポレートサイトのデザインはどうやって勉強すれば良いの？

LPと同じく手を動かしてトレースを沢山すれば良いんだよ✨

とにかく手を動かせ！って感じだね。

デザインはやっぱり実際に手を動かしてデザインをするのが一番、上達するからね✨
良いデザインを沢山見る。そして沢山、手を動かしてデザインをする。デザインは地道な努力の積み上げが大事なんだ。

トップ、about us、会社情報などコーポレートサイトの定番の構成を身につける
コーポレートサイトのトレースをする

STEP7：画像加工などWebデザインで役立つツールを学習する(素材とかもいれる)

ステップ7ではWebデザインで役に立つツールや素材を沢山、集めて使いこなせるようになろう✨

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた

船越良太さん達が前にデザイナーを集めて最強チートシートを用意しているよ✨
写真の素材サイトやアイコン集、デザインの勉強になる情報サイトのリンク集になっているんだ。

よく、こんなにも素材やツールを集めたね！
でも、こんなに必要なの？？

実は素材やツールを積極的に使うのが船越良太さんの強みなんだよね✨

「原始人と素手で戦うと多分、負けるけどお互いが銃を持っていたら勝てる。なぜなら武器の使い方が分かるから。」というのが船越さんの持論。一つのツールで戦力は一転するっていう考えがあるんだ✨

面白い例えだけど、具体的にどういうこと？？

デザイナーは沢山、仕事で使える引き出しがあると良いってことだよ✨
素材や便利なツール、さらにはテンプレート集まで沢山、知っていて上手く使いこなせるかが大事なんだ！

デザイナーってイラストから写真まで全部、自分でオリジナルで用意しないといけないイメージがあったよ。

いや、実はそんなこともないんだよ。
もちろん著作権などには気をつける必要があるけど、自由に使って良いフリー素材をうまく組み合わせたり、既存のデザインテンプレートを参考にすることでゼロからつくるよりもスピーディーに高品質なデザインも作れるんだ。

本当に実践の中で身につけたテクニックっていう感じだね。

時間を短縮できるツールは積極的に使う、既存の使える素材をうまく組み合わせたり参考にしたりして新しいデザインをつくるというのは船越良太さんが実践の中で身につけた現場の知恵だね。

素材や便利なツールなどの引き出しの数はデザイナーの武器になる
引き出しを増やして表現の幅を広げて作業時間を減らそう

STEP8：ECデザインを学習する

ステップ8は今、熱いジャンルのECデザインの学習だよ✨
ECサイトの需要は近年、高まっているんだけどECデザインができる人は意外と少ないからね。

ECってShopifyのサイトデザインとかできると良いの？

Shopifyのテーマに沿ったデザインができる人って今、少ないからとても重宝されるよ✨

ECサイトのデザインってどうやって勉強すれば良いの？

ECサイトを構築するサービスで世界No.1のシェアのShopifyで一度、ECサイトを作ってみるのがおすすめだよ。
それでShopifyのテーマの特徴を理解してShopifyで再現可能なデザインを作れるようになると良いよ✨

ちなみにデイトラではShopify公認のShopify学習コースも用意しているから、それでShopifyの学習をしてみるのもおすすめだよ✨

ECサイトに理解があるWebデザイナーはまだまだ少ない
特にShopifyの基礎を理解しているECデザイナーは需要がある

STEP9：更なるレベルアップ！UIデザインを学習する

ステップ9はUIデザイン。つまりアプリのデザインを学習してみよう✨

スマホのアプリでよく見る感じのデザインだね。
でも、どうしてUIデザインを勉強するのがおすすめなの？

今、日本はUIデザインの需要がすごくあるんだけどUIデザイナーが輩出される仕組みがほとんどないんだよね。
だからUIデザインができるようになると重宝されるし、単価の高い案件の仕事にもつながりやすいんだよ✨

でもUIデザインの独学って難しくない？

そうだね。UIデザインの独学は少し難しいかもしれないけど、独学する方法はあるよ。
例えば初めてのUIデザインを読んだり気に入ったアプリのデザインをFigmaで模写・トレースをしてみるのが第一歩かな✨

そこからどうやったらUIデザイナーになれるの？

例えばデザイナーが全然いないアプリを開発している会社と繋がって「UIデザインを勉強しました。でも未経験なので最初は安くやります。でも他のWebデザインの経験はあります！」とか言ってみるとチャンスはあるかも✨

未経験でも地道に勉強して積極的にチャンスをつかみにいく姿勢が大事なんだね…!

UIデザイナーは需要があるのに供給が足りていない
未経験でもデザイナーのいないアプリ開発企業などにアプローチすればチャンスもある

【PR】学習ロードマップからオンラインスクール化したデイトラの強み

独学する方法は分かったよ。この学習ロードマップを実践すれば、こしばもWebデザイナーになれるかな？

不可能ではないと思うよ。実際、船越良太さんは大変だったみたいだけど独学でデザイナーになれたしね。
ただデザインは独学だけだと伸び悩むこともあるかもしれないね。

どうして独学だと伸び悩むの？？

やっぱりデザインはプロの目で添削をしてもらわないと、自分で気づけないところが沢山あるからだよ✨

あとデザイナーとして独立するための営業方法や仕事の進め方、心構えが独学だと勉強しづらい部分なんだよね。

たしかに独学だと自分じゃ気づけないところも出てきそうだね。
それに独学する概要だけ分かっても細かい部分はちょっと分からないよね。トレースの進め方とか素材の選び方とか。

独学だと学習の細かいところが分かりづらかったり、自分で考えたりデザインをレビューしてくれる人を探したりするのは大変かもしれないね。

独学は不可能ではないけど、大変な部分も多いからね。
実はロードマップの内容、自体は船越さんがTwitterで発信してたんだけど講座にしてほしいという声も多かったんだよね。

たしかに分からないところが出てきても、誰にも相談できないし時間もかかりそう。

そこで船越良太さんが実践して改善を重ねた学習ロードマップを、動画で詳しく解説しながらプロのデザインレビューを受けられるようにしたのがデイトラのWebデザインコースなんだ✨

▶︎今すぐデイトラWebデザインコースに申し込む！

デイトラデザインコースを受講する8つのメリット

デザインコースを受講すると独学に比べてどんなメリットがあるの？

デイトラデザインコースは独学の学習ロードマップをもとに、不十分なところや、つまづきやすいところを改善した内容になっているんだ✨

メリット1：コスパ抜群の価格設定

まずデイトラのデザインコースはコスパが抜群です✨

（2021年7月現在）

デイトラのデザインコースは他社よりもお得な価格だね…!!

オンライン講座に特化しているし広告費もおさえているからね。
受講費はなるべく受講生の負担にならないようにおさえました✨

メリット2：プロの現役デザイナーによるレビュー

（デイトラデザインコース、特設ページより）

独学では難しいプロの現役デザイナーのレビューが受けられます！

プロに見てもらえる機会ってなかなかないから、レビューが受けられるのは良いね！

ツールの使い方は独学で勉強できるけど、良いデザインはレビューをもらわないとなかなか出来るようにならないからね✨

メリット3：未経験からでも完走すれば仕事ができる無駄のないカリキュラム

デイトラのデザインコースは最短距離で仕事ができるように、徹底的に無駄を削ぎ落とすことにこだわっているよ✨

でも勉強に無駄なことってないんじゃない？
デザインってやっぱり奥が深いものだと思うから、何年もかけて勉強するイメージがあるよ。

もちろんデザインは奥が深くて勉強することも多岐にわたるね。
でも細かいツールの使い方や、あまり仕事で使わないことまで最初から詰めこみすぎると一生、仕事にとりかかれないんだよね。

たしかにデザインを極める頃には、こしば、おじいちゃんになってそう…

無駄のないカリキュラムでまずは必要最低限のことを身につけて、小さな仕事から少しずつはじめて実践を通して上達していくのがおすすめだよ✨

メリット4：現役で活躍中のデザイナーやフリーランスが動画講義や学習コンテンツ制作を担当

動画講義と学習コンテンツは現役で活躍しているデザイナーやフリーランスがつくっているよ✨

現役で活躍しているデザイナーから教えてもらえるのは信頼感があるね！

現役を退いた人の話よりも、現場で実際にデザインをしている人が教わる方が内容も新しいし説得力もあるからね。

現場で活躍しているプロが学習コンテンツをつくるのはデイトラの全てのコースのこだわりポイントだよ✨

メリット5：無期限で視聴できアップデートされるカリキュラム

デイトラのデザインコースは一度、買ったらずっと見れるようになっているんだよ✨

え！？一度、受講したらずっと講座や動画を見れるって当たり前じゃないの？？

いや、そうでもないんだよ。
受講期間だけしか動画や教材が見れないスクールは結構あるんだよね。3ヶ月や6ヶ月の受講期間を過ぎたら全部、見れなくなるところも珍しくないよ。

それじゃ復習とかできないね…

一方、デイトラではずっと講座や動画を視聴できるしカリキュラムのアップデートやコンテンツの追加もしているんだ✨

追加コンテンツも無料なの？

もちろんカリキュラムがアップデートされたり追加されたりしても、追加料金はかからないよ✨

それはお得…!!

メリット6：挫折させないメンター陣

独学だと挫折する人も多いけどメンター陣がサポートしてくれるのも、デイトラデザインコースの特徴だよ✨

相談したり分からないところを聞けたりするのはいいね！

Figmaの操作方法とか動画を見ても分からないところは質問できるようになっているよ。
本やWebサイトをググるだけだと、よく分からないところも出てくるけど操作方法も教えてもらえるから未経験の方でも安心です✨

メリット7：デイトラ修了生の豊富な実績があるから安心して学べる

（デイトラデザインコース、特設ページより）

受講した後に本当にWebデザインを仕事にできているかは気になるところだよね。

安心して✨
デイトラ修了生は未経験かでもらフリーランスになったり就職したりして活躍しているよ。

すごい！
やっぱりスクールは修了した後で、ちゃんと勉強したことを活かしたいよね。

デイトラは修了した後にプロとして仕事ができる力を身につけられることにこだわっているんだ✨

受講しているときは楽しくても修了しても、仕事につながらなかったら困るもんね。修了生の方達が活躍しているのは頼もしいよ。

メリット8：卒業生向けの独立・転職サポートサービスがある

デイトラのWebデザインコースは卒業生向けに独立・転職サポートサービスも用意しているよ✨

独立・転職サポートってどんなサービスなの？

独立サポートコースでは2ヶ月間、受講生ひとりひとりにメンターがついて、営業や仕事の進め方を相談できるよ✨
もちろんフリーランスで独立以外にも転職活動のアドバイスもしているんだ。

独立・転職サポートの内容をまとめると以下の通りです✨

プロのデザイナーがメンターについて営業から仕事の進め方までサポート！
転職相談や履歴書添削もしてもらえる！！
そのまま使える営業資料や要件定義のテンプレート配布
最新の情報交換や仲間ができるオンラインミーティング開催

頼もしい内容だね。
これだけ支えてもらえれば安心して、こしばでもフリーランスのデザイナーになれちゃうかも。

営業や仕事の進め方はデザインコースでも十分、教えているんだけど、いざ一人でいきなり独立したり就職活動するのって不安じゃない？

ひとりだと最初は心細いよね。
営業や仕事の進め方って知っていているのと、実際にできるのとで壁があるよね。

初案件の壁ってやっぱりあるからね。
最初のゼロイチの部分が一番、つまづきやすいところなんだよね。
でも一度、メンターと二人三脚で営業活動や仕事を進めた経験があると自信をもってひとり立ちしやすくなるんじゃないかな✨

独立サポート気になる！
どうすれば参加できるの？

サービスを手厚くしている分、一度に参加できる人数は限られているんだよね。
希望者が多いと選考もあるからポートフォリオを充実させて、デザイナーとして仕事をする熱意を伝えられるようにすると良いんじゃないかな✨

こしばも独立・転職サポートが気になるから、ポートフォリオを頑張ってつくってみるよ！

頑張ってね✨
デイトラは本気でプロとして仕事をしていきたいっていう人を応援しています。

まとめ

Webデザインの学習ロードマップをご紹介しました。この学習ロードマップは未経験からフリーランスのデザイナーとして独立して、デザイン会社を起業した船越良太さんの実体験をもとに改善を重ねて考えたものです。

STEP1：デザインの原理・原則・配色とフォントの理論を学習する
STEP2：Figmaの操作方法を学習する
STEP3：バナーデザインを2枚する
STEP4：Webサイトのトレースをしてなれる。感覚を身につける
STEP5：LPデザインの型を学習する
STEP6：コーポレートサイトの型を学習する
STEP7：画像加工などWebデザインで役立つツールを学習する(素材とかもいれる)
STEP8：ECデザインを学習する
STEP9：更なるレベルアップ！UIデザインを学習する

一般的なWebデザインの学習ロードマップではAdobeのPhotoshopやIllustratorの使い方、HTML/CSSの基礎を学習してサイトに動きをつけるjQueryの順番で勉強するのではないでしょうか。

しかし、今回、ご紹介した学習ロードマップでは

Adobeのデザインツールはあまり深入りせずFigmaをメインに使う
コーディングを勉強しない

かなり独自の内容でこんな学習法は聞いたことがないと驚いた方も多いかもしれません。
しかし、この学習方法は徹底的に無駄を省き最短コースでWebデザイナーとして独立することに特化した内容になっています。コーディングには深入りしない代わりにデザインに特化した内容です。

コーディングも出来ないと仕事にならないのでは？と思う方もいるかもしれません。しかしデザインに特化してフリーランスをしている方も実は少なくありません。

また、コーディングは得意な人に任せてデザインに集中することで最短で単価の高いデザイン案件にいち早く、取りかかれるようにするという狙いがあります。この学習ロードマップを修了した後に仕事をする場合、AdobeのデザインツールでWeb制作をすることを必須としている制作会社はメインのターゲットではありません。

どちらかといえばエンドクライアント、アプリ開発をしているデザイナーのいない企業、ShopifyのECサイトを構築している個人や企業がメインのターゲットになります。実はそれだけでもデザイナーを必要としている市場規模は大きいため十分、デザインの仕事はあります。

またデザインツールの使い方はFigmaと他のツールで似ているところも多いため、Figmaに慣れればAdobeのPhotoshopやIllustratorを学習する必要に迫られても学習しやすくなっているはずです。

そして、Webデザインの学習ロードマップを有料版にする代わりに内容を徹底的に充実させたのが、デイトラのWebデザインコースです。

▶︎今すぐデイトラWebデザインコースに申し込む！

メリット1：コスパ抜群の価格設定
メリット2：プロの現役デザイナーによるレビュー
メリット3：未経験からでも完走すれば仕事ができる無駄のないカリキュラム
メリット4：現役で活躍中のデザイナーやフリーランスが動画講義や学習コンテンツ制作を担当
メリット5：無期限で視聴できアップデートされるカリキュラム
メリット6：挫折させないメンター陣
メリット7：デイトラ修了生の豊富な実績があるから安心して学べる
メリット8：卒業生向けの独立・転職サポートサービスがある

今回、紹介した学習ロードマップをひとりで進めるのが難しいなと感じた方、効率よく学習したいという方、プロのデザイナーの添削を受けたい方、営業や仕事の進め方まで詳しく解説がほしい方はデイトラのWebデザインコースの受講を検討してみてください。

▶︎今すぐデイトラWebデザインコースに申し込む！

“一生使えるWebスキル”が学べる電子書籍を無料配布中！

「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webフリーランス・副業のはじめ方をまとめたガイドブック】をLINEで無料配布中です！ Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」も本書で見極めていただけます。他にも、フリーランス・副業に必要な学習方法や仕事の受注方法まで全て網羅的に解説しているので、ぜひお受け取りください！

今すぐLINEで『無料の電子書籍』を受け取る