スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

【書評】ウェブデザイン見本帳 - 実例で学ぶWebのためのレイアウト基礎

ウェブデザイン見本帳

ずいぶん前にWebデザインの参考書として購入した『ウェブデザイン見本帳 - 実例で学ぶWebのためのレイアウト基礎』ですが、内容が有用でよかったので、いまさらながら簡単な書籍内容の紹介と感想。

目次

目次

Part1 ウェブデザインの基礎知識

  • ウェブページに必要な要素
  • 配色について
  • レイアウトの決定
  • フォーマット化
  • Column:視認性カラーチャート

Part2 タイトルページのデザイン

  • 強い印象を与えるタイトルページ
  • ビジュアルを活かしたタイトルページ
  • 白地を活かしたタイトルページ
  • 象徴的なビジュアルで際立たせる
  • たくさんの要素でにぎやかなページ
  • 楽しく明るい雰囲気の演出
  • ハイクオリティな世界観の演出
  • 和のイメージの演出
  • 余白を使って心地よいページに
  • 余白で流れや動きをつける
  • 商品を印象的に見せる
  • 人物を印象的に見せる
  • 文字をデザインの主役に
  • Column:ページデザインの基本1

Part3 テーマと目的を持ったデザイン

  • 自然に視線を誘導するレイアウト
  • 対比の構図で印象付ける
  • 「I字型」の軸を強調する構成
  • 3カラムのスマートな構成
  • 「逆L字型」の軸を強調する構成
  • 水平方向の軸を強調する構成
  • 地色使いでページを分割
  • さまざまなページの分割
  • メイン写真と文字の構成
  • バナーやボックスでリズムを作る
  • ケイ線による画面分割
  • ケイ線を活用したデザイン
  • 横ケイを使って情報を整理する
  • 太いケイ線でアクセントをつける
  • 横長のバナーですっきりと整理する
  • 軸を揃えてすっきり見せる
  • 大量の要素をすっきりとまとめる
  • Column:ページデザインの基本2

Part4 写真を活用したデザイン

  • 雰囲気を壊さない色文字
  • 上品にまとめる白ヌキ文字
  • 角版で写真を引き立たせる
  • 切り抜き写真で動きを演出
  • 切り抜き写真を整然と並べる
  • 角版の写真をすっきりとまとめる
  • グリッドを使ったグラフィカルな演出
  • 大量の写真をバランスよく配置する
  • 正方形のパターンで整理する
  • 画像の配置でユニークな効果を生む
  • Column:ハードなイメージの配色

Part5 目を引く配色のデザイン

  • 無彩色と暖色の2色配色
  • リッチさや力強さを感じさせる黒地
  • 赤をポイントにした力強い配色
  • 楽しく見せる多色配色
  • やさしさや洗練を感じる淡い色使い
  • 寒色でまとめたデザイン
  • 暖色でまとめたデザイン
  • 背景色の効果的な使い方
  • ナチュラルでエコなイメージの配色
  • 料理をおいしく見せる色使い
  • クオリティ感のある色数を絞った配色
  • 文字に色を使ったデザイン
  • Column:ソフトなイメージの配色

Part6 さまざまなデザインの工夫

  • リアルな背景で見せる
  • 背景の仕掛けを工夫する
  • イメージをかたちにするイラストの活用
  • 手書き文字でゆとりや親しみさすさを
  • 書体や文字の大小で印象付ける
  • ケイ線と組み合わせてメリハリを
  • たくさんの文字量を見やすくする工夫
  • 情報をわかりやすく図解する
  • 日本地図を素材する
  • 情報をチャートで読ませる
  • フロアガイドのさまざまなデザイン
  • 印象に残るブログデザイン
  • 機能的で見栄えのする地図のデザイン

書籍概要

概要

Part1はレイアウトや配色、フォーマットに関する解説で、Webデザインの基礎的な部分がおおまかに学べます。基本的な内容のため、分かりやすく書かれており、初心者の人にとってはためになる内容です。

Part2からPart6(=最後)までが本のタイトルどおりの内容になります。

見開き1ページずつで、各ページタイトルにあうWebサイトが、ちょっとした解説とサイトのスクリーンショットとともに4~5サイト程度紹介されていきます。取り上げられているサイトが、全て日本語のサイトなのが大きな特徴です。

Part2からPart6まで、ページのレイアウトは一貫しているので見やすいです。

各パートの間にはコラムがあり、ページデザイン・レイアウトと配色に関する内容が書かれています。各コラムはそれぞれ1ページのみですが、特に初心者にとっては有用な内容です。

書籍一部閲覧

中身閲覧

MdN Interactive - ウェブデザイン見本帳
上記ページには書籍内容の一部がPDFで配布されています。ちょっと見たいという人向け。

本書のよいところとか感想とか

よかったところとか

解説を読み飛ばしてカタログ感覚で見ていくことも出来るので、デザインでちょっと詰まってしまった場合や、まったくデザインの方向性が決まっていない場合に便利です。様々なサイトを横断的にぱらぱらめくって見ていけるのは書籍ならではのメリットと言えます。

配色に着目しているPart5では、ページ上で主に使われているメインカラーパレットがRGBで記述されているので、配色を参考にしたい場合に、このPartが最も便利でした。これはほかのPartでもあったらよかったのに、と感じます。

Webデザインのサンプル集は、Web上に氾濫しているといっても過言ではない状況ですが、多すぎるゆえにかえって迷ってしまうことも多いです。この書籍のようにある程度のテーマに沿って厳選されたWebサイトが紹介されているというのは思っている以上に使いやすいものでした。

見本集みたいなものが欲しい、という人にはうってつけだと思います。

あと、ここからはごく個人的な話ですが、Web制作を複数ある業務のうちのひとつとして片手間でやっている立場として、ユーザー側に「とりあえず何も案がないと作りようがないから、この中からイメージしているものに近いものをいくつか選んでよ」という場合にこういう書籍は便利です。

もちろん、ユーザー側に投げっぱなしにするつもりはありませんが、デザインや色の大まかな方向性を依頼してくる側にもある程度認識してもらうことは必要ですし、そちらのほうが結果としていいものが出来上がることが多いです。

また、「Webデザインは好き勝手に感覚だけで作られているわけではないので、途中でごちゃごちゃ要件変えられて修正したくないし、無駄に時間かかるよ?」という無言の圧力をかける場合に使える手段でもあります。外注じゃないので、お互いにいい加減になりやすいですからね。少しくらいこういうことをしたほうがよい結果が出ます。

そんなわけで、私と似たような立場でWeb制作をしている人にもおすすめです。

ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎
オブスキュアインク

MdN
売り上げランキング : 120794

Amazonで詳しく見る

▼スポンサードリンク

Posted at 2009年08月08日 | 記事URL | 本・書籍 | Trackback(0) | Comment(0) | Top↑
1つ後の記事:シンプルでクールなPSD形式の名刺テンプレートパック
1つ前の記事:商用利用可 軽量・単独で動作するスライドショーを実装するJavaScript『Animated JavaScript Slideshow』














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/334-8c42ad42
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。