【オススメ本も紹介】独学でゼロからWEBデザインを学ぶ

そんな疑問をお持ちの方向けに、WEB「デザイン」の勉強法とオススメ本について解説していこうと思います。

独学でWEB「デザイン」を学ぶ！

デザインを学ぶのは難しい？

HTML/CSSを使ってのWEBサイトコーディングであれば、参考書籍やドットインストールなどの無料のオンライン動画学習サイトなど学ぶ手段はたくさんあります。しかし、WEBサイトの「デザイン」となると、あまり参考書籍もありませんし、ネットにもデザインを学べるようなサイトはあまりありません。

「独学でデザインは学びにくい」という事がその理由だと思います。

デザイン事務所だと、新人のデザイナーは「デザインを実際に作って、先輩やクライアントから修正指示を受けて、修正対応してまた提出して…」を繰り返すことで「デザイン力」がついていきます。

仕事の現場で「デザイン」と「修正」を繰り返し、第三者にデザインを評価され続けることで「デザイン力」がついていきます。

もちろん、「修正指示」を出す先輩、上司、クライアントは能力がある信頼できる人物であればベストです。

デザインは独学がとても難しい分野なので、デザインを一人でも学べるような書籍や動画学習サイトがあまりないのだと思います。

独学でデザインを学ぶ

「デザインは独学が難しい」とは言えWEBデザイナーになるためには、当たり前ですがある程度はデザインができなければいけません。

私は現在フリーランスとしてWEBサイト制作を請け負っています。以前はWEB制作会社2社でデザイナーとして働いていました。2社目ではコーディング業務は一切やらず、仕事はデザインとディレクションが中心で、立場的にはチーフデザイナー的な感じだったと思います。

なので立場上、入社してきたデザイナー志望の新人の教育係や、他のデザイナーのデザインチェックも業務として行っていました。

その時の経験などをもとに、デザインについてあまり知識や経験がない方やWEBデザイナーを目指している方向けに、WEBサイトの「デザイン」についての「独学での学習法」や「学習の際の注意点」に関して解説していこうと思います。

デザインを学ぶ

デザインの基本の「手法」を学ぶ

「デザイナーはセンスや感覚でデザインをしている」と思われがちです。

実際はそんなことは一切なく、かなり論理的にというか理詰めでデザインを作っています。

「WEBデザイン」はサイト訪問者に対して「商品、サービスなどをわかりやすく説明」したり「購買意欲を高める」などの特定の目的を達成するために制作されます。

なのでデザイナーは「どうすれば分かりやすく商品、サービスが伝わるか？」「どうすれば商品に興味をもってもらえるか？」などを意識しながらデザインを作らなければいけません。

デザインには様々な「手法」があります。

例えば、「情報を分かりやすく見せる方法」や「楽しく感じるようなレイアウト」逆に「真面目に見えるレイアウト」など様々なデザイン手法があります。

デザイナーはこのような「手法」を駆使して意図的に「楽しく感じるデザイン」や「分かりやすいレイアウト」を作っています。

優秀なデザイナーが作るデザインは、「モノとモノとの間隔（スペース）」「文字の大きさ」「モノの位置」など全て意図を持って決められています。

デザイン オススメ本

デザインの基本的な「手法」を学ぶのに最適だと思われる書籍をいくつかご紹介します。

写真や図表が中心なので、どれもサラッと読めてしまうと思います。

様々なタイプのレイアウトが学べます。レイアウトがユーザーにどのような印象を与えるかが理解できると思います。

デザインの様々な手法が分かりやすくまとめられています。「いいデザイン」と「悪いデザイン」が両方提示され、「何が悪い」「どこが悪いか」について解説されており、写真や図表も多くデザイン初心者にもとても読みやすい本です。

デザインは「余白＝何もない空間」をどう使うがポイントです。その「余白」に焦点を当てた本です。ちょっとマニアックに感じるかもしれませんが、内容はデザイン全般について書かれていて初心者にもわかりやすい内容となっています。

UI（ユーザーインターフェース）について詳しく解説されている本です。初心者にはちょっと難しく感じるかもしれませんが、ある程度デザインに慣れてきた後に読んでみることをオススメします。

