独学でWebデザイナーになるために必要なこと

学習&転職法
Webデザイナーを目指したい人
Webデザイナーを目指したい人

未経験から独学でWebデザイナーになることは可能なのかな…。
独学でやるべきことを知りたい。

Webデザイナーになるために「独学で勉強は可能なのか?」という疑問にお答えします。

結論から申し上げますと独学でWebデザイナーになるのは、モチベーションの維持さえできれば可能です。
ですので「継続力には自信がある」という方でしたら、独学でも転職できます。

未知なことを学ぶというのは楽しいです。
しかし学びの途中では必ず「なんじゃコリャァァ」というわけのわからなさに見舞われることもしばしば。
その中で、挫折する可能性が高まるのも事実です。

そこでこの記事では、独学でWebデザイナーになるために必要なことを「モノ・スキル・マインド」の3つに分けてご紹介します。

「独学でWebデザイナーを目指したい」という方は、ぜひ参考にしてみてください!

スポンサーリンク

独学でWebデザイナーを目指すために必要な「モノ」

未経験からWebデザイナーになるためには、まず何よりも「学習する環境づくり」をしなければいけません。
パソコンはもちろんですが、デザインツールを使うためスペックはある程度気にした方が良いです。

ここではWebデザイナーの学習に必要なモノについて詳しく解説していきます。

パソコン

パソコンと言っても、Web制作では最高峰のスペックを持つパソコンは必要ありません。
しかし、各メーカーが出している安いエントリーモデルのパソコンでは作業効率が落ちてしまうのも事実です。

パソコンのスペックを表す指標として「CPU」「メモリ」「ストレージ」という言葉があります。
以下、ざっくりとした説明です。

  • CPU:パソコンの処理能力(基本の処理スピード)
  • メモリ:作業スペース(どれだけのソフトが同時に開けるか)
  • ストレージ:データの保存領域(どれだけPC内部に保存できるか)

これらを踏まえた上で、Web制作をするのに推奨のパソコンのスペックは以下の通りです。

Web制作に推奨のパソコンのスペック
  • CPU: Intel core i5 以上
  • メモリ:16GB 以上
  • ストレージ:256GB(SSD) 以上 または 500GB(HDD) 以上

Web制作の場合は特に「メモリ」のスペックが重要になります。

というのも実際にWeb制作をする場合、デザインツールはもちろん、ブラウザ、コーディングするエディタ、原稿資料など、複数のソフトを同時に立ち上げることが多いからです。
メモリ容量が少ないと簡単にパソコンがフリーズしてしまい、作業効率が格段に悪くなります。

ストレージはHDD(ハードディスクドライブ)よりもSSD(ソリッドステートドライブ)のほうが読み書きの処理が早いです。
しかしそれなりに値段も高いため、この辺りは予算との兼ね合いになるかと。

私が実際に購入したパソコン

私はWeb制作の勉強を始めた時に、以下のスペックのPCを購入しました。

私が実際に購入したパソコンスペック
  • 型番:Macbook Pro 13インチ Early2015
  • CPU: Intel core i5 2.7GHz
  • メモリ:16GB
  • ストレージ:512GB(SSD)

ちなみに中古品です。バッテリーとキーボードは新品に交換された製品をネットで購入しました。

購入当時で11万円ほど。実際のWeb制作での使用感は十分です。
予算があまりない方は、このように型落ち製品を中古で購入すると手もあります。

とは言ったものの、新品のマイPCを購入したほうがモチベーションアップに繋がると思います。笑

デザインソフト

制作現場のデザインソフトの定番としてAdobeのPhotoshopIllustratorXDがあります。
Photoshopは画像加工、Illustratorはロゴやデザイン、XDはWebデザインで主に使用するツールです。

全てを使用するにはAdobeの「Creative Cloudコンプリートプラン」を購入するのが一番お得です。
しかしAdobe製品は買い切り版がないため、定価だと毎月6,248円かかります(XDのみ、制限つきの無料プランあり)。

Creative Cloudの価格とメンバーシッププラン | Adobe Creative Cloud
Adobe Creative Cloudメンバーシップのプランと価格をご確認ください。すべてのデスクトップアプリケーションと、ストレージ、ファイル同期、共有の機能を利用できます。

これらのツールは必須ではありません。
Webのデザインだけなら無料版のXDでもできますし、写真補正くらいならデフォルトでパソコンに入っているソフトでも可能です。

しかし大体の制作会社では、Adobeのソフトを使用しているでしょう。
慣れておく意味も含めて、本格的に学習を始めた段階でコンプリートプランの契約をオススメします。

テキストエディタ

