現役デザイナーがお薦めしたい書籍!Webデザインの秀逸な本 5選+α


こんにちは!ユキックス(@MILKIT_DESIGN)です!
Webデザインの制作を依頼するとき、依頼者と制作者の間で、言葉だけでイメージや雰囲気を伝えてデザインの共通認識を合わせることは難しいですよね。
この記事では、デザイナーが実際にお客さまとやり取りをする中で役立った、良質なWebデザインの本をご紹介します。イメージに近いデザインを見つけたり、良質なクリエイティブを見て制作依頼の参考にしたい方へお薦めの本を厳選してご紹介します!
目次
現役デザイナーが実務で役立った!イメージを掴んで伝えやすい秀逸なWebデザイン本3選
たくさんあるWebデザインの本の中でも、実際にお客さまとコミュニケーションする中で
- 特に見やすくて伝わりやすいと感じた
- 求めていたものが探しやすい、見たかったデザインやイメージが見つかる
- 実務の現場で使う頻度が高い
- 掲載や紹介されている情報が秀逸
といった、認識合わせや意思疎通の際に便利で助かった!と感じたWebデザインの参考になるお薦めの本を3冊、ご紹介します。ご参考までに!
Webデザイン良質見本帳

- 良質な作例が415サイト掲載!圧巻の豊富な情報量
- 7つの目的別で構成されているので欲しい情報が探しやすい(印象・配色・業種やジャンルなど)
- 良質で優れたWebサイトのデザインや特徴が可視化、言語化されている
デザインの方向性やイメージを探して伝えたりお客さまとのビジュアルイメージや認識の摺り合わせにとても重宝している1冊!移り変わりの激しい業界ですが、そんな中でもWebデザイン書を扱う書店に行くと必ず見かける2017年初版発売の名著です。
ちなみに!著者の久保田涼子さんは私がWebの実装スキルを習得していた期間に講師として大変お世話になったことがあり、Webの基礎知識や実装技術のベースとなる部分を分かりやすく丁寧に教えてくださった、本当に素晴らしい恩師です。出会いに感謝しております!
illustrator & Photoshopデザインの作り方アイデア図鑑

- グラフィックデザインの作例が豊富でアイディアのヒントが詰まっている
- ビジュアルイメージが見える化されているデザイン書
- 言葉だけでは伝わりにくいイメージも、目で見て視覚で伝達できる
- 技術書としても秀逸で92のテクニック・技術が満載!
こんな雰囲気のWebサイトにしたい!など、たくさんの作例の中から目的のビジュアルイメージを掴みやすいだけでなく、技術書としても秀逸です。あらゆるテクニックや手法がフルカラーでわかりやすく掲載されており、プロのデザイナーにとってもまさに図鑑としての使い方ができる1冊です。
共著者の上司ニシグチさんが手掛けられている書籍はどれも内容や実用性が素晴らしく、ずっと手元に置いておきたいと思うほど魅力的なので、お薦めです!
配色アイデア手帖 めくって見つける新しいデザインの本 [完全保存版]

- 絶妙で美しく多彩な配色が色名と共に3000色以上が掲載されている色の見本帳
- 計300ページ以上にわたって目的ごとに色のイメージや組み合わせが紹介されている
- 色の配色に迷ったらこの1冊を開けば目的の色やヒントとなる色が見つかりやすい
デザインのことがわからない方でも、印象・年代・国別・色相別などのカテゴリ分けから求めていた色を探しやすいです。少し専門的な言葉になりますが、すべての色の数値(CMYK・RGB・HEX値)が詳細に記載されているのでWebでも印刷物でも迷うことなく目的の色を概ね表現することができるため現場でも大変重宝しています。
現場で役立つ!Webデザインの仕組みがわかる秀逸なWebデザイン本2選+α
たくさんあるWeb関連の本の中でも、
- Webの技術の基礎から特にわかりやすく丁寧に解説されている
- 実務でのコミュニケーションにとても役立っている
厳選した秀逸な書籍を2冊(+α)をご紹介します。
イラスト図解式 この一冊で全部わかるWeb技術の基本

- Webサイトの仕組みが基礎・基本からわかりやすく解説されている1冊
- 専門用語についても丁寧に説明がされておりWebの仕組みや全体像を大枠で把握することができる
- 繰り返し読み返すことでさらにWebの仕組みへの理解が深まる
制作する技術がなくとも、しっかりと読み込むことでWebの成り立ちや仕組みを理解しやすく、Web技術とは何か?を知るための教科書のような内容です。Webサイトを持つことになる方が知っておくと理解スピードが上がったり、把握できる範囲が広がったり、ちょっと専門的な内容も凝縮されています。
Web業界の大先輩、先駆者でもあるWebディレクターでWeb制作会社サービシンク代表の名村晋治さん、Wepot代表で制作パートナーのホンマさんから薦めていただいたことがきっかけで読みました。
動くWebデザイン アイディア帳 実践編

- アニメーションやWebサイトに組み込みたくなる印象的な”動き”が実際にWeb版(特設サイト内)で閲覧できるので、実例を含めて見れる
- 再現したい動きの実例が豊富で、この本から探せば大抵のアクションは解決できる
前術の久保田涼子さんの共著で、UIデザインに最適な”動き”一覧が、わかりやすくまとめられ解説されている技術書。今回+αでご紹介したいのは、この書籍と連動しているWeb版の「動くWebデザインアイディア帳」オンライン版です。
▶︎ 動くWebデザインアイディア帳 https://coco-factory.jp/ugokuweb/(外部サイト)
イメージを擬音や言葉にするとなかなか伝わりにくいけれど、絶妙に格好いいあの動き!など、制作の知識や技術がなくとも実際に可視化された動きを直接確認できます。特に依頼者と制作者の認識合わせをするときに大変重宝していおり、イメージがすれ違うことなく共通認識ができるので実務の現場で大変役立っております。
まとめ
今回はわたしの経験を踏まえた実務の現場で、お客様とのコミュニケーションで重宝している秀逸なWebデザインの本を厳選してご紹介しました!Webサイト制作をするうえで理想的なデザインにたどり着くために、デザインのイメージを伝えるコミュニケーションは欠かせません。
他にも素晴らしいデザインの書籍がたくさん存在していますが、ご紹介した本の中から探し求めていたイメージを伝える手段や方法、求めていたことを伝える手段のヒントが見つかるきっかけになったり、Webサイトを依頼するときのイメージを伝える一助になればうれしいです。
執筆者はユキックスでした!