【未経験】WEBデザイン学習の独学ロードマップ

こんなお悩みを解決します。

本記事の内容

• WEBデザインにセンスは不要です
• WEBデザインを独学する3つの手順
• WEBデザイン学習におすすめな参考ブログ・サイト・書籍
• 独学が難しいなら、WEBデザインスクールもあり
• WEBデザイナーとして付加価値を高める3つの方法

未経験からWEBデザイナーに転職しませんか？

本記事では、未経験からWEBデザインを独学で学ぶためのロードマップを提示します。

この記事を読むと、WEBデザインスキルの独学に必要な学習手順、スクール選び、転職で有利になる付加価値の高め方などをマルっと理解できます。

この記事を読みつつ、ぜひ手を動かしてください。そして、デジタルノマドにもなれるチャンスですので、ぜひ挑戦しましょう。

※ パソコンは、お持ちですか？
WEBデザイナー転職には、スキルが必要です。つまり、パソコンがないとムリゲー。ノートパソコンがあると、サクサク学習できます。詳しくは、プログラミングは『Windows』『Mac』どっちが最適？【基準は、ストレス排除です】をどうぞ。

WEBデザインに、センスは不要です

WEBデザインに、センスが必要と思ってませんか？

センスは、不要です

確かに、一部のトップ層や凝ったデザインを見ると「あー自分には、無理そうだな...」と思いますよね？しかし、考えてみてください。多くの場合、そういうサイトって、企業がお金と人材を使って作ってますよ。

つまり、1人ではなく、作業分担して作ってます。そして「テンプレート」といって、企業独自の「デザインの型」がある場合も多かったりします。

美的センス云々というより、デザインの原則を守ってれば、センスがなくても論理で8割カバーできます。学習に、美的センスは考えなくて問題ありません。

 デザインの4大原則

デザインの4大原則は、下記のとおりです。

デザインの4大原則

✅近接：関連情報を近づけてグループ化
✅整列：各要素を意図的に配置
✅反復：デザインの特徴を繰り返す
✅強弱：コントラストをつけて目立たせる

デザインの原則を守るだけで、8割ほどカバーできる。オレジナリティに走るとダサくなるので、先人の知恵から最短距離で走ろう😇

— インペリアル ミヤビ@🇬🇪ブログ歴3年 (@ImperialMiyavi) June 13, 2022

デザインの世界にも、見た目をカバーできる「型」がありますので、初心者は「基本の型」を覚えればOK。WEBデザインに、センスは不要です。

詳しくは、【必見】WEBデザイン学習にセンスは不要です【4大原則で8割カバー/初心者向け】をどうぞ。世の中の美しいサイトは、原則を忠実に守ってますので。

WEBデザインの仕事とは？

デザインは、センスでなく論理であると解説しました。なるほど「アート感覚も、大切なのでは？」と思うかもです。というわけで、アートとデザインの違いも解説しますね。

• アート：自己表現の場
• デザイン：問題解決の仕事

わかりやすいよう具体例で解説してみます。

 具体例：エレベーターのボタン

たとえば「エレベーターのボタン」をイメーシしてみてください。役割 =「ボタンの開閉」ですよね？つまり、人がボタンを押し間違えて事故らないデザイン設計が大切ということ。

デザイン設計をアート的に捉えてしまうと、結局、問題解決につながりません。デザインの本質 =「問題解決」ということを、頭の片隅に入れときましょう。

ブログもYouTubeも同じですが、決して「自己表現の場」ではないんですよね？向こう側には、読者や視聴者がいて、彼らの悩みを解決したり、楽しませることが本質ですよね？

デザインに限らずですが「問題解決」が本質ですからね。むしろ、プロのアーティストでも、自己表現などしませんけどね。

目標期間は、100日

WEBデザインの概要を掴めてきたと思います。というわけで、独学〜転職までの学習期間を設定しておきましょう。

• 100日後までに、WEBデザインスキルを身につける
• 100日後までに、WEBデザイナー転職を成功させる