WEBデザインはユーザーに使ってもらうことが目的なので、サイトの「わかりやすさ」「使いやすさ」はとても重要です。この本では、その「わかりやすさ、使いやすさとは？」について解説されており、UIについて深く考えるきっかけになると思います。

UIについての知識は、初心者には難しいかもしれませんがWEBデザイナーには必要不可欠な知識です。

Photoshopの使い方を学ぶ

デザインは基本的にAdobeのPhotoshopを使って制作します。なのでPhotoshopの操作をマスターすることはデザイナーにとって必須です。

Photoshopの学習に関していうと、初心者向けの書籍やUdemyのような動画学習サイトでも無料の講義などあり、学ぶ手段は多いと思います。

Photoshop初学者の方がやってしまいがちなのですが、「画像の加工合成やレタッチ」の学習は初心者のうちは手を出さないほうが良いでしょう。

例えば、「炎に包まれている文字」とか「写真をイラスト調にする」とか、そういった加工系のテクニックは後回しでいいです。

特に「WEBデザイナー」であれば、そうような画像加工系のテクニックはほぼ仕事で使いません。せいぜい、「写真の色味を調整するとか」、「写真の明暗を補正する」とかの処理がほとんどです。ゴリゴリに画像を加工するという事はほとんどありません。

もちろん、そういった画像加工系のテクニックを身に着けることは有意義ですし、おいおい自分の武器になると思います。ただ、そのあたりの技術の勉強は「Photoshopの基本」が身についた後、ある程度Photoshopでデザインを作る事に慣れた後のほうが良いでしょう。

まずは「自分のイメージするデザインをPhotoshopで作れるようになる事」を目標にすると良いと思います。

≫ 【Udemy】初心者向けPhotoshop基礎学【無料版】

Photoshopオススメ本

Photoshopの基本的な使い方が網羅されている入門書です。操作方法や機能の解説がメインとなっているので、Photoshopの説明書代わりに使うと良いでしょう。

学割でお得にAdobeCCを購入したいならデジハリのAdobeマスター講座がオススメです

そんな悩みを持っている方に向けて記事を書いていきます。 AdobeCCをお得に購入するならデジハリの「Adobeマスター講座」がオススメ 結論から先に書くと、Adobe Creative Cloud（ ...

続きを見る

WEBサイトのコーディングを学ぶ

いいデザインを作るためには、HTML/CSSの知識、サイトコーディングの知識は不可欠です。

WEBデザイナーは

「ブラウザの横幅を縮めた場合は、どうような見た目になるか？」
「スクロール時にヘッダーはどのように変化するのか？」
「そもそもこのデザインはコーディング可能なのか？」

など様々なことを考えながらデザインを作らなければなりません。

と言うか、コーディング後を意識しないで作られたデザインはコーディング時にだいたい破綻します。

WEBデザインを作るときには、コーディング後をイメージしながら、そもそもコーディング可能なのかを考えながらデザインを進めましょう。

HTML/CSS オススメ本

コーディングの流れが分かりやすく説明されている実践的な書籍だと思います。ただ、まったくのHTML/CSS初心者だとチョット難しいかもしれません。HTML/CSS初心者はドットインストールなどの動画学習サイトから始めてみることをオススメします。
詳しくは別の記事でHTML/CSSの学習の流れについて書いているので、そちらをご覧ください。

【超初心者向け】ゼロからのHTML/CSS勉強法【独学】

そんな人向けに記事を書きたいと思います。 私自身WEB制作に15年以上係わっており、その自分の経験と、友人知人のフロントエンドエンジニアの話を参考に、自分なりにたどり着いた効果的だと思うHTML/CS ...

続きを見る

WEBサイトをデザインする時意識すること

WEBサイトをデザインする時は以下の3つの事を意識しながらデザインすると良いでしょう。

1つ目の『デザインの基本の「手法」』とは、この記事の最初でも書いたような「デザインにおける基本的な技術、知識」のことを指しています。「文字のジャンプ率」や「レイアウトの見せ方」などある程度普遍的なデザイン手法のことです。

2つ目の『デザインの流行り』とは、そのままデザインの流行りのことです。

