Webデザインを真剣に学びたい人にオススメできる、Webデザインの作り方やアイデアがぎっしり詰まった良書

「Webデザインは見て、学ぶ」と言われますが、単に見るだけでは意味がありません。
400以上の魅力的なWebサイトのレイアウト、構図、カラースキーム、写真や文字の使い方、プログラム、ページを構成している要素を分解し、デザインのさまざまな角度から詳しく解説されたWebデザイン良質見本帳を紹介します。

Webデザインの視点を広げるために、デザインのアイデアを見つけるために、そのデザインの仕組みや作り方が分かる解説書としてオススメです。

本のキャプチャ

本書はWebディレクター・デザイナーだけでなく、Web制作に携わるすべての人に役立つ一冊です。目的を絞って調べるのはもちろん、パラパラ眺めるだけでも、非常に有意義な時間を過ごせます。

本のキャプチャ

Webデザイン良質見本帳
[Amazonでみる]
[楽天でみる]

著:
久保田 涼子
出版社:
SBクリエイティブ
発売日:
2017/6/16

Kindle版は、お値段が少しお得です。

そんな紙面をキャプチャで少しだけ紹介します。

本のキャプチャ

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

本のキャプチャ

アイデアはデザインの印象、カラーや配色、業種やジャンル、レイアウトや構図、素材やフォント、最近のトレンドごとにまとめられており、自分が求めるものがすぐに見つかります。パラパラ見るだけでも、良い刺激がたくさん得られます。

本のキャプチャ

パーツごとにも今時のデザインがまとめられているので、助かりますね。

それでは、本書の中身を見てみましょう。

本のキャプチャ

本書はフルカラーで、大きい紙面たっぷりに詳しい解説と画像やイラストが詰まっています。0章では、紹介されているアイデアを補完する解説的な役割です。

本のキャプチャ

補完的な役割と言いましたが、かなり大切なことがコンパクトにまとまっており、デザインの知識を学ぶためにも目を通しておいた方がよいでしょう。

本のキャプチャ

例えばカラーと配色では、実践に繋がる知識が具体的に解説されています。

本のキャプチャ

1-7章はアイデア集、1章ではキュートや高級感といったデザインの印象をつくりだすレイアウト・カラー・フォント・パーツなど分析し、そういったイメージをつくりだす要素は何か、どうすればつくれるのか解説されています。

本のキャプチャ

クールで先進的なデザインの作り方。

本のキャプチャ

和を感じるデザインの作り方。

本のキャプチャ

透明感のあるデザインの作り方。

本のキャプチャ

女性らしいデザインの作り方。

本のキャプチャ

男性らしいデザインの作り方。

本のキャプチャ

食べ物が美味しそうに見えるデザインの作り方。

本のキャプチャ

2章は色の持つ印象、色の組み合わせ方、調和の取り方といったカラーと配色の観点からアイデアがまとめられています。
カラーを考える際に、ブランドカラーははずせません。ベースとなるカラーを決め、メインカラー、アクセントカラーを決めることからプロジェクトはスタートします。

本のキャプチャ

色のアイデアでは青をはじめ、黄・橙・赤・ピンク・紫・緑・茶・白やグレー・黒など、各色ごとに詳しく解説されています。

本のキャプチャ

また特定の色にこだわるのではなく、トーンを使った配色のテクニックなどもあります。

本のキャプチャ

3章は業種やジャンル別に、情報の設計方法、サイトの機能、カラーやレイアウトの傾向を多角的に分析されています。プロジェクトが始まる時点でジャンルは決まっていはずなので、実際につくる際には非常に役立つ実践的な内容になっています。

本のキャプチャ

ランディングページのようにページの役割的な面からも詳しく分析されています。

本のキャプチャ

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

本のキャプチャ

グリッドから外したレイアウト、フルスクリーンをつかったレイアウト、グリッドにとらわれずに自由に配置されたレイアウトなども最近増えてきました。

本のキャプチャ

5章では写真、イラスト、フォントといった素材をつかったサイトの見せ方です。

本のキャプチャ

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

本のキャプチャ

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

本のキャプチャ

マイクロインタラクション、Webフォント、縦書きレイアウト、デュオトーンなど、さまざまなアイデアが解説されています。

本のキャプチャ

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

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

  1. Webデザインの基礎知識
    Webデザインの基礎知識
    Webページの構成とワークフロー
    Webページに入るデザインパーツ
    Webサイトで扱う画像
    Webデザインとタイポグラフィ
    色彩の基礎知識
    配色の基礎知識
  2. 印象から考えるデザイン
    キュートで可愛いデザイン
    ポップで元気あふれるデザイン
    エレガントで気品に満ちたデザイン
    ナチュラルで優しいデザイン
    クールで先進的なデザイン
    信頼感があるデザイン
    ヴィンテージ風で憧れるデザイン
    クラシックで格調高いデザイン
    和を感じるデザイン
    透明感のあるデザイン
    子供向けのデザイン
    女性らしいデザイン
    男性らしいデザイン
    高級感があるデザイン
    食べ物が美味しそうに見えるデザイン
    季節感を感じるデザイン
  3. 配色から考えるデザイン
    ロゴやブランドカラーから考える配色
    黄を基調とした配色
    橙を基調とした配色
    赤を基調とした配色
    ピンクを基調とした配色
    紫を基調とした配色
    青を基調とした配色
    緑を基調とした配色
    茶を基調とした配色
    白やグレーを基調とした配色
    黒を基調とした配色
    トーンを合わせた配色
  4. 業種・ジャンル別から考えるデザイン
    レストラン・カフェサイト
    医療・病院サイト
    ファッションサイト
    美容室・エステサイト
    アートフェス・イベントサイト
    音楽サイト
    アニメ・ゲームサイト
    士業サイト
    学校・幼稚園サイト
    ポートフォリオサイト
    ニュース・ポータルサイト
    ECサイト
    コーポーレートサイト
    スポーツ・フィットネスサイト
    ランディングページ
  5. レイアウトや構図から考えるデザイン
    グリッドレイアウト
    カード・タイル型のレイアウト
    1カラムのレイアウト
    2カラムのレイアウト
    カラムを組み合わせたレイアウト
    フルスクリーンレイアウト
    グリッドから外したレイアウト
    フリーレイアウト
  6. 素材・フォント・プログラムを使ったデザイン
    写真をメインに使ったデザイン
    切り抜き写真を使ったデザイン
    テクスチャを使ったデザイン
    飾りパーツを使ったデザイン
    イラストを使った親しみやすいデザイン
    タイポグラフィを使ったデザイン
    動画を効果的に使ったデザイン
    動きを持たせたデザイン
    インフォグラフィックで伝えるデザイン
  7. トレンドのデザイン
    レスポンシブWebデザイン
    Webフォント
    スプリットスクリーン
    フラットデザインとマテリアルデザイン
    マイクロ・インタラクション
    ヒーローヘッダー
    パララックス
    デュオトーン
    縦書きのレイアウト
  8. パーツ別デザイン
    ヘッダー
    グローバルナビゲーション
    見出し
    ボタン・ページトップリンク
    テーブル
    フォーム
    フッター

本書はオールカラーで、内容がぎっしり詰まっているので、書籍版がおすすめです。電子版、特に小さいスクリーンはかなりつらいと思います。

本のキャプチャ

Webデザイン良質見本帳
[Amazonでみる]
[楽天でみる]

著:
久保田 涼子
出版社:
SBクリエイティブ
発売日:
2017/6/16

献本の御礼

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

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

top of page

©2017 coliss