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

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

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

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

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

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

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

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

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

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

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

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,078/月）になります。

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

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

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

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

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

HTML・CSS学習する理由

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

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

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

IllustratorとPhotoshopを独学で学ぶ方法

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

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

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

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

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

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

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

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

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

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

必要なスキルは、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

XDを独学で学ぶ方法

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

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

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

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

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

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

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

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

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

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

デザインの理論

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

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

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

視線誘導を意識するとデザインは劇的に変わる【プレゼンにも使える７つの方法】

デザイン４原則を使った伝わるデザインの作り方【非デザイナー必見】

余白を使ってデザイン力をあげる３つのポイント 【パワポにも使える】

【色の意味解説！】デザインにおける色の意味と心理効果を解説！

【配色の決め方①】配色理論と配色の種類を徹底解説！

フォントの種類と特徴・意味【デザインに使える】

サービストレース

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

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

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

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

以下トレーズの手順

STEP.1

XDで一つのアートボードにスクショした画面を貼り付ける

STEP.2

もう一つの画面に再現していく

STEP.3

フォントの種類や隙間なども意識してください

STEP.4

アイコンもイラストレーターで再現しましょう

STEP.4

メインビジュアルがある場合はフリー素材を用いてphotoshopで再現

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

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

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

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

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

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

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

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

あたらしい、あしらい。 あしらいに着目したデザインレイアウトの本 amazonで探す kindleで探す楽天市場で探す

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

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

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

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

補足

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

Summary

Article Name

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

Description

独学でWEBデザインを学び、現在フリーランスになった私が実体験から最も効率的だと思う勉強方法と順番、そして技術習得レベルはどれぐらい必要かを徹底的に解説！