1.Webデザイナー、未経験からでも大丈夫？
「未経験からでもWebデザイナーになれますか？」と質問されることがあります。その答えはもちろん「YES」です。
しかし、何もしないでWebデザイナーになれるわけではありません。ツールの使い方や制作の流れを勉強して何かを作れるようにならなければ、会社で働いたり依頼を受けて仕事をすることはできません。
では、どうやってスキルを身に着けていけば良いのでしょうか？
chot.designでは以下のような流れで勉強することをおすすめしています。
- デザインの考え方を知る
- ツールの使い方を覚える・慣れる
- 小さい成果物を繰り返し作る
- 写経（デザイントレース）する
- 大きな成果物に挑戦する
2.デザインの考え方を知るのにおすすめのカリキュラムと本
chot.designではデザインの考え方を知るためのカリキュラムとして『はじめてのデザイン 〜デザインの基本・考え方〜』を用意しています。
デザインとはそもそも何なのか？そしてデザインの基礎的な知識、考え方などを体系的にまとめたものです。
またさらに詳しく勉強したいという方にはこちらの『ノンデザイナーズ・デザインブック』という本もオススメです。非常に人気な本で、何度も重版を重ねています。図解も多く、優しく丁寧に書かれた大変読みやすい本です。
3.どんなツールを使えばいい？Photoshop・Illustrator・Adobe XD、それぞれの勉強法と使い所
Webデザイナーとして要求される制作スキルは画像加工・アイコンやロゴなどの作成・サイト全体のレイアウトなどがあります。それぞれ作り方や使うツールが違いますので、それぞれの勉強方法と使い分けの仕方を解説します。
Photoshopで出来ること
Photoshopは写真加工や画像の加工、装飾を作ったりするのに使えるツールです。写真加工では、色を調整したり、撮影した人物の周りの背景を切り抜いたり、写り込んでしまったゴミを削除して修正したり、サイズをトリミング（切り抜き）したりします。また、画像と画像を組み合わせて新しい画像を生成したり、文字や図形を組み合わせることでボタンや装飾などを作ることもできます。
PhotoshopだけでWebページ全体をまるごとデザインしてしまうことも多いです。ただし、もともとWebに特化したデザインツールではないので、現場ではPhotoshopで画像加工・装飾の作成などをしつつ、Adobe XDを使ってサイト全体のデザインを作ることも増えてきました。
chot.designではPhotoshopの使い方が勉強できます。
Illustratorで出来ること
Illustratorはその名の通りイラストづくりのためのツールです。Web制作においてはロゴタイプやロゴシンボル（マークのようなもの）を作ったり、アイコンを作ったりするのに使われます。
IllustratorだけでもWebページのデザインをすることはできますが、Photoshopに比べるとそのような使い方をしている人は少ない印象です。これはもともとPhotoshopを使っている人のほうが多かったり、もともとの機能としても使い勝手がよかったからかもしれません。
chot.designではIllustratorの使い方が勉強できます。
Adobe XDで出来ること
Adobe XDはPhotoshopやIllustratorに比べると歴史の短いツールで、スマホのアプリやWebデザインに特化した機能が備わったデザインツールです。画像加工やイラストを描くことはできませんが、レスポンシブデザイン（スマホやPCなど画面幅が違っても整った形で見せる手法）に対応していたり、ページの切り替わりを再現（プロトタイプ）することができます。Photoshop・Illustratorとの連携機能も充実していて、今後ますます現場での活用シーンが増えていくと考えられます。
chot.designではAdobe XDの使い方が勉強できます。
4.ツールの使い方を覚えたら…小さいものを作ってみよう
PhotoshopやIllustratorの使い方を覚えたら、実際に小さいものを作って操作に慣れていきましょう。
例えばIllustratorを使ったアイコンは手軽に練習ができますので、ぜひチャレンジしてみてください。
また無料の写真素材サイトから探してきた写真で加工の練習をしてみましょう。以下のサイトでは無料で使える写真が大量に入手できます。
ぱくたそ（無料の写真素材がたくさん配布されているサイトです） >>
アイコンの作成や画像加工に慣れてきたら、広告用のバナーを作ってみましょう。以下のサイトには様々なバナーのサンプルが載っています。真似していくつか作ってみましょう。
バナーデザインまとめ。（たくさんのバナーがまとめられているサイトです） >>
またこれらの作業をするときに、作業時間を残しておくと良いでしょう。ツールの使い方が体に身に付いてくると、だんだん作業時間が短縮できるようになってくるはずです。作業時間があまり変わらない場合は、それぞれのツールのショートカットキーを覚えたり、以下の本を参考に勉強すると良いかもしれません。
5.写経（デザイントレース）で力を付けよう
小さいものがスムーズに作れるようになってきたら、今度はページ単位でデザインを作ってみましょう。しかし最初から全て考えて作るのはとても難しいものです。そこでおすすめしたいのが写経のように出来上がったデザインを真似しながら作る「デザイントレース」です。
デザイントレースは、見本のページ通りに完全コピーを目指してページを作成する作業です。良いデザインの真似をすることで、作られたデザインの意図を汲み取ったり、レイアウトや装飾の引き出しを増やしていくことができます。
まずは「良いデザイン」をたくさん見ましょう。良いデザインをまとめているサイトがあるので、ぜひそれらを見てみてください。
イケサイ
いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを勝手にピックアップして掲載しているサイトです
muuuuu.org
クオリティが高い縦に長いサイトを厳選して集めているサイトです。
Responsive Web Design JP
国内の優れたレスポンシブウェブデザインのサイトを集めているサイトです。
真似してみたいサイトが見つかったら、作業をしてみましょう。いくつかトレースをしてみると、作業がスムーズになっていくでしょう。さらに、自分の知識として足りない部分が出てくると思いますので、ツールの使い方のカリキュラムを見直したりしてみましょう。
6.そしていよいよ、大きな成果物に挑戦する…！
デザイントレースに慣れてきたら、いよいよオリジナルのサイトづくりにチャレンジしてみましょう。
最初は1ページで完結するような縦長のLP（ランディングページ）のようなものが良いでしょう。徐々に慣れてきたら会社のホームページ（コーポレートサイト）のような5〜10ページほどのサイトにチャレンジしましょう。
ランディングページの見本はこちらのサイトを見ると良いでしょう。
ランディングページ集めました。
コーポレートサイトについては、ワイヤーフレーム（サイト全体の構成や各ページの要素を表した下書きのようなもの）を用意しましたので、こちらをぜひ参考に作ってみてください。
よくあるコーポレートサイトのワイヤーフレームを無料で配布します
サイトが一通り出来上がったら、身近なデザイナーの知人にレビューしてもらいましょう。自分の目線だけではなく、人からもらったフィードバックに対応していくのも、デザイナーとしての大事なスキルになります。
さて、一通りWebデザイナーになるための勉強法を解説しました。『習うより慣れろ』という言葉もあります。Webデザイナーになるのに銀の弾丸はありません。手を動かしながら、毎日ちょっとずつ練習を積み重ねることが、いちばん大事なことです。
