0から独学でWEBデザインを学んで就職→フリーランスになった私の勉強方法

気になる人

  • Webデザインを独学で勉強したい 
  • 何から学べばいいのかわからない
  • どんな製品(ソフト)をどれぐらい使いこなせればいいのかわからない
  • 勉強はしてみたが、実際にアウトプットがあっているかわからない

Webデザインを独学で勉強したいけど、こんなお悩みを抱えていませんか?

ズバリ全く同じ悩みを持っている!と思った方、安心してください
この記事を読んでいただければ、その不安や疑問は解消されます。

なぜなら、私も同じ悩みを持っていた一人だったからです。

今でこそ、フリーランスで働いていますが、5年前全く同じ悩みを持ち、無駄なお金と時間ばかりを消費してきました。

Webデザイン 独学」と調べてみても必要なスキルは書いてあるが、どんな教材をどう進めればいいかは書いていない

どれぐらいできるようになればいいかわからないと思った方は多いのではないでしょうか?

今回は、そんな方々に向けて、実体験から辿り着いた最も効率的だなと思うデザインを独学で学んでいく方法を可能な限り具体的にご紹介していきます。

学ぶべきものとなぜ学ぶのかという理由、そして紹介したものを最も効率よく学ぶためのツールをご紹介いたします。

この記事に記載していることを忠実に行なっていただければ、3ヶ月の期間で一つのサイトを作成できるようになるはずです。

また、本記事でご紹介している独学の定義は、スクールなどに通わず有料・無料のサービスを駆使してかなり効率よく・そして低価格で学んでいく方法になります。

WEBデザイナーに必要なスキルと環境

WEBデザイナーに必要なスキルと環境

では、WEBデザイナーになるためには何のスキルが必要なのか?

答えは、以下のスキルを身につけてください。

  • HTML・CSS
  • IllustratorとPhotoshop
  • XD
  • デザインの理論
  • サービストレース
  • デザインパターンを増やす
  • 余力があれば以下を学習し価値を高める
    • サイト作成までに必要になるUXスキルやフレームワーク

会社によってWEBデザイナーに求められるスキルセットに幅はありますが、ご紹介しているスキルを身につけておけばWEBデザイナーとして必要なスキルセットは揃っています。

また、独学で学習を始める前に、以下のパソコンをお持ちの状態が理想的です。

もちろんPCさえあれば学習する上では問題ありません。

  • 画面サイズ15インチ以上(できればMac)推奨
  • メモリは16GB以上

デザインを行う上で、コーディングしたり、デザインツールを開いたりさまざまなソフトを利用していく上で、メモリの大きさが大きいほどより快適に作業をすすめることができるため16GB以上を推奨しています。

また、「メモリとは何か」など疑問に思った方は、まず「メモリ 16GB」「メモリ PC 確認方法」などご自分で調べてみましょう!

WEBデザイナーとして働いていく上で、こういった調査スキルも必要になってきます。

前提のご説明はこれぐらいにして、早速、具体的な独学での学習方法についてみていきましょう!

最も効率よく独学で学習する方法とツール

ここでは、WEBデザイナーのキャリアをスタートさせるためにご紹介したスキルを、最も効率よく習得するための方法となぜ必要なのか理由も一緒に学習推奨順でご紹介いたします。

HTML・CSSを独学で学ぶ方法

HTML・CSSはサイトを開いた時に、確認できる画面(見た目)を作るために必要なスキルになります。

最も効率的な方法は、ProgateというサービスのHTML&CSSというコースになります。

このコースを1週間以内に仕上げるように取り組んでください
短期間で学習を終えることが最も重要です。

こちらのサービスは、ある程度無料ですすめることができ、途中から有料(税込¥1,078/月)になります。

有料にはなりますが、個人的にHTML・CSSを学習していく上で最も効率的なサービスだと思います。

HTML・CSSの必要な習得レベル

HTML・CSSをどこまでできるようになれば良いかについては、ProgateHTML/CSSコースを一通りやった後に、道場レッスン上級編を、自分で調べながらある程度組めるようになるまでで大丈夫です。

0から何もみずに組めるようになることがもちろん理想ですが、そこまでのレベルは繰り返し書いていけば自然に身についていきます。

「調べながら、かける」というレベルまでで十分です。

HTML・CSS学習する理由

会社によっては、「見た目を作る作業」をエンジニアの方が対応するケースもありますが、ご自身でできることにより、単純にWEBデザイナーとしての価値を上げることにつながります。

また、HTML・CSSのスキルをつけることにより、デザインコンポーネントという概念の理解に非常に役立ち、デザインコンポーネントを理解しながらデザインを組めることで、デザイナーとしての価値がかなり上がります。

また、HTML・CSSの学習を進めるために一つのサイトを例に学習を進めていくため、WEBサイトをHTML/CSSで組むという目線で捉えるため、デザインのパターン学習にも役立ちます

モーリー

デザインをしていく上で自分自身がコーディングできることにより、エンジニアとのコミュニケーションにも役立ち、WEBデザイナーからディレクターなどスキルアップして年収アップにつながります。

