これはかなりオススメの良書！ 最近のWebデザインのアイデア・作り方がよく分かる -Webデザイン良質見本帳

Webデザインをレイアウトや構図から、最近のトレンドから、カラーや配色から、業種やジャンルから、印象やイメージから、そのデザインのアイデアや仕組みや作り方が分かるオススメの解説書を紹介します。

「Webデザインは見て学べ」と言われますが、単に見るだけでは足りません。400以上の魅力的なWebサイトのレイアウト、配色、フォント、写真、アイコン、構成要素、動き、プログラムなどを分析し、デザインのさまざまな角度から詳しく解説されたWebデザイン良質見本帳を紹介します。

本書は当ブログでも大好評だった「Webデザイン良質見本帳」（紹介記事）の第2版です。第2版といっても、内容はほぼすべてが刷新されており、現在の最新Webデザインに完全アップデートされています。

本書はWebディレクター・デザイナーだけでなく、Web制作に携わるすべての人に役立つ一冊です。Web制作の参考になるだけでなく、困った時のアイデア出し、クライアントとの打ち合わせに持っていくのもアリですね。

Kindle版も同時発売されています！

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

早期購入特典として「書籍掲載URL一覧シート」のPDFが全員にもらえます。
※当ブログでの記事に合わせて、期間を延長していただきました！

• Webデザイン良質見本帳 ［第2版］先行購入者特典
  ※応募期間は、2022年1月23日まで

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書はWeb制作者、特にWebデザイナーが求めるアイデアが形になった本です。デザインの出発点として、さらに造詣を深めるために、頭の中にあるものを形にするために役立つ一冊です。
また、さまざまなWebデザインを見ることで、引き出しを増やすことができます。

アイデアはデザインの印象、カラーや配色、業種やジャンル別、レイアウトや構図、素材・フォント・プログラム、最近のトレンドにまとめられており、求めるものをすぐに見つけられます。パラパラ見るだけでも、かなりインスピレーションが刺激されると思います。

ヘッダ・フッタ・ナビゲーション・見出し・ボタン・フォームなど、パーツ別にも最近のWebデザインがまとめられており、要素の配置の仕方やレイアウトのアイデアがたくさん解説されています。

さっそく本書の中身を見てましょう。
本書は0章+7章構成で、0章では基礎知識（構成・ワークフロー・パーツ・画像・タイポグラフィ・配色など）が簡潔にまとめられています。1章以降で紹介されているアイデアを補完する解説的な役割です。

印象から考えるデザイン: 透明感のあるデザイン

1章は「印象から考えるデザイン」
透明感、信頼感、高級感、ナチュラル、クール、キュートなどといったデザインの印象を作り出すフォントやパーツや配色を中心に分析し、どうすれば作れるのかが解説されています。

印象から考えるデザイン: エレガントで気品に満ちたデザイン

ウェディングやジュエリーなど気品のある女性向けサイトでは、白・黒・茶を基調としているデザインが多く、アクセントカラーにはゴールドがよく使用されています。装飾は少なめで、細い線で表現するとエレガントな雰囲気を演出できます。

印象から考えるデザイン: 和を感じるデザイン

和の配色には、日本の伝統色を組み合わせて構成されています。和紙のテクスチャや日本の伝統的な文様でアイコンや飾りが使用されています。

配色から考えるデザイン: ロゴやブランドカラーから考える配色

本書ではポイントごとの解説も充実しています。ロゴやブランドカラーからメインカラー・ベースカラー・アクセントカラーを決める方法、どこに注意すればよいか、色数を増やしたい時はどうすればよいかなどが分かります。

配色から考えるデザイン紫を基調とした配色

黄・橙・赤・ピンク・紫・青・緑・茶・白やグレー・黒など、各色の分析も充実しています。

業種・ジャンル別から考えるデザイン: 医療・病院サイト

業種・ジャンル別は、レストラン・カフェサイト、医療・病院サイト、ファッションサイト、美容室・エステサイト、アートフェス・イベントサイト、音楽サイト、アニメ・ゲームサイト、士業サイト、学校・幼稚園サイト、ポートフォリオサイト、ニュース・ポータルサイト、ECサイト、コーポーレートサイト、スポーツ・フィットネスサイト、ランディングページが揃っています。

レイアウトや構図から考えるデザイン: 2カラムのレイアウト

4章はWebページをつくる際にはずせないレイアウトや構図のアイデア。現在主流のグリッドレイアウトをはじめ、カード型、1カラム、2カラムなどが解説されています。

レイアウトや構図から考えるデザイン: カラムを組み合わせたレイアウト

カラムの組み合わせ、フルスクリーンレイアウト、グリッドから外したレイアウトなど、最近増えてきたレイアウトも揃っています。

素材・フォント・プログラムを使ったデザイン: 切り抜き写真を使ったデザイン

写真、フォント、CSSやJavaScriptなどを効果的に使用したデザイン。中でも写真は非常に効果的な要素で、メインに使用したり、切り抜き写真を使用したり、視覚的に情報を伝えることができます。
ほかにもイラストをはじめ、テクスチャ、飾りパーツ、動画、インフォグラフィック、タイポグラフィなどのアイデアが満載です。

トレンドのデザイン: マイクロ・インタラクション

洗練された今時のかっこいい感じにするには、トレンドははずせません。トレンドのレイアウトや最近のWeb技術をつかったテクニックの使い方が分析されています。

トレンドのデザイン: 鮮やかなグラデーション

マイクロ・インタラクション、鮮やかなグラーデション、グラスモーフィズム、流体シェイプ、アイソメトリックのイラスト、ブロークングリッドレイアウトなど、効果的に取り入れる方法が解説されています。

パーツ別デザイン: ヘッダー

最後の7章はWebページで使用されているパーツ別のアイデア集です。ヘッダやフッタをはじめ、見出し、ボタンやページトップリンク、ローディング、フォームなどの要素の配置の仕方、レイアウトのアイデアが解説されています。

Webデザイン良質見本帳の目次

Webデザイン良質見本帳の目次

Webデザイン良質見本帳の目次

まさに「良質」の「見本帳」でした！
インスピレーションが刺激される良質のWebサイトが満載で、優れた実例をみることで、これから制作するWebサイトに必ず役立ちます。

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス