HTMLとCSSは書けるようになった。でも、できあがったページがなんとなく野暮ったい——その差はセンスではなく、知っているかどうかのルールです。この記事では、そのルールを学べる本を13冊、分野別に紹介します。
べんりワザ初心者におすすめのHTML/CSS・JavaScript入門書HTML/CSS・JavaScript・WordPressの入門書はこちらの記事にまとめています結論：まず1冊なら、これを買ってください
ノンデザイナーズ・デザインブック第4版
Robin Williams／マイナビ出版／2016年6月・第4版
迷ったらこれです。 デザインを学ぶ人がほぼ全員通る古典で、「近接・整列・反復・コントラスト」という4つの原則だけを、これでもかと繰り返し教えてくれます。
この4つを知っていると、自分のページを見たときに「なんか変」ではなく「ここの間隔がそろっていないから変」と、理由つきで分かるようになります。原因が言葉になれば、直し方も決まります。この1冊で見え方が永久に変わるという意味で、費用対効果が突き抜けています。
例題はチラシや名刺が中心ですが、原則はWebにそのまま通用します。読み終えたあと、街のポスターや看板まで違って見えるようになるのも、この本の楽しいところです。
もう1冊足すなら：けっきょく、よはく。
ingectar-e／ソシム／2018年8月
理論の本を1冊読んだら、次は目のトレーニングです。この本は、やりがちなNGデザインと、直したあとを見開きで並べるだけの構成。文章を読み込む本ではないので、コードの勉強に疲れた日でもめくれます。
タイトルのとおり、答えはたいてい「余白」。要素を足すのではなく、間を空けるほうが良くなる——この感覚が身につくと、CSSでいじる場所が変わります。ノンデザイナーズが「理由を言葉にする本」なら、こちらは「良し悪しを目で覚える本」です。
レイアウトと「あしらい」で迷ったら
あたらしい、あしらい。
ingectar-e／ソシム／2020年8月
「けっきょく、よはく。」と同じシリーズで、こちらのテーマはあしらい——線・囲み・アイコン・背景の飾りといった、小さな装飾の使い方です。
初心者がいちばんやりがちなのが、飾りを足しすぎて散らかること。この本は、同じ素材でも装飾の入れ方でどう変わるかを見開きで見せてくれるので、「足す勇気」より「引く判断」が身につきます。Webサイトの見出しまわりやカードの飾りに、そのまま持ちこめる例が多いのも実用的です。
やってはいけないデザイン
平本久美子／翔泳社／2016年12月
失敗例から入るのが特徴の1冊。町内会のチラシやPTAのお知らせのような「ありがちで、ちょっと残念な」制作物を題材に、なぜ読みにくいのかを1つずつ解いていきます。
自分の作ったページの粗を客観的に見るのは難しいものですが、他人の失敗なら遠慮なく見られます。そこで身についた目が、そのまま自分のページに返ってきます。デザインの専門書に構える必要がなく、いちばん軽い気持ちで読める本でもあります。
配色で止まらないために
CSSでcolorは書けても、何色にするかは書けない——初心者がいちばん時間を溶かすのが配色です。1冊持っておくと、悩む時間が確実に減ります。
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色
ingectar-e／インプレス／2020年6月
色は3色まで——この制約に絞りきったのが強い1冊です。ベース・メイン・アクセントの3色の組み合わせを、実際の作例つきで大量に見せてくれるので、そのまま真似できます。
配色の失敗の多くは「色を使いすぎ」なので、この本の考え方を守るだけでページは一段まとまります。CSSの--main-colorのような変数を3つ決めて始める、という当サイトのやり方とも相性がいい本です。
配色アイデア手帖［完全保存版］第2版
桜井輝子／SBクリエイティブ／2023年7月・第2版
こちらは辞書として引くタイプ。「和風」「レトロ」「北欧」といったテーマごとに配色パターンが並び、それぞれにカラーコードが載っています。作りたい雰囲気から色を探せるのが便利で、手を止めずに済みます。
3色の本が「考え方」なら、こちらは「引き出し」。1冊目としては前者、迷う頻度が高い人は両方あると強いです。
文字の見え方を変える
ほんとに、フォント。
ingectar-e／ソシム／2019年2月
「よはく。」シリーズのフォント版。同じ文章を別の書体で組んだ見開きが延々と続き、書体を変えるだけで印象がここまで変わるのか、と分かります。
Web制作では、Google Fontsで書体を選ぶ場面が必ず来ます。そのときに「なんとなく」で選ぶか、「この雰囲気ならこの系統」と決められるかは大きな差です。文字は面積がいちばん大きいデザイン要素なので、投資に見合う1冊です。
考え方をもう一段深める
なるほどデザイン
筒井美希／エムディエヌコーポレーション／2015年7月
とにかく眺めていて楽しいデザイン書。同じ素材を「伝えたいこと」を変えて何通りにも組み直す実例など、デザインが判断の積み重ねであることを体感させてくれます。
理屈を短く、図をたっぷりという構成なので、文字ばかりの本が苦手な人でも進みます。ノンデザイナーズで原則を知ったあと、「じゃあ実際どう考えて手を動かすのか」を埋める2冊目として最適です。
デザイン入門教室［特別講義］増補改訂版
坂本伸二／SBクリエイティブ／2024年4月・増補改訂版
レイアウト・文字・配色・写真の扱いまで、デザインの基礎をひととおり1冊で押さえられる教科書型。この記事で紹介している分野別の本を、薄く広く1冊にまとめた本と考えると分かりやすいです。
「分野ごとに買うより、まず全体を1冊で把握したい」という人はここから。2024年の増補改訂版で内容が新しくなっているのも安心材料です。
Webサイトのデザインに直結させる
Webデザイン良質見本帳［第2版］
久保田涼子／SBクリエイティブ／2021年12月・第2版
紙のデザイン書とちがい、Webサイトの実例だけを集めた本。「コーポレートサイト」「ランディングページ」「ポートフォリオ」のように目的別に並んでいるので、これから作るものに近い例をすぐ引けます。
作例には、なぜその見せ方なのかの解説が付いています。真似する対象を持っておくことは独学でいちばん効く近道なので、手を動かす前に開く1冊として持っておく価値があります。
「使いやすさ」に進む——UIとUX
見た目が整ってきたら、次は迷わず使えるかです。ここから先は、Web制作を仕事にしたい人ほど効いてきます。
UIデザインの教科書［新版］
原田秀司／翔泳社／2019年1月・新版
ボタンの大きさ、押せそうに見える形、スマホとパソコンでの操作の違い——画面の部品を設計するための基礎が体系立てて書かれています。
とくにWeb制作では、「デザインは良いのに使いにくい」が起こりがちです。この本を読むと、その原因が慣習からの逸脱にあることが分かります。当サイトのアクセシビリティのコースと合わせて読むと、理解が二重に固まります。
オブジェクト指向UIデザイン
上野学著／ソシオメディア監修／技術評論社／2020年6月
一段レベルの高い本ですが、アプリのような画面を作る人には決定的な1冊。「やること（動詞）から画面を作る」のではなく「もの（名詞）から画面を作る」という考え方を教えてくれます。
言われてみれば当たり前なのに、これを知らないと画面が操作の数だけ増えていきます。演習問題もあり、読むだけでなく手を動かして身につけられる構成です。フォームやダッシュボードを作る段階になったら、ぜひ。
誰のためのデザイン？ 増補・改訂版
D.A.ノーマン／新曜社／2015年4月・増補改訂版
デザインの世界の古典中の古典。押すのか引くのか分からないドアの話から始まり、「人が間違えるのは、人ではなくデザインのせい」という考え方を教えてくれます。
Webの本ではなく、分量もそれなりにあります。ただ、ここで語られる「見ただけで使い方が分かる」という原理は、ボタンやフォームを設計するときの拠りどころになります。急いで読む本ではないので、興味が続くようになってからで十分です。
読む順番の目安
- まず1冊 → ノンデザイナーズ・デザインブック（原則を言葉にする）
- 次の1冊 → けっきょく、よはく。（良し悪しを目で覚える）
- 配色で止まる → 3色だけでセンスのいい色 → 手元に置くなら配色アイデア手帖
- 文字がしっくりこない → ほんとに、フォント。
- 飾りが散らかる → あたらしい、あしらい。
- 全体を1冊で → デザイン入門教室
- 考え方を深めたい → なるほどデザイン
- Webの実例が欲しい → Webデザイン良質見本帳
- 使いやすさを設計したい → UIデザインの教科書 → オブジェクト指向UIデザイン → 誰のためのデザイン？
買う前に確認したいこと
- サイズと見開き——デザイン書は図が命です。電子で買うなら、見開きが読める画面かどうか確認を
- 発行年——原則を扱う本は古くても価値が落ちませんが、Webの実例集は数年で古くなります（見本帳の類は新しい版を）
- 作例の分野——チラシ中心か、Web中心か。今の自分に近いほうが持ち帰りやすい
まとめ
- 最初の1冊はノンデザイナーズ・デザインブック——4原則で「なんか変」が言葉になる
- 2冊目はけっきょく、よはく。——理論のあとに、良し悪しを目で覚える
- あとはつまずいた分野だけ足す（配色・フォント・あしらい・Web実例・UI）
センスの正体は、知っているルールの数です。1冊読むごとに、自分のページの直せる場所が確実に増えていきます。