日本語のWebサイトに適したデザインの考え方やテクニックをしっかり学べるオススメの本 -Webデザインの見本帳

Webデザインのセンスやスキルを磨くためには、Webサイトを数多く見ること。
デザインのセオリーを身につけ、日本語のWebサイトに適したレイアウト、配色、タイポグラフィ、グラフィックの使い方など、自分に必要なデザインの考え方やテクニックをしっかり学べることができるオススメの本を紹介します。

本書は「見本帳」の名の通りにWebデザインの見本が掲載されているだけではありません。「テキスト・タイポグラフィ」、「レイアウト」、「色と余白」、「グラフィック・写真」、「最新のWebページデザイン」の5つのテーマごとにサイトが分類されており、レイアウトの構造、配色参考用のカラーチップ、視覚表現のアイデア、注視すべきポイントなど、実務に役立つ知識も豊富に掲載されています。

Kindle版は、お値段がかなりお得です。

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

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書はIntroductionと5つの章で構成されており、最初のIntroductionではWebページデザインの基礎知識、構成要素、レイアウトの特性を学ぶことができます。

ページレイアウトの要素・構成、デスクトップ・モバイル用ページの特長など、現在主流のデザインをおさえておきましょう。

基礎的な知識だけでなく、実践的なセオリーについても掘り下げられています。

残りの1-5章が本編のサイト見本帳です。各章ごとにメインテーマが設けられ、さらに細分化されたデザインテーマごとにまとめられています。

目次にある見出しの文言だけで、いいアイデアになりますね。

各デザインテーマは見開きページでまとめれており、テーマに即したWebサイトの実例が4,5点掲載されています。

各サイトの注目すべきポイントが、詳しく解説されているのが嬉しいですね。

1章は文字を効果的につかったデザイン、2章は配置・レイアウトで魅せるデザイン。
グリッド・カラム・タイル・カードのバリエーションだけでなく、枠線や区切り線の使い方など面白いアイデアが満載です。

雑誌や新聞のような紙のメタファを採用するのも面白いですね。

3章は配色・余白で魅せるデザイン。
カラーがポイントとなるテーマでは、配色参考用のカラーチップも掲載されています。

レイアウトがポイントとなるテーマでは、その構造を理解しながら、アイデアを膨らませることができます。

4章はグラフィック・写真で魅せるデザイン。
写真、イラスト、インフォグラフィック、ピクトグラムといったビジュアル要素もさまざまな使い方がありますが、テクスチャとかも最近では使い方が進化しています。

最後の5章は最新のWebページデザインの事例です。モバイルファーストが増え、コンテンツは1ページにまとめられ、全体的にシンプルなデザインが増えてきています。

各章の末にあるコラムも見逃せません。

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

0. Introduction: Webページデザインの基礎知識

   Webページの構成要素

   Webページのレイアウトデザイン

   Webのテキストとフォントの特性

   Webで扱う画像の種類と特性

   デスクトップページの特長

   モバイルページの特長

   レスポンシブWebデザインの考え方

   読ませるページデザインのセオリー

   魅せるページデザインのセオリー

   使わせるページデザインのセオリー

   コラム: マルチデバイス時代のWebデザインの潮流

1. テキストやタイポグラフィで魅せるデザイン

   Webフォントを効果的に用いたページ

   複数の書体を組み合わせたデザイン

   長文主体でも圧迫感のないデザイン

   文章を魅力的にみせる装飾を使ったページ

   色分けで読みやすさと見栄えを両立したページ

   装飾を抑えたテキストコンテンツ中心のデザイン

   キャプションを効果的に使ったデザイン

   グラフィックと一体化したタイポグラフィ

   文字の大きさの強弱で魅せるデザイン

   手書き文字を使った独自性のある表現

   丸文字を使った親しみやすいデザイン

   日本語の縦書きで表現したページデザイン

   コラム: 日本語Webフォントの可能性

2. 情報の配置やレイアウトで魅せるデザイン

   見やすくオーソドックスなカラムレイアウト

   水平・垂直にタイルを並べたページ

   秩序や一貫性を重視したグリッドレイアウト

   複数のセクションで区切られたレイアウト

   領域を細かく分割したブロックレイアウト

   枠線や区切り線を効果的に用いたページ

   ユーザビリティに優れた独創的なナビゲーション

   ナビゲーションを隠したコンテンツ中心のページ

   シンメトリー効果で新規性のあるページ

   要素を回転させるインパクトのあるページ

   グリッドから逸脱したフリーレイアウト

   新聞のような段組を採用したページ

   雑誌のようなメタファを採用したページ

   コラム: ワンカラムのページが増えてきた理由

3. 配色や余白で魅せるデザイン

   明度の差でメリハリを出しているページ

   ホワイトスペースを活かしたデザイン

   単色で構成したミニマルなページデザイン

   有彩色で構成されている華やかなページ

   無彩色で構成されたスタイリッシュなページ

   子どもが喜ぶにぎやかな色調

   若い女性が可愛いと感じる色調

   グラデーションで重量感を表現する色調

   金箔色や蛍光色のような表現をしているページ

   コラム: フラットデザインの失敗例・成功例

4. グラフィックや写真で魅せるデザイン

   自然の写真で優しいイメージを表現したページ

   人物の写真で躍動感を演出しているページ

   スライドショーで魅力を伝えているページ

   写真やイラストを使った物語性のあるページ

   イラストレーションだけで構成したページ

   インフォグラフィックスが中心のページ

   ピクトグラムで直感的な情報提供を実現

   ビジュアル要素で高級感を演出したページ

   1つの大きな写真だけで構成しているページ

   乱雑な印象を与えないグラフィックパターン

   幾何学図形を取り入れたページデザイン

   シズル感のある写真で食欲をそそるページ

   シンボルマークやロゴを主体にしたページ

   キャラクターを採用した親しみやすいページ

   フォトコラージュで構成されたデザイン

   テクスチャを活用した目を引くページ

   コラム: モバイルでは必須となった「SVG」の表現力

5. 最新のWebページデザインの事例

   フラットデザインが際立つ美しいページ

   アプリのような使い心地を実現したWebサイト

   多彩なレイアウトのシングルロングページ

   視差効果（パララックス）を駆使したページ

   スクロールするとアニメーションするページ

   背景全面にビデオを埋め込んだページ

   デバイスに応じてメニューを変えているサイト

   Canvasを使ったダイナミックなページ

   SVGを利用した印象的なWebサイト

   3D表現を駆使した最先端のWebサイト

   コラム: これからのWebレイアウト

海外のデザインもいい刺激になりますが、日本人をターゲットにした日本語のWebサイトを制作する時の参考になるのは日本のデザインですね。

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス