デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。
今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。
いちおう自己紹介を簡単に
- 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）で、Webデザインには一切触れていない
- 昨年1年間はデザインから距離を置き、映像制作・写真撮影をしながら海外を放浪していた。
- 今年（2014）に入ってから、Webデザインの勉強（というよりWordPressの運営）をはじめ、7月〜は企業や飲食店の公式ページ、オウンドメディアのWebデザインの仕事を請けるようになった。
- 現在は個人でWebデザインの仕事・グラフィックデザインの仕事を請けつつ、Webサービスをちょこちょこと運営している。ちなみにだが、デザインとはあまり関係のない本職がある。
Webデザインを０からマスターする効率的なステップ
先にグラフィックデザインのスキルを身につける
vidvinkel magazine #1 | Flickr
ぼくはWebデザインの前に雑誌のグラフィックデザインから勉強し出したのだが、それは正解だったと思う。デザインの引き出しが広がるし、デザインの基本的なルールはWebでも紙面でも変わらない。Webデザイナーの中には意外にもレイアウトデザインを経験してる人が少ないため、グラフィックデザインを知っていると他と差別化したWebデザインのアイデアを考えやすい。Webより先にグラフィックを学ぶ必要はないかもしれないが、どこかで数ヶ月間でも学んでおくことをおすすめする。後々、必ず活きてくる。
1.グラフィックデザイン用ソフトをダウンロードする
- 世界中で最も使われているAdobeのIllustratorとPhotoshopの２つがおすすめ。
- イメージとしては「Illustrator⇒写真や文字の配置（レイアウト）」、「Photoshop⇒写真や画像の加工・合成」。
- Illustratorの方を優先して覚えると良い（デザインの基礎はレイアウトなので、Illustratorで学ぶことができる）。Photoshopは後々、写真を加工するときなどに。
- どちらも１ヶ月の体験版をAdobe公式ページからダウンロードできるのでまずはそちらを試してみると良いと思う。
- お金を節約したければ、こちらからかなり古いバージョンのAdobeソフトを一式ダウンロードできる（無料のID登録が必要）。本当に古く、新しいソフトと互換性がない可能性もあるので注意。
-
操作方法は、動画講座の「Learn Illustrator CS6 | Adobe TV」をひと通り見ておくと良い。
2.デザインの基本的な原則を覚える
これは始めにやっておいてよかった。いくつかの簡単な原則を守るだけで、デザインは劇的に洗練されて見える。そのルールはWebでも、雑誌の誌面でも、プレゼン資料でも変わらない。原則を学ぶには、王道だが「ノンデザイナーズ・デザインブック」がおすすめ。デザインの４つの原則が初心者でも分かりやすいようにまとめられており、これを守るように心がけるだけでデザインスキルは大幅に向上する。
3.フリーフォントをまとめてダウンロードする
レイアウト・デザインは「文字」・「写真」・「四角・丸などのオブジェクト」の集まりだと思ってよい。写真は良いものを持ってくるしかないが、文字は簡単にオシャレにできる。こちらからフリーフォント一覧を大量に見れるので、気に入ったものをまとめてダウンロードしておくと良い。使っていると、段々と自分の定番のフォントが決まってくる。
4.オリジナルの名刺やiPhoneケースを作ってみる
デザインの基本的なルールを覚えたら、実際に手を動かしてみながら試してみる。このときに基本的に使用するのはIllustrator。ただ、漫然と試すだけではモチベーションが上がらないと思うので、オリジナルのiPhoneケースや名刺なんかを作ってみることをおすすめする。自分のデザインが形になることは嬉しいし、デザインすることがずっと楽しく感じるようになるはず。ぼくの場合は60ページ超えのマガジンを作った。それだけでソフトの使い方はマスターしたし、デザインスキルも一気に上がったし、手元に届いたときの喜びは何にも勝るものだった。
※まずは良いデザインを徹底的に真似する
０からデザインの構図を考えるのには何ヶ月もかかる。自分のセンスに任せてデザインしていくより、クオリティの高いデザインを真似していったほうが上達はずっと早い。配置をパクリ、写真と文字だけ入れ替えるようなことから始め、段々と複数のパクリを組み合わせていく。細かく様々な構図・デザインを組み合わせて、真似していると分からないレベルで１つのデザインを作れるようになることをまず目指すと良い。
そのためには、洗練されたデザイン資料が必要だ。ぼくの場合はブックオフでデザイン関係の本を何十冊も買い込んだ。「ウェブデザイン＆レイアウトの見本帳」のような、いくつも雑誌等のデザイン例が載っているものが良い。自分のイメージしているデザインを実現している例を探しながら、実際に手を動かしていけば短期間でもデザインセンスは自然と身につく。
Webデザイン（プログラミング）を勉強する
1.ドットインストールでCSSとHTMLの講座をひと通り見る
今はインターネット上で無料でプログラミングを学べる素晴らしいサービスがいくつもある。いくつか試したが、「ドットインストール」が基礎の基礎から丁寧に教えてくれるし、シンプルで使いやすかった。１本の動画は３分程なので、進めやすい。このドットインストールのHTML、CSSの講座を実際に手を動かしながら見進めると良い。１日で見ることができるようなコンパクトな内容になっている。Webデザインに使うツールなどもここで確認できる。
2.本の通りにWebサイトをひとつ作ってみる
次は本を見ながら、本に載っている通りのコードを書き、Webサイトを作ってみる。ぼくは「HTML/XHTML&スタイルシートレッスンブック」を使ったのだが、はじめは一つ一つ理解しようとしながら、本のコードを自分のエディタにまるまる写していくだけだった。ただ、書き写しただけでも１つサイトを作ってみると、思った以上にWebデザインに関する理解は深まっていた。「はじめに知識を入れてからWebサイトを作り始めるか、実際に作りたいサイトを作りながら知識を入れていくか」の線引きは難しいが、大体この本の内容を理解できたら、後者に移って良いはずだ。
3.無料HTMLをいじってみる
ここで０から自分で実際に作りだしても良いが、ぼくの場合は世界中で無料で配布されているクオリティの高いHTMLテンプレートをダウンロードし、そのHTMLとCSSを自分好みにカスタマイズすることで自分のWebページを作った。「2」までのステップを終えていれば、コードを解読するのも難しくない。分からないコードについてはググって調べれば大抵見つかる。すでに出来上がっている綺麗なコードを編集することで、Webデザインの進め方も把握できるし、知識もつく。
Photoshop VIPというサイトで見てるだけでインスピレーションがもらえそうな質の良い「無料HTMLテンプレート集」が見つけられるので、そこから気に入ったHTMLテンプレートをダウンロードしてみると良い。
4. ようやく0から自分で作ってみる
ここまでのステップをやったら、０から自分のサイトを作るときもスムーズなはずだ。デザインの基礎・原則を押さえていれば、簡単なコードのWebサイトでもオシャレでカッコイイものが作れるはずだ。はじめは、最近流行りの、縦長で１枚ペラの「シングルページ完結型のWebデザイン」が作りやすいかもしれない。
参考にしたいWebサイトを探すときに
Webデザインも、慣れるまで０から自分でデザインを考えだすのは難しい。ヘッダー、サイドバーなど細かいパーツごとに他のサイトを参考にして作っていくのが良い。参考になるWebサイトを見つけるには、こちらの記事でまとめられたWebデザインギャラリーサイトを見ると良い。また、日常的に国内外の新しくて秀逸なWebデザインを多くインプットすることでアイデアも浮かびやすくなるはずだ。
ウェブデザインの構成を考える際に参考になるギャラリー・データベースサイト
自分でサイトを０から作るときに読んでおきたい記事
・プログラミング初心者必見！Chromeデベロッパーツール便利機能まとめ | Code部
⇒ぼくは始めGoogleChromeのこの機能を知らず、かなりの時間を無駄にしていた 。相当便利なので絶対に覚えておきたい。
・ついに完成！ファイルをアップロードしてWebサイトを公開！ | Webクリエイターボックス
⇒実際に作ったWebサイトを公開する手順について。
・高品質でしかも無料！海外のフリー写真素材サイトまとめ13選 | 株式会社LIG
⇒ページ内で使う写真素材を探すときに参考に 。
・WEBデザインの配色で迷ったときに役立つツールとその使用方法まとめ | 株式会社LIG
⇒配色で困ったときに。
・デザイナーなら知っておかないと損する50のツール | BLITZ
苦労してなんとか進めたら、後から「こんな便利なツールがあったのか」と後悔することがWebデザイナーには良くあると思う。ひと通りどんなツールがあるのか目を通しておきたい。
WordPressを中心に、Webデザイン全般について、とても丁寧に解説がされているブログ。始めたばかりの頃はこのサイトの記事を読みあさっていた。
ある程度Webデザインに慣れてきたらUI・UXについての本や記事を読んでみると良いかもしれない。個人的には「インタフェースデザインの心理学」が、ユーザーの行動を科学的に分析していてとても参考になった。
最後に
ぼくの短いWebデザイン経験から気づいたことを書いておく。
- 苦戦し、コードと格闘しているうちにWebデザインスキルが磨かれている。
- なんとかなる。「もうワケ分からない」と思うときがあっても、大体なんとかなる。
- スキルはやればやるほど上がっていく。楽しみながら、苦労しながら、経験を積んでいくことで、確実に前にステップアップしていける。