IllustratorとPhotoshopを独学で学ぶ方法

IllustratorとPhotoshopは、バナー/DTP(印刷物のデザイン)やサイトのメインビジュアル(トップ画面)・アイコンなどを作る際に利用するAdobeが提供しているソフトになります。

月額制のサービスでそこまで安くはありませんが、アプリやWEBのデザインを後述で説明するXDというサービスで組んでいきます。

IllustratorとPhotoshop・XDはそれぞれ互換性にも優れているためさまざまな類似サービスはありますが、私個人としては、Adobeの利用を推奨します。

IllustratorとPhotoshopの契約に関して1点注意点があります。

単品の場合
  • Adobe Illustrator:2,728 円/月 (税込)
  • Adobe Photoshop:2,728 円/月 (税込)
  • Adobe XD:1,298 円/月 (税込)(後ほど説明)
  • 合計:6,754 円/月 (税込)

となるため、コンプリートプラン(6,248円/月 (税込))での契約がお買い得になります。

adobeは以下の画像をクリックしていただけるとサイトへ飛びます

IllustratorとPhotoshopの必要な習得レベル

IllustratorとPhotoshopはとても奥が深く、極めようと思うとキリがありません。

例えば 3Dのオブジェクトを作成したり、画像を合成したりと。

しかし、WEBデザイナーを目指している初期段階(就職までの道のり)でここまでのスキルは必要ありません。

必要なスキルは、

  • バナーを作成できる(IllustratorとPhotoshop)
  • 人物を切り抜ける(Photoshop)
  • アイコンを作成できる(Illustrator)

この3つのスキルを身につければ十分に戦っていくことができます。

モーリー

私はIllustratorとPhotoshopの技術習得にはかなりの時間を要してきました。
しかし、今定常業務で利用している技術は上の3つがほとんどです。
仮に、まだ使ったことない技術で何かを作成しなくてはいけなくても、都度調べればドキュメントなど出てくるため、技術として身についていなくてもIllustratorとPhotoshopを使って何かを作成できるというレベルになっていれば全く問題ありません

IllustratorとPhotoshopを学習できるサービス

IllustratorとPhotoshopの学習には、本などといったさまざまな方法があります。

私は一番初めは本での学習を進めてきましたが、かなりマニアックなことまで解説されているため、必要なスキルを学ぶために情報を選定することが出来ずに、時間ばかりを浪費した経験があるため本での学習は個人的にはおすすめしません。

Illustratorを学習する上で必要なスキルを習得するために、Illustratorの利用料を支払う以外にお金をかける必要は一切ありません。

Illustratorを使うために必要な知識・スキルは以下のサイト順に動画やドキュメントを行えば、大丈夫です。

  1. 図形の組み合わせで絵を描く
  2. アイコンの作成

Illustratorで最も重要なことは、オブジェクトの変形と合成です。

このポイントを抑えて学習を進めてください。

Photoshopの学習には、Udemyというサービスを利用することを推奨します。

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

上記サイトでPhotoshopの使い方を学んだら、こちらのYoutubeで人物の切り抜きをより綺麗に行える方法を学習しましょう。

ここまで学習を終えたら、IllustratorとPhotoshopの学習は一旦ここまでで大丈夫です!

モーリー

ツールとしてとても優れていて、できることが膨大にあるため極めようとしたらかなりの時間を要してしまいます。
サイト制作に必要なスキルセットはそこまで多くありません。
まずは、ツールの画面に対する抵抗感を無くすことが重要です。

続いては、WEBサイトのデザインを作成するために用いるXDについておすすめの学習方法をご紹介いたします。

XDを独学で学ぶ方法

XDとは、WEBサイトやモバイルアプリなどのUI/UXのデザイン・プロトタイプを高速で作成できるツールになります。

2017年ごろなどはphotoshopでWEB画面などのデザイン作成を行なっていましたが、今はXDやFigma/sketchなどでの作成が主流になっています。

就職先によっては、XDではなくFigmaといったツールで画面のデザイン作成を行う場合もありますが、どれか一つのツールがしっかり使えれば、他ツールの学習コストは低く使えるようになるので、この記事ではXDを独学で学んでいく方法に絞って解説していきます。

XDを独学で学習する方法は2点あります。

1点目は、XDに取り組む時点でIllustratorとPhotoshopをある程度扱えるようになっていれば、学習コストは比較的低く使えるようになります。

こちらの記事をステップごとにこなしてみてください。

上記で十分だと思いますが、もし他の学習ツールが必要な場合は以下もおすすめですが基本的に無料の学習で十分だと思います。

XDに関しては、こちらの記事のステップと、この後トレースという学習方法で滞りなく再現できるレベルになれば全く問題ありません。

XDは以下からダウンロード可能です。

単品の場合
  • Adobe Illustrator:2,728 円/月 (税込)
  • Adobe Photoshop:2,728 円/月 (税込)
  • Adobe XD:1,298 円/月 (税込)(後ほど説明)
  • 合計:6,754 円/月 (税込)