WEBデザインの世界でも「流行りすたり」があります。ちょっと前であればgoogleが提唱した「マテリアルデザイン」や「フラットデザイン」、最近であれば「ニューモーフィズム」などがデザインの流行りと言えるでしょう。

「フラットデザイン」のようなデザインの大枠の「流行り」もありますが、「写真の加工の仕方」や「文字の見せ方」、「デザインのあしらい」などの細かい部分にも「流行り」はあります。

多少なりとも「流行り」を意識してデザインしないと、場合によってはちょっと「古臭い」印象のサイトになってしまいます。

デザインリンク集などを活用して日々様々なサイトをチェックしておくと良いでしょう。

3つ目に意識すべき事柄として『取り扱う商品やサービス、クライアント』があります。

WEBデザインは当然扱う商品、サービス、クライアントごとのオーダーメイドになります。つまり取り扱う商品、サービス、クライアントに合わせて、デザインを作らなければなりません。

例えば、扱う商品が「家庭用洗剤」だった場合、使う色は「黒」や「茶色」などのダーク系の色はNGで、「白」などの明るめの色が良いでしょう。

使用するフォントも、商品の「柔らかさ」「家庭的」な空気感を表現するのであれば「細めで、すこし丸みがあるフォント」が良いかもしれません。また、洗剤の洗浄力をアピールしたいのであれば、「太めのゴシック系」のフォントもアリかもしれません。

クライアントのコーポレートカラーが「青」なら、その「青」色をベースカラーとしてデザインを作らなければならいかもしれません。逆に競合会社のコーポレートカラーが「緑」なら、「緑」は避けるべきでしょう。

こうのように商品、クライアントにあわせてデザインは調整していかなければなりません。「その商品、クライアントにとってベストなデザインは何か？」を意識しながらデザインを作るべきでしょう。

デザインを作る際には、上記の3つの事柄のバランスを考えながらデザインを作ると良いでしょう。

例えば、若い人向けのファッションブランドで「尖った」デザインが求められているのであれば、『デザインの基本の「手法」』からはみ出しつつ、『デザインの流行り』を強めに意識してもいいかもしれません。『デザインの基本の「手法」』から意図的に外れることで、目新しいデザインを目指してみるのもアリです。（とはいえ「こうすれば尖ったデザインに見える」的な手法もあるので、何をもって「尖った」デザインなのかという気もします…）

決して「自分の好み」や「やりたい事」を最優先してデザインを作ってはダメです。

あくまでもクライアントの目的の達成のため、例えば「商品の良さを伝える」とか「企業のブランドイメージを上げる」などの目的を達成するために最適なデザインを選択・制作する、という事を意識してデザインを作るべきでしょう。

デザインの自習・練習方法

いいデザインを見る→考える

様々なデザインを見るようにしましょう。

国内外問わず様々なデザインリンクがあるので、それらを利用して様々なデザインに触れてみましょう。

一点注意ですが、海外のサイトはあくまでも参考程度で見て、現実的にデザインの参考にするのは国内のサイトからにした方が良いでしょう。

どうしても海外サイトは英語で作成されているので、それだけで「カッコよく」見えてしまいます。それと、海外のサイトはユーザーインターフェイス（UI）をシンプルにする傾向があり、そのせいか日本のWEBサイトと比べると「ちょっと説明不足」に感じるところもあります。これは逆に言えば日本のWEBサイトが説明過多なのかもしれません。

海外サイトのデザインを、そのまま日本向けのサイトに移植するとイマイチな感じになりがちです。

サイトを見る時も、前に書いた『デザインの基本の「手法」』『デザインの流行り』『取り扱う商品やサービス/クライアント』を意識してみると、かなり勉強になると思います。そのデザインを作ったデザイナーが「何を考えながらデザインを作ったか」を意識しながらデザインを見てみましょう。

また、ヘッダー、フッター、見出し、ボタンなどのサイト内での共通パーツについてもよく見ておくと、自分のデザインの引き出しを増やすのに役立つでしょう。

WEBデザイン ギャラリーサイト19選【リンク集】

海外と日本国内のギャラリーサイトと、特定のデザインに特化したちょっと変わったギャラリーサイトをまとめてみました。 海外ギャラリーサイト FWA 老舗のギャラリーサイト。たまに見かけるサイトの端について ...