デザインから実際にWebサイトを作るときは、HTMLやCSSを書き込むエディタが必要です。
こちらは無料で高機能なエディタがたくさんあるので、あえて有料のものを使う必要はりません。

私はMicrosoftが提供している「Visual Studio Code」を使っています。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

Web業界は、Visual Studio Codeを使っている方が多いイメージ。
利用者が多いと、ネット上にも情報がたくさん載っているため何かと便利です。

独学でWebデザイナーを目指すために必要な「スキル」

次に独学でWebデザイナーになるためには実際どのような学習してけば良いのか、ステップ順に解説していきます。

①Progateをやる

Webサイトを作る際は「コーディング」という技術が必要になります。

Webデザインは「Web」ありきのため、まずWebサイトはどのように構築されるのかを学ぶことが重要です。

そのような意味も含めて「Progate」というオンライン学習ツールで、コーディングを学ぶことオススメします。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Progateは基礎的なHTMLとCSSを使って「Web制作におけるコーディングを体験する」ことができ、Webサイトを作るという掴みの部分が学べます。
無料でも各コースの最初のレッスンを受けることが可能なので、まずは軽い気持ちでやってみてください。

実際に私がProgateでどのくらい学習したのかを書いている記事もあるので、参考にしてみてくださいね、

②書籍で学ぶ

Progateである程度学習したら、次は実践的なWeb制作を学んでいきます。

Progateはあくまでも学習の序章。
Webデザイナーになるには、さらに具体的なWeb制作の知識・技術を学ばなければなりません。

次のステップとしては、書籍で学ぶことです。
本は「一冊読み切る(やり切る)」というゴールがわかりやすいため、学習における目標設定がしやすくなります。

Webデザインを学べる本

created by Rinker
¥1,980(2021/12/03 11:42:17時点 Amazon調べ-詳細)

「なるほどデザイン」はデザインの基本が網羅されている本です。
絵や図などを用いて、デザインを視覚的に学べることができます。

「Webデザイン良質見本帳」はWebデザインの基本や、目的別・シーン別のWebデザインを実際の見本を用いながら学ぶことができる本です。

「なるほどデザイン」はデザイン全般の話ですが、こちらはWebデザインのみにフォーカスしています。
Webサイトのデザインを考える際の参考書としても最適です。

HTML/CSSを学べる本

この本は、HTML/CSSを用いてWebサイトの基本的な作り方を網羅的に学習できます。

Webクリエイターボックス」という最新のWeb技術・業界情報などを紹介しているサイトの管理人、Manaさんが書いたWebサイト制作の学習書です。

本の後半では、実際に手を動かしながらサンプルサイトを構築していく技術を学ぶことができます。

JavaScript(jQuery)が学べる本

created by Rinker
¥2,800(2021/12/03 00:45:09時点 Amazon調べ-詳細)

JavaScript(jQuery)とはWebサイトに動きをつけるための言語です。

この本は「この動きをだすためにはどうしたらよいのか?」という実際Webサイトでよく使われる動きの付け方を網羅した本になっています。
載ってるコードをコピペするだけでも動きのあるサイトを作ることが可能です。

JavaScript(jQuery)に関して、初心者の方は「まずコピペで動きをつける」→「どのような仕組みで動いているのか」という流れで学ぶ方が、理解しやすいように感じます。

「逆引きリスト」のみはWebサイトにもあるため、私も良く参考にしています。

動くWebデザインアイデア帳 | 動くWebデザインアイディア帳

書籍版は動きの仕組みや基本の考え方、JavaScript(jQuery)についての解説なども含まれています。

WordPressが学べる本

WordPressとはWebサイトの投稿機能などを簡単にできるようにするものです。
HTML/CSSで作ったWebサイトに「PHP」という言語を組み合わせて作ります。

実際WordPressを扱わない案件もたくさんあるため、Webデザイナーを目指すために必須のスキルではありません。
しかし持ち合わせているスキルが多い分、転職の選択肢が広がるのも事実です。

WordPressを学ぶ場合は、上記の本をオススメしています。

基礎的な知識はもちろん、サンプルサイトを用いて実際のWebサイトをWordPress化していく手順を学ぶことができます。

私もWordPressを独学する際に使った書籍の一つです。

Illustrator・Photoshopが学べる本

Illustrator・Photoshopの操作が初めての方に向けた、基本的な操作を解説した本です。

IllustratorとPhotoshopは、できることがとてつもなく多いです。
それぞれに特化した本だと情報量が多すぎて、逆に混乱する可能性があります。
そのため、最低限必要な操作を網羅的に学べるこちらの本をオススメしています。

またAdobeのツールはどんどん機能がアップデートされていくため、新しめの本を買うようにしましょう。

制作現場によりますが、各ツールの用途は以下の通りです。

Illustrator → ロゴ、アイコン、バナー制作
Photoshop → 画像補正・加工、バナー制作

XDが学べる本

Adobe XDは、Webサイトのデザインを制作する際に使用するツールです。
こちらの本では基本的な操作に加え、サンプルサイトを用いた実際のデザイン作りを学ぶことができます。

XDは前述したIllustratorやPhotoshopと比べて、割と直感的に操作できるのが特徴です。
Adobeで無料版が使えるので、まず実際に触ってみるのも良いでしょう。

Adobe XDを無料で始める | Adobe XD
無限の創造性を引き出すオールインワン・プラットフォーム今すぐAdobe XDの7日間無料体験を始めましょう。

③ポートフォリオを作成する

「Webデザインの知識や技術を学ぶ」だけでは、Webデザイナーの転職はできません。

実際のWebデザイナーの転職活動では「ポートフォリオ」が必須です。

ポートフォリオとは「自分の知識や技術を証明できるもの」。
「こんなデザインやサイトを作ることができます」という実績を載せるために作る、自分のWebサイトです。

Progateや書籍で実Web制作の知識・技術を学んだら、実際にポートフォリオを作成しましょう。

具体的なポートフォリオの作成方法については別な記事で詳しく解説しています。
こちらを参考にしてみてください。

独学でWebデザイナーを目指すために必要な「マインド」

最後に独学でWebデザイナーを目指すために必要なマインドについてお話しします。

「え、マインド?」となった方もいるかもしれませんが、独学で勉強するというのはそれなりの「計画力・継続力・行動力」が必要です。

何を学ぶべきかの見極めをして、それをいつまでにどのくらいやるか計画を立て、継続し続けなければなりません。

そしてこの記事をご覧になってる方は、全く違う業種からWebデザイナーに転職しようとしてる方がほとんどではないでしょうか。
周りはWebデザイナーという職業も知らない人ばかり、中には「違う業界に転職??無理だよ。やめておきなよ」などと言われた方もいるかもしれません。

一度転職を経験した方ならわかるかもしれませんが、学生〜就職は頑張る仲間が他にいるのに比べて、転職活動は「完全に自分一人」なんですよね。

そんな中であなたは目標を決め、学習し続け、転職活動をする必要があります。

その覚悟を決めて、心を燃やし続けてください。

まとめ

以上が独学でWebデザイナーになるために必要なことです。

そして私自身、異業種未経験からWebデザイナーになりましたが「完全独学」ではやっていません。
はじめにProgateをやったあと、すぐにオンラインスクールを受講しました。

というのも、早く転職して実務をしたいという気持ちが強かったのもあり「何を、どれくらい、いつまでに」という指標が手っ取り早く欲しかったのです。

またスクールに通うと、講師やメンターがいて、躓いた箇所を教えてくれたり、悩みも相談できます。
「一人じゃない」という感覚になれるのも、モチベーションを高めるのには重要だなと感じました。

独学でもWebデザイナーにはなれます。
しかし、独学より、自己投資をしてスクールに通ったほうが効率が良いというのは断言できます。

そのような意味も含めて「Webデザインが学べるスクールも少し気になっている」という方は、ぜひ以下の記事も参考にしてみてください。

ここで紹介した独学方法は「私がいま独学でやるとしたらこの方法・書籍で学ぶ」という前提で書きました。
Webデザイナーとして働いている現在「実際の現場ではどんな知識・技術が必要か」ということも大体理解しているつもりです。

実際、勉強も、就職活動も、やり続ければ必ずWebデザイナーになれます。
転職する気があるのか。それをやるかやらないか、ただそれだけです。

きっとこの記事を見てる方は

「今の仕事がつらい・つまらない」
「Webデザイナーという職業はなんとなく楽しそう」
「ちょっと自分に向いてるかも」

そんな思いを抱いてるのではないでしょうか。
そして実際の私もそんな思いでWebデザイナーへの転職を選びました。

ぜひ、新たな一歩を踏み出してみてください!
Webの業界でお待ちしていますね。

つな

アラサーからWebデザイナーになりました。前職は医療従事者。都内に勤める道産子です。このブログでは私自身が未経験から転職した体験を元に、Webデザイナーを目指す方に役立つ記事、スキルアップに繋がる情報を主に発信しています(適当な日記もたまに)。
Twitter:@nkichiishi

つなをフォローする
学習&転職法
スポンサーリンク
つなをフォローする
Webデザイナーどうでしょう

コメント

タイトルとURLをコピーしました