Webの最新トピックを配信中!

独学でWebデザインを勉強するための完全ガイド


「とにかくお金をかけずに独学でWebデザインを習得したい!」
という方のために、できるだけ無料か激安で独学する方法を紹介します。

独学の前に求職者支援訓練を検討しよう


独学をする前に検討してほしいのは、求職者支援訓練(ハロートレーニング)や職業訓練の活用です。国が提供する無料でWebデザインを学べる学校があります。僕も求職者支援訓練を経て、Webデザイナーになりました。

今まで未経験からWebデザイナーを目指す方のご質問に200件以上回答してきました。
みなさんとお話をする中で知ったのは、多くの方が独学を途中で挫折し、このサイトを通して求職者支援訓練の存在を知って、訓練校に通い直していることでした。それくらい独学は大変です。自分でモチベーションを維持し続けて、無駄のない順序で学習をする必要があります。ちょっと一ヶ月独学した程度ではWebデザイナーにはなれません.。

学校なら効率的に学習できます。もし、可能なら求職者支援訓練や職業訓練の受講も検討してみてください。下記の記事を参考にしてください。
【無料】求職者支援訓練でWebデザインを学ぶ
【無料】職業訓練でWebデザインを学ぶ

でも、学校に通えない方も多いはずです。
今の仕事を辞められない方や、学校に通う期間の生活費が工面できない方、小さなお子さんがいて学校に通う時間を作れない方、体調に問題のある方、障害を抱えている方など、そのような方は独学という選択になりますよね。
では、効率的な独学方法を紹介していきますね。

まずはWebデザインの学習内容を知ろう

まずは、Webデザイナーになる上で必要な知識を確認しておきましょう。
Webデザインのスキルは「コーディング」と「デザイン」の2つに分解されます。

コーディング関連のスキル

  • HTML
  • CSS
  • jQuery
  • WordPress

この4つが最低限のコーディング関連で身につけるスキルです。

WordPressは使わない現場もありますが、フリーランスとして安定的に稼ぐ上で重要なスキルなので、独学期間中にオリジナルテーマ(自分でコーディングしたサイトをWordPressに実装すること)を作れるだけのスキルは身につけましょう。

Bootstrap(ブートストラップ:CSSフレームワークで簡単にレイアウトを組めるCSSの集合体)という単語を聞いたことがある人もいると思います。bootstrapは最近は現場ではあまり使わないので覚える必要はありません。一方、海外ではかなり使われているので、今後もし海外で活動する予定のある方だけは勉強しておきましょう。

必須ではないが習得してほしいコーディング関連のスキル

他にコーディングの重要なスキルとして、Sass、JavaScript、CSS設計の3つがあります。

SassはCSSをより効率的に書くための記法です。ぜひ時間に余裕があれば勉強しておきましょう。現場でも普通に使われています。

jQueryはJavaScriptを簡単に書く記法です。現在は素のJavaScriptで書くスタイルがトレンドになってきていますが、その習得はなかなか難しいです。今もjQueryは一般的に使われているので、学習の段階ではJavaScriptのことは意識せずに、jQueryを勉強してください。
ただ、今後フロントエンドエンジニアを目指している方はJavaScriptの知識は必須です。

CSS設計は、サイトを修正や拡張していく上で破綻しないためのCSSの組み方です。現在はBEM(ベム)という設計方法が広く普及しています。【初心者向け】Webデザイン勉強のおすすめ本で良質な本を紹介しつつ解説していますので、こちらも読んでみてください。

デザイン関連のスキル

  • Photoshop(フォトショ)
  • Illustrator(イラレ)
  • XD(エックスディー)
  • デザインスキル

XDはPhotoshopに変わるデザイン制作ソフトです。最優先で覚えるのはPhotoshopとIllustratorですが、XDについても簡単な操作方法だけは覚えておきましょう。

デザイン自体の勉強も多少は必要です。フォトショはただのソフトなのでそれを覚えてもデザイナーになれるわけではありません。具体的なデザインの学習方法は後ほど紹介します。

Webデザインの独学方法

このサイトで推奨しているWebデザインの独学方法はこちらです。

僕は国内で有名なWebデザイン関連の教材はほとんどすべて把握しているつもりです。厳選して紹介しているので、この記事で紹介する教材以外は一切やる必要はありません。

独学のロードマップ

実際に独学をする上で、上で紹介した独学の方法を順番にやっていくと効率的です。ポートフォリオの制作も含めて7ステップです。

学習の5ステップ

1. ドットインストールで動画を視聴してHTMLやCSSの感覚をつかむ。

2. Progateで実際に手を動かして自分でHTMLを手打ちすることに慣れる。

3. 最強の動画教材UdemyでPhotoshopとIllustratorの使い方を覚え、実際にサンプルサイトを作りコーディングにも慣れる。(N予備校でもOK)

4. Photoshopでバナーの模写をし、デザインに少し慣れる


5. 書籍で知識の抜け漏れの補充をする。わからない箇所をすぐに調べられるようそばに置いておく。

ここまでで基礎的なスキルの習得は完了です。この順序で独学をすればバッチリです。

ドットインストールとProgateはどちらからやってもOKです。先に動画を見てなんとなく雰囲気を掴みたいならドットインストールからやってもいいし、すぐにでも自分でHTMLを打ってみたいという方はProgateからやりましょう!

ポートフォリオ制作の2ステップ

続いて、ポートフォリオの制作に取り掛かります。

6. ポートフォリオ掲載用の作品を制作

7. ポートフォリオサイトを制作

学習のゴールが「ポートフォリオの制作」であることを忘れないでください。ポートフォリオのレベルが高ければ高いほど企業に採用されやすくなります。ポートフォリオには自分でデザインしコーディングをした作品を掲載しましょう。ポートフォリオについては最後に解説します。

独学の学習期間

独学の期間の目安は3〜6ヶ月

求職者支援訓練の通学期間は約4〜6ヶ月で、職業訓練であれば3ヶ月です。
独学の学習期間もそれに合わせて基本的には約6ヶ月を最長としましょう。早く転職する必要がある場合でも、3ヶ月は勉強の期間を確保しましょう。1〜2ヶ月の学習期間では短すぎて理解が浅いままになってしまい選考に通過しないか、選べる会社が少なくなってブラックな会社に入る傾向が高いです。焦りは禁物です。つまり独学の期間は3〜6ヶ月が目安です。
どうしても現職を続けながら独学をする方は学習時間の確保が難しいと思います。その場合は最長でも1年としましょう。

早く現場に入ってスキルを爆速で上げよう

学習期間を長くしすぎない理由は、現場でこそスキルは急成長するからです。現場で納期を意識しながらクライアントの案件に取り組んだり、先輩や上司にデザインのレビューをしてもらうことで、自分で勉強するよりも数倍どころか数十倍成長します。勉強と現場は大違いで、業務でこそデザインもコーディングのスキルも大幅に成長します。なので、独学の期間は3〜6ヶ月程度に抑えて、その後すぐに就職するようにしましょう!

具体的な独学の流れ

ドットインストールでコーディングの雰囲気をつかもう


『ドットインストール』は、主にコーディングのレッスン動画を配信しているサービスです。

まずはコーディング学習のとっかかりとして、ドットインストールの動画をザッと見ると「HTMLってこういうことか!」とサクッと雰囲気がつかめます。プレミアム会員になれば、もっと多くの動画が見れますが、とりあえず無料プランでHTML・CSS・JavaScriptの動画を片っ端に見ます。下記が見てほしい無料動画です。

【学習環境を整えよう】
HTML/CSSの学習環境を整えよう [Windows編] (全5回)
HTML/CSSの学習環境を整えよう [macOS編] (全5回)

【HTML/CSSの概要を理解しよう】
はじめてのHTML (全14回)
はじめてのCSS (全15回)

【JavaScriptに触れてみよう】
はじめてのJavaScript (全11回)

【もっとJavaScriptに触れてみよう】
jQuery入門 (全20回)

これだけでもかなりのボリュームです。HTMLやJavaScriptの基本的な仕組みが理解できます。
でも、見てるだけでは身につきません。次に、Progateで実際に手を動かしてコーディングを体感してみましょう。

Progateで実際にコーディングを体感してみよう


『Progate』は、コーディングのための優れたオンライン学習ツールです。