一般的な転職にかかる日数は、3ヶ月〜6ヶ月。WEBデザイナーですと、スキル学習の時間が必要でして「スキルを身につける→転職活動」といった流れになるかと。

社会人、フリーター、ニートなど、人によって可処分時間が異なりますので、あなたのペースで無理なく独学していきましょう。というわけで、独学のステップを解説します。

WEBデザインを独学する3つの手順

手順は、下記のとおり。

• 手順①：Progateで学習
• 手順②：Photoshop・Illustratorを学習
• 手順③：ポートフォリオを作る

 いきなり、手を動かそう

賢い人の特徴として、失敗を避け、損を回避しようとします。その典型が「参考書籍を買う」ですね。なぜなら、予備知識を入れることで、学習がスムーズになると勘違いしてるからです。

別に悪くはないですけど、初心者が技術書を買うと、買って満足したり、挫折して本を閉じる場合が多い。僕も、経験済みです。あなたは、どうですか？

「手を動かす」というのは、参考書など目もくれず「いきなり学習せよ」という意味。準備など、120%不要です。本がないと勉強できない...そういう人は、まず頭で考えてしまうので、行動が遅くなります。

時間は限られてます。参考書が欲しければ、学習段階で必要な都度、購入すればOK。そもそも初心者レベルのスキルなんて、ググれば120%解決できます。参考書は、不要です。

 世の中の学習ツールは、無料で利用できる

ありがたいことに、現代は、無料で学習できる時代。ググれば、なんでも解決できるし、YouTubeでも無料の学習動画がゴロゴロ転がってます。先人がまとめてくれてるので、感謝しつつ、使わせていただきましょう。

• ブログ記事：デザインの最新情報や実装方法など
• YouTube：デザインツールの使い方やチュートリアル
• 学習サイト：Progateやドットインストールなど

使わない手はないので、グダグダ言わずにタダで利用しましょう。

手順①：Progateで学習

基礎学習は、Progate（プロゲート）でOK。人によっては「ドットインストール」とかでもいいですが、ゲーム感覚で学べるProgateの方が、とっつきやすいかと。

• HTML&CSS（全7レッスン+3記事）
• jQuery（全4レッスン）
• PHP（余裕があれば）

上記の内容を、多くて3周までしましょう。会社員でも２週間もあれば終わる内容なので、まずは基礎からサクッと身につけてしまいましょう。

>> Progate

 初心者にありがちなダメな勉強法

周回作業は、意味ないです。

というのも、それだとスキルが身につきませんので。プログラミングやデザインの世界でも、実際に自分の手を動かしてコードを書かないと、できるようになりません。「本で学習するな！」といったのは、本を読んでてもコードを書けるようにならないからです。

そして、エンジニア界の名言があります。
それが、下記のとおり。

本質をついてますよね？

というわけで、基礎学習をしつつ、コードを書きつつ、ポートフォリオ作りに専念するのが、最も効率的な学習方法ですね。ポートフォリオの作り方は、後で解説します。

手順②：Photoshop・Illustratorを学習

WEBデザイナー転職なら、下記のデザインツールの使い方も覚えておきましょう。実務で使うことになるので、使い方を知ってると、転職でも不利にならないかと。

• その①：Photoshop：写真の加工・合成
• その②：Illustrator：ロゴ、アイコンなどのイラスト制作

どちらもAdobeツールでして、1週間の無料体験つき。期間が過ぎると「月額2,728円」と、まぁ微妙なサブスクが発生します。お財布と相談の上、ご購入ください。

>> Adobe| Photoshop & Illustratorをダウンロードする

 その①：Photoshop

画像の加工や色味の調整などができます。

• 記事で学ぶ：フォトショップの使い方
• 動画で学ぶ：【超初心者向け】フォトショップ基本ツールの使い方編

 その②：Illustrator

• 記事で学ぶ：イラストレーターの使い方
• 動画で学ぶ：【超初心者向け】イラストレーター基本ツールの使い方編

 ぶっちゃけ、CanvaでOK

超オススメな無料デザインツールもご紹介します。それが「Canva」です。

