Webデザイナーがデザインセンスを上げるために重要なことは、第一線で活躍するデザイナーの技術を盗むことです。
ただ優れたデザインのサイトを眺めるだけでも有効ですが、デザインの意図や理論・こだわりを知ると、さらに自分のデザインセンスも向上します。
これからWebデザインを本格的に勉強するなら、書籍も最新版から選択した方が効率的です。
とは言え、それでも本屋には多くのWebデザインの書籍があります。
このページでは、現場で活躍するwebデザイナー目線で、おすすめの書籍を紹介しています。
この記事の主な対象者
webデザイナー初心者の方
これからwebデザイナーを目指したい方
体系的にWebデザインを身に付けたい方
今後、プロとしてWebデザイナーとして誰かの役に立つなら独りよがりではダメです。
分かりやすいWebデザイン本を読んでデザインの考え方を身に付けよう。
【初心者webデザイナー向け】 Webデザイン基礎
Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法
いま制作現場でWebデザイナーに求められる広範な知識とスキルを網羅した、これからプロになる人のために最適な入門書の決定版。
〈こんな方にお勧めです〉
・Webデザインに求められる知識をひととおり身につけたい
・配色やレイアウトといったデザインの基本を知りたい
・UXデザインやUIデザインの考え方を理解してステップアップしたい
・モーションなどの動的なデザインも手がけたい
Webデザインに特化した解説書です。
コーポレートサイト・ショップサイト・ECサイトなど、サイトの用途に応じたレイアウトの考え方などは、初心者デザイナーには大変学びになる内容です。
配色やレイアウトの基礎、ヘッダーフッターやフォームなどのパーツ別のデザインも、Webデザイナーには役に立ちます。
ただし、Webデザイン専用のデザイン紹介は時代の流れが速いので、一部もう古いかなという個所もあります。
その点は注意して、基礎ノウハウを体系的に学ぶことをお勧めします。
いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)
この1冊でWebデザイナーに必須の基礎知識が網羅できる!これからはじめる人、一気に学びたい人へ一生使えるWebデザインのテクニック集!絶対に外せない!レイアウト4つの原則とレスポンシブWebデザイン。今日から使える!配色の基本と、実例デザインの配色見本集。ユーザーの心を動かす!写真と図版の使い方、タイポグラフィの選び方。フレックスボックス、インタラクション、マーケティングの知識まで。
Webデザインのレイアウト、配色、タイポグラフィなどのデザイン基礎もポイントを押さえて解説されています。
また、Webサイト制作のデザイン面だけに限らず、企画となる部分、目的や目標、ターゲット・コンセプトなどの、Webデザイナーに必要な基礎知識もこの1冊で学べます。
全体的にみると、Webデザインは詳しく解説されていますが、その他の企画やHTML、javascriptの解説はほんのさわり程度です。
Web制作の全体像把握には約に立ちますが、この1冊で全て理解するのは難しいと思うので、あくまでWebデザインの勉強用としての1冊としてお勧めします。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
本書は415点の厳選した良質なWebサイトを集めた見本集です。レイアウト、配色、フォント、素材、プログラムなど、ページを構成しているデザインパーツまで分解して解説しているので、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。「アイデアが見つからない」「イメージはあるけど、何が必要で、どうつくればいいかわからない」といった時に必見の価値あり。パラパラめくって好きなページを見つけ出し、デザイン制作に役立ててください。
見本集なので、Webデザインの基礎知識に関する説明は最低限になっていますので、基礎知識に関しては他の本で学ぶことをお勧めします。
業種やレイアウト・ジャンル・配色などさまざまなパターンに分類された415点の充実の見本帳となっていて、Webデザインに取り掛かる際は、非常に参考になる見本帳です。
知り合いのWebデザイナーは、この本を打ち合わせに持参し、お客様とのイメージのすり合わせに活用することで、イメージのぶれの少ないデザインが作れています。
さまざまなジャンルのWebサイトを制作するデザイナーは手元に置いておくべき1冊です。
※HTML・CSSのコードは記載されていませんので、コーディング方法が知りたい方は、HTML・CSSの本を探してください。
HTML/CSSのおすすめ本はこちらでも紹介しています。
-
【webデザイナー向け】Webデザインが分かりやすく学べるオススメの本9選
Webデザイナーがデザインセンスを上げるために重要なことは、第一線で活躍するデザイナーの技術を盗むことです。 ただ優れたデザインのサイトを眺めるだけでも有効ですが、デザインの意図や理論・こだわりを知る ...
続きを見る
Webデザインの見本帳 実例で学ぶ最新のスタイルとセオリー
・テキストやタイポグラフィで魅せるデザイン
・配置やレイアウトで魅せるデザイン
・配色や余白で魅せるデザイン
・グラフィックや写真で魅せるデザイン
など、さまざまな切り口でデザインを解説されています。
Webデザインを独学で続けていると、デザインが一定のパターンに陥りがちです。
そのような枠にハマってしまったときは、この見本帳でさまざまな切り口を取り入れてみるとWebデザインの幅も広がります。
2万回のA/Bテストからわかった 支持されるWebデザイン事例集
すべてが実際テストされたA/Bテストの事例なので、
本当にユーザーが求めている成果の出るデザインがわかります。
A/Bテストの概要を知りたいという方にもお勧めの書籍です。
クレディセゾン、SBI証券、ヤフー、大東建託、九州旅客鉄道、ヤマハミュージックジャパン、日本ピザハット、ブックオフオンラインなど、実際に運用されているWebサイトのA/Bテスト(どちらが支持されるか判別するテスト)の結果から本当にユーザーの求めているデザインがわかる書籍です。
Web制作の現場では、よくお客様の好みでデザインが進む場合があります。
お客様の好みのデザインで進める方法は相当危険です。
好みは変わることもありますし、一度固まったデザインが上司や社長の好みでひっくり返されることはあるあるです。
できるWebデザイナーやWebディレクターは、お客様の好みなど考慮せず、お客様のビジネスにとって最適なデザインを理論的に提案します。
経験の浅いWebデザイナーでも、デザインの根拠になるテスト事例があれば、自分のデザインにも自信をもって制作することができるでしょう。
【Web含めデザイン全般】デザインの基本
ノンデザイナーズ・デザインブック [第4版]
本書『ノンデザイナーズ・デザインブック』は2020年、日本語版刊行から22年を迎えました。
おかげさまで第4版まで版を重ね、非デザイナーだけでなく、デザイナーにも長く読み続けられています。
累計60刷突破記念として、また長きにわたるご愛顧、ご愛読への感謝の気持ちを込めて、日本語のテキスト、フォント、タイポグラフィについて解説した特典PDF(40ページ、非売品)「ノンデザイナーでも役立つフォント、タイポグラフィの基本」をご用意しました。
キャンペーン詳細はこちらをご覧ください。
https://book.mynavi.jp/nddb/4つの基本原則。これを知るだけで、あなたのデザインはずっとぐっと、良くなります。プロで無くても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。そんなあなたのための、デザインの基本書。日本語版補足。日本語によるデザインサンプル、和文タイポグラフィ。18年ずっと売れ続けているロングセラー、待望の第4版。
デザインの4つの原則や活字デザインの原則を学べる1冊です。
Webに限らず、 IllustratorやPhotoShopなどのデザインソフトからいきなりデザインを始めた人は、ほとんど基礎知識が無い状態で、自分のセンスのみでデザインを作成します。
自分の作ったデザインが何か違うなぁと思う方は、この基礎デザインの考え方が役に立つはずです。
デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)
グラフィックワークから企画書、プレゼン資料まで。デザイン基礎力は一生役立つ武器になる!これからはじめる人に読んでほしい、とことん丁寧な本格入門書、遂に発刊!センス、経験一切不要!
デザインをはじめる前に知っておくべきポイントや、レイアウトの基本ルールである配置設計、配色の基本などが一通り学ぶことが出来ます。
写真の選び方や使い方などは他ではあまり見ないポイントです。
レベルの低いデザインと感じるポイントがわかるので、この本の基礎知識を習得できれば、違和感を与えない商用レベルのデザインに上達できると思います。
なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
本や雑誌、ポスター、看板、チラシなど、日常には「デザイン」されたビジュアルが溢れている。そうしたデザインを実際に行うとき、デザイナーがどんなことを気にかけ、どんな基準で良し悪しを判断しているのか。それを視覚的に、極めて具体的にわかりやすく説明した本が、じわじわと売れ行きを伸ばしている。
「著者は弊社の多数の出版物にデザイナーとして関わっていただいている方です。お仕事の際のプレゼンがとても上手く、それを見ていて本を書けるのではないかと感じたのが、企画のきっかけでした。新人を指導する立場の方でもあるので、デザインを教えることのノウハウもきっと豊富にお持ちだと思ったんです」(担当編集者)
企画の立ち上げから本が完成するまでには、2年という長い月日が必要だった。
「通常の書籍のように何パターンかのページデザインを組み合わせるのではなく、雑誌のようにほぼすべてのページを一からデザインする必要があったんです。著者はそうした作業が得意な方ではあるのですが、それでもさすがに時間がかかりました」(担当編集者)
デザインを仕事にしている・したい人を主な読者と想定した本だが、それ以外の読者にも役に立ちそう。
「プレゼン用の資料をはじめ、ちょっとしたデザインをする機会って、意外とありますよね。そんなときに参考にしていただけたらうれしいです」(担当編集者)
評者:前田 久
(週刊文春 2016.11.23掲載)
こちらも非常にオススメの本です。
良いデザイン、惜しいデザインを比較して、なぜ良いデザインが良く見えるのか理由も解説してくれているのでポイントを押さえたデザインの理解が可能な1冊です。
ある程度他の本で勉強している人には物足りない面もあるかも知れませんが、
デザインの本にも色々なタイプがありますので、デザイン理論が難しいと思う人には、こちらの方が理解しやすいと思います。
けっきょく、よはく。 余白を活かしたデザインレイアウトの本
デザインは「余白」が9割。カフェ(カフェポスター、レストランのメニュー…)、ビジネス(会社案内パンフレット、プレゼン資料…)、和もの(着物レンタル広告、展覧会ポスター…)、化粧品(雑誌広告、新商品店頭POP…)、季節もの(ハロウィン、クリスマス、バレンタイン…)、ラグジュアリー(分譲マンションチラシ、車のポスター…)、豊富なレイアウト例!誰も教えてくれなかった「余白」デザインがわかる本。
余白を効果的に使うと、Webサイト内で次にどこに視線を移動すれば良いか分かりやすくなったり、内容を理解にストレスを減らしてくれたりします。
デザインを続けていると「けっきょく、よはく」は実感できる言葉です。
余白の使い方が上手くなると、デザインセンスが格段に上達したように見えるので、初心者Webデザイナーが早く上達するには必須のノウハウだと思います。
まとめ
以上が、Webデザインが分かりやすく学べるオススメの本9選になります。
Webデザインの基礎知識をしっかり身に付けることで、素人デザインからの脱出を図り、Webデザインならではサンプルやテスト結果事例などから、ただの好みだけではない、根拠のあるWebデザインを作れるようになると、初心者Webデザイナーは卒業です。
私は、Webサイトを利用する人にとって、何が最適なデザインなのか忘れずにデザインを考えることが重要だと考えています。
Webデザインは、技術や環境の変化に応じてデザインの流行りやトレンドも早く変化します。
Webデザイナーは常に最新の情報にアンテナを張って、トレンドを取り入れて、利用者にとって最適なデザインを提供していきましょう。