
【Webデザイン独学】学習や実践で使えるデザイン本を現役デザイナーが紹介
こんにちは!ちゃんあいです。
独学からスタートしてフリーランスのWebデザイナーになったわたしが、実際に読んで役立った(いまでも活用している)デザイン本を紹介していきます。
オススメ本と実際の活用方法をセットで紹介しますので、これを読んでご自身の状況に合う本を探してみてください^^
紹介方法はレベル別で、レベル1(初心者)〜レベル5(実務経験者)の流れで紹介していきます!
本のリンクは各文中と、最後の「まとめ」でまとめて紹介しますのでそちらを参考にしてください。
■レベル1:これからデザイン学習を始める人

まずは「これからデザイン学習を始める人」へオススメの本を紹介します。
デザインに興味はあるけど、デザインの知識がほとんどなく何から手をつけたらいいか分からない・・・という方向けです。
初めてデザインを学ぶ人が最初に身につけるべきことは下記の3つ。
● デザインの基礎知識
● デザインツールの使い方
● デザイン思考
上記それぞれの学習に合う書籍を紹介していきます。
●デザインの基礎知識

デザインの基礎を知る上で絶対に欠かせないのが「デザインの4原則」と呼ばれるもの。
4原則とは【近接・反復・整列・コントラスト】のことで、この4つはデザイナーなら誰もが知っておくべき鉄板ルール!
世の中のデザインは、全てこの4原則から成り立っていると言われています。極端な話、この4原則を知っているか知らないかで、デザイナーかどうかが決まると言っても過言ではないです。
そんな4原則について詳しく解説されているのがこの『ノンデザイナーズ・デザインブック』。外国書籍の日本語翻訳版なので、内容は若干読みづらいく、サイズも結構大きめ(幕の内弁当くらいw)なので、最初は抵抗があるかもしれません。
が、デザイナーの必読書レベルの内容なので、気合を入れてすべて読んでください!笑
<活用方法>
4原則のルールが章ごとに紹介されていて、各章の最後に実際に手を動かすパートがあります。そこで紙とペンを用意して、実際に手で書きながら理解していくのがオススメです。文章を読むだけで理解できなくても、手を動かすことで感覚的に理解できると思います。
▼続いてデザインの基礎知識を身につける上でオススメの本はこちら
『なるほどデザイン』

最初に紹介した『ノンデザイナーズデザインブック』よりもさらに幅広く、デザイン全般の基礎知識が紹介されています。
『ノンデザイナーズデザインブック』は4原則ですが、こちらはデザインの作り方や、色の知識、フォントの知識など、デザインを構成する要素について網羅されています。イラストや写真付きなので、初めての人でも親しみやすく、楽しく学べる書籍です。
<活用方法>
まずは一通り本に目を通しましょう。
情報量が多いので、一度にすべて理解することは諦めて「デザインを作るときってこういう知識が必要なんだな〜」とざっくりわかれば大丈夫です!
その後は、実際に手を動かして作品を作りながら、手が止まったときに『なるほどデザイン』を参考書として「これってなんだったっけ?」という時に開いて確認する、という使い方をオススメします。
●デザインツールの使い方
続いては、デザインツールを使う際のオススメについて紹介します。
まずデザインツールって?という方のために、代表的なデザインツールをご紹介します。
主に使われているのは以下の4つ。
・Photoshop
・illustrator
・Adobe XD
・Figma
最近では「Canva」というデザインツールを使用する人も増えていますが、デザイン業界でCanvaはあまり使われていない印象です。
上記のようにデザインツールは多くあるし、どれも覚えるのが最初は大変です。
冒頭で「オススメ書籍を紹介します」と書きましたが、すみません・・・!
個人的には、デザインツールの使い方を覚えるために本を買うのはオススメしません!w
なぜなら、本でツールの学習をするのは分かりづらく、機能が頻繁に変わるため、本の情報がすぐに古くなってしまうからです。
なので、デザインツールの使い方を学ぶには「動画教材」がオススメです!
いまはYouTubeやAdobe公式サイト、Udemyなど、無料から有料まで学習教材が溢れています。
なので、自分の目的に合った動画を見ながら学習を進めていきましょう。
ちなみに初めてデザインツールを使うなら、まずは無料で使える「Figma」がオススメ。
デザイン業界ではPhotoshopやIllustratorなどがメジャーですが、有料だし操作が難しいため、最初のステップとしては操作が比較的簡単な「Figma」が良いです!(ちなみにわたしは実務でバリバリ使っています!)
補足・・・
書籍はオススメしない派ですが、それでも書籍を持っておきたい!という方のためにFigmaの使い方を紹介している書籍が最近(2023年7月)出版されたので、ご紹介します。
この書籍はFigmaを使ってバリバリお仕事をされているデザイナーさんが執筆されていて、初心者にもわかるように紹介されています。
▼私は購入していないので、リンクを貼るだけで失礼します🙇♀️