ぶっちゃけ、イラレやフォトショを使わなくても、バナーや画像作成はある程度できます。とはいえ、そこまで凝ったデザインは流石にできないので、お金が気になる方は、Canvaの使い方だけでもマスターしておきましょう。

僕のブログ画像もCanvaで作成しています。YouTubeのサムネ作成にも使えるので、マジ便利ですよ。

>> Canva

手順③：ポートフォリオを作る

同時並行で、ポートフォリオを作りましょう。

 ポートフォリオとは？

 ポートフォリオ =「スキル証明」でして、自分の作品集とお考えください。たとえば、オリジナルのWEBサイトやバナーは、立派なポートフォリオになります。

なお、学習の手順①「Progate」で学ぶ内容ですけど、サイト構築は「VSCODE」で開発をオススメします。「開発」と聞くと難しいですけど、コードが仮想環境に反映されるイメージです。

実務でもバリバリ使うエディタですので、今のうちに慣れておく価値はあるかと。下記の公式サイトより、ダウンロードしてください。

>> VSCODE｜公式サイト

 徹底的に、作りましょう

ポートフォリオの手抜きはダメです。
手を抜くと、すぐにバレます。

フツーの面接ですと、履歴書やトークをもとに、転職者の能力をはかりますよね？しかし、WEBデザイナーのようなスキルを求められる仕事は、口先人間は採用されません。

IT業界は技術変化も早いから、手取り足取り教えてもらう人は、ぶっちゃけ、必要とされません。最低限のスキルが前提で、技術変化にも柔軟に対応できる、熱意と行動力ある人が採用されます。

つまり、ポートフォリオが大切です。
言葉に説得力を与えましょう。

 徹底的に、真似しよう

学習の「コツ」を教えます。それが、TTM（TTP）=「徹底的に真似する（パクる）」が、初心者の上達方法です。つまり、世の中の「正解」をカラダに染み込ませていきます。

デザイン =「問題解決」ですよね？
覚えてますか？

オリジナリティに走り、ゴチャゴチャなデザインが完成すると、商品のコンバージョンが下がります。見苦しいと、訪問者もすぐ離脱します。やはり「シンプル・イズ・ベスト」です。

スキルや経験のない人こそ、真似から入るべきです。TTMの精神で、ポートフォリオを作りましょう。

あとは、転職活動するだけ

上記ができたら、一定の基礎スキルは身についてるかと。あとは、ポートフォリオを武器に、制作会社に面接するだけですね。あと、転職サイトや転職エージェントを使った方が、効率的に転職できます。ぜひ、どうぞ。

• WEBデザイナー転職に強い転職サイト：（解説記事）
• WEBデザイナー転職に強い転職エージェント：（解説記事）

なお、履歴書の書き方や面接のコツは、エージェントの担当者が親身に教えてくれます。あえて僕の記事では言いませんが、スキルや一般常識、やる気があれば受かります。

転職のプロを踏み台にしちゃいましょう。

【2023】IT業界に強い無料おすすめ転職サイト3選【おすすめなど存在しません】

IT業界に強い転職サイトを知りたいですか？本記事では、無料でおすすめなIT転職サイトを3つ紹介します。IT転職サイトを活用して、乾いた人生から卒業しませんか？

続きを見る

【2023】IT業界に強い無料おすすめ転職エージェント5選【会社など、踏み台にしよう】

IT業界に強い転職エージェントを知りたいですか？本記事では、無料でおすすめなIT転職エージェントを5つ厳選して解説します。IT業界に転職しつつ、会社を踏み台にしましょう。

続きを見る

WEBデザイン学習におすすめな参考ブログ・サイト・書籍

学習の補助となる便利なサイトやツール、書籍もセットで紹介します。

• その①：参考ブログ
• その②：参考サイト
• その③：参考書籍

その①：参考ブログ

• その①：サルワカ
• その②：Webクリエイターボックス
• その③：しょーごログ

上記が参考になるかと。僕は、暇な時間にすべての記事を読み込み、実際に手を動かして、サイト構築してました。こうすると、120%レベルUPするので、ぜひオススメです。

その②：参考サイト3選

• ピンタレスト
• I/O 3000
• BANNER LIBRARY

WEBデザインスキルを自然に上げる方法。それは、常日頃から素晴らしいサイトを眺めることです。

世の中のサイトを見ると、新しい発見がホントに多い。そして「自分もこんなサイト作れたらな〜...どうやって、実装するんだろう...」と、やる気もみなぎってきます。

スキルUPのためにも、ぜひ上記のサイトで眺めてみてください。新たな発見につながること、間違いなしです。

 フォントや色味も大切

フォントや配色の研究も、超重要ですね。ちょっとした違いで、見た目の印象がガラッと変わります。僕が使ってた参考サイトも載せておきます。

• フォント：Google Fonts
• カラー：Color Hunt
• グラデーション：Fresh Background Gradients

ググれば、参考サイトはたくさんヒットします。ぜひ、自分でも探してみてください。

フォントや配色では「オリジナリティ」が出やすいので注意。基本的にポートフォリオのデザインは、参考サイトをパクればOK。あとは、デザインの原則を守りつつ、統一感あって、不快感ないデザインを追求しましょう。

その③：参考書籍2選

基本的に、参考書籍は購入しなくてOK。とはいえ「どうしても...」という人だけ、購入してください。僕の実体験ですが、参考書を買っても、あまり参考にならなかった。

初心者向け。WEBクリエイターボックス「マナさん」がおすすめですね。ぶっちゃけ、どの参考書も大差ないので、わかりやすいのがベスト。必要であれば、どうぞ。

 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

 ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座

独学が難しいなら、WEBデザインスクールもあり

手っ取り早く、確実にスキルを身につけたい。WEBデザイナー転職を120%成功させたいなら、独学よりスクールです。下記にオススメなWEBデザインスクールを厳選しました。

• TechAcademy：プログラミング受講者数No.1
• デジタルハリウッド STUDIO by LIG：本気でWEBデザイナーになりたい方
• デイトラ：業界最安値「¥99,800」

世の中にはたくさんのWEBデザインスクールがありますけど、ぶっちゃけ、大差ありません。詳しくは、【実質無料】おすすめWEBデザインスクール比較ランキング3選【未経験から転職できる】をどうぞ。

【実質無料】WEBデザインスクールおすすめ比較ランキング3選【未経験から転職できる】

未経験からWEBデザイナーに転職したいですか？本記事では、デジタルノマドの僕がおすすめするWEBデザインスクールをランキング形式で3つ比較紹介します。コスパ良いWEBデザイナーを目指しましょう。

続きを見る

WEBデザイナーとして付加価値を高める3つの方法

HTMLやCSS、イラレやフォトショのスキルがある人なんて、ゴマンといます。群雄割拠なWEBデザイナーの世界を勝ち抜く、付加価値を高める方法を解説しておわります。

• 方法①：ブログで発信する
• 方法②：ツイッターで発信する
• 方法③：NoCodeを勉強する

方法①：ブログで発信する

ブログで情報発信することで、WEBデザイナーとして、下記の付加価値が身につきます。

• 価値①：ライティングスキル
• 価値②：マーケティングスキル
• 価値③：SEOを意識したデザイン設計スキル

WEBデザイナーとはいえ、デザインすることだけが仕事じゃない。営業担当と打ち合わせしたり、クライアントとチャットでやりとりしたり、自社サイトの記事更新を任せられるかもしれません。

そんなときに、ブログ経験があると、社内評価も上がること間違いなし。それに、WEBデザインとブログは相性がいい。学んだことを、ブログでアウトプットすれば、スキル定着も格段に早い。

詳しいブログの始め方は【格安】エックスサーバーを使ったWordPressブログの始め方【初心者向け】をどうぞ。毎月500円〜1,000円ほどの出費でして、マックを一回ガマンすればOK。

ブログを始めると
下記のスキルが「ゼロリスク」で手に入ります。