サイト上で実際にコードを書きながら学べるので、知識が定着しやすいです。コースの途中までは無料です。有料プランはたったの月980円です。ドットインストールでザッと理解したあとに、Progateをやると理解がすごく深まります。

無料プランではHTML・CSS・JavaScriptなどの18レッスンが受けられます。Progateが自分に合いそうなら有料プランに移行し『HTML & CSS』カテゴリの上級編まですべてやりましょう。これでコーディングの基礎スキルは身につけられます。無料プランでおなかいっぱいの人は、次のUdemyに行きましょう。

最強の動画教材Udemyをメインに学習しよう

『Udemy』は動画教材です。独学方法の中で一番推奨できる最強の教材です。ここにがっつり時間と労力をかけて学習しましょう!

UdemyではWebデザインから英会話まで様々な動画講座を販売しています。普通なら数十万円はする内容の講座が1200円くらいで購入できます。通常24000円くらいのコースが1200〜1600円くらいになる爆安セールを月に5〜6回ほどやるので、そのタイミングで講座を購入します。
講義時間も講座によっては40時間以上!に及ぶものもあり、レッスンの質が高いものが多いです。コスパ最高というか異常な安さです。

ドットインストールとProgateはコーディングのみしか学べませんが、UdemyにはPhotoshopやXDなどのデザインソフトを学べる動画も多いです。

Udemyで受講してほしい講座を紹介します。
ここで紹介する講座は実際に僕が購入し質の高さを確認しているので安心してください。


未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

Webデザイン関連では定番の講座です。422レッスン&42時間と異常なボリュームでコスパ抜群です。
授業ではWebデザインのスキルの多くをカバーしており、Photoshop、Illustrator、HTML、CSSを学べます。JavaScriptは含みません。この講座は「PhotoshopとIllustratorをガッツリ学ぶための教材」と捉えましょう。ここでPhotoshopとIllustoratorの使い方を覚えておきます。

残念なのは内容がやや古い点です。サンプルサイトのデザインが時代遅れだったり、CSSについてはflexboxなど最新の内容を含んでいません。そのデメリットを考慮したとしても、十分すぎる内容なので即買いです。

 


誰でもかんたんに学べるAdobe XD入門講座|実戦で使えるXDの基本機能を完全にマスターできる!

XDの講座はこれが一番人気でわかりやすいです。一通りの機能を解説してくれています。
英語の講座ではUser Experience Design Essentials – Adobe XD UI UX Designがオススメです。授業時間は11時間以上でボリュームがあります。
XDについては学習の優先度は低いので、一番最後に勉強してもOKです。またXDはイラレに操作感が近いので、XDを直感的に操作できそうなら、この講座をやる必要はありません。

 


【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底入門(フロントエンド編)

かなりオススメのコーディングの講座です。制作するサンプルサイトが現在のトレンドを反映しており非常に洗練されています。
授業はSassやCSS設計、CSSとJavaScriptによるアニメーションまで含んでいるので覚えることが多くてちょっと大変です。でも、この講座の内容を理解することで、一気に初心者を脱することができます!ぜひ受講してほしい講座です。約20時間とボリュームがあります。

 


[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

今まで紹介してきた講座だけでも十分ですが、さらにコーディングを極めていきたい人はこちらも受講しましょう。人気の講座です。余裕が無ければ受けなくて大丈夫です。
JavaScriptに多くの授業時間を割いており、トレンドのVue.jsも少しですが扱います。難しいので現時点ではわからない箇所はガンガン飛ばしていってOKです。

余裕があって英語が少しわかる方であれば、ぜひAdvanced CSS and Sass: Flexbox, Grid, Animations and More!もやってほしいです。海外では超人気の講座です。FlexboxやCSS設計はもちろんCSS gridの解説も網羅し、最新のコーディングのトレンドをがっつり盛り込んでいます。サンプルサイトのデザインも本当に美しいです。
英語でもコードを見ていれば内容は理解しやすいので、ぜひ英語の講座も臆せずチェックしてみましょう!クオリティの高い講座がたくさんあります。

N予備校も超オススメ

Udemy以外で超オススメの動画教材が『N予備校のWebデザインコース』です。コーディングからデザインまですべて学べる授業がたったの月1000円で受講できます。Udemyと並んでコスパ最強なので、ぜひ受講を検討してみてください。

動画教材は他にも『スクー』が有名です。Webデザインの書籍を執筆している業界では有名な方の講義も受けられます。スクーはあくまで補講といった感覚で時間に余裕があれば覗いてみてください。

デザインの勉強

デザインスキルを上げるには、レビュー、つまりダメ出しが一番です。自分では自分のデザインの悪い箇所に気づけません。現場では先輩や上司がレビューをしてくれて、それを元に何度も直します。これを繰り返すことでデザインスキルが急速に上達していきます。

でも、学習の段階ではレビューをしてくれる人がいません。有効なデザイン上達方法は、デザインのルールを知ることと模写です。
「デザインのルールを知る」方法は、書籍紹介の章でお勧めの本を紹介しながら解説します。

模写については、こばやす(@kobayas_s)さんがTwitterでバナー模写の効率的なやり方を紹介しています。

模写だけではなく、こばやすさんはバナーお題も出してくれています。実際の案件だと思って取り組んでみましょう。他の方の作品もTwitterで見れるので刺激をもらえます。

模写をすることで、優れたデザインを構成をしている要素がわかってきます。適切なフォント選びや配色、文字の大きさなどを実際のバナーから学びましょう。

ポートフォリオの制作

独学の締めはポートフォリオの制作です。

6ヶ月間の求職者支援訓練の場合は、だいたい5ヶ月目くらいからポートフォリオを作り始めます。独学も同様で5ヶ月目くらいからポートフォリオの制作に取り組むようにしましょう。早く転職しないといけない方であれば、2ヶ月目の後半くらいから作ることになります。

作品を作ろう!

ポートフォリオに掲載する作品を作りましょう!

掲載する内容はこちらです。

  • サイトデザイン&コーディングした作品(2つ)
  • サイトデザイン(1つ)
  • バナー(2つ)

最低でもこれくらいのボリュームが必要です。
バナーはサイトデザインに比べて制作時間がかなり短く済むわりにデザインスキルのアピール材料になります。
もしデザイン&コーディングした作品ががっつり4つくらいあるのなら、バナーは作らなくてもOKです。
バナーやコーディングの模写の掲載はNGです。著作権に違反するケースもあるし、そもそも模写は作品ではありません。

作品は基本的にはゼロから作ります。自分でデザインしてコーディングまで行います。
ゼロから作ることが難しければ、今までUdemyや書籍で作ってきたサンプルサイトを活用しましょう。もちろんそのまま使っちゃダメですよ!笑 パーツを付け加えたり、配色やフォントを変えたりして、原型が残らないくらいまで「自分のサイト」になるようにカスタマイズしましょう。

知り合いにWebサイトを作ってほしい人がいたら引き受けて、許可を取った上で制作サイトをポートフォリオに掲載しましょう。そんな知り合いのいない方(僕を含む)は、架空のサイトを作ります。自分でサイトのコンセプトを考えて、企業サイトやカフェサイトを作ってみましょう!

最強ポートフォリオの簡単な作り方
ポートフォリオ作品水増し講座【無料PSD付き】

ポートフォリオ作品の作り方については↑の記事を参考にしてください。作品作りのベースとなるPSDを無料で配布しています。

ポートフォリオサイトを作ろう

上で作った作品を掲載するポートフォリオを作りましょう。

ポートフォリオは紙版とサイト版のどちらを作るか迷うと思いますが、通常はサイト版のみでOKです。デザインに特化したWebデザイナーになりたい場合は、紙のレイアウトもできる(やりたい)ことをアピールするために紙版を作ります。

ポートフォリオサイトの作り方
ポートフォリオサイトの作り方についてはこちらの記事を参考にしてください。

ポートフォリオサイトのHTMLテンプレートを配布しています。プロがどのようにコーディングをしているかの参考にしてください。テンプレートをそのまま使うと「この人、手抜きしてる…」と採用側に思われるので、配色やフォントなどをしっかりカスタマイズして利用してみてください。
ポートフォリオHTMLテンプレート(ベーシック)

本で知識を確実にしていこう

本はそばに置いておくと、すぐに調べられるので便利です。
ProgateやUdemyで学んでも、知識の抜け漏れがあるかもしれません。本で補っていきましょう!

下記の本がおすすめです。すべて僕が読んだ本です。

【初心者向け】Webデザイン勉強のおすすめ本
本については、↑の記事で詳しく紹介しています。この記事と合わせて読んでみてください。

まとめ

  • 独学はいばらの道なので、可能なら求職者支援訓練や職業訓練の受講も検討する
  • 独学の学習期間は3〜6ヶ月が目安
  • 現場こそ成長できるので早めに就職する
  • ドットインストールとProgateでコーディングの感覚をつかむ
  • Udemyは最強なのでしっかり取り組む
  • 模写やデザイン理論の本も読んでデザインスキルも少し身につける
  • 学習のゴールは「ポートフォリオの制作」
  • 優れた書籍はそばに置いていつでも参考にできるようしておく

Webデザインの勉強はやることが多くて大変に見えるかもしれません。ところがどっこい、僕は今も学校に通っていた当時もですが、楽しくてしょうがないです。仕事というより遊びに近いんですよね。遊んでいてお金もらっていいのかな?とすら思う時もあります。もちろん納期が短くてしんどい時やデザインが思いつかなくて吐きそうな時も何度もありました。でも、全体的に楽しいんですよね。デザインをするって新しいものを生み出す興奮があるし、コーディングでそれがサイトとして形になって人に喜んで使ってもらえると嬉しくてしょうがないです。
独学をする方も、この「楽しい♪」という気持ちをどうか忘れずに、楽しく頑張っていきましょう^^

コラム①:正社員のWebデザイナーを強くオススメする理由

このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。 なぜワークポートは未経験者に大量の求人を紹介できるのか?その評判の秘密に迫る! ↑ワークポートさんに会ってきました!ねほりはほりと質問をぶつけています。ぜひ読んでみてください。

転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。

『ワークポート』公式サイトへ
コラム②:Webデザイナーを強くオススメする理由

エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK JOB』があります。就職率97.8%と驚異的な数字を出しています!よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
2校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この2つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

30歳以上の方は、『テックキャンプ エンジニア転職』 がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます!超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『プログラマカレッジ』の詳細を読む 『テックキャンプ エンジニア転職』の詳細を読む

“独学でWebデザインを勉強するための完全ガイド” への30件のフィードバック

  1. Tammy より:

    初めまして、ブログ拝見させて頂いております。
    現在大学四年生で就活中なのですが、悩み抜いた末にやっとWebデザイナーというお仕事をやりたいと思いました。というのも、自己分析が甘く、なかなか自分がやりたいことが見つけられなかったからです。
    Webデザイナーを目指していきたいのですが、未経験で勉強すら始めていませんので全く知識がない状態です。これからPhoto Shopの勉強を始めますが、このような常態からでもデザイナーとして採用してもらえると思いますか?
    また、もし厳しいと思われるならアドバイスをいただけると非常に有り難いです。お忙しいところ誠に申し訳ございませんが、何卒よろしくお願い致します。

    • ねこポン より:

      Tammyさん、はじめまして。
      もちろん誰もが未経験からなので、きちんと学ぶべきことを学べばWebデザイナーにはなれます。

      現在4年生なので、来年度(2019年度)からの就職はもしかしたら時間が足りなく間に合わないかもしれません。それなら、卒業前後に求職者支援訓練を利用し、その後に就職する手が良いかもです。
      大学生がWebデザイナーになる方法は下にまとめています。

      ◆新卒でWebデザイナーになる方法
      https://webdesigner-go.com/job/college-student/

      Webの基礎スキルを確実に身に着けて、ちゃんとした制作会社に入ろうとするなら↑の記事で紹介している「卒業してからWebデザインの求職者支援訓練か学校に通う方法」をオススメします。勉強時間をちゃんと確保し、確実な基礎スキルを蓄積した方がいいです。

      どうしても今年度中に内定したいのなら、
      ◆独学でWebデザインを勉強するための完全ガイド
      https://webdesigner-go.com/study/self-taught/
      こちらで紹介している書籍やProgateで独学で勉強し、Webの基礎の基礎を覚えたら、可能性は低いですが、どうにかして事業会社か制作会社のアルバイトなどに潜り込むことも可能かもしれません。まだお若いので、スキルが乏しくても会社によっては育成してくれる所も無くはないです。

      また何かあればコメントをください!

    • 谷口由佳 より:

      こんにちは。
      ファッション系のWEBデザイナーに興味をもち、こちらを読ませて頂きました。
      すごくわかりやすく、意欲が湧きました!
      何もやりたいことがなく、自信のもてることはファッション(服)しかないと思っています。
      資格の取得やその他勉学をして、少しでも知識を広げたいと思っています。大雑把ですみません。
      WEBデザイナーになりたいです。なりたいと思うだけではなれないと思っています。何から学べばいいか教えて頂きたいです。
      今は経営学部 国際経営学科2年です。
      デザインやファッションなどの知識は一切ありません。

      • ねこポン より:

        谷口さん、はじめまして。
        このサイトを通じて、Webデザイナーについて興味を持ってくれて嬉しいです!

        僕自身、現在はアパレルブランドでWebデザイナーをしています。
        撮影にも同行できるし、Webデザイナーとしてページ上で服やバッグなどのアイテムの美しい魅せ方にこだわったりできます。
        なので、ファッションが好きな人にとっては、アパレルブランドやファッション雑誌を扱う会社でのWebデザインのお仕事は、とても楽しめると思いますよ。

        何から学ぶべきかわからないとのことですが、学ぶべきスキルについては下記の記事で確認してください。

        ★最初にチェック!Webデザイナーに転職する前に最低限持つべきスキル一覧
        https://webdesigner-go.com/skill/skills-webdesigner-must-have/

        Webデザインの学び方については、このサイトでは無料の求職者支援訓練や職業訓練をお勧めしていますが、谷口さんの場合は大学生なので受講できません。一般のスクールに通うか、オンラインスクールを受講する、または独学で学習します。オススメのスクールや独学方法は次の記事を参考にしてください。

        ★一般のWebスクールで学ぶ
        https://webdesigner-go.com/study/web-school/

        ★オンラインスクールでWebデザインを学ぶ
        https://webdesigner-go.com/study/online/

        ★独学でWebデザインを勉強するための完全ガイド
        https://webdesigner-go.com/study/self-taught/

        学習のゴールは「質の高いポートフォリオの制作」です。Webデザイナーなどのクリエイター職ではポートフォリオが最重要です。作り方は下記の記事を参考にしてください。

        ★最強ポートフォリオの簡単な作り方
        https://webdesigner-go.com/job/portfolio/

        新卒でWebデザイナーを目指す場合は、GreenやFindJob!などのWeb系に特化した転職サイトを使って会社に応募します。あるいはまだ若いのでポテンシャル採用も十分あるので気になる会社に直接応募しちゃって大丈夫です。

        ●Green
        https://www.green-japan.com/

        ●FindJob!
        https://www.find-job.net/

        会社の選び方ですが、
        ・まずはWeb制作会社に行く
        ・いきなりアパレル関連の会社に行く
        この2つの選択肢があります。

        一番オススメなのは、まずはWeb制作会社で2年ほど働いて、デザイン力を上げます。Webのプロ集団である制作会社でがっつりとスキルを上げれば、その後、ファッションやアパレル系の事業会社に行って活躍しやすくなります。

        どうしてもいきなりアパレル関連の会社に行きたい場合は、絶対にある程度は規模が大きくて、デザインの部署があって、Webデザインのスキルが上げれそうな会社に行ってください。小さすぎる会社でデザインを教えてくれる人がいない会社は絶対にダメです。
        未経験からWebデザイナーになる場合は、スキルを上げれる会社に必ず行きましょう。

        まだ大学2年生でそこまで将来のことを考えていて立派だと思います!
        デザインやコーディングは、楽しめないと続けられません。まずは独学でちょっと勉強してみて「わ!楽しい!」と思えたら、スクールを受講してみるのがいいと思います。
        Webデザイン、楽しみながら頑張ってみてください^^

  2. あうとばーん より:

    はじめまして。
    ブログを拝見させて頂きました。
    ねこポンさんの履歴を拝見させて頂き、凄く似ていてコメントせずにはいられずお送りさせて頂きました。
    営業職の私は、3年前にwebデザイナーになりたいと思い、専門学校に通いましたが、諸事情がありwebデザイナーに転職しませんでした。
    その後、結婚を機に、給料アップを目指し営業職に転職し失敗し、前職の営業に戻る事になりました。
    難しいとは思いますが、手に職をつけたく、仕事をしながらもう一度勉強しwebを直したいと思っているのですが、仕事をしながら可能でしょうか?(29歳既婚)
    長文で申し訳ございませんが、ご確認の程宜しくお願い致します。

    • ねこポン より:

      あうとばーんさん、はじめまして!
      サイトを見ていただき、ありがとうございます。

      一度専門学校に通われていてWebの基礎スキルを持っているなら、仕事しながらでも可能だと思います。
      今はProgateや良質な書籍もあるので、仕事の合間に独学でも勉強できます。
      今後、Web系の仕事に転職を考えているのなら、スキルをブラッシュアップしつつ、ポートフォリオを作ります。

      副業のようにWebデザインをやりたいのなら、コーディングならランサーズなどで案件を得ることはできるかもしれませんが、
      デザインは厳しいです。デザインスキルは一度会社に入って実務でレベルアップをするべきだと僕は考えています。

      今度、本気で手に職ということを考えるなら、Web制作会社へ転職し、2年ほどスキルを磨くことをオススメします。

      またご質問があればいつでもコメントをください!

  3. 白鸞 より:

    諸事情で大学へは進まず高校卒業後直ぐに仕事をしていました。今はニートです。。。
    今までとは違う業種へ進みたいと考え、Webデザイナーの仕事をしたいと思います。
    こんな私でも独学で勉強して、アルバイトからWebデザイナーの仕事へ進めるでしょうか?

    • ねこポン より:

      白鸞さん、はじめまして!
      コメントをありがとうございます。

      僕の周りにも大学に行かずにWebデザイナーになっている方はいます。
      新卒で入社するわけでもなければ、学歴は問われないと思っていいです。
      大事なのはシンプルで「デザインかコーディングのスキルがあるかどうか」に尽きます。

      そして、Webデザイナーになれるかどうかは、
      「デザインかコーディングが楽しい!」
      あるいは
      「デザインかコーディングが苦ではない」
      のどちらかの状態になれるかどうかです。
      これでWebデザイナーになれるかどうかがほぼ決まります。それくらい淡々とした地味な作業だからです。

      なので、まずは独学なら勉強してみて、上の気持ちになれるかどうかです。
      なれたら、独学で基礎を身に着けたら、ポートフォリオを制作し、転職エージェントか転職サイトを通して就職(アルバイトなら見つかると思います)し会社で成長していくだけです。会社では学ぶことが多く最初は大変かもしれませんが、この気持ちがあれば楽しく乗り切れます。

  4. Kohamom より:

    こんにちは☺︎
    2人目の出産育児を機に一旦営業職を辞め主婦になったものの、社会復帰がしたくなりWebデザイナー のお仕事に興味を持っています。
    育児があるため職業訓練校には通えず、独学になると思います。
    そして最終的にはフリーになり子育てと両立しながら働くのが理想です。
    そこで質問なのですが、ねこポンさんの仰る様に、まずは制作会社で経験を積みたいと思った場合に、未経験+3歳以下の子供2人を持つママ(=まだ風邪等を頻繁にひくので急なお休みがある&残業できない)を雇ってくれる所は現実的にありますでしょうか、、、?
    ねこポンさんのこれまでの同僚で、乳児を持つママさんウェブデザイナーはいらっしゃいましたか?
    長文で恐れ入りますが、ご意見お聞かせ頂けると幸いです。
    宜しくお願いいたします。

    • ねこポン より:

      Kohamomさん、こんにちは。

      このサイトでは「まずWeb制作会社に行こう!」と言っていますが、お子さんが2人いる状況で、制作会社で働くのは正直に言ってなかなか難しいと思います。。
      電通の事件以降、制作会社でも残業は減りつつありますが、依然として残業は多いです。クライアントに合わせて動くため、急なお休みがあるとリリースに間に合わなくなるケースが出てくる可能性もあります。
      制作会社は中小どころか零細企業も多く、育児への理解不十分や制度も充実しているとは言い難いです。。僕が働いていたWeb制作会社でも、子育てをしながら勤務している方はいませんでした。一年ほど育児休暇で休んでいる方はいました。

      育児や時短勤務に理解のある制作会社を見つけられれば、それがベストです。やはり制作会社は抜群に成長できる環境ではあります。
      ただ、それはなかなか難しいかもしれませんので、制作会社に入れないようなら、制度的に安定している事業会社を選ぶのがベターだと思います。
      僕も現在は業務委託契約でアパレルの事業会社で週3日働いています。ここでは、1歳くらいのお子さんを持つデザイナーさんが以前働いていましたよ。たまに会社に連れてくることもありました。規模の大きな企業であれば、育児により理解があり、時短やリモート業務も可能だと思います。
      ただ、事業会社は先輩デザイナーや優秀なフロントエンドエンジニアがいないことも多く、成長できる環境では必ずしもありません。その点は注意して見極めたほうがいいです。
      実は、僕が求職者支援訓練の卒業後に一番初めに入った会社はメディアの事業会社です。上司が天才的なデザイナーだったおかげで、だいぶましなWebデザイナーになれました。ラッキーなケースでした。

      事業会社には、多種多様な業種の会社があります。そして、「Webデザイン」は、Webやデザインに関連するあらゆるスキルのベースとなるスキルです。デザインができればポスターやチラシも作れるようになるし、コーディングができればブログやアフィリエイトサイトも作れるようになります。Photoshopができれば写真をレタッチするレタッチャーという仕事に就くことも可能です。他にアクセス解析やSEOなどWebマーケティングの分野もあります。「Webデザイナー」という枠にとらわれずに、「デザインやコーディングができるとどんな事業会社でどんな職種で働けるだろう」という広い視野を持つと、働き方の選択肢が増えます。もちろんなりたいのはWebデザイナーだとは思いますが、いろんな選択肢があることを忘れないでおくと、挫折したり落ち込んだりしづらくなると思います。

      ぜひ企業で経験を積んで十分にスキルを身に着けて、そしてフリーランスになれるよう応援しています。そしたらお子さんと一緒に過ごせる時間が増えますしね。Webの勉強、楽しくがんばってください^^

  5. キラリ より:

    はじめまして。
    グラフィックデザイナー歴20年です。
    2度の出産、育休をとり、4月から復帰したばかりのものです。

    現在も広告代理店に勤めていますが、
    2度の出産が原因で、正社員からパートに降格、減給となり、パートの雇用契約も残り1年と…かなりひどい待遇の会社なので、そろそろ転職を考えています。
    年齢は40代後半で、今の職場を離れたら再就職も厳しいので、
    キャリアアップのためにも、ウェブの勉強を!と考えています。

    子供を保育園にあずけて仕事をするため、時短勤務可能な就職先、派遣や在宅を希望しています。

    求職者支援訓練校か公共職業訓練校のどちらかでウェブの勉強を!と思っています。ウェブデザインは初心者ですが、ゆくゆくはサイトを作れるようになりたいと思っていて
    サイトを作れるようになるなら、どちらの学校を受講したほうが良いのでしようか?
    ちなみに過去に、デジハリオンラインで勉強していたのですが、途中で妊娠となり体調を崩してしまったことから、こちらでの勉強は中断となりました…独学だとサボりがちになるので、なかなか進まない〜と実感しています。

    • ねこポン より:

      キラリさん、はじめまして。

      現在の会社は、なかなかしんどい状況ですね。。
      Web業界であれば求人数は比較的多いため、Webデザイナーへの転身は素晴らしい決断だと思います。

      グラフィックデザイナー歴20年はすごいですね!それほどのベテランなら、求職者支援訓練ではなく、職業訓練でも良いかと思います。
      このサイトでは、通常は求職者支援訓練をオススメしています。職業訓練の期間が3ヶ月に対して、求職者支援訓練は4〜6ヶ月ほどと長く、Webデザインに必要な基礎スキルを習得するにはできれば6ヶ月はじっくり勉強してほしいからです。

      ただ、キラリさんの場合は、すでにフォトショやイラレは十分すぎるほどに扱えるわけです。それなら期間が短い職業訓練でも問題ないと思います。
      もちろん、じっくり勉強したいなら求職者支援訓練でもかまいません。職業訓練でも求職者支援訓練でもコーディングは学ぶので、サイトは作れるようになります。ただ求職者支援訓練は期間が長い分、WordPressの授業を含む場合が多いです。職業訓練の場合はおそらく含まれません。WordPressは必須の技術ではないですが、フリーランスになった時に需要があるので、もし勉強しておきたいなら、求職者支援訓練が良いです。

      どちらのスクールの質が高いとかは言えません。求職者支援訓練のなかにも良い学校はありますし、もしかしたらちょっといまいちな学校もあるかと思います。開講時期にハローワークでチラシを比較して、どの学校が良いかを判断してみてください。学校によっては見学もできます。判断の方法は下記の記事をぜひ参考にしてみてください。

      ★【無料】求職者支援訓練でWebデザインを学ぶ
      https://webdesigner-go.com/study/kyushokushien/

      お子さんがいるので、期間が短い職業訓練が良い場合もありますよね。職業訓練と求職者支援訓練の違いはこちらの記事で詳しく書いています。
      ★職業訓練・求職者支援訓練・一般のWebスクール…どれがベスト?
      https://webdesigner-go.com/study/best-school/

      学校卒業後の転職については、下記の記事をご覧ください。
      ★主婦が未経験からWebデザイナーになるための方法
      https://webdesigner-go.com/job/shufu/
      主婦の方はお子さんがいる場合、残業の多いWeb制作会社への就職はなかなか難しいです。その場合、育児や在宅作業への理解があり制度的に安定した事業会社や、時間をコントロールしやすい派遣を選択するのがベターになります。

      独学は継続が難しいですよね。僕なんかぜったい無理です笑。僕は訓練校に本当に助けられました。デザインは完璧でらっしゃると思うので、コーディングが楽しめるといいですね!自分のデザインをカタチにしていく作業はすごく楽しいです。頑張ってください^^

  6. ガオタン より:

    ねこぽんさん
    はじめまして。
    ブログを拝見し分かりやすく見やすい解説ありがとうございます。
    現在、会社で印刷の編集や電子化作業を行っているのですが、近年紙より電子化に注目がいっており我社もその波がおしよせています。

    そこで、Webデザインとして
    デザインのみの受注など実際あるのかどうかをうかがいたいです。

    Web事態を作れるようになれば即戦力にはなるのですが、チーム内では未経験者ばかりですぐに習って覚えられるものでは無いので、これから勉強にはいる予定です。

    ただ、デザインだけはDTPをいかせないか
    とおもい質問させていただきました。

    • ねこポン より:

      ガオタンさん、はじめまして。
      サイトを見ていただき、ありがとうございます。

      紙のデザインを専門にしているデザイン会社と一緒にお仕事をしたことがあります。
      その際、その会社はサイトデザインのみを担当し、僕はコーディングとWordPressでのサイト構築を請け負いました。正直その時は、Webサイトとは思えないデザインが仕上がってきて、、、笑、その経験を下記の記事にまとめています。

      ★紙(DTP)のデザイナーさんがとんでもないWebデザインをしないためのメモ
      https://webdesigner-go.com/design/dtp-web/

      Webデザインのお作法さえ守れば、紙のデザイン出身の方は「The デザイナー」でデザイン力が高いはずなので、かなり強力なWebデザイナーになりえます。
      僕が請け負った事例のように、外部にコーダーを抱えることで、デザインのみを受注して案件を回すことが可能です。クライアントとWebの話ができるWebディレクターも欲しいところですね。

      最近はサイト上でダイナミックでおしゃれな表現もどんどん可能になってきています。つまりグラフィックデザイン寄りになってきているので、DTPやグラフィックでの凝った表現を得意とする紙のデザイナーさんにとっては良い流れだと思います。

      外部のコーダーはクラウドワークスやランサーズなどのクラウドソーシングサービスや、TwitterなどのSNSで探してみるのもアリだと思います。あとは英語ができる方が社内にいればオフショアでUpwork(https://www.upwork.com/)で海外のコーダーも見つけられます。

      コーディングはちょっと勉強すれば誰もがある程度はできるようになります。しかし、デザインは誰しもが獲得できるスキルとは言い切れません。社内の貴重なデザインスキルをぜひフル活用できるといいですね。

  7. たーちゃん より:

    ねこポンさん、初めまして。
    私は何かを制作をする仕事をしてみたいと思っており、元々Webデザイナーに興味を持っていていろんなサイトを見ていたところ、ねこポンさんのブログに出会いました。
    Webデザイナーのイメージは専門学校を出ていないとならないものだと思っていたので、ねこポンさんのブログを読んで自身にも可能性があるんだと思いました。
    私は現在23歳で短期大学卒業後、しばらく飲食店でフリーターをしてから2月に正社員として販売職に勤めています。
    しかし、何かを作る仕事をしたいという気持ちが日に日に大きくなり、Webデザイナーになる為の勉強を始めようと決意をしました。
    未経験で知識が全くない為、職業訓練校や通信教育を利用して勉強をしようと思っています。
    ここで1つ悩んでいることがあります。
    今後の勉強の時間のことも考えて、今の仕事を辞めてフリーターをしながら勉強をしていくか、正社員として働きながら勉強をしていくかで迷っております。
    現在の職場は休みは充分にないわけではないのですが、職場環境や労働時間、業務等で自身にあまり余裕が持てない状態であります。
    この状態で働きながら勉強することはさらに余裕がなくなってしまうのではないかと思っております。
    厳しい一言でも構いません。
    お時間がある時に一言でもアドバイスを頂ければ幸いです。

    • ねこポン より:

      たーちゃんさん、はじめまして!

      「何かを作りたい」というその動機は素晴らしいと思います。
      僕もその気持ちが強く、Webの世界に入りました。
      具体的にデザインやコーディングが好き、という人は多いですが、作りたい!アイデアをカタチにしたい!という気持ちの人もこの世界に向いていると思っています。Webデザイン学習の良いモチベーションにもなりえます。

      たしかに、その正社員の状態で働きながら勉強するのはきつそうですね・・・。
      世の中には、会社の後に夜勉強できる人もいれば、土日に集中してやる人もいるし、僕のように退職してから、フルタイムで求職者支援訓練に通う人もいます。
      僕個人の例で言えば、平日の夜に会社を終えた後に勉強するなんて疲れすぎててゼッタイ無理です笑。Twitterを見てると、平日も頑張れとか煽ってくるツイートをたまに見かけますが、あまり参考にしない方がいいです。自分に合わない学習方法を続けてつらくなって、Webデザイン自体が嫌いになったら何の意味もありません。

      たーちゃんさんがどんな学習スタイルが向いているかはわかりません。
      もしどうにか生活費が工面できるのであれば、週3〜4日は学校に通い、それ以外の日も勉強できるのがベストです。Webデザインは学習内容がけっこう多いので、週4日学校に行っても4〜5ヶ月は通常は掛かります。何よりその方が早く転職が決まりやすいです。

      金銭的に厳しいようであれば、やはり今の正社員を続けながら、夜や土日に勉強するしかないと思います。ただそうなると、転職がうまくいくまでに、時間はより掛かってしまうと思います。

      前者の方法でいけるといいですね。短期間集中的に勉強し、早く現場に入ることが一番良いと思います。
      まだ23歳とお若いので、可能性は無限大です!いづれの方法にしても、Webデザインの勉強、楽しみながら頑張ってください^^

  8. はる より:

    ねこポンさん
    初めまして。

    私は今Webとは全く畑違いの
    化粧品の販売員をしております。

    将来子供ができたら、在宅での仕事を希望しており今のうちに出来る勉強をしたいと思っております。
    在宅の仕事でも、なにかを作ったりデザインしたり、絵を描くことが好きで得意だったのでそこを活かせたらと思ってwebデザイナーが気になっている所です。
    Webデザイナーと現職の化粧品についての知識やセンスなどを上手く組み合わせられたらと思うのですが
    ねこポンさんはそういった内容のお仕事されたことございますか?

    • ねこポン より:

      はるさん、はじめまして!

      僕に関しては、前職などで持っていた知識とWebデザインのスキルを掛け合わせて働いたことはあまり多くはないです。
      ただ、以前に猫の絵柄のTシャツを作って自分でECサイトで売っていましたが、現在はアパレルの事業会社でECサイトの運営に携わっているので、当時自分でやっていたアクセス解析やSEOの知識は役立っていると言えます。
      あとは以前ライターをやっていたので、このサイトも含めてですが、サイト内のコンテンツ制作においては文章力が役立ってはいます。

      現職の知識とWebデザインのスキルは掛け合わせることはできますよ。

      現職が化粧品関連のお仕事で、もし化粧品を販売する会社でWebデザイナーとして働ければ、豊富な化粧品関連の知識を活かしてページ作りができます。特にLP(ランディングページ)と呼ばれる縦長のセールス用のページ制作においては、接客の手法、セールストークが活躍します。商品の特性を把握し、それをお客さんのニーズとうまくマッチングさせられるページが作れて売上を上げれば人材としてはかなり貴重です。とてもやりがいもあります。

      また全く別のアプローチですが、アフィリエイターやブロガーも面白い選択肢です。化粧品のアフィリエイト広告は多いので、自分のサイトやブログでオススメの化粧品の広告を掲載し商品が売れれば自分に広告費が支払われます。これはあくまで余裕があったらやってみてください笑

      デザインや絵を描くのが好きならWebデザイナーは合っていると思います!あとは化粧品の販売員をされているなら美に対する感覚も優れていて向いている気はします。
      デザインやコーディングの勉強、楽しみながら頑張っていきましょ〜^^

  9. きみ より:

    初めまして
    未経験 Webデザイナーと検索してこのブログにたどり着きました。
    記事も読者との質疑応答も非常に読みやすくてありがたいです。

    私は医療系の仕事をしていたのですが3回職場を変えてようやく自分に向いてないのがわかり、次は人から離れたい、休みが欲しいと考えwebデザイナーになりたいと思いました。

    ねこポンさんの働き方が羨ましいです、とても理想的です。

    現在保育園利用していまして、離職して学校に通ったり、パートになり勤務時間が短くなると保育園を退所する可能性が大きいので独学から正社員採用を考えています。(そんなこと可能なんでしょうか)

    金銭的にすぐにMacかWindowsを買うのは難しく、手持ちのiPad pro(2018年モデル)で出来ることがあれば教えて頂ければと思います。(パソコンのスキルは特にないです)

    お忙しいとは思いますがよろしくお願いします。

    • ねこポン より:

      きみさん、はじめまして。
      記事やコメント欄を読んでくださってありがとうございます!

      最近はProgateやドットインストール、Udemyなどの独学ツールが充実してきたので、それらを活用しスキルを身につけて、独学から正社員になる方もいます。
      でも、やはりそこそこ大変です。独学で始めてはみたものの、モチベーションが続かなかったり、基礎スキルの習得が難しく、結局スクールに入り直す方もいます。

      Webデザインの学習範囲は広いため、求職者支援訓練などの学校に入っても3〜6ヶ月の学習期間は必要です。それを独学でこなすには、きちんとスケジュールを自分で立てて、コツコツと学び続けることが大事です。

      この記事でも紹介していますが、まずはProgateやドットインストールをやってみて、ご自身が独学ができそうか、学習が継続できそうかの感覚を掴んでみることをお勧めします。

      -Progate
      https://prog-8.com/

      -ドットインストール
      https://dotinstall.com/

      -Udemy
      https://www.udemy.com/course/web-design-master/
      Photoshopを含めWebデザインに必要な基礎スキルを総合的に勉強するならこのコースがコスパが高くオススメです。
      頻繁にやっているセールのタイミングで、1200~1600円で購入できます。

      この3つはiPad Proでもできます。PCが手に入るまではiPad Proでこの3つを試してみてはいかがでしょうか。

      僕の方でも近いうちに無料のコーディング教材を作ろうと考えています。独学しか選択肢がない方がどうにかWebデザイナーになれるように、教材を作ったり記事を充実していきますね!

  10. わんころもち より:

    はじめまして、ねこポンさん
    わんころもちです。

    HSP気質があるのではと思い、色々考えてた時に、ねこぽんさんのブログを見つけました。
    現在、三ヶ月のWEBデザインの職業訓練に通ってます。

    そこで、最後の課題で自身のポートフォリオサイトの発表?があるのですが、サイトがうまく作れなくて悩んでいます。
    時間をかけていても、クオリティが低く…
    劣等感を感じ夜眠れないです笑笑

    他の方のポートフォリオサイトを真似たりして、サイトを作っているのですが、真似たサイトのHTMLとCSSが理解できず苦戦しています。
    そこで質問なのですが、基礎がまだ理解できてない時に、自身のサイトを作るのはやめて、基礎から学び直していったほうがいいですか?
    転職活動もはやくやらなくてはと思うと、焦り、基礎からやるのが躊躇われます…

    初学者が自身のポートフォリオサイトを作る時のコツややり方とかあれば教えていただきたいです。

    お忙しい中恐縮ですが、よろしくお願いします。

    • ねこポン より:

      わんころもちさん、はじめまして。
      職業訓練に通われているんですね!ブログを見つけてくださって嬉しいです。

      ポートフォリオを思い通りに作れないとしんどいですよね。。
      基礎ができていなくてサイト作りがうまくいっていないなら、おっしゃるとおり「基礎から学び直していったほうがいい」ケースがほとんどかと思います。中途半端にポートフォリオを作っても、選べる会社の選択肢が減ってしまい、良い会社と出会えなくなります。

      ただ、問題は「基礎がまだ理解できてない」と言う時に、具体的に何ができていないかを突き止めることです。

      HTMLとCSSの基礎ができていないというのはどういう状態なのか?いくつかパターンがありますよね。

      ・そもそも各HTMLタグをほとんど覚えていない
      →まず本やネットを使って覚え直す

      ・HTMLタグは覚えたが、コーディングでどう組めばいいかわからない
      →ポートフォリオサイトをゆっくりでいいながら頑張って組んでいきながらコーディングを覚える

      ・HTMLで組むことはできるが、CSSでスタイルを当てるのが苦手
      →まず本やネットを使ってCSSの各プロパティの機能を覚え直す

      ・そもそもCSSのプロパティをあまり覚えていない
      →まず本やネットを使って覚え直す

      あとは「自分が何がわからないのかわからない」という状態もありますよね笑。この場合は、一冊本をちゃんと読み直した方がいいです。HTMLとCSSでおすすめの本は下記の記事で紹介しています。あるいはUdemyもおすすめです。

      ★【初心者向け】Webデザイン勉強のおすすめ本
      https://webdesigner-go.com/study/book/

      Udemyは動画講座です。1300円くらいになる激安セール時に購入してざっと見るだけでもOKです。おすすめの講座を下記で紹介しています。というかコメントをいただいたこの記事ですね笑

      ★独学でWebデザインを勉強するための完全ガイド
      https://webdesigner-go.com/study/self-taught/

      今って職業訓練でたくさんのことを学びすぎて、知識が「点」の状態になってると思うんですよね。それぞれの知識が分散しちゃってるので、「じゃあコーディングしよう!」となった時に、知識が一本化されていないので具体的にどうコーディングしていいのか、何から手を付けたらいいのかわからない状態なのかもしれません。「点」を一本の「線」にする必要があります。そのためには手っ取り早いのは、一冊の本をちゃんと読み込んだり一つの動画講座をやってみて、知識をもう一度固める作業です。転職活動もあって焦る気持ちもありますが、「急いては事を仕損じる」なので、2〜3日ほど掛けて、読むだけでいいので、きちんと一冊の本を終わらしてみるといいと思います。もう一回知識を確固としたものにしましょう。インプットを強化しましょう。

      それをやったら、あとは手を動かしてポートフォリオをコーディングで作ってみます。そうすると「あ、あの本で読んだことが参考になる!」となり、以前よりはサクサクとコーディングできるはずです。

      >他の方のポートフォリオサイトを真似たりして、サイトを作っているのですが、真似たサイトのHTMLとCSSが理解できず苦戦しています。
      これは気をつけたほうがいいです。プロのWebデザイナーでさえ、他の人が組んだコーディングを解読していくのは骨の折れる作業だからです。けっこう難しいことをされてると思いますよ笑。できなくても安心してください。他の方というのが誰を指しているかわかりませんが、もし初学者の方のポートフォリオサイトであればやめたほうがいいかもです。それが正しいコーディングかどうかはわからないからです。
      真似する必要はなくて、全然つたなくてもいいから、自分自身でゆっくりHTMLとCSSを理解しながらコーディングしていきましょう!

      もしアドバイスの論点がずれていたり、不足している部分があれば指摘してください!最初のうちは大変なことも多いですが、コーディングはけっこう楽しい作業です。楽しみながらがんばっていきましょう^^

      • わんころもち より:

        お忙しい中返信ありがとうございます!
        丁寧な回答をしてくださり、とても嬉しいです!!
        大事に保存します。

        ねこぽんさんのおっしゃる通りで、短期間の訓練で学ぶため、知識が分散してる状態だと思います。

        もう一度学び直してみます!

        最近、あれもこれもやらなきゃと思い、悩んでいたので、励みになりました!
        ねこぽんさんには感謝しています!!

        また、質問することがあると思いますが、よろしくお願いしますm(__)m

  11. むうあ より:

    ねこポンさん

    いつも見やすい記事を書いてくださりありがとうございます、むうあと申します。28歳の男です。
    9ヶ月ほど前に求職者支援訓練について一度ご相談させていただきました。その折はありがとうございました。

    今回ご相談させていただきたいのは「N予備校+このページで紹介されている書籍の勉強量で、転職アドバイザーが満足するポートフォリオは作成可能か?」という内容です。
    長文になってしまいますので、以下お手隙の際にご覧いただければ幸いです。

    現在progateのHTML&CSSコースの上級編を終え、ドットインストールのHTMLとCSSの動画をサラッと流し見しつつ「スラスラわかるHTML&CSSの基本」を一冊完了したところなのですが、どうにも自分には本による独学が肌に合うようでした。

    その後はKUJIRA CAFEのみを制作物にしつつ、ワークポート様とwebist様にメールをお送りしています。来年の4月〜6月を目標に転職したいと相談するつもりですが、今のところ返信はありません。

    また先日N予備校に入会しwebデザイナーコースとHTML&CSSコースを履修。HTML&CSSコースから始めております。

    この先の予定は
    1. N予備校の2コースを完了する
    2. ドットインストールでJavaScriptの動画流し見してjQueryの感覚を掴む
    3. このページで紹介されている本を順番に買って全てやる
    4. ポートフォリオ作成
    というねこポンさん流のロードマップにほぼ従う形で考えております。

    ここで冒頭の質問に繋がるのですが、Udemyをなるべく使わずに済ませることはできますでしょうか?動画で学ぶのが少しストレスでして……😥

    あと何故かwordpressとサーバーとドメインを取得&導入して「wordpressレッスンブック」を買ってしまったのですが、どのタイミングで勉強すべきかいまいちわかりません😅
    自分でwordpressを使ってサイトを作ったり、テーマに追加CSS書き込んで弄ったり、他の人のWPサイトをWPで模写したりしてましたが今は手を止めています。

    この9ヶ月でだいぶまとまりのない勉強をしてしまっていましたので、一度しっかりと「半年後の転職」を目指して勉強を進めていきたいと思っております。
    お忙しい中恐縮ですが、この方針で転職可能かアドバイスいただければ幸いです。

    長文乱文共に失礼しました。

    (ちなみに求職者支援訓練並びに職業訓練は諦めました。大阪近辺じゃ3ヶ月コースしかありませんでした😂)

    むうあ

    • ねこポン より:

      むうあさん、おひさしぶりです!

      むうあさんが予定しているステップで、Webデザインの基礎スキルを習得する上では問題ないと思いますよ。Udemyがどうしても合わないなら、本でも大丈夫です。今は良質な本がいっぱいありますからね。

      重要なのは「自分でゼロからサイトを作る経験」です。具体的には「4. ポートフォリオ作成」ですね。本やドットインストールで知識を一通り身に着けたら、実際に自分のデザインでサイトをゼロから作る必要があります。それができてようやくWebデザイナーの入り口に立った状態です。かなり多くの方が勉強はできるのですが、この「自分で考えて作る」ということができなくて挫折します。

      なので、しっかりと学習を終えたら、どんどんポートフォリオの制作に取り掛かった方が良いです。ポートフォリオに掲載する作品を作る時にわからない箇所があれば、本やN予備校で振り返って確認するのがいいです。HTML/CSS、jQuery、Photoshop、Illustrator、XD…すべて実戦形式で用いることで本当の理解が得られます。

      WordPressについては、学習の最後でいいです。HTML/CSS、jQueryの基礎が理解できてからだとサクサク進められるはずです。

      書籍についてはSassやCSS設計の本は、時間が無ければサラッと読む程度で大丈夫です。

      >この方針で転職可能かアドバイスいただければ幸いです。
      これについては残念ながら回答できません笑。すべてはむうあさんのポートフォリオの質次第です。また今後のコロナの状況に左右されまし、就職活動をする地域にもよります。
      でも学習の内容は間違っていないので、しっかりと基礎スキルを習得し、ある程度質の高いポートフォリオができれば、十分に可能性はあります!学習の第一のゴールはポートフォリオ制作であることを忘れないでいてください。それが実現できて最終ゴールの「就職」が可能になります。

      来年の4月まで長いので、どうか集中力を切らさず楽しくデザインやコーディングに取り組んでほしいです。楽しみながらがんばっていきましょう!^^

      • むうあ より:

        ねこポンさん

        お久しぶりです、むうあです。
        長文にも関わらず読んでいただき、お返事もいただけてとっても嬉しいです!

        お陰様で迷いがなくなり自分のやるべきことに集中できます。
        休日くらいしかまともに勉強できないので効率良く進めたいですね。

        まずはN予備校を一周やります。その為にIllustrator、Photoshop、AdobeXDの3つを契約します。

        そこから紹介されている本を一冊ずつ買って取り組みます。
        平日や移動時間にSassとCSS設計の本を読みます。あとKindle
        Unlimitedで読める本も読んでいきます。

        その後ポートフォリオ作成ですね。
        正直ゼロからイチを作り出すのがホント苦手なので(RPGツクールとかTRPGのシナリオとか小説とか、全部挫折しましたww)大変そうな予感がヒシヒシとしています……!

        恐らくその段階に至った時にまたご相談させていただくかもしれません😅
        次はもっと具体的な質問ができるよう、そして良いポートフォリオが作れるよう頑張りますね。

        ワークポート様から「どの仕事も紹介できない」とお祈りメールが来て内心かなり凹んでいますが……挫けず頑張ります😞

        詳細なお返事をいただきありがとうございました!

        むうあ

  12. やね より:

    ねこポンさん

    こちらを拝見し、Webデザイナーを目指そうと思い、ドットインストール、Progate、Udemyを利用し勉強し始めました。
    今は無職で一旦実家に帰ってきているため、独学で勉強中ですが、戻ったらハローワークの求職者支援訓練を見て応募してみようと思っています。
    そこで勉強をしていて不安に思うことがあり、コメントさせていただきました。

    今、コーディングの勉強をしていますが、例えばfor (let i = 0・・・)・・・のときにforと(の間にスペースをあけること等、スペースをあけることが多いのに慣れなく(特に)と{の間が忘れがちです)、あーここでもスペースが必要なのかと頭が混乱しています。
    見やすくするためにあけているのはわかるのですが、これは繰り返していくうちに慣れて、無意識にできるようになるのでしょうか…?
    頭がパンクしており、慣れるのか不安になっています…

    また、Photoshop等を勉強するためにもノートパソコンを購入しようと考えています。
    記事を見てMac、Windowsどちらでもいいのはわかっているのですが、どちらを購入すればいいかアドバイスをいただきたいです…
    できるだけ金額は抑えたいと思っているのですが、大きな投資なので後からこれにしなければよかったと後悔したくなく、ある程度の期間使えるものを購入したいと思っています。Windowsだとフォント問題等もあるので、トータルの金額を考えるとどっちが安く済むのか、長く使えるか教えていただきたいです。WindowsだとマウスかLenovoかドスパラあたりのクリエイター向けのパソコンがいいのかなと調べて思ったのですが、MacでもWindowsでもカスタマイズしている人も多く、どうカスタマイズしたらいいのかもわからず、悩んでいます。
    長文になり、申し訳ございませんが、アドバイスをお願いします。

    • ねこポン より:

      やねさん、はじめまして!

      現在は独学で勉強されているんですね!求職者支援訓練、受かるといいですね^^

      JavaScriptの記述でスペースをどう空けるかが気になっているとのことですが、スペースはエディタが自動で空けてくれるから僕は全く気にしていません笑。
      VisualStudioCodeの場合、コードを記述してCommand+s(WindowsならCtrl+s)で保存をする際に自動で整形して適切にスペースを空けてくれます(もしかしたらJavaScript関連の整形するためのプラグインを入れたかもしれません)。なので、もちろん適切なスペースの空け方を知っておくのは大切かもしれませんが、無理して覚えることではないと思っていますよ。エディタにまかせてください。

      MacかWindowsのどちらにすべきか?という話については、金額を抑えたいのであれば、まずはWindowsを購入されるのが良いと思います。
      Macで快適なスペックを求めると最新の16インチのMacBookProで約30万円近くしちゃいますよね。最近は安価で高スペック?なMacBookAirも登場しましたが、正直まだどの程度Webサイト制作で活躍できるのか情報が足りません。
      なので、一旦は1〜3年ほど使える10〜15万円程度のWindowsマシンで十分だと思います。ヒラギノフォントは入ってないですが、まぁ…なんとかなります笑。そして2〜3年経ってからMacの購入を検討してもいいんじゃないでしょうか。
      もちろん最初から予算が潤沢にあるのなら、Macを買うのがベストだとは思います。

      Windowsにするとして、たしかに機種が多すぎて迷いますよね。。

      ★Webデザイナーに必要なパソコンの性能
      https://webdesigner-go.com/workstation/pc/

      もう読んでいただいたかもしれませんが、上のこの記事に掲載しているスペックなら何でもいいです。下記のスペックですね。

      CPU : インテル Core i5以上
      メモリ : 16GB
      ハードディスク : 500GB以上
      OS : Windows10 or Mac最新
      モニター : 20インチ以上、フルHD(1920×1080)
      グラフィックカード:無くても良し

      SSDならとりあえず256GB以上あればいいですね。

      なので、一番重要になるのが、自分で触ってみて気にいるかどうかです。タイピンクのしやすさや画面の見やすさなどを、家電量販店に行って実際に触れてみることをオススメします。以前は僕はLenovoのThinkPadを使っていますが赤ポチ(トラックポイント)はもう大好きでした笑。そんなふうになんとなく気にいるPCと出会えるはずです。マウスとかHPとかDellとかドスパラでOKです。あえてVAIOとかレッツノートとか高いのを買う必要は無いです。

      ご質問に回答しきれていなかったら追加でコメントをください。
      Webデザインの勉強、楽しみながらがんばっていきましょう!

      • やね より:

        ねこポンさん

        お忙しいところ返信いただき、ありがとうございます!!

        スペースについて、無理して覚えなくて良くてエディタに任せればいいとのことで安心しました!
        HTMLやCSSについても同様にエディタに任せれば大丈夫ですか?
        まだエディタを使ってコーディングはしていなく、Progateを行っているため、自分が書いたコードと解答がスペースで違うことが多い。ドットインストールの動画を見てもスムーズにスペースを空けているので、ここまでわたしはいつになったらできるんだ…と不安に駆られていました。
        プラグインというのもあるんですね!
        エディタを使うときに調べてみます!
        また、Progateの無料版はHTML、CSS、JS、jQuery以外のコースも行った方がいいと思いますか?
        4つのは行ったのですぐUdemy(ねこポンさんがおすすめしているもの)に行こうか迷っています。
        覚えるためにノートに書きながらやっているため、すごい時間がかかっています…

        またパソコンについても詳しく答えていただき、ありがとうございます!
        ヒラギノフォントは入っていなくても何とかなるんですか!?
        安いWindowsを購入してもヒラギノフォントとか買ったら結局そんなにMacと値段変わらないんじゃないかな?と思っていました。
        ちなみにですが、最新のMacBook Pro16インチの1番安い(248,800円)のを購入したとしたら何年程使えると思いますか?
        人によって使い方も違うのでお答えしづらいかもしれませんが、目安でいいので教えていただきたいです…
        その期間によってWindowsの10〜15万程度の1〜3年程より長く使えるのであれば投資だと思い、Macにしようかと思っています。
        ただ最新のM1チップのがWebデザイナーにとって良いとなってからMacを買った方がお得かもしれないので難しいですが…
        WindowsだとBPOパソコンが安いからいいかなと思っていたのですが、実物を見たり触ることができないのがネックなんですよね…
        高い買い物なのに…

        • ねこポン より:

          やねさん、こんにちは。

          >HTMLやCSSについても同様にエディタに任せれば大丈夫ですか?
          はい。スペースを空ける所さえちゃんと理解しているのなら、空ける作業はエディタにまかせてしまってOKです。

          >Progateの無料版はHTML、CSS、JS、jQuery以外のコースも行った方がいいと思いますか?
          以外のコースというのはPHPなどでしょうか。詳しくはわかりませんが、とりあえずその4つをやっておけばOKだと思いますよ。
          Progateを終えたら早めにUdemyに行ったほうがいいです。Udemyでサンプルサイトを作っていくことになると思います。「タグや文法を覚える」というProgateのような段階は早めに終えて、「サイトを作る」という段階に行ってください。サイトを作っていく時にわからないタグがあれば振り返って復習するのが効率的です。ノートに書きながらやってるんですね!しっかり勉強されてるんですね^^

          >ヒラギノフォントは入っていなくても何とかなるんですか!?
          学習の段階と会社に勤めている段階では、自分のPCにヒラギノが入ってなくてもあまり気になりません。学習ではヒラギノを使わなくてもいいし、会社のPCにはヒラギノが入っているからです。
          問題となるのは、フリーランスで活動し始めた時です。自分のPCでデザインを制作する際にヒラギノが無くて、游書体やメイリオを使うのは、使う理由が明確にあればいいですが無いのならヒラギノを標準的に用いるはずです。なので、現段階ではヒラギノは無くてもいいと思いますよ。

          >最新のMacBook Pro16インチの1番安い(248,800円)のを購入したとしたら何年程使えると思いますか?
          僕の持っている15インチのMacBookPro2017年モデルが現在でちょうど2年半くらい使っている状態です。わずかに動きがもっさりすることがありますが、あと2〜3年くらいは使えるような気はします。最新のMacBookProについてはわかりませんが、それを考えると5年くらいは使えるんじゃないでしょうか。
          M1チップが気になるところですよね〜。もう少し状況を見てもいいかもですね。

          >WindowsだとBPOパソコンが安いからいいかなと思っていたのですが、実物を見たり触ることができないのがネックなんですよね…
          それは悩みどころですね。。やっぱりお店で実物を見たほうがいいとは思います。

Webデザインのご質問やサイトの感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

  • なんでもWebの質問受け付け中 (^o^) /♪

  • おすすめのWebデザインスクール一覧

    授業料は無料?有料?通学式かオンラインなのか?など、金銭面や自分の生活スタイルに合わせてスクールを選びましょう!プログラミングを無料で学べるスクールも紹介!

    スクール名 料金 授業形式 ジャンル 就職支援

    求職者支援訓練
    ハロートレーニング
    無料
    (教材費のみ)
    通学
    (約6ヶ月/週4〜5日)
    Webデザイン ハローワークによるサポート
    プロによる総評

    一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。
    東京にはWebデザイナー系の訓練校は6校ほどあり、各地域にも1〜3校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。
    ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。


    失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました!
    スクール名 料金 授業形式 ジャンル 就職支援

    LIG
    有料
    (¥450,000 〜)
    通学
    (6ヶ月)
    Webデザイン 転職セミナーあり/LIGへの採用実績もあり
    プロによる総評

    金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    CodeCamp
    デザインマスターコース
    有料
    (¥148,000 〜)
    オンライン
    (2ヶ月〜)
    Webデザイン キャリア支援あり
    (就職エージェントの紹介)
    プロによる総評

    CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    TechAcademy
    Webデザインコース
    有料
    (¥139,000 〜)
    オンライン
    (4週間〜)
    Webデザイン 転職サービスあり
    (スカウト制度)
    プロによる総評

    4週間から短期で受講可能なオンラインのスクールです。週2回メンターにビデオチャットで質問ができ、毎日15時〜23時の間に不明点をチャットで質問可能。「Webデザインコース」がおすすめ。ある程度自習ができて最低限のメンターによるサポートが欲しい人におすすめのスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    プログラマカレッジ
    無料 通学 プログラミング あり
    プロによる総評

    『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    GEEK JOB
    無料 通学 プログラミング あり
    プロによる総評

    上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です!

    詳しくはこちら

    Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