●デザイン思考
今まで紹介した「デザインの基礎知識」と「ツールの使い方」を学んでさっそく実践に入る人も多いですが、、それだけだとすぐに躓きます。(実際にわたしがそうでした)
そこで知っておくべきなのが「デザイン思考」。
デザイナーは普段どういう思考でデザインを作っているのか、デザインの知識を集めているのか、という部分を学ぶことでよりプロのデザイナーに近づくことができます。
▼そこでオススメの本がこちら。

わたしが実務に入ってから出版された本ですが、正直「もっと早く出会いたかった…!」と思うほど参考になりました。よくあるデザイン本とは違って「ほぼ文字だけ」というのがこちらの本の特徴です。
内容はデザインの基礎知識(4原則や色、フォントなど)にも触れられていますが、デザインの考え方(街で見かけたデザインをどう捉えるか)だったり、デザインスキルの磨き方(デザイン日記やデッサン)など、プロのデザイナーさんが実際に行っている方法を丁寧に紹介してくれています。
<活用方法>
この本の中には、すぐに実践で使えそうなことが多く書かれているので、一章読むごとに実際に手を動かしてみましょう!
例えば書籍内で紹介されている「街中のデザインを観察すること」(書籍内では「コンセプト探しゲーム」)はいますぐ始められる学習方法です。
具体的には、電車の広告やビルの看板、デパートのポスターなどのデザインを「どんなコンセプトで作られたか?誰に向けたものか?なぜこの色なのか?」と自分なりに考えてみる方法です。
答えが合っているかどうかは関係なく、デザインについて考えることで実践の際の引き出しがどんどん増えていきます。

■レベル2:初めてデザインを制作する人

続いては、基礎知識を身につけたあと、実際に手を動かしてデザインを制作する際にオススメの本を紹介していきます!
『デザインのドリル』

『デザインのドリル』は見本デザインを見ながら、同じようにデザインを作る練習ができる本。これを専門用語で「トレース」と言います。(トレースとは見本のデザインをなぞって同じように作ること。)
トレースは初めて手を動かすなら必ずやっておくべきもので、わたし自身も初期の頃に30枚ほどトレースをしました。
『デザインのドリル』では、トレースするためのお手本デザインと、トレースに必要な素材(フォントや装飾など)が用意されているので、初心者の方でも迷わずに学習できます。またデザインについてのポイント解説もあるので、トレースしながらデザインの作り方を理解できます。
ちなみに、ツールの使い方を紹介しているサイトもあるため、悩む時間も減らせて効率的です。
<活用方法>
お題に応じたデザイン見本があるので、それを参考にトレースしていきましょう。トレースする際に必ず意識してほしいことは「余白」や「文字の置き方」「あしらいの選び方」などです。なぜこうしているか、という意図を考えながらトレースすることで、感覚的にデザインが理解できると思います。
この本の場合、自分が作った制作物をSNSなどへ公開OKなので、Twitterを使って発信するのがオススメです!
話はそれますが・・・
いまからデザインの学習を始めるなら、TwitterやInstagramで制作したものを発信していくことを全力でオススメします!!なぜならお仕事につながるチャンスが多くあるからです。(実際にわたしもありました)
▼続いて、初めてデザイン制作をする人にオススメの本はこちら。

『3色だけでセンスのいい色』は、何通りもの色の組み合わせについて紹介されている本。色選びはデザイナーと非デザイナーの違いがはっきりわかるくらい重要で難しいもの。この本では「どの色を組み合わせると綺麗に見えるか」ということがデザインのコンセプトなどに応じて紹介されています。
「3色だけ」とあるように、紹介される色の組み合わせは3色のみ。
初心者だと4色,5色と使いがちですが、デザインをする際の基本は「3色」で十分。なのでまずは3色でデザインを作ることに慣れていきましょう。
<活用方法>
先ほど紹介した『デザインのドリル』でトレースしたデザインを、違う色の組み合わせで作ってみるのがオススメです。
例えば「夏っぽいデザイン」を作ったら、色だけを冬っぽい組み合わせにするなど。
「色を変えると雰囲気がどのように変わるのか」ということが理解できると実践で生かせます。

■レベル3:デザイン学習中でスキルアップしたい人(自主制作)

レベル2では実際にデザインをトレースすることで「どういう配色がいいか」「どういう余白感がいいか」などが感覚的に理解できたかと思います。
ここからは、実際にオリジナルでデザインの制作にチャレンジしていくフェーズです。
レベル3では、同じシリーズの書籍を3冊ご紹介します。
このシリーズでは、駆け出しデザイナーがお題に沿ったデザインを作成し、ベテランデザイナーが改善案を提案するといった内容になっています。
「NGデザイン」と「OKデザイン」が載っていて、NGデザインの何がNGなのか、NGをOKにするためにはどのような方法があるかが論理的に解説されています。
デザインの引き出しを増やしたり、デザインに迷った際の参考書として使うのにオススメです。

フォントには多くの種類があり、初心者のうちは何を選べばいいか判断ができないと思います。そこでこちらの本を参考に、デザインのコンセプトに合わせてどんなフォントがオススメかを選んでいきましょう。

余白とはデザインの中で空いている空間のこと。例えば文字と文字の間、写真と文字の間など。
余白には一定のルールがあり、余白の取り方でデザインの雰囲気がガラッと変わります。こちらの本ではそんな余白について「このコンセプトの場合はどういう余白がいいか」ということが解説されています。

あしらいとは、「★」などのマークや「リボン」などの装飾のことで、デザインのクオリティーを高めるために欠かせないアイテムです。
作りたいデザインの雰囲気に合うあしらいを探すのは、最初のうちは難しく、引き出しがなかったり、しっくりくるものに出会えなかったりします。そこでこちらの書籍では、例えば「上品でリッチなデザインに合うあしらい」などをテイストによって紹介してくれています。
<3冊の活用方法>
デザインに行き詰まったときの辞書的な役割として、手元に置いておくのがオススメ。慣れないうちはフォントを選ぶだけでも一苦労なので、本を手に取ってデザインイメージに合うフォントを探して、Web上で似たようなフォントを使って制作していくとスムーズになります。

■レベル4:デザインの実務に挑戦したい人

レベル4では、実際にお仕事の依頼を受けて対応する際に、持っておくと役立つ書籍をご紹介します。
ちなみに、、お仕事をもらうために私がやったことについては下記の記事にまとめています。
『鬼フィードバック』

『鬼フィードバック』では、プロのデザイナーが新米デザイナーに向けてフィードバックをする全過程(実際のやり取り)が公開されています。初心者の頃にやりがちなデザインのミスや、自分では気が付かなかったプロ目線からのアドバイスなど、目からうろこの内容で読んでいて純粋に面白いです。
自分がフィードバックを受けているかのような気持ちで読めるので、独学の人には特にオススメしたい一冊です。
<活用方法>
自分が実際に作ったデザインを用意して、書籍内で指摘されている部分を自分のデザインに置き換えて改善していく、という作業をするとデザインがブラッシュアップできます。
▼続いて実務でオススメの本がこちら。
『デザイン大全』

実務をこなすときに最初に立ちはだかる壁が、お客様からの「なんか可愛いデザインがいい」というフワっとした依頼です。
「可愛い感じ」と言っても、人によって捉え方は違うので、制作を終えてから「あれ?思ったのと違う」と言われないために、デザインイメージのすり合わせがとても大切です。
ただ、初めのうちはパッとイメージが出てこないため、そんなときにこの『デザイン大全』が役立ちます!
この本では「イメージに関連するワード」と「イメージデザイン」がセットで紹介されています。デザインイメージの辞書的な形で、この本を見ながらイメージに近い参考サイトを探す、という使い方がオススメです。
<活用方法>
「可愛い感じのデザイン」というご依頼があった場合に、この本で「可愛いデザイン」というパートを開いて、それに近い参考デザインをPinterestで探す。何パターンか用意したらそれをお客様に見せて、どれが「可愛い」のイメージに一番近いか、というのを絞っていく。というように使うと効果的です。

