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

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

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

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

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

• Webデザイン良質見本帳（Kindle版）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0. Webデザインの基礎知識

   Webデザインの基礎知識

   Webページの構成とワークフロー

   Webページに入るデザインパーツ

   Webサイトで扱う画像

   Webデザインとタイポグラフィ

   色彩の基礎知識

   配色の基礎知識

1. 印象から考えるデザイン

   キュートで可愛いデザイン

   ポップで元気あふれるデザイン

   エレガントで気品に満ちたデザイン

   ナチュラルで優しいデザイン

   クールで先進的なデザイン

   信頼感があるデザイン

   ヴィンテージ風で憧れるデザイン

   クラシックで格調高いデザイン

   和を感じるデザイン

   透明感のあるデザイン

   子供向けのデザイン

   女性らしいデザイン

   男性らしいデザイン

   高級感があるデザイン

   食べ物が美味しそうに見えるデザイン

   季節感を感じるデザイン

2. 配色から考えるデザイン

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

   黄を基調とした配色

   橙を基調とした配色

   赤を基調とした配色

   ピンクを基調とした配色

   紫を基調とした配色

   青を基調とした配色

   緑を基調とした配色

   茶を基調とした配色

   白やグレーを基調とした配色

   黒を基調とした配色

   トーンを合わせた配色

3. 業種・ジャンル別から考えるデザイン

   レストラン・カフェサイト

   医療・病院サイト

   ファッションサイト

   美容室・エステサイト

   アートフェス・イベントサイト

   音楽サイト

   アニメ・ゲームサイト

   士業サイト

   学校・幼稚園サイト

   ポートフォリオサイト

   ニュース・ポータルサイト

   ECサイト

   コーポーレートサイト

   スポーツ・フィットネスサイト

   ランディングページ

4. レイアウトや構図から考えるデザイン

   グリッドレイアウト

   カード・タイル型のレイアウト

   1カラムのレイアウト

   2カラムのレイアウト

   カラムを組み合わせたレイアウト

   フルスクリーンレイアウト

   グリッドから外したレイアウト

   フリーレイアウト

5. 素材・フォント・プログラムを使ったデザイン

   写真をメインに使ったデザイン

   切り抜き写真を使ったデザイン

   テクスチャを使ったデザイン

   飾りパーツを使ったデザイン

   イラストを使った親しみやすいデザイン

   タイポグラフィを使ったデザイン

   動画を効果的に使ったデザイン

   動きを持たせたデザイン

   インフォグラフィックで伝えるデザイン

6. トレンドのデザイン

   レスポンシブWebデザイン

   Webフォント

   スプリットスクリーン

   フラットデザインとマテリアルデザイン

   マイクロ・インタラクション

   ヒーローヘッダー

   パララックス

   デュオトーン

   縦書きのレイアウト

7. パーツ別デザイン

   ヘッダー

   グローバルナビゲーション

   見出し

   ボタン・ページトップリンク

   テーブル

   フォーム

   フッター

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

献本の御礼

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

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

• お問い合わせ｜コリス