こんにちは、さあやです！
今回は、完全未経験から半年間でWEBデザイナーになり制作会社で働いているわたしが、独学でどのようにWEBデザイナーになるための勉強をしたらよいかを徹底解説していきます。
「WEBデザイナーに興味があるけどなにから勉強したらいいか分からない！」
「スクールに行かないとWEBデザイナーになれないの？」
「時間とお金をかけるからには失敗したくない！」
今回の記事は、こんなお悩みをお持ちのあなたにぜひ読んでほしい内容です。
ちなみにわたしは「コーダー」ではなく「デザイナー」なので、今回はデザイナーを目指している方のお役にたてる内容になっています。（違いが気になる方はぜひ調べてみてくださいね。）
WEBデザイナーは特別な資格などは必要なく、デザインスキルがものをいう職業です。この記事を読んで、さっそく勉強を始めていきましょう！
目次
スクール選びに失敗し独学の道を選んだ経験からお伝えしたいこと
まず、スクールに入れば誰でもお仕事ができるようになる、と考えている方は一旦その考えは捨ててください。
実を言うと、わたしは自分の人生を変えるつもりで高いお金を払い、スクールに入りました。ですが、スクール選びに失敗し、お金と時間をかけたにも関わらず、お仕事をするために必要な知識を得ることができませんでした。
多くのスクールは基礎的なツールの使い方などは教えてくれますが、案件の進め方など実務に役立つような具体的なアドバイスはほとんどしてくれません。実際にお仕事をしてみて実力不足を実感するのです。
スクール選びに失敗し自分で学習方法を模索した経験から、スクールに行って基礎的なことを学ぶのに何十万円単位の高いお金をかけるよりも、独学で基本的なことを学び、信頼できるメンターを見つけて、あとは実務を通じてスキルアップを図るのが良いとわたしは考えています。
ただ、独学だとなにから勉強したらいいのか分からないですよね…。
実際に独学をしている方々とも交流がありますが、いらない知識を身に着けて余計に時間をかけてしまったり、いきなり難しいことに挑戦して挫折してしまったり、すごくもったいないなと感じています。
今回は、わたしが自分自身で実践してきて効果の高かった学習方法について、身につけたほうが良い順番でまとめていますので、こちらの流れにそってぜひ勉強を進めてみてください！
WEBデザインの勉強を始めるために準備するもの３つ
まずはWEBデザインの勉強に必要なものを紹介します。勉強を進めていくと「これもほしいなあ…」と思う場面はあるのですが、まずはこれだけあればすぐに勉強を始められます！
パソコン（10万円前後）
まずはパソコン。これはマストアイテムです。ただ、スペックがたくさんあるのでかなり迷ってしまいますよね…。これから準備するという方は下に記載したスペック以上のパソコンの購入をおすすめします！
CPU インテル Core i5以上
メモリ 16GB以上
ハードディスク 256GB以上
ちなみにわたしはMacBook Airを使っているのですが、デザインをするつもりなくパソコンを買ったので、メモリは8GBしかありません…。悲しい。
もちろん8GBでも仕事はできるのですが、Photoshopの重いデータを扱うときはかなり動作が遅くなってしまうので、これから買う方は16GB以上にすることをおすすめします。ただ予算との兼ね合いもあるのでくれぐれもご無理なさらず。
Mac・Windowsのどちらにするかという議論もありますが、わたしは完全に見た目で選びました（笑）iPhoneを使っているので写真やメモを共有しやすいという点も個人的には嬉しいポイントです。
デザインソフト（月 1,078 円〜6,248 円）
- Photoshop（必須）
- Illustrator（任意）
- AdobeXD（任意ですが無料プランがあるのでぜひ使ってみてください！）
料金の詳細は こちら
デザインをやっていくとなるとデザインソフトが必要になってきます。無料のデザインソフトもあるのですが、現場ではAdobe製品を使っていることが多いので、一通り使えるようになることをおすすめします。
ただ、Adobeソフトはかなり強気な価格設定をしているので最初はこの課金にかなりビビリます…。
単月契約もできますが、少し割高になるので気合を入れて勉強するのであれば年間契約がおすすめです。
無料体験期間があるのでまずは実際に使って試してみましょう。
すべて契約するつもりであればCreative Cloudコンプリートプランが割安です。また、一括払いにはなりますがこのサイトだと、Adobeで申し込むよりも安く契約できるので こちら も参考にしてみてくださいね。
テキストエディタ（無料）
デザイナーといえども、デザインをする上でHTML・CSSの基礎知識は必須なので、HTML・CSSを勉強するときにテキストエディタが必要になります。（なぜ知識が必要なのかはあとの章で詳しく解説していきますね。）
わたしもよく分からなかったので最初に色々調べたのですが、Visual Studio Code という無料のテキストエディタをおすすめしている方が多かったのでわたしはこれを使っています。
さっそくデザインの勉強から始めていきましょう！
デザイナーなのでデザインの基礎が最も大切です。ここがおろそかだとあとでつまずいてしまいますので。デザインの基礎からツールの使い方までみっちりと知識を詰め込んでいきましょう。
わたしは基本的に本、たまにyoutubeとGoogleで検索して学びました。本は一気にたくさん買うと負担になるので、近くの図書館にあるかまず調べてみるのがおすすめ。意外にデザイン関係の本もたくさんあるんですよ。
デザインの基礎
デザインの基礎は幅広いので一気にすべてを身につけるのは難しいですが、まずは定番のこの本たちを読んで、デザインの基本的なルールを知っておきましょう。100％活かすことはできなくても、知っているだけでデザインを見る目が変わります。
ノンデザイナーズ・デザインブック
デザイナーを目指すと必ず目にする定番の本です。ノンデザイナーという名前の通り、デザイナー以外の人が読んでデザインについて学ぶという本なので初学者にもわかりやすい内容です。外国語の本を翻訳したものなので若干の違和感はありますが、それを超越する情報の濃密さなのでぜひ読んでみてください。
なるほどデザイン
「ノンデザイナーズ・デザインブック」よりも写真やイラストが多いので、目で見て楽しみながらデザインのルールを学ぶことができます。ペラペラめくってるだけでも楽しい。絵だけで内容がないのかと思いきや、大切なことはぎゅっと詰まっているのでぜこちらもぜひ。
デザインツール
Photoshop
Photoshopは機能が多すぎるので、並の勉強時間ではすべての機能を使いこなすことはできません。
ですので、まずは本を一冊さっとやってみてPhotoshopでなにができるのかを軽く把握し、他の機能は必要になったときに検索をしながら覚えていくという戦略でいきましょう。
ただ、よく使うショートカットはここできっちりと覚える気持ちで。作業が数倍はやくなります。
わたしが学習に使用したのはこの本です。練習問題が各章にありますし、サンプル素材もダウンロードすることができるので、手を動かしながら使い方を学ぶことができます。説明もとてもわかりやすいです。
llustrator
IllustratorはPhotoshopほど実務での使用頻度が高くないので、やらなくてもいい派の方もいるかもしれませんが、個人的には基本的な操作はできたほうがいいと思います。実務でもたまーーーーに使うので。
わたしはPhotoshopと同じこのシリーズの本を使用しました。
AdobeXD
個人的な感覚ではありますが、XDは実務でもかなり使うことが多いです。
Photoshopを一通り使えるようになっていれば、基本操作は難しくありません。XDは無料プランもあるので、まずは恐れずに触ってみてください。
わたしはアキユキさんという方の動画で学びました。「基礎編」「応用編」の2本の動画を見ながら実際に手を動かしてみたのですが、2日ほどで基本的なことはできるようになりました。神動画。
実はデザインには決まりがいっぱい！トレースで感覚をつかむ
「トレース」とは既存のWEBサイトやバナーをPhotoshopなどのツールを使用して上からなぞって真似てみる練習方法のことです。かなり定番の練習方法ですが、正しく行わないと無意味になってしまうのでご注意を。
トレースをすることにより、ツールの使い方に慣れるだけではなく、デザインの規則を手を動かしながら学ぶことができるので初学者には特におすすめです。
まずはトレースする素材を探す
まずはこのようなギャラリーサイトからトレースするバナーやサイトを探しましょう。
基本的には好きなもので良いのですが、最初はあまり難しくない、シンプルなものを選ぶことをおすすめします。最初から難しいものをトレースすると出来なくて挫折してしまいがちなので。急がずゆっくりいきましょう。
HP・LPのまとめサイト SANKOU!
バナーのまとめサイト バナーデザインまとめ
デザインツールでトレースしていく
Photoshop・Illustrator・XDどれでもトレースはできますので、練習したいツールを使用していきましょう。
ここではバナー4枚、WEBサイト2つくらいを目安にトレースに挑戦してみてください。
トレースしたい素材をデザインツールに貼り付ける
こんな感じで、トレースしたいバナーやサイトを画像保存やスクリーンショットなど持ってきて、デザインツールのアートボードに貼り付けます。貼り付けた画像は透明度を下げるとトレースしやすいですよ。
全体のスクリーンショットは、Googleの拡張機能の Full Page Screen Capture を使ってとっています。
ガイド線を引いて各要素の配置がどうなっているか確認する
ガイド線を引くことにより、文字や写真はどのくらいの幅の中でおさまっているのか、ファーストビューの高さはどれくらいか、文字と文字の間はどのくらいの隙間が空いているのかなど、たくさんの規則が見えてきます。
最初はどんなルールがあるのかよく分からないですが、めげずに目を凝らしてデザインを眺めてみましょう。ちなみにわたしは気がついたことがあったら忘れないようにメモしています。
テキスト・写真・あしらいを上からのせていく
テキスト・写真・あしらいを上からのせていきましょう。その際は、何も考えずに淡々と素材をのせていくのではなく、下に書いたようなことを意識しながらトレースしてみてください。
- フォントの種類・サイズ・行間
- 色使い・色の割合
- 余白の大きさ
- 使われているあしらい
- 写真の大きさ
ここで気がついて学んだことは今後のデザインに必ず活きてくるのでいかに多く気がつけるかがポイントです。こちらもきちんと覚えておけるようにメモに残しておいてくださいね。
ついに集大成！オリジナルデザインを作ってみる
ここまで来たらあと少し。最後はいよいよオリジナルのデザインを作っていきます。
オリジナルのデザインが完成するとポートフォリオに載せる作品ができるので、営業活動や転職活動を進めていけるのです。胸を張って「わたしがこのデザインを作りました！」とアピールしていきましょう。
わたしはポートフォリオにはバナー4つ、LPを2つをオリジナルで作成して載せました。これは初期のポートフォリオに載せていた作品のひとつです。初々しい…。
どのようなお題でバナー・WEBサイトを作るか悩むところですが、基本的には何でも良いです。ただ、幅広いジャンルのデザインがあったほうがポートフォリオとしても充実するので、ぜひ挑戦してみてください。
進め方としては、自分の作りたい雰囲気のバナー・WEBサイトをトレースでも使用したギャラリーサイトからいくつか持ってきます。ジャンルが違ってもデザインの一部分を参考にしたいというものがあればそちらも。
それらを画像にして作業するアートボードの横に並べ、色の使い方・写真の選び方・あしらい・文字の大きさ・フォントなどなど、良い部分を参考にしつつ、オリジナルのデザインをアートボード上に作り上げていきます。
こんな感じです。参考にしたバナーは著作権の関係があるので一応ぼかしています。
最初は思うようにデザインが出来ずに頭を抱えることもあると思いますが、オリジナルデザインの作成はやればやるほど上達するとわたしは思っているので、諦めずに続けていきましょう！
ちなみにこのジムのバナーは試行錯誤を繰り返して6回くらい作り直ししました。完成させて終わりではなくその後もデザインを見直してアップデートすることでよりよいものを作ることができますよ。
実はWEBデザイナーにもコーディングの知識は必要！
実は、デザイナーであってもHTML・CSSの基礎的な知識は身につけておいたほうがいいです。
理由としては、デザインをするときにコーディングのルールがわかっていないとコーディングがしにくいデザインを作ってしまう可能性があることと、簡単なHTML・CSSは実務でも使用することがあるためです。
様々なお仕事を任せていただけるようになるにつれて、HTML・CSSの知識が求められる場面があることを実感しているので、デザインの勉強と並行して少しずつ勉強しておきましょう。
ちなみに、JavaScriptやWordPressの知識はすぐには必要にならないので、必要になったらその都度、勉強するのが良いです。
中見 コーディングを勉強するためのおすすめ教材
わたしがコーディングを学ぶ際にお世話になったサイトと本をご紹介します。
Progate
超定番のコーディング学習サイトの Progate です。わたしはHTML・CSSコースを2周だけ学習しました。月額1078円かかるのですが、1ヶ月もかからず2周できるのでそこまでお金はかかりません。
スラスラわかるHTML&CSSのきほん 第2版
架空のお店のWEBサイトをコーディングしながら進めていけるので、読み終わったときにはWEBサイトを作ったという達成感を感じられます。説明も分かりやすくコーディングが苦手でもなんとかついていけました。
【精神的に限界がくる？】独学でつまずきやすいポイント
基本的にWEBデザイナーになるための学習は独学でできると思っていますが、どうしても乗り越えなければいけないことがあります。それは孤独です。やーーー、独学って本当に孤独なんですよ。
自分が作ったデザインの良し悪しが分からない
トレースまでは順調に進むんですが、最終段階のオリジナルデザインを作成するところでつまずきます。
自分が作ったデザインを誰かに見てもらうことができないので、改善しようにも方法が分からないんですよね。ここで「あー、ひとりで頑張らないといけないのか」と急に不安になります。
そんなときは少しお金はかかってしまいますがメンターさんを見つけてみてもらうのが良いです。単発でも相談できますし、信頼できる方であれば継続してお願いすることもできます。ここはプロに頼りましょう。
MENTA
一緒に頑張れる仲間がいないのでモチベーションが保てない
最初はやる気があるのでひとりでも頑張れるのですが、何ヶ月も学習を続けているうちにモチベーションが下がってくるタイミングが必ずきます。勉強している意味すら分からなくなります。まさに迷走。
そんなときに励ましあえる仲間がいないのはかなり辛く、ひとりで思い悩んでそのまま挫折してしまうなんてこともありえるのです。せっかく頑張ってきたのに途中で辞めるのは辛すぎますよね…。
わたしは学習を始めると同時にTwitterのアカウントを作って、積極的に初心者WEBデザイナーの方と交流しました。仲良くなった方とはzoomでお話したりしてわいわいすることも。もちろん今も親交があります。
学習が進んでからはベテランの方とも交流することでさらに可能性が広がりました。このご縁がなければ今ごろWEBデザイナーを諦めていた可能性もあるのでゾッとします…。それくらい人とのつながりは大事なのです。
仲間を作るためにコミュニティに入るのもおすすめ。わたしもお世話になっているVICOMEは、制作会社の社長が立ち上げたWEBデザイナーのためのコミュニティです。
初心者からベテランまで所属していますので、幅広いつながりを作ることができます。定期的にイベントもあるので気になる方はぜひ来てみてくださいね。ぜひ一緒にお話ししましょう！
最後に
この記事では独学でどのようにWEBデザイナーになるための勉強をしたらよいかお伝えしてきました。
独学は「自分のペースで勉強を進められる」「コストを抑えられる」というメリットがありますが、様々な情報に惑わされて回り道をしてしまうというデメリットがあります。
良くも悪くも情報が溢れすぎている今の世の中…。
今回はわたしが実際に試してきて「効果的だった」「必要だった」勉強方法たちを、身につけたほうが良い順番でまとめていますので、何度も読んで、ぜひ学習に取り入れてみてくださいね。
読んでいる皆さんが素敵なWEBデザイナーになれるよう、応援しています！
