ウェブデザイン&レイアウトの見本帳の内容紹介&書評

8226viewssyncsync

このエントリーをはてなブックマークに追加
ウェブデザイン&レイアウトの見本帳

まえがき

300点以上のウェブページをデザイン・テーマ別にカテゴリ分け。
ウェブのシステムや技術的な事ではなく、あくまでもページレイアウトに焦点

第一章

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

ディスプレイサイズ
==================================
デザインサイズは実ディスプレイサイズより40pxは少なめに→

ブラウザ領域とのかぶりを防ぐため

デザイン要素
==================================
基本パターン L字型、逆L字型、両サイド型に大別できる。それぞれに長所、

短所があるので、内容やターゲットに合わせる。

グリッドシステム
===================================
効力を発揮するのは、大量の情報を見やすく表示するページ。効率的に素早く

作成できるのがメリット

レイアウト画面の分割
===================================
黄金分割、1:1.41比で分割すると美的にもバランス的にもよい。

文字組み
===================================
ターゲットによって変える。若者向けなら、本文サイズ、字間、行間は小さめ

に。

余白の活用
===================================
余白には、画面に余裕や豊かなイメージを与える、要素と要素を分離して見せ

る、メインビジュアルを支える、文字や写真を目立たせる等の機能がある。

他、色彩についての基本

第二章

タイトルページのレイアウト

写真レイアウト、メニューを配置する、多彩な情報を見せる等をテーマにした

事例

第三章

コンテンツページのレイアウト

サイトの中身のコンテンツページを縦長、丸形、ショッピングサイト別に紹介

第四章

写真やイラストを活用したデザイン

写真を全面配置する時の注意点
===================================
被写体だけでなく「トーン」に注意

タイトルの書体や色にも気を配る。

ズームアップ
===================================
被写体そのものがフォーカスされ、物にグッと注目を集める効果もある。

余白を取る
===================================
余白を取って写真を配置する事で、導線の効果

切り抜き写真
===================================
被写体そのものを際立たせる効果

背景で世界観を盛り上げる
===================================
DTPでも使われる手法。自然素材のテクスチャでページに温かみや素朴な雰囲気

第五章

さまざまなレイアウトの工夫

グリッドシステムの応用でメリハリ
===================================
いくつかのコマを統合して大きなコマを作り、アクセントを付けページにメリハリをつける。

動きと賑やかさを演出するレイアウト
===================================
フリーレイアウトで、賑やかさやダイナミックなイメージ。若者向け。

ジグザクの配置でページにリズムを
===================================
左右に写真を散らす事で、視線を運ばせページ内の情報をまんべんなく見せ

る。リズムやテンポも生む。

安定感と緊張感を生む三角形の構図
===================================
正三角形の構図は重心が下にくるため安定感や調和を。

重力に逆らった逆三角形は緊張感や不安定からくるメリハリを感じさせる。

第六章

デザインの工夫と目を惹く配色

図解、グラフ、日本地図、アクセスマップ、Q&A、カレンダーのサンプル集。

実用的かも。

関連まとめ

本のまとめカテゴリー


コメントを書く