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

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

本のキャプチャ

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

本のキャプチャ

Webデザインの見本帳
実例で学ぶ最新のスタイルとセオリー
[Amazonでみる]
[楽天でみる]

監修:
境 祐司
著者:
森本 友理、ラナデザインアソシエイツ、福岡 陽、ラナエクストラクティブ、宇野 雄
出版社:
MdNコーポレーション
発売日:
2015/9/25

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

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

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

  1. Introduction: Webページデザインの基礎知識
    Webページの構成要素
    Webページのレイアウトデザイン
    Webのテキストとフォントの特性
    Webで扱う画像の種類と特性
    デスクトップページの特長
    モバイルページの特長
    レスポンシブWebデザインの考え方
    読ませるページデザインのセオリー
    魅せるページデザインのセオリー
    使わせるページデザインのセオリー
    コラム: マルチデバイス時代のWebデザインの潮流
  2. テキストやタイポグラフィで魅せるデザイン
    Webフォントを効果的に用いたページ
    複数の書体を組み合わせたデザイン
    長文主体でも圧迫感のないデザイン
    文章を魅力的にみせる装飾を使ったページ
    色分けで読みやすさと見栄えを両立したページ
    装飾を抑えたテキストコンテンツ中心のデザイン
    キャプションを効果的に使ったデザイン
    グラフィックと一体化したタイポグラフィ
    文字の大きさの強弱で魅せるデザイン
    手書き文字を使った独自性のある表現
    丸文字を使った親しみやすいデザイン
    日本語の縦書きで表現したページデザイン
    コラム: 日本語Webフォントの可能性
  3. 情報の配置やレイアウトで魅せるデザイン
    見やすくオーソドックスなカラムレイアウト
    水平・垂直にタイルを並べたページ
    秩序や一貫性を重視したグリッドレイアウト
    複数のセクションで区切られたレイアウト
    領域を細かく分割したブロックレイアウト
    枠線や区切り線を効果的に用いたページ
    ユーザビリティに優れた独創的なナビゲーション
    ナビゲーションを隠したコンテンツ中心のページ
    シンメトリー効果で新規性のあるページ
    要素を回転させるインパクトのあるページ
    グリッドから逸脱したフリーレイアウト
    新聞のような段組を採用したページ
    雑誌のようなメタファを採用したページ
    コラム: ワンカラムのページが増えてきた理由
  4. 配色や余白で魅せるデザイン
    明度の差でメリハリを出しているページ
    ホワイトスペースを活かしたデザイン
    単色で構成したミニマルなページデザイン
    有彩色で構成されている華やかなページ
    無彩色で構成されたスタイリッシュなページ
    子どもが喜ぶにぎやかな色調
    若い女性が可愛いと感じる色調
    グラデーションで重量感を表現する色調
    金箔色や蛍光色のような表現をしているページ
    コラム: フラットデザインの失敗例・成功例
  5. グラフィックや写真で魅せるデザイン
    自然の写真で優しいイメージを表現したページ
    人物の写真で躍動感を演出しているページ
    スライドショーで魅力を伝えているページ
    写真やイラストを使った物語性のあるページ
    イラストレーションだけで構成したページ
    インフォグラフィックスが中心のページ
    ピクトグラムで直感的な情報提供を実現
    ビジュアル要素で高級感を演出したページ
    1つの大きな写真だけで構成しているページ
    乱雑な印象を与えないグラフィックパターン
    幾何学図形を取り入れたページデザイン
    シズル感のある写真で食欲をそそるページ
    シンボルマークやロゴを主体にしたページ
    キャラクターを採用した親しみやすいページ
    フォトコラージュで構成されたデザイン
    テクスチャを活用した目を引くページ
    コラム: モバイルでは必須となった「SVG」の表現力
  6. 最新のWebページデザインの事例
    フラットデザインが際立つ美しいページ
    アプリのような使い心地を実現したWebサイト
    多彩なレイアウトのシングルロングページ
    視差効果(パララックス)を駆使したページ
    スクロールするとアニメーションするページ
    背景全面にビデオを埋め込んだページ
    デバイスに応じてメニューを変えているサイト
    Canvasを使ったダイナミックなページ
    SVGを利用した印象的なWebサイト
    3D表現を駆使した最先端のWebサイト
    コラム: これからのWebレイアウト

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

本のキャプチャ

Webデザインの見本帳
実例で学ぶ最新のスタイルとセオリー
[Amazonでみる]
[楽天でみる]

監修:
境 祐司
著者:
森本 友理、ラナデザインアソシエイツ、福岡 陽、ラナエクストラクティブ、宇野 雄
出版社:
MdNコーポレーション
発売日:
2015/9/25

献本の御礼

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

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

sponsors

top of page

©2018 coliss