LITERALLY

知っておくと楽しい知識をまとめて紹介

1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】

DeskDesk | Flickr

デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。

今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの1年間に実行した8のステップ(デザインの勉強4+Webデザインの勉強4)をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。

いちおう自己紹介を簡単に
  • 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン(グラフィック・デザイン)で、Webデザインには一切触れていない
  • 昨年1年間はデザインから距離を置き、映像制作・写真撮影をしながら海外を放浪していた。
  • 今年(2014)に入ってから、Webデザインの勉強(というよりWordPressの運営)をはじめ、7月〜は企業や飲食店の公式ページ、オウンドメディアのWebデザインの仕事を請けるようになった。
  • 現在は個人でWebデザインの仕事・グラフィックデザインの仕事を請けつつ、Webサービスをちょこちょこと運営している。ちなみにだが、デザインとはあまり関係のない本職がある。 

 

それでは、Webデザインを0からマスターする効率的なステップを紹介していく。

先にグラフィックデザインのスキルを身につける

vidvinkel magazine #1
vidvinkel magazine #1 | Flickr 

ぼくはWebデザインの前に雑誌のグラフィックデザインから勉強し出したのだが、それは正解だったと思う。デザインの引き出しが広がるし、デザインの基本的なルールはWebでも紙面でも変わらない。Webデザイナーの中には意外にもレイアウトデザインを経験してる人が少ないため、グラフィックデザインを知っていると他と差別化したWebデザインのアイデアを考えやすい。Webより先にグラフィックを学ぶ必要はないかもしれないが、どこかで数ヶ月間でも学んでおくことをおすすめする。後々、必ず活きてくる。

 

1.グラフィックデザイン用ソフトをダウンロードする

  • 世界中で最も使われているAdobeのIllustratorPhotoshopの2つがおすすめ。
  • イメージとしては「Illustrator⇒写真や文字の配置(レイアウト)」、「Photoshop⇒写真や画像の加工・合成」。
  • どちらも1ヶ月の体験版をAdobe公式ページからダウンロードできるのでまずはそちらを試してみると良いと思う(もし購入する場合→Illustrator/Photoshop)。
  • Photoshopの操作方法はサルワカの「サルでも分かるPhotoshop講座」が1番分かりやすい。
  • Illustratorの操作方法は「Learn Illustrator CS6 | Adobe TV」をひと通り見るのが良い。
  • Photoshop・Illustratorの使い方を学ぶ段階で挫折してしまう人も多い。スムーズに操作方法を身につけたければ、WEBスクのようなサポートの手厚いデザインスクールに通うのがベストだ。
  • 決まった時間を確保するのが難しければオンラインブートキャンプ のようなオンラインプログラミングスクールで講師をつけて学ぶのが良い。

 

2.デザインの基本的な原則を覚える

これは始めにやっておいてよかった。いくつかの簡単な原則を守るだけで、デザインは劇的に洗練されて見える。そのルールはWebでも、雑誌の誌面でも、プレゼン資料でも変わらない。原則を学ぶには、王道だが「ノンデザイナーズ・デザインブック」がおすすめ。デザインの4つの原則が初心者でも分かりやすいようにまとめられており、これを守るように心がけるだけでデザインスキルは大幅に向上する。

 

3.フリーフォントをまとめてダウンロードする

レイアウト・デザインは「文字」・「写真」・「四角・丸などのオブジェクト」の集まりだと思ってよい。写真は良いものを持ってくるしかないが、文字は簡単にオシャレにできる。こちらからフリーフォント一覧を大量に見れるので、気に入ったものをまとめてダウンロードしておくと良い。使っていると、段々と自分の定番のフォントが決まってくる。

 

4.オリジナルの名刺やiPhoneケースを作ってみる

デザインの基本的なルールを覚えたら、実際に手を動かしてみながら試してみる。このときに基本的に使用するのはIllustrator。ただ、漫然と試すだけではモチベーションが上がらないと思うので、オリジナルのiPhoneケースや名刺なんかを作ってみることをおすすめする。自分のデザインが形になることは嬉しいし、デザインすることがずっと楽しく感じるようになるはず。ぼくの場合は60ページ超えのマガジンを作った。それだけでソフトの使い方はマスターしたし、デザインスキルも一気に上がったし、手元に届いたときの喜びは何にも勝るものだった。

 

※まずは良いデザインを徹底的に真似する

0からデザインの構図を考えるのには何ヶ月もかかる。自分のセンスに任せてデザインしていくより、クオリティの高いデザインを真似していったほうが上達はずっと早い。配置をパクリ、写真と文字だけ入れ替えるようなことから始め、段々と複数のパクリを組み合わせていく。細かく様々な構図・デザインを組み合わせて、真似していると分からないレベルで1つのデザインを作れるようになることをまず目指すと良い。

そのためには、洗練されたデザイン資料が必要だ。ぼくの場合はブックオフでデザイン関係の本を何十冊も買い込んだ。「ウェブデザイン&レイアウトの見本帳」のような、いくつも雑誌等のデザイン例が載っているものが良い。自分のイメージしているデザインを実現している例を探しながら、実際に手を動かしていけば短期間でもデザインセンスは自然と身につく。

 

Webデザイン(プログラミング)を勉強する

f:id:tsukuruiroiro:20151225035331j:plain

1.ドットインストールでCSSとHTMLの講座をひと通り見る

今はインターネット上で無料でプログラミングを学べる素晴らしいサービスがいくつもある。いくつか試したが、「ドットインストール」が基礎の基礎から丁寧に教えてくれるし、シンプルで使いやすかった。1本の動画は3分程なので、進めやすい。このドットインストールのHTML、CSSの講座を実際に手を動かしながら見進めると良い。1日で見ることができるようなコンパクトな内容になっている。Webデザインに使うツールなどもここで確認できる。

 

(参考)もし投資できるなら

ただし、ドットインストールでは分からない部分を誰かに聞くことができない。まわりにプログラミングができる人がいればよいのだが、そうでないなら不明点が積み重なり挫折しかねない。

分からない部分が多ければ、やはりデザインスクールを活用するのが効果的ではある。首都圏に住んでいるのであればWEBスクなどで直接講義を受けるのが良いだろう。決まった時間を取るのが大変だったり、首都圏外に住んでいるのであればマンツーマンフォローサービスのあるオンラインのブートキャンプ講座がおすすめだ。毎日19時〜23時に、待機している熟練のプログラマーにわからない部分をその都度チャットで聞くこともできるし、週2回まとめてビデオチャットで聞くこともできる。プログラミング学習において、わからない部分を気さくに聞ける相手がいるというのは非常に重要だ。

 

2.本の通りにWebサイトをひとつ作ってみる

次は本を見ながら、本に載っている通りのコードを書き、Webサイトを作ってみる。ぼくは「HTML5&CSS3デザインブック(新版)」を使ったのだが、はじめは一つ一つ理解しようとしながら、本のコードを自分のエディタにまるまる写していくだけだった。ただ、書き写しただけでも1つサイトを作ってみると、思った以上にWebデザインに関する理解は深まっていた。「はじめに知識を入れてからWebサイトを作り始めるか、実際に作りたいサイトを作りながら知識を入れていくか」の線引きは難しいが、大体この本の内容を理解できたら、後者に移って良いはずだ。

 

3.無料HTMLをいじってみる

ここで0から自分で実際に作りだしても良いが、ぼくの場合は世界中で無料で配布されているクオリティの高いHTMLテンプレートをダウンロードし、そのHTMLとCSSを自分好みにカスタマイズすることで自分のWebページを作った。「2」までのステップを終えていれば、コードを解読するのも難しくない。分からないコードについてはググって調べれば大抵見つかる。すでに出来上がっている綺麗なコードを編集することで、Webデザインの進め方も把握できるし、知識もつく。

Photoshop VIPというサイトでインスピレーションがもらえそうな質の高い「無料HTMLテンプレート集」が見つけられるので、そこから気に入ったHTMLテンプレートをダウンロードしてみると良い。

 

4.ようやく0から自分で作ってみる

ここまでのステップをやったら、0から自分のサイトを作るときもスムーズなはずだ。デザインの基礎・原則を押さえていれば、簡単なコードのWebサイトでもオシャレでカッコイイものが作れるはずだ。はじめは、最近流行りの、縦長で1枚ペラの「シングルページ完結型のWebデザイン」が作りやすいかもしれない。

 

デザインの参考にしたいWebサイトを探す方法

Webデザインも、慣れるまで0から自分でデザインを考えだすのは難しい。ヘッダー、サイドバーなど細かいパーツごとに他のサイトを参考にして作っていくのが良い。参考になるWebサイトを見つけるには、こちらの記事でまとめられたWebデザインギャラリーサイトを見ると良い。また、日常的に国内外の新しくて秀逸なWebデザインを多くインプットすることでアイデアも浮かびやすくなるはずだ。


 

自分でサイトを0から作るときに読んでおきたい記事

プログラミング初心者必見!Chromeデベロッパーツール便利機能まとめ | Code部

⇒ぼくは始めGoogleChromeのこの機能を知らず、かなりの時間を無駄にしていた 。相当便利なので絶対に覚えておきたい。

ついに完成!ファイルをアップロードしてWebサイトを公開! | Webクリエイターボックス

⇒実際に作ったWebサイトを公開する手順について。

デザイナーなら知っておかないと損する50のツール | BLITZ

苦労してなんとか進めたら、後から「こんな便利なツールがあったのか」と後悔することがWebデザイナーには良くあると思う。ひと通りどんなツールがあるのか目を通しておきたい。

ある程度Webデザインに慣れてきたらUI・UXについての本や記事を読んでみると良いかもしれない。個人的には「インタフェースデザインの心理学」が、ユーザーの行動を科学的に分析していてとても参考になった。

 

最後に

ぼくの短いWebデザイン経験から気づいたことを書いておく。

  • 苦戦し、コードと格闘しているうちにWebデザインスキルが磨かれている。
  • なんとかなる。「もうワケ分からない」と思うときがあっても、大体なんとかなる。
  • スキルはやればやるほど上がっていく。楽しみながら、苦労しながら、経験を積んでいくことで、確実に前にステップアップしていける。

 ↓続編はこちら

デザインに関するおすすめの本はこちら