WEBサイト制作のテクニックがその場で身につく　WEBデザイン早ワザ大全

--------------------------------------------------
CHAPTER 2
Web制作の悩みどころを瞬時に解決!
表現力を向上させるWEBデザインセオリー78
--------------------------------------------------
[もっとWebサイトを目立たせる]
01 背景色を工夫して写真画像を目立たせる
02 役割の違うナビゲーションのデザインを区別する
03 ロゴに発光したような効果を施して注目させる
04 数字を大きく扱ってテキストを強調する
05 主題と副題を同時に動かさないようにして視点を集中させる
06 色の並び方を工夫して強調具合をコントロールする
07 周辺の余白を十分に取りロゴやタイトルを目立たせる
08 写真画像に載せるタイトル文字を加工してコントラストをつける
09 タイトル画像に明度の高いアウトラインを追加して目立たせる
10 ユーザーの目線に合わせてページをレイアウトする
11 ナビゲーションのデザインを統一してユーザーを統一する
12 疑似クラスとアイコンでリンクの状態をわかりやすく表現する
13 規則に反した処理を行ってアクセントをつける
14 タイトルや本文の文頭一文字を大きく扱って視線を集める
15 白抜き文字を使って色数を増やさずに目立たせる
16 Photoshopのフィルタ・レイヤーをうまく組み合わせて強調する
17 ユーザーの利用状況を踏まえて最適なデザインを構成する
18 要素を傾けることでデザイン性を高めつつ視認性も向上させる
19 写真画像内の被写体にフォーカスを合わせて注目を集める
20 無彩色の利用を控えて全体的に目立たせる
21 ロールオーバーでサムネール画像を拡大して目立たせる
22 ビビッドなアクセントカラーを使って要素を目立たせる
23 カスタムイージングを活用して動きに緩急をつける
24 フォント自体のアウトラインを活用してデザイン性を高める
25 リンクテキストにアローヘッドをつけて目立たせる
26 対象を左右どちらかに寄せて大胆な構図で目立たせる
27 アナログ感を加えてページ内で視線を集める
28 要素にレイヤー感を演出して目立たせる
[デザインにうまくメリハリをつける]
29 グラデーションを薄く入れることで全体を整える
30 テキストスタイルの種類を絞ってまとまりを出す
31 グリッドを意識してデザインを進める
32 横に長い本文を段組みにして整理する
33 錯視を考慮した余白取りでボックスを配置する
34 余白を使って写真画像上に配置したキャッチコピーをうまく見せる
35 画像を大胆に切り抜くことで印象づける
36 見やすいmargin設定をエリア単位で考える
37 マジックナンバーの概念をWebデザインに応用する
38 色の面が並ぶレイアウトをすっきり見せる
39 配色やグルーピング、整列により洗練された表組みを実現する
40 写真画像とタイトルを加工して一体化させる
41 ブラウザサイズを考慮して背景画像を考える
42 情報のまとまりを左揃えのルールで配置して安定感を出す
43 トーンを効果的に使って色をまとめる
44 CSSを使って複数のブラウザでフォームの長さを統一する
45 文中の英数字に欧文フォントを使用し、バランスを整える
46 サイト全体でカラムの数やサイズを統一する
47 黄金比、白銀比を取り入れてWebをデザインする
48 角丸を使って洗練された印象のパーツを作成する
49 背景色(背景画像)を最適化して画面に奥行きを出す
50 固定されたデザインとスクロールするデザインを使い分ける
51 むだな線や囲みをなくしセンスよくまとめる
52 ツリー構造を用いてメニューをわかりやすくまとめる
53 内容に合わせた書体選びで、イメージをより正確に伝える
54 さり気ない背景を敷いて質感をアップさせる
55 クオリティをできるだけ保ちながらFlashに取り込む
56 画像を使わずCSSで見出しや小見出しを見栄えよくする
57 群化でページ上の整理整頓を行う
58 おさまりがわるい写真を反射効果でバランスよく配置する
[Webサイトの細部をキレイに整える]
59 寒色・暖色を使った色分けを行う
60 記事とナビゲーションが混在するブロックで互いを区別する
61 リアルに存在するアイテムをWebの中で再現する
62 配色で視線を誘導する
63 ワンポイント要素を加えて素っ気ないタイトルをおしゃれにする
64 サイトで使うキーカラーを1色にしぼって強調する
65 微妙な色使いで、少ない色数でも特徴ある画面づくりを行う
66 写真の周囲に罫線を入れ写真の印象を強く出す
67 メリハリのある高いジャンプ率で視線を効率的に誘導する
68 画像の輪郭に薄く影をつけ背景とのコントラストを上げる
69 CSSを用いてアクセントの効いた見出し画像を作成する
70 グレーの濃淡で強弱をつける
71 見出しに陰影をつけ、本文領域との立体感の差異でメリハリを出す
72 Flashサイトをデザインするときは動きのわかるデザインにする
73 適度なメリハリで知的なイメージにする
74 英文フォントの使い方を考えてレイアウトをする
75 素材の大きさやトリミングでページ上のイラストや写真を目立たせる
76 フォントの種類でメリハリを出す
77 コントラストを使った写真加工でメリハリをつける
78 写真がページの背景色で欠ける場合は枠線で区別する

---------------------------------------------------
CHAPTER 4
クリエイターなら押さえておきたい
WEBデザイン表現を身につける
---------------------------------------------------
01 サムネール画像をアニメーション風に拡大
02 オンマウスでテーブルのセルをハイライト
03 マウスの動きに合わせて拡大・縮小するメニュー
04 クリックでスライド表示する本文コンテンツ
05 ランダムな文字列から一定の文字へと変化するエフェクト
06 光沢感のあるページのデザイン
07 影つきの角丸ボックスを表現
08 グラデーションに重ねるカラムの背景画像
09 スライド式でコンテンツを見せるメニュー
10 マウスホイールを活用したインターフェイス
11 本をめくるようなインターフェイス
12 手書きで文字が書かれていくムービー
13 マウスカーソルを合わせると全体像が見えるサムネールリスト
14 コンテンツの折りたたみアニメーション
15 サイドバーのように使えるインターフェイス
16 ブラウザからはみ出すサイズのデザイン領域
17 バックグラウンドで動画を流すデザイン
18 3Dでダイナミックに展開するメニュー
19 手づくり感のあるクラフトワーク
20 ボタンひとつでデザインを変更できるサイト
21 拡大・縮小しても崩れないガジェットのような表現
22 立体的に回転するメニューのデザイン
23 ハンドライティング表現のデザイン
24 Webページの上にさまざまなデータを表示
25 ランダムに表示する映像ギャラリー
26 人物やモノのシルエットを使った表現
27 画像をブラウザ全面に配置したデザイン
28 オブジェクトを切り抜いたようなデザイン
29 ヘッダートップに搭載するオプションコマンド
30 Flashでつくるプルダウンメニュー
31 コンテンツの配置場所を変更・記憶できるレイアウト
32 簡単につくれるアコーディオンメニュー
33 ロールオーバーでフォーカスする表現
34 バーコードのような線から画像を表示
35 モジュール管理のエラスティックレイアウト
36 カーソルに追従するFlashブログパーツ