MdNCORPORATION

Webデザインの見本帳 実例で学ぶ最新のスタイルとセオリー

Webデザインの見本帳 実例で学ぶ最新のスタイルとセオリー

境 祐司 監修/森本 友理 著/ラナデザインアソシエイツ 著/福岡 陽 著/ラナエクストラクティブ 著/宇野 雄 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2015-09-25
仕様 B5判/160P
ISBN 978-4-8443-6526-6
本書は、優れたWebサイトの最新実例を約300点集め、それぞれの特長や考え方をていねいに解説したWebデザインの見本帳です。Web制作の現場で活躍している実力派の著者陣が「テキスト・タイポグラフィ」、「レイアウト」、「色と余白」、「グラフィック・写真」、「最新のWebページデザイン」の5つのテーマをもとにWebサイトを厳選。レイアウトの考え方、配色などの視覚伝達デザイン的な観点とマルチデバイス対応などの技術的な観点を織り交ぜながら、掘り下げて解説しています。 技術に依存しているWebメディアは、時代の趨勢でデザイン手法も制作ツールも、簡単に置き換わってしまう変化の速い世界。そうした中で、時代を超えても変わらないものと、流行り廃りのあるものを見極めていくことが重要です。本書では最新Webサイトの好例を注視すべきポイントとともに解説していますので、Web制作にかかわる方が最良のデザインやレイアウト、視覚表現のアイデアを考える過程で、本書の内容を通じてイマジネーションを働かせることができるはずです。魅力的なWebサイトをつくるために役立つ実践的な見本帳として活用いただけます。

目次


■Introduction Webページデザインの基礎知識
Webページの構成要素
Webページのレイアウトデザイン
Webのテキストとフォントの特性
Webで扱う画像の種類と特性
デスクトップページの特長
モバイルページの特長
レスポンシブWebデザインの考え方
読ませるページデザインのセオリー
魅せるページデザインのセオリー
使わせるページデザインのセオリー
COLUMN マルチデバイス時代のWebデザインの潮流

■Chapter1 テキストやタイポグラフィで魅せるデザイン
01 Webフォントを効果的に用いたページ
02 複数の書体を組み合わせたデザイン
03 長文主体でも圧迫感のないデザイン
04 文章を魅力的にみせる装飾を使ったページ
05 色分けで読みやすさと見栄えを両立したページ
06 装飾を抑えたテキストコンテンツ中心のデザイン
07 キャプションを効果的に使ったデザイン
08 グラフィックと一体化したタイポグラフィ
09 文字の大きさの強弱で魅せるデザイン
10 手書き文字を使った独自性のある表現
11 丸文字を使った親しみやすいデザイン
12 日本語の縦書きで表現したページデザイン
COLUMN 日本語Webフォントの可能性

■Chapter2 情報の配置やレイアウトで魅せるデザイン
01 見やすくオーソドックスなカラムレイアウト
02 水平・垂直にタイルを並べたページ
03 秩序や一貫性を重視したグリッドレイアウト
04 複数のセクションで区切られたレイアウト
05 領域を細かく分割したブロックレイアウト
06 枠線や区切り線を効果的に用いたページ
07 ユーザビリティに優れた独創的なナビゲーション
08 ナビゲーションを隠したコンテンツ中心のページ
09 シンメトリー効果で新規性のあるページ
10 要素を回転させるインパクトのあるページ
11 グリッドから逸脱したフリーレイアウト
12 新聞のような段組を採用したページ
13 雑誌のようなメタファを採用したページ
COLUMN ワンカラムのページが増えてきた理由

■Chapter3 配色や余白で魅せるデザイン
01 明度の差でメリハリを出しているページ
02 ホワイトスペースを活かしたデザイン
03 単色で構成したミニマルなページデザイン
04 有彩色で構成されている華やかなページ
05 無彩色で構成されたスタイリッシュなページ
06 子どもが喜ぶにぎやかな色調
07 若い女性が可愛いと感じる色調
08 グラデーションで重量感を表現する色調
09 金箔色や蛍光色のような表現をしているページ
COLUMN フラットデザインの失敗例・成功例

■Chapter4 グラフィックや写真で魅せるデザイン
01 自然の写真で優しいイメージを表現したページ
02 人物の写真で躍動感を演出しているページ
03 スライドショーで魅力を伝えているページ
04 写真やイラストを使った物語性のあるページ
05 イラストレーションだけで構成したページ
06 インフォグラフィックスが中心のページ
07 ピクトグラムで直感的な情報提供を実現
08 ビジュアル要素で高級感を演出したページ
09 1つの大きな写真だけで構成しているページ
10 乱雑な印象を与えないグラフィックパターン
11 幾何学図形を取り入れたページデザイン
12 シズル感のある写真で食欲をそそるページ
13 シンボルマークやロゴを主体にしたページ
14 キャラクターを採用した親しみやすいページ
15 フォトコラージュで構成されたデザイン
16 テクスチャを活用した目を引くページ
COLUMN モバイルでは必須となった「SVG」の表現力

■Chapter5 最新のWebページデザインの事例
01 フラットデザインが際立つ美しいページ
02 アプリのような使い心地を実現したWebサイト
03 多彩なレイアウトのシングルロングページ
04 視差効果(パララックス)を駆使したページ
05 スクロールするとアニメーションするページ
06 背景全面にビデオを埋め込んだページ
07 デバイスに応じてメニューを変えているサイト
08 Canvasを使ったダイナミックなページ
09 SVGを利用した印象的なWebサイト
10 3D表現を駆使した最先端のWebサイト
COLUMN これからのWebレイアウト

Index(索引)
執筆者プロフィール

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