続きを見る

おすすめデザイン・クリエイティブ系の雑誌8誌

Web Designing リンク 隔月発行。電子書籍あり。WEBデザインについての専門誌。技術的な事以外にも、マーケティングなどビジネス系の記事も扱います。Amazonの一部電子書籍読み放題のサブス ...

続きを見る

デザインをトレースしてみる

「いいな」と思ったデザインがあれば、スクリーンショットを撮って、それを下地にしてPhotoshopを使ってデザインをトレースしてみると良いでしょう。

デザイントレースをする際はなるべく正確にトレースしましょう。フォントなど同じものがない場合でもなるべく近いものを探して使ったほうがいいでしょう。

「モノとモノの距離は何ピクセル開けているか？」、「フォントサイズはどれくらいか？」「見出しはどうやって使い分けているか」など細かく研究しましょう。そして、そのデザインを作ったデザイナーの意図を考え、なぜ自分がそのデザインを「いい」と思ったのかを考えながらトレースしていくと、デザイン力がついていくと思います。

まとめ

デザインはセンスや感覚でやっていると思われがちです。決してそのようなことはなく、理詰めでデザインを作っています。

デザインは他者に何かを伝えるための手段です。それは「難しい事を、簡単に伝える」ことだったり、言葉では伝えずらい楽しいとか、オシャレ、高級感などの「感覚的なモノ」を伝えたりイメージさせたりするための手段です。

あくまでもサイトを訪れてくれたユーザーのためにデザインは作られなければなりません。

デザイナーがデザインを作る際には、「サイト訪問者にはこのサイトがどう見えるのか？」を常に意識しながらデザインを作成するべきでしょう。

自分のデザインを客観的に見る癖を付けると良いでしょう。

とは言え初心者のうちは特にですが、なかなか自分のデザインを客観的に見ることは難しいと思います。

なので、なるべく作ったデザインは誰でもいいので他人に見てもらって感想を聞いてみる事もイイ勉強になると思います。

Web制作会社LIGが運営する「デジタルハリウッド STUDIO by LIG」のようなWEBデザインスクールなどを利用して、講師などに見てもらう方法もあります。

≫ デジタルハリウッド STUDIO by LIG

「デザイン力」をつけるために、何よりもたくさんデザインを作ってください。デザインを上手くなるためにはやはり「デザインした数」が大切です。別の言い方をすれば、様々なパターンのデザインを作る事で、「デザイン力」はついていきます。

この記事が読んでいただいた方にとって少しでも参考になれば幸いです。

【最短1ケ月】短期間で学べる!WEBデザイン系スクール7校比較【3ケ月以内】

TechAcademy 最短1か月 学習時間の目安 160時間の学習時間 4週間プラン / 40〜50時間（週）　→　5.7～7.1時間（日） 8週間プラン / 20〜25時間（週）　→　2.8時間～ ...

続きを見る

WEBデザイナーよくある転職方法5パターン メリット・デメリット

以前WEB制作会社で採用活動を担当していた経験や、自分自身の転職活動の経験も踏まえて、WEBデザイナーやフロントエンドエンジニアの就職、転職方法について解説したいと思います。 転職を希望する会社のWE ...

続きを見る

未経験からWEB制作会社への転職ロードマップ

そんな疑問にお答えします。 未経験からWEB制作会社へ転職する方法について解説します。 私の簡単なプロフィールを紹介します。現在フリーランスで主にWEB制作をしています。以前はトータルで12～13年ぐ ...

続きを見る

WEBデザイナーとグラフィックデザイナーの違いは？仕事内容、給与、将来性は？

そんな疑問にお答えします。 WEBデザイナーとグラフィックデザイナーの仕事内容と必要なスキル WEBデザイナーの仕事内容と必要なスキル WEBデザイナーの仕事は、主にWEBサイトの制作運営になります。 ...

続きを見る

未経験からいきなりフリーランスでWEBデザイナーは厳しい！それでもフリーになりたいなら…

未経験からフリーランスになって半年で月収100万円!? ネットを見ていると「未経験からフリーランスのWEBデザイナーになって、半年で月100万円稼げました」的な発言をたまに見かけますが、ハッキリ言って ...

続きを見る