Webデザインを独学で勉強したいと思っているけど、、どんな本がおすすめ?
webデザイナーとして働いているけど、自分の腕をもっと効率よく上げたいなぁ。
現役デザイナーもスキルアップに使える本が知りたい!

やあ悩める諸君たち。マスターだ!
webデザインの独学におすすめの本を探しているのか?
それならまさに我輩の得意分野!
今回は貴様らに最適な本を我輩が汗水垂らして集めてきたので、心して記事を読んでいくのだ!
Webデザインを独学で勉強したいけど、効率よくスキルアップするのにどんな本がおすすめ?
今回は、そんなwebデザインの勉強のために本を探しているあなたに、現役webデザイナーの僕がひたすらおすすめの良書を紹介していく記事となっています。
doneWebデザイナーになってはや5年、本はほぼ毎月買ってる僕ですが、その中から本当にスキルアップできるなと感じた本を10冊厳選しちゃいますよ。
今回紹介する本は、Webデザインが上手くいかず悩んでいた時期の僕を救ってくれたり、時に閃きや、普遍の知識を与えてくれた思い出深い本たちばかりです。
なので、これからWebデザイナーを志す初心者の方や、webデザイナーになってまだ日が浅い人なんかは得られるものが多いはず。
きっと気に入った本が見つかると思うのでぜひ見ていってくださいね!
【現役デザイナ厳選】Webデザインおすすめ本10選【2023最新版】
原点にして頂点。全デザイナー必読のベストセラー
難易度 | |
本の内容 | 読むだけでデザイナー脳へ頭を切り替えることができる |
総合評価 |
知らない人はいないんじゃないかってくらい、言わずと知れた名書です。
デザインの知識がない人がこの本を読むと、読む前とでは見えている世界が変わります。断言します。
なんて言うとだいぶ誇大広告に聞こえますが、結構本気で言ってます笑
この記事だけでこの本の魅力を説明し切るのは難しいので早い話、とりあえず読んでみて!って言いたくなる一冊です。
気になる内容についてですが、端的にいうと意識を変えれば見えている世界が変わる、っていう内容ですね。
done言ってみれば「デザイナー的な意識」を頭の中に仕込むことで、デザイナーになるための下地を脳内に作る、みたいなイメージです。
大事なのは、デザインって何ぞや?ってところを一旦掘り下げること。
もう5年デザイナーをやっていますが、これマジです。
だから頑張って表面的なソフトの使い方を覚えるより先にこの本を読んで欲しい。
そっちの方が最短でデザイナーとしての能力が上がることを保証します。
詳しくは下記からチェックしてみてくださいね。
>>ノンデザイナーズ・デザインブック [第4版]
手っ取り早くデザイナーとしての腕を上げたい方向けの超良書
難易度 | |
本の内容 | デザインの着想から形にするまで一貫して学べる |
総合評価 |
こちらも、ノンデザイナーズ・デザインブック [第4版]同様、そもそもデザインとは?ってところから学ぶ本です。
重要なことなので2回言いますが、デザイナーとしての能力を上げる最短の方法は、ソフトの使い方を覚えることではなく、デザインそのものについて掘り下げて学ぶことです。
そういう意味では、これからwebデザインについて勉強していくよって意気込んでいる初心者の方におすすめですね。
またこの本の素晴らしいところは、デザインそのものの考え方から実際にデザインに落とし込むまでの具体的な方法まで網羅されていることです。
さながら、プロのデザイナーの頭の中を覗いているのと変わりません。
なので、とっても効率良くデザインレベルを上げることができるんですね。
内容がかなり濃いので、初心者の方はもちろん現役のwebデザイナーの方にまで幅広くおすすめできる一冊になっています。
詳しくは下記からチェックしてみてくださいね。
>>なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
とにかくデザインの引き出しを増やしたい方へ
難易度 | |
本の内容 | よくあるデザインの「型」が、フレーズと一緒にまとめられている |
総合評価 |
こちらは上の2冊とは打って変わって、外見的なデザインパターンを数多く紹介している本です。
この本で学んだ内容は、なんなら今仕事で手掛けているデザインにそのまま使うことができます。
即効性がありますね。
もちろん、初心者の方もパラパラ眺めるだけでカジュアルにデザインについて学ぶことができますよ。
しかも面白いのが、学生時代の歴史の語呂合わせよろしく
「背景シロ透過の術」や「水玉のせとく」みたいな感じで、覚えやすいフレーズも作例とセットでついてくるというものです。
めっちゃユニークですよね笑
でも、この本の何がすごいってその名の通り本当に「あるある」デザインが網羅的に紹介されているということです。
pinterestなんかでデザインを眺めていると、大半がこの「あるあるデザイン」に載っている作例のどこかに引っかかることに気づきます。
超実戦向きの本と言えるでしょう。
デザインの世界は、時間との勝負でもあります。
なので、pcの前に座って頭を抱えているあなたにめくって欲しい一冊となっています笑
(僕も絶賛愛用中です)
詳しくは下記からチェックしてみてくださいね。
>>あるあるデザイン〈言葉で覚えて誰でもできるレイアウトフレーズ集〉
美しい配色のデザインができるようになりたい方へ
難易度 | |
本の内容 | 優れた配色センスを身につけることができる |
総合評価 |
イケてる配色を、確かな裏付けや実際の作例とともに学べる本です。
doneこれ、多分記事の中で現在僕が一番愛用している本です。めちゃくちゃいいです笑
オシャレな配色のwebデザインが大量に掲載されている点は一般的なデザイン本と変わりがありませんが、この本は大きく2つのブロックに分かれています。
具体的には、「イメージから探す」と「配色から探す」で検索をかけることができます。
「イメージから探す」では、クライアントやディレクターから「こんなイメージにして欲しい」と希望が来た際にその言葉でそのまま調べてデザインを提案するのに役立ちますし、
「配色から探す」では、この色は一般的にこういう印象を与える、みたいな解説もついているので、配色からデザインを組み立てたいシーンで役に立つわけです。
またこれは個人的な感想ですが、webデザインのまとめ本といっても載っている作例がデザイン的に優れているものばかりなのが良いですね。
どんなサイトをまとめるかは著者の腕が出るところだと思いますが、この本はコントラストがしっかり効いているサイトを中心にまとめ上げているのが素晴らしいと思いました。
今まさに現場で働いている人から、配色の勉強をしたい初心者の方に向けて自信を持っておすすめできる一冊になっています。
詳しくは下記からチェックしてみてくださいね。
>>配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集
確実にwebデザインのレベルを上げたい方へ
難易度 | |
本の内容 | 一流の作例を数多く見て学べる |
総合評価 |
配色や、イメージごとに実際の作例が数多く掲載されているwebデザインのまとめ本です。
勉強にはもちろん、実務のデザインをしていて詰まったーってときにパラパラめくるとアイデアが見つかることが多いナイスな一冊です。
一つ上で紹介した配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集と結構似ているんですけど、向こうが配色に特化した本であることと比べると、この本はそれにプラスして「レイアウトが人に与えるイメージ」も作例付きで解説されているのが嬉しいポイント。
ダブルで買って、仕事中手元に置いておいて困ったらめくる、みたいな使い方がおすすめですよ。
デザインが上達するコツはとにかく沢山のデザインを観察することなので、買って損はありません。
あなたの強力な味方になってくれること間違いなしです。
詳しくは下記からチェックしてみてくださいね。
>>Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
多くの人が気づいていない「余白」の使い方について勉強したい方へ
難易度 | |
本の内容 | 余白の効果的な使い方をマスターできる |
総合評価 |
意外と専門に解説されることがない「余白」ですが、実はデザインを組むに当たって最重要ともいえる要素であることはどれくらいの人が知っているでしょうか。
「プロのカッコいいデザイン」を真似して自分のデザインに取り入れてみたものの、何かが違う、、何か野暮ったい。
でも、どうしていいか分からない。
そんな悩みを持つ初心者や駆け出しデザイナーはとっても多いはずです。
この本はまさにそんな人のための本で、デザインは実は余白で印象がガラッと変わることを作例を通して教えてくれます。
洗練されたデザインと野暮ったいデザインでは何が違うんだろう。
Ng例とok例を見比べながらじっくり観察できる本となっています。
一例を出すと、背景がうるさいから薄くしてみる、とかフォントにもっと強弱をつけることで目立たせなくて良いものはギリギリまで小さくする、とかですかね。
いわゆる、「引き算」をメインに学ぶことができます。
連日大量の修正が戻ってきて、泣きそうな駆け出しデザイナーさんにおすすめの一冊ですよ笑
詳しくは下記からチェックしてみてくださいね。
>>けっきょく、よはく。 余白を活かしたデザインレイアウトの本
ノンデザイナーにもおすすめできる、バランスの取れた良書
難易度 | |
本の内容 | レイアウト、UI/UXなどトータルで学ぶことができる |
総合評価 |
done本書はどちらかというとデザイナーではない人がデザインを理解するために、webデザインを体系的に学びたい、みたいなシーンで使える良書です。
具体的な内容としては、「webデザイン」に特化していることですかね。
そんなの当たり前じゃんって思うかもしれませんが、基本的にwebデザインの本って、どっちかっていうと「web」というよりかは「デザイン」という括りでまとめられることが多いので、紙や名刺などのグラフィックデザインも載っていたりするんですね。
デザイナーにとってはもちろんそっちの方が需要があるのでそれで良いと思うんですが、例えばデザインを理解したいディレクターやエンジニアにとって、ポスターのデザインなどあまり関係ないですよね。
あくまで、「今」現場で使えるwebデザインのノウハウをメインに掲載しているという点で、ノンデザイナーの方にもぜひ読んでもらいたい一冊となっています。
「デザインの4大原則」をはじめ、レイアウトやトーン&マナー、今流行のUI/UXデザインなどをトータルで学ぶことができますよ。
詳しくは下記からチェックしてみてくださいね。
>>Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法
「売り上げを上げる」ことができるデザイナーになりたい方へ
難易度 | |
本の内容 | 確実に「結果」を出すデザイン制作のノウハウを学ぶことができる |
総合評価 |
「コンバージョン」という言葉を聞いたことがありますか?
意外と一般の制作会社では出てこないフレーズですが、実はデザインをする上で一、二位を争うぐらい重要な考え方なんです。
コンバージョンとは、「結果」という意味です。
つまり、そのwebサイトからどれだけの問い合わせが来たか、どれだけ商品が購入されたかといった、webサイトがどれだけ「営業マンとして稼働しているか」を表す指標なんですね。
ここで今一度整理しておきたいのが、クライアントはカッコいいwebサイトが欲しいわけではなく、自社の利益をwebサイトを通じてアップさせていきたいからデザイナーに仕事を依頼するわけです。
そうなってくると、あくまで結果が出るデザインが欲しいわけですよね。
この本では、どうすればコンバージョンが改善され、より良い販促効果が得られるのかを実例付きで紹介しているので、webデザイナーだけでなく日本中のweb担当者に読んで欲しい一冊となっています。
また、LP(ランディングページ)や、ECサイトを担当しているデザイナーさんにはぜひ読んで欲しい一冊となっています。
詳しくは下記からチェックしてみてくださいね。
>>コンバージョンを上げるWebデザイン改善集
コーディングが苦手でも、「ゴリゴリ動く!」カッコいいwebデザインが作りたい方へ
基礎編
難易度 | |
本の内容 | デザイナーでもできる、カッコいいアニメーションの実装方法について学べる |
総合評価 |
応用編
難易度 | |
本の内容 | アニメーションを通して世界観を作り上げる術を学べる |
総合評価 |
これ2冊あるので両方載せときますね。
ざっくりですけど上が基礎編で、下が応用編みたいな感じで捉えてもらったら大丈夫です。
これはどういう本かというと、webデザインの「アニメーション」に関して詳しく解説している本になります。
done技術の進歩が著しい最近のwebデザイン界隈では、webサイトにどのようなアニメーションを加えるかは、かなり重要な検討要素になっています。
コーディングが苦手なデザイナーに共通しているのが、動きに関してもいまいち疎かったりするんですよね。
なぜなら、自分が実装までやらないからアニメーションに関してどこまでできるのかが分からない為です。
もはやwebサイトは、ps4のゲームばりに動いてナンボの代物になりつつあります。(ちょっと盛りすぎました)
そんな世の中なのに、いつまでも静的なデザインしか作れません、じゃイケてるデザイナーとは言い難いですよね。
じゃあどこから勉強すればいいのさ?っていう文系脳のデザイナー(自分含めて)の皆さんにオススメしたい一冊になっています。
基礎をしっかり学びつつ、やりたい動きができる限り簡単な方法で解説されているのが嬉しいですね。
Javascriptが分からずコピペして動かない→諦める、を繰り返していた虚しい日々とは今日でおさらばできますよ。
詳しくは下記からチェックしてみてくださいね。
>>動くWebデザインアイディア帳(基礎編)
>>動くWebデザイン アイディア帳 実践編(応用編)
UIデザイナーになりたい人はとりあえず読んでおくと間違いなし!
難易度 | |
本の内容 | UIデザインとは何かを学べる |
総合評価 |
本書はUIデザインとは?について丁寧に解説されている良書です。
ちなみに、「webデザイン」と「UIデザイン」は何が違うねんって話ですが、webデザインは「webサイトのデザイン」であるのに対し、UIデザインとは「アプリケーション全般のデザイン」という意味になります。
UI(ユーザーインターフェース)っていうのはめちゃくちゃ対象物が多くて、Webアプリやネイティブアプリ(パズ○ラみたいなやつ)、はたまたテレビのリモコンまで全て含まれます。
僕もwebデザイナーなのでUIという領域についてはまだまだ詳しく解説できませんが、UIが俯瞰的かつ体系的に学べるのはすごく良かったです。
webデザインだけでなく、将来的にUIデザインもやってみたい人にはぜひおすすめの一冊になっていますよ。
詳しくは下記からチェックしてみてくださいね。
>>UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計
webデザインの勉強で悩んでいませんか?
webデザインの勉強、詰まっていませんか?
もし独学で苦戦しているなら、webデザインスクールで体系的に学習した方が挫折しなくて済むかもしれません。
筆者もwebデザインスクールに通ってwebデザイナーになり、今は割と稼げるようになったので、当時のスクールにはとても感謝しています。
今まで40社以上レビューしてきましたが、デザイン力を一番上げることができるのはデジタルハリウッドSTUDIO by LIGが正直ぶっちぎりです。
デザインもマーケティングも学びたい方はピッタリのスクールです。
他にも、今は割とキャンペーンをやっているwebデザインスクールも多いので、あなたに合うスクールが見つかるかもしれません。
興味がある方は以下からどうぞ。
>>ガチでおすすめのwebデザインスクールランキング【厳選10校】
おすすめのwebデザイン本を紹介してきました。 気に入った本は見つかりましたか?
本記事では、webデザインの基礎がしっかり学べる本を中心に紹介していきました。
デザイン本の何が良いかって、内容が陳腐化しないことです。
同じweb業界でいうと、例えばプログラミングなんかは流行の言語が年単位で移り変わっていったりするので古くなった本は価値が下がっていってしまいますが、デザインは違います。
なぜなら、デザインは「人が」見たり、感じたり、使ったりするものであるからです。
文明が進めど、人の根本的な思考や能力は変わらないもの。
なので、人が人に対してデザインをする、っていう前提が変わらない以上、大事な根っこは変わらないから本の内容も陳腐化しないんですね。
なので本のコストパフォーマンスも抜群です。
今回紹介した本だけでも手元に取っておくと、必ずあなたの助けになるはずです。
ぜひ読んでみてくださいね。それでは本日はここら辺で。
doneあなたにはこちらの記事もオススメ
- play_arrow【2021年】Photoshop独学におすすめの本10選【デザイナが厳選】
- play_arrow【完全無料】webデザインが独学で学べるおすすめサイト20選
- play_arrow 【2021年】テックキャンプ デザイナー転職の評判・口コミがヤバい?徹底調査しました
- play_arrow【2021年】SHElikesのWebデザインコースの評判・口コミは?プロが徹底解説