■レベル5:デザインの実務をこなしがらスキルアップしたい人

最後は実際に実務に挑戦し始めていて、さらにレベルアップしていきたい人にオススメの書籍を2冊ご紹介します。

「レタースペーシング」とは、文字と文字の間の空間のこと。
実務を経験してデザインを一通り作れるようになったけど「なんか垢抜けない、初心者感が出てしまう」という場合に意外とできていないのが「レタースペーシング」。文字と文字の間の余白が広すぎたり、狭すぎたり、ばらつきがあったり。。
このレタースペーシングを理解して、うまくコントロールできるようになるとデザインが一気に垢抜けてプロっぽくなります!
こちらの書籍では、そんなレタースペーシングについてを「文章+図解」で説明してくれています。超論理的に説明されているので、少し難しい内容もありますが、一度ちゃんと読めばそれなりにレタースペーシングを操れるようになります。
<活用方法>
書籍内の右側に載っている図解を参考に、実際のツールを使って同じように文字間を調整してみることで、理解が定着します。
またWeb上で文字詰めの練習ができるツールもあるので、それを使いながら理解を深める方法もオススメです!
文字詰め練習ツール:Kern Type
▼続いてスキルアップにオススメの本はこちら。
『最強構図』

「構図」とは、デザインを配置するときの形のこと。例えば2分割構図、黄金比、白銀比など。
ある程度デザイン制作に慣れてきたら、構図を扱いながらデザインしてみると表現の幅が広がるのでオススメ!だけど、いざ使ってみようと思うと、どう使ったらいいか分からず結局いつもと同じような配置になってしまうことも、、
『最強構図』では、デザインにおいて「美しい」と言われる構図を使って、デザインする際のコツやポイントを解説されています。バナーやSNS、名刺など用途に応じて事例が豊富に載っているので、辞書的に見ることもできます。
<活用方法>
いきなり実務で使ってみるのもいいですが、まずは1つの構図を決めてその構図を軸にデザインを組み立てる練習をしていくと、実践でスムーズに使えるようになるかと思います。(私は黄金比を使って練習してみました!)

■学習や実務で使えるデザイン本まとめ
独学にオススメのデザイン本をレベル別でご紹介しました。
紹介したい書籍が多すぎて、長文になってしまいましたが、、
まずは1冊からでもいいので少しずつ本の内容を知識として定着させてください。わたしは最初に書籍をいっきに買わずに、学習を進めながら足りない知識を補う形で集めていきました。(結果的に膨大な量の書籍を持っていますがw)
なので、1冊ある程度理解できたらもう1冊、という風に進めていくのが良いです。
ちなみに、、全ての書籍を完璧に読み込んだわけではなく、必要な部分をつまみ食いしている書籍もあります。笑
「理解できたら次に進む」のが理想ではありますが、必要な部分だけ吸収したら次に進んでしまってもいいと思います。
ご自身に一番合う方法で学習を進めていきましょう!
私もまだまだ学習中なので、またオススメの書籍があればこちらのnoteでご紹介していきます!
それでは、引き続き頑張っていきましょう〜٩( 'ω' )و
▼オススメ本リンクまとめ
レベル1:これからデザイン学習を始める人
『ノンデザイナーズデザインブック』
『なるほどデザイン』
『はじめてでも迷わないFigmaのきほん』
『センスがないと思っている人のための読むデザイン』
レベル2:初めてデザインを制作する人
『デザインのドリル』
『3色だけでセンスのいい色』
レベル3:デザイン学習中でスキルアップしたい人
『ほんとに、フォント。』
『けっきょく、よはく。』
『あたらしい、あしらい。』
レベル4:デザインの実務に挑戦したい人
『鬼フィードバック』
『デザイン大全』
レベル5:デザインの実務をこなしがらスキルアップしたい人
『レタースペーシング』
『最強構図』
以上です!
最後までお読みいただき、ありがとうございました〜!!
スキ・コメント・フォロー嬉しいです♪