Web デザイン良質見本帳［第 2 版］

＼＼40,000 部突破したベストセラーが 4 年半ぶりの大改訂! / /
Web デザインに関わる全ての人へ
想像力を高める最新の良質サイト 429 選!
優れた実例を見ることは新しい作品を生み出す力になる!!

・これからはじめる人に!
・打ち合わせのお供に!
・困った時のアイデア出しに!
オススメ!

見るだけで Web デザインのトレンドが自然とわかる!

ーーーーーーーーーー
デザインは見て学ぶ
ーーーーーーーーーー
本書は 429 点の厳選した良質な Web サイトを集めた見本集です。第 2 版ではほぼすべてのデザインを見直し全面的な改訂を行っています。今後も長く使える最新のデザインを取り揃えました。
レイアウト、配色、フォント、素材、動き、プログラムなど、ページを構成しているデザインパーツまで分解しているので、Web サイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。
「アイデアが見つからない」「イメージはあるけど、何が必要で、どう作ればいいかわからない」といった時に必見の価値あり。パラパラめくって好きなページを見つけ出し、デザイン制作に役立ててください。

ーーーーーーーーーー
本書の対象読者
ーーーーーーーーーー
・デザインのアイデアが見つからない方
・デザインの制作に自信が持てない方
・クライアントと打ち合わせする際に方向性となる見本が欲しい方
・ Web デザインの最新トレンドを知りたい方

PART 0 Web デザインの基礎知識
PART 1 印象から考えるデザイン
PART 2 配色から考えるデザイン
PART 3 業種・ジャンル別から考えるデザイン
PART 4 レイアウトや構図から考えるデザイン
PART 5 素材・フォント・プログラムを使ったデザイン
PART 6 トレンドのデザイン
PART 7 パーツ別デザイン
PART 0 Web デザインの基礎知識
PART 1 印象から考えるデザイン
PART 2 配色から考えるデザイン
PART 3 業種・ジャンル別から考えるデザイン
PART 4 レイアウトや構図から考えるデザイン
PART 5 素材・フォント・プログラムを使ったデザイン
PART 6 トレンドのデザイン
PART 7 パーツ別デザイン

Web サイトの見た目を決める場面では、参照できる実例の量と質が判断の速さに直結します。『Web デザイン良質見本帳 第 2 版』 (久保田涼子 著、SB クリエイティブ、2021 年 12 月刊) は、版元によれば 429 点の厳選した良質な Web サイトを集めた見本集で、副題「目的別に探せて、すぐに使えるアイデア集」が示すとおり、印象 / 配色 / 業種 / レイアウトといった目的から逆引きで実例を探せるように目次が組まれています。第 2 版ではほぼすべてのデザインを見直した全面的な改訂を行ったと版元は説明しており、初版が 40,000 部を突破したこと、その初版から 4 年半ぶりの大改訂であることも、2021 年の第 2 版刊行時の版元公式ページに記されています。判型は B5 判です。

PART 0 から PART 7 までの構成、印象 / 配色 / 業種から逆引き

構成は PART 0「Web デザインの基礎知識」から PART 7「パーツ別デザイン」までの 8 つのパートです。間には PART 1「印象から考えるデザイン」、PART 2「配色から考えるデザイン」、PART 3「業種・ジャンル別から考えるデザイン」、PART 4「レイアウトや構図から考えるデザイン」、PART 5「素材・フォント・プログラムを使ったデザイン」、PART 6「トレンドのデザイン」が並びます。版元公式ページの解説では、印象の切り口として「透明感のある」「ナチュラルで優しい」「キュートで可愛い」が、配色ではロゴやブランドカラーから考える選び方と「黄」「橙」「赤」「ピンク」「紫」「青」「緑」といった色相、トーンを使った配色が、レイアウトでは「グリッドレイアウト」「カード・タイル型」「フルスクリーン」「フリーレイアウト」やカラム数の違いが、トレンドでは 3D グラフィックス、グラスモーフィズム、マイクロ・インタラクションが例として挙げられています。業種 / ジャンル別のパートは、医療 / 病院などサイトの構造上外せない機能がある業種を手掛けるときの参考になると版元は述べ、掲載された実例は URL を入力すれば実際のサイトも確認できるとしています。

見本を分解して読む、Web デザイン学習の技術背景

Web デザインの学習が難しいのは、良いと感じるサイトを眺めるだけでは、なぜ良いのかを自分の案件へ移せる形で言語化できない点にあります。版元は本書について、レイアウト、配色、フォント、素材、動き、プログラムなど、ページを構成しているデザインパーツまで分解しているため「デザインの魅力の理由」がわかると説明しています。見本を要素に分解して読む習慣は、無料のギャラリーサイトを漫然と眺めるのとは決定的に違い、たとえばグラスモーフィズムなら半透明の面とぼかしで奥行きを出す表現、マイクロ・インタラクションなら操作に対して小さな反応を返す動きというように、名前と効果と構成要素を対応づけて引き出しに入れられます。スマートフォンと PC の双方で破綻しない レスポンシブデザイン が前提になった時代には、レイアウトの型を知っているかどうかが実装コストにも直結するため、PART 4 のレイアウトや構図のパートは制作側にとって実務価値の高い部分です。ただしトレンドは時間とともに移るので、本書の実例は 2021 年末時点の記録として読み、版元が「今後も長く使える」デザインを取り揃えたと述べている選定方針を踏まえて使うのが適切です。

デザイナーとクライアント双方の前提と、向かない使い方

前提知識はほとんど要りません。Web デザインの基礎知識は PART 0 で一通りまとめられており、版元はこの章を読むだけで Web デザインの全体像がわかるとしています。版元が挙げる対象読者は、デザインのアイデアが見つからない人、デザインの制作に自信が持てない人、クライアントと打ち合わせする際に方向性となる見本が欲しい人、そして Web デザインのトレンドを知りたい人で、これからはじめる人の学習と打ち合わせのお供という二つの使い方が想定されています。ワイヤーフレーム を描く前の段階で、発注側の漠然としたイメージと制作側の案を同じページを指しながら擦り合わせる用途は、版元も打ち合わせのお供として挙げているところです。一方で、主題はデザインの見本と分解であり、HTML や CSS の記述方法を体系的に学ぶ入門書とは役割が異なります。コーディングを学びたい段階の人は、本書を方向性を決める側の本として位置づけ、実装は Web デザイン本の選び方 を整理した記事にあるようなコーディングとツールの本で補う形が向いています。

著者の久保田涼子は、版元の刊行時プロフィールによれば、「ワクワクするモノ・時間・場所を生み出す」をテーマにものづくりを行うフリーランスクリエイターで、Coco-Factory の代表をつとめて国内外のウェブサイトをトータルプロデュースするほか、デジタルハリウッド STUDIO 渋谷 / 吉祥寺講師としてオンライン講座や教材開発、ワークショップ開発に多数携わっています。著書には本書の初版のほか、ソシム株式会社から刊行された Web デザインの著書も挙げられています。本書で元が取れるのは、案件ごとに参考サイトを探す時間が毎回発生しているデザイナーや、制作会社へ発注する側でイメージを言葉にできず手戻りを繰り返している担当者です。パラパラめくって好きなページを見つけ出す使い方を版元自身が勧めているとおり、机の脇に置いて何度も開く本として選ぶ価値があります。