未経験ノンWebデザイナーの僕が独学でWebデザインを学んだおすすめ方法まとめ
未経験でもWebデザインは勉強できる
デザインと聞いてなにを想像するだろうか？「なんとなくかっこいい」「おしゃれ」一方で，「でも未経験の私はセンスが無いから無理だよ」「美大とか行かないと初心者は無理でしょう？」と思った人も少なくないのではないだろうか。その気持ちは痛いほどわかる。筆者もかつては憧れの気持ちを抱きつつも，どこか敬遠していたからだ。しかしこれからの時代を生き抜くためには未経験だろうが初心者だろうがデザイン能力は必要不可欠であることをこの場を借りてお伝えしたい。そしてこの記事ではまったく勉強をしたことがないデザイン未経験者の筆者が独学でWebデザインを勉強したおすすめの学習勉強法をお伝えできればと思う。
これからの時代，デザインは必須スキルになる
誰かに良さを伝えて行動してもらうためには，必ずデザインの力が必要になる。
本題に入る前に，少し読むスピードを落として，ゆっくりと考えてみて欲しい。世の中には沢山のいいヒトやモノやコトがあふれている。しかしそれを自分以外の誰かに伝えるためには，どうすれば良いだろうか？
パッと思いついたものだけでも，各のような方法が思い浮かぶ。
- 写真や文章や映像などを駆使して，Webサイトやパンフレットを利用作成する。
- パワーポイントや資料を作成してプレゼンする。
- イベントを開いて宣伝する。
じゃあどんなものを撮影する？レイアウトはどうして余白はどれくらい？色使いや文章の構図はどうしよう？そもそも誰にどんなものをどうやって提供するのが一番つたわるのだろうか。。。。これらの項目のすべてにわかりやすく伝えるためのデザインが必要であるということを何となく感じていただけるだろうか。
デザインは見た目だけではない！
デザインには機能的デザインと視覚的デザインの２種類がある
機能的デザインと視覚的デザイン
デザインというとキレイな見栄えを整えることだと思いがちだが，実はそれだけではない。デザインは大きく「機能的デザイン」と「視覚的デザイン」にわかれる。これらの解釈には諸説あるが，誤解を恐れず簡単に説明をするならば，機能的デザインとはコンテンツの前後の文脈をどうつなげれば読み手の心が整理され，目的となる行動を達成できるかを設計することである（ユーザーエクスペリエンスUXともいう）。例えばみなさんは新しいカメラを買いたいとする。そんな時は恐らくカメラに詳しい人に話を聞いたり，アマゾンなどの口コが掲載されているサイトを閲覧して実際に購入した人の採点や評価を見るのではないだろうか。このような納得するプロセスを経て購入ボタンをクリックするのである。これらの心理的プロセスを設計し，誰に何を何のためにどうやって届けるのか，を十分に考えてコンテンツを決めていくことが機能的デザインなのである。
一方，視覚的デザインは色の使い方やボタンの大きさ，フォントの種類や余白・文字の大きさなど比較的目で見てわかりやすい部分になる（ユーザーインターフェースUIなんて言ったりする）。最近主流となったフラットデザインや，スマホ対応のレスポンシブデザインなどはユーザーが使いやすく見てぱっと分かるような視覚的デザインが施されているのである。
次世代のビジネスパーソンにはデザインスキルが求められる
このように，良いモノやコトやヒトを誰かに伝えるためには２つのデザインを上手に設計して情報を伝わりやすく噛み砕いて伝える必要がある。もはやデザインは次世代のビジネスマンには必要不可欠な知識であると言えよう。「そんな難しいことできないよ！」と思う人もいるかもしれないが，心配する必要はまったくもってもない。大丈夫。なぜならばデザインには原理原則・基礎基本の決まりがあるのだ。独学で勉強する場合，まず最初の一手はその決まりを学ぶことからはじめよう。
０からデザインを学ぼう
デザイン未経験の初心者が学習をはじめるには，まずデザインの原理原則・基礎を体得することが先決だ。いきなり紙ベースのDTP（Desktop publishing）デザインをしたり，流行りでカッコいいからといってWebデザインを勉強するのもそれはそれでよい。しかしデザインの根幹となる原理原則をまず理解することが，最終的には独学で勉強する人にとって，一番効率がよく近道となるおすすめの勉強法であるということを実体験から確信を持ってお伝えしたい。（原理原則の土台を学んでいないとうまく技術が向上せずスランプに陥るので注意。）
デザインの原理原則を学ぶ
まずは基礎となるデザインの根本を学ぶための書籍やサイトをご紹介したい。
「ノンデザイナーズ・デザインブック」を読もう
まず未経験初心者がデザインを学ぶ上でバイブルともなるとても有名な書籍がこの「ノンデザイナーズ・デザインブック」である。
デザインを正式には学んだことがないけれども、デザインする必要がある人たちのために書かれています。おしゃれな包装紙や長文のパンフレット、ポストカードなどをデザインするような人たちだけでなく、上司からビジネス文書を作るように指示された部下、自分で広告を作っている広報関係者やショップオーナー、見栄えのよいレポ-トを作成したい学生やビジネスパーソン、聴衆を惹きつけるプレゼンテ-ションを制作したい人、などなど、「デザイン」「レイアウト」に何らかの関わりのあり、かつプロフェッショナルではない人のための本なのです。
とあるようにデザインの基礎を初心者の目線で非常にわかりやすく噛み砕いて記載してある。デザインのいろはを学ぶためには手元においておきたい一冊だ。
ノンデザイナーズ・デザインブック [フルカラー新装増補版]
posted with ヨメレバ
Robin Williams 毎日コミュニケーションズ 2008-11-19
「デザインの教室 手を動かして学ぶデザイントレーニング」で手を動かそう
こちらは実際に手を動かしてデザインを肌で感じる実践タイプの書籍だ。ノンデザイナーズ・デザインブックでデザインの原理原則を学んだらこのテキストでデザインとはなにか？を実感しながらスキルを身につけよう。使用ソフトはプロのデザイン業界で使われているAdobeIllustratorという描画ソフトだ。以下でも述べるが，大手資格教育会社のヒューマンアカデミーが運営しているAdobeストアではなんと年間５４６３０円するのAdobeのデザインソフト料金が４０％引きの３２０００円で購入できる。さらに，初心者むけの映像講座がたっぷりついているからまったくの未経験者でも安心だ。
その他にも「デザインのルール、レイアウトのセオリー。」や「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~」などは読んでいて目からウロコな情報が満載であった。
「伝わるデザイン」で感じよう
伝わるデザイン｜研究発表のユニバーサルデザインというサイトでは研究者の目線から難解な話題を読者にわかりやすく伝わるにはどうすればよいか？をとことん突き詰めた情報が載っている。サイトの色彩やレイアウトもやさしく読み進めるのにストレスを感じない設計になっており非常に勉強になる。また「伝わるデザインの基本」という書籍も出版されており，紙媒体で資料を作る際の参考にもなる。筆者はこの本を読んでから紙の資料を作る時の目線がガラッとかわり読者に以下に伝わるかを考えるようになった。
Adobeのデザインツールを学ぼう
デザイン業界の鉄板ツール「Adobe」
デザイン業界では，「デザインに使うソフトといえばAdobe」というほど有名な企業である。IllustratorやPhotoshopなど名前くらいは聞いたことがある人が多いと思うが，デザイン系の業界では空気を吸うように当たり前に使われているソフトだ。非常に洗練されたソフトウェアであり，プロ御用達の素晴らしいツールであるのは周りのデザインに詳しい友人に聞けばわかるだろう。しかし実際に使ってみるとどこをどう使っていいかわからない。（まずはAdobe公式ページから無料ダウンロードをして実際に使ってみるといい。）独学で勉強するのは正直ちょっと手を焼くのが敷居の高さを感じさせてしまうのかもしれない（実際に筆者がそうだったのだが）。難しい！といって投げ出してしまう人が少なくないAdobeツールだが，自分のペースでなるべく安く独学でデザインを勉強をしたい人にピッタリのサービスを見つけたので紹介したいと思う。
ヒューマンアカデミー運営「たのまな」
従来はソフトを利用するだけで年間５４０００円程度かかるところが，この「たのまな」はソフトの利用料金が４０％引きの３２０００円になるだけではなく，初心者のための非常に丁寧な映像授業を３ヶ月見放題というおトク特典が付いているのである（２０１６年２月現在）。
「どう使っていいかわからない」，「デザインツールに興味はあるが独学でやるのは不安」といった人には自信を持っておすすめしたい。何より普通にAdobeストアで買うよりも安く購入できるのだからそれだけでトクをしているし，映像学習を通じて基礎的なツールの使い方を体得できるのでお得だと感じている。最短でデザインを身に着けたい人は検討してみてはいかがだろうか。
Webデザインを効率よく無料で学習しよう
さて次にWebデザインを学ぶ上で役立つサイトを３つご紹介したい。無料で利用できるのでまずはドンドン試してみよう。
無料のWebデザイン学習サイト
ドットインストールは３分に細切れにされた映像をテンポよく学習していくスタイルだ。HTMLやCSSをまずは勉強し，PHPやJQeryなど必要に応じて受講するのが良いだろう。
ドットインストールの映像を一通り見たらProgateで実際に手を動かしながら勉強すると良いだろう。ヒントや正解を確認しながら実際に手を動かすというのはWebデザイナーやプログラマにとっては必須である。筆者もこの２つのサイトをメインにWebデザインの基礎知識を身につけた。
さらにSchooでは現役Webデザイナーやプログラマーの授業を映像で見ることが出来る。知識の吸収や現場でのノウハウを得るために活用してみるとよいだろう。<2016年2月27日追記>
さらに現役のデザイナー・エンジニアがマンツーマンで教えてくれるサービスを発見したので紹介しておく。
Webスク＆WebCamp
６ヶ月即戦力コースと１ヶ月短期集中コースの２つがある。６ヶ月コースのWebスクは満足度９４％のはいクリティサービス。ただ学習をするだけではなくアフターフォローや就職活動の面倒まで見てくれる。１ヶ月コースのWebCampは「一ヶ月で一生分。価値あるスキルを身に付ける。Webデザイン、プログラミングを最新鋭の学習形式で」をキャッチフレーズに懇切丁寧なWebデザイン＆プログラミングスキルをてにいれることができる。たった１ヶ月の投資で基礎を学ぶためには優秀なメンターと洗練されたカリキュラムが必要だがその両方がそろったサービスである。どちらもいまなら無料体験教室を開いているので参加してみるといいかもしれない。
良いデザインを真似しよう
さてここまでくると少しずつデザインの基礎がかたまり，Webデザインの知識もついてきたのではないだろうか。次のステップは良いデザインを真似して自分でデザインを作ってみることだ。Web業界ではとても有名なLIGのサイトで良いまとめがされているので見てみるといいだろう。良いデザインを真似して自分の血肉にするためのステップは以下のとおりだ。
- 良いテンプレートを見つける
- IllustratorやPhotoshopでデザインを真似してみる
- HTMLやCSSを少しいじって変えてみる
- パーツをコピペして自分オリジナルのものを作ってみる
できるようになるまでは時間はかかる。地道に１つずつステップを踏もう
デザインというものは奥深い。おそらく一生かかって体得するような味わい深いものであろう。HTMLやCSSなどのコーディングも最初はうまくいかない。あーだこーだ頭を抱えながらコードをいじっているときこそ成長しているのだと自分を励まして，ひとつずつステップを踏んでいって欲しい。未経験でも初心者でも，Webデザイナーになるには年齢は関係ない。ようはやるかやらないかなのだ。
ウェブデザイナーになるためのおすすめ勉強法まとめ
未経験から独学でWebデザインを勉強するステップをまとめると以下のとおりになる。
- デザインの原理原則を理解する
- Adobeのデザインツールを買って使ってみる
- 無料のWebデザイン学習サイトを見る
- 良いデザインを真似してみる
- 自分で試行錯誤しながらオリジナルを作ってみる
この記事を読んだ読者のみなさんが，Webデザインに関して少しでも親しみと希望を持っていただければ幸いである。余談ではあるが，Webデザインをみにつけると表現の幅が広がる。何か発信しようと思い立ったら自分でデザインをしてサイトを立ち上げればいい。そしてWebデザイン上達のおすすめの方法は自分の得意な，カメラや英語といった特技の分野を組み合わせて情報を発信していくサイトを作ることだ。学びながら試行錯誤しながら自分の好きなことを発信して反響があるとそれをまたモチベーションに勉強をするという循環が出来る。みなさんのデザインスキルをあげるためにも試してみてはいかがだろうか。