となるため、コンプリートプラン(6,248円/月 (税込))での契約がお買い得になります。

モーリー

XDはサイトのUIやプロトタイプを作成する上では非常に有効なツールになります。
操作方法も直感的なので、IllustratorとPhotoshopに対する抵抗感がなければ、XDはより簡単に使いこなせるようになるはずです。

デザインの理論

デザインをする上でさまざまな理論などがあります。

こちらもWEBデザイナーを目指していく上で必要になりますが、まずは、最低限のポイントである「4原則」「配置」「配色」だけは抑えましょう!

別記事でまとめているので参考にしてみてください。

視線誘導を意識するとデザインは劇的に変わる【プレゼンにも使える7つの方法】デザイン4原則を使った伝わるデザインの作り方【非デザイナー必見】余白を使ってデザイン力をあげる3つのポイント 【パワポにも使える】【色の意味解説!】デザインにおける色の意味と心理効果を解説!【配色の決め方①】配色理論と配色の種類を徹底解説!フォントの種類と特徴・意味【デザインに使える】

サービストレース

各種ツールの使い方を把握できたら、確実にツールの使い方をマスターするために、デザインの理論を意識しながらトレースしてみてください

  • アプリのTwitter
  • 好きなコーポレートサイトでPCサイズ
  • 同じコーポレートサイトでスマートフォンサイズ
  • LP(ランディングページ)

上記3種類のサイトをスクリーンショットして、トレースしてみてください。

そして最後のLPをトレースした後、HTMLとCSSで実装まで含めてやってみてください。

以下トレーズの手順

STEP.1
XDで一つのアートボードにスクショした画面を貼り付ける
アートボードにスクショ
STEP.2
もう一つの画面に再現していく
画面に再現
STEP.3
フォントの種類や隙間なども意識してください
STEP.4
アイコンもイラストレーターで再現しましょう
STEP.4
メインビジュアルがある場合はフリー素材を用いてphotoshopで再現

この手順を踏まえることでここまで学んできたスキルの総復習を行うことができます。

スキルとしては十分に戦えるレベルになっていると思います。

デザインパターンを増やす

デザインをもう一つ上のレベルに持っていくために、デザインパターンを増やしていきましょう。

WEBサイトなどに比べてデザインパターンが豊富で、ワンポイントのあしらいなどが多彩にあるので、あえてDTPのトレースを推奨しています。

デザインパターンを増やす具体的な方法

私が実際にトレースの際に、以下の書籍を使いました。

ただし、ここでお金を使いたくない方はPinterestなどのサービスを用いてトレースなどもできますのでそちらをご利用ください。

この書籍には、多数DTPの例がカテゴリ別に紹介されており、それぞれにワンポイントのあしらいが紹介されています。

そのあしらいを自分でIllustratorなどで作成しておけば、自分がバナーを作成するときなどに利用できたり、そもそもトレースを行えば、自分の中にデザインパターンとしてインプットすることができます。

最後は、余力があった場合にはトライしてください。

UXスキルやフレームワーク

UXデザインとは、ユーザー行動や体験をデザインするためのスキルになります。

3ヶ月という短いスパンの中ではどうしてもやりきれない部分でもあるため余力があればトライしてください。

より効率的かつユーザー目線のサイト作成に取り組むことができます。

ここでは、UXスキルやフレームワークに関して詳細に記載はいたしません。
ただ、私的に知っておいた方が良い概念・手法・フレームワークのみ抽出して紹介していきます。

  • UXの5段階モデル
  • デザイン思考
  • ペルソナ
  • カスタマージャーニーマップ
  • KJ法
  • リーンキャンバス
  • バリュープロポジションキャンバス

UXデザイナーという別キャリアが存在するほど、奥が深い領域のため他にも多くの概念・手法などあります。

上述している概念・手法・フレームワークについて学習したい方はこちらの記事が参考になると思います。

UXデザインも、かなり奥深く多くの知識が必要になります。

最後に

もし、本当にWEBデザイナーとしてのキャリアをスタートしたいと思っていてこの記事を読んでいたならご紹介している方法でぜひ勉強をしてみてください。

また、WEBデザイナーとしてキャリアをスタートさせ、仕事をしていけばWEBディレクターなどへの職種も視野に入ってきます。

WEBディレクターになれば当然年収も上がります。

どうすればWEBデザイナーになれるのか?スキルをつけることができるのか?

悩んでいた方達の助けにこの記事がなれば幸いです。

ぜひトライしてみてください!

補足

もし、コーポレートサイトなどWordpressで作成したいと言ったことがあれば以下の講座もおすすめです

参考 ちゃんと学ぶ、WordPress テーマ開発講座Udemy
Summary
0から独学でWEBデザインを学んで就職→フリーランスになった私の勉強方法
Article Name
0から独学でWEBデザインを学んで就職→フリーランスになった私の勉強方法
Description
独学でWEBデザインを学び、現在フリーランスになった私が実体験から最も効率的だと思う勉強方法と順番、そして技術習得レベルはどれぐらい必要かを徹底的に解説!