・文章でモノを売る力
・人の心を操る文章術
・論理的文章の書き方
・検索上位をとる方法
・WordPressの知識
・HTML/CSSの知識
・WEBデザイン知識
・サーバー関連知識

WEBマーケ転職もサクッとできそう。
マジでヤバ杉内😇 #ブログ

— インペリアル ミヤビ@🇬🇪ブログ歴3年 (@ImperialMiyavi) June 23, 2022

方法②：ツイッターで発信する

ツイッターでも発信しましょう。

• 価値①：フォロワーが増える
• 価値②：ブログと相性がいい
• 価値③：仕事にもつながる

ツイッターを始めると、140文字の文章で共感を得る訓練になります。また、インプットした内容をアウトプットすると、情報をわかりやすく整理する力も身につきます。

完成したポートフォリオも、ネットにジャンジャン公開することで、世の中から反応があるかもしれません。センスが良ければ、お仕事につなったりもします。発信する価値はあるかと。

方法③：NoCodeも勉強する

コードの基礎を身につけて余裕がある方は、NoCode（ノーコード）の知識も深めておきましょう。

NoCode =「コード不要のプログラミング」といったイメージでして、難しいプログラミングの知識がなくても、誰でもサクッとサイト制作ができてしまう、画期的な技術です。

• Figma（フィグマ）
• Studio（スタジオ）

上記が、有名です。直感的に操作できるので、あまり難しくありません。プログラミング学習に挫折した方は、ノーコードでサイト制作するのも、方法論としてアリです。

将来的に、NoCodeを使ったテンプレ案件が一般的になるかもしれません。コードを書けるだけの人間じゃなく、そういった技術革新の選択肢を持っておくと、市場価値は上がり続けますよ。

ちょっと、僕も勉強中です。

#ノマドニア
FigmaでデザインとWFの作り方を学び、STUDIOを使ったノーコードでサイトを作りました。かかった日数はたったの2日。ぶっちゃけ、ショボイですが、サイト制作の基礎をマルッと学べました。とりあえず、公開しておいて、ポートフォリオに追加します😇https://t.co/Imcp70oOnM

— インペリアル ミヤビ@🇬🇪ブログ歴3年 (@ImperialMiyavi) June 16, 2022

上記は、面接での絶好のアピール材料になります。ぶっちゃけ、ここまでやる人は皆無なので、ほぼほぼ面接で採用されるハズです。

デジタルノマドにもなれるチャンス

WEBデザイナーは、リモートワークもしやすく、フリーランス独立にも挑戦しやすい仕事です。僕の周りでも、WEBデザインスキルで海外を旅するように生きる人をチラホラ見るようになりました。

月5万ほどで暮らせる物価の安い国に滞在しつつ、ITスキルで稼ぐ、、、まさに人生のチート行為ですね。

こういったゲスい思考も視野に入れつつ、ぜひWEBデザイナーを目指してみてください。あなたなら、必ずデキます。応援しています。

というわけで、今回はここまで。
長くなりましたが、健闘を祈ります。

 IT業界に強い転職サイト・エージェント

【2023】IT業界に強い無料おすすめ転職サイト3選【おすすめなど存在しません】

IT業界に強い転職サイトを知りたいですか？本記事では、無料でおすすめなIT転職サイトを3つ紹介します。IT転職サイトを活用して、乾いた人生から卒業しませんか？

続きを見る

【2023】IT業界に強い無料おすすめ転職エージェント5選【会社など、踏み台にしよう】

IT業界に強い転職エージェントを知りたいですか？本記事では、無料でおすすめなIT転職エージェントを5つ厳選して解説します。IT業界に転職しつつ、会社を踏み台にしましょう。

続きを見る

 WEBデザインスクールおすすめ3選

【実質無料】WEBデザインスクールおすすめ比較ランキング3選【未経験から転職できる】

未経験からWEBデザイナーに転職したいですか？本記事では、デジタルノマドの僕がおすすめするWEBデザインスクールをランキング形式で3つ比較紹介します。コスパ良いWEBデザイナーを目指しましょう。

続きを見る