いま流行のWEB制作ルール＆テクニック総学習

定価 1,980円
（本体 1,800円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入
- Amazon
- ヨドバシ.com

発売日	：2008-03-18
仕様	：A4変／144P
ISBN	：978-4-8443-5975-3

デザインルールやレイアウト、CSSなどWeb制作に必要な知識・技術を集約した1冊です。いま主流となっている内容を中心に構成していますので、これからWeb制作を学ぶ初心者の方はもちろん、さらなるステップアップや知識の再確認を行いたい中・上級者の方にも最適な内容です。

→ダウンロードはこちら

1章　WEBデザイン徹底復習

Webデザイン総論――デザインの基礎からトレンドまで
Webレイアウト――HTML／CSSとFlashで実現するレイアウト
Webデザイン配色の基礎とコツ
ユーザビリティ・アクセシビリティの基礎と考え方
グラフィック・写真撮影のポイントとコツ
Webサイトの企画・プロデュース
column　抜き打ち小テスト
ワンポイントコラム01

2章　WEBレイアウトのネタ帖　第一部

CIを意識したステーショナリーとしてのWebデザイン
CSSを使って、写真に文章を重ねたレイアウト
和のイメージをもつ形をモチーフにしたレイアウト
JavaScriptによる動きを生かしたレイアウト
Webアプリケーションのインターフェイス
グリッドを基本構造としたデザイン
半透明なオブジェクトを活用したデザイン
日本語の特性を生かしたレイアウト
ワンポイントコラム02

3章　表現力を向上させるWEBデザインセオリー

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

ワンポイントコラム03

4章
WEBレイアウトのネタ帖　第二部

リズムを感じさせるレイアウト
全体像と詳細を同じページで確認できるレイアウト
白と黒のコントラストを生かしたレイアウト
写真のぶれを生かしたレイアウト
明るいポップアート風のレイアウト
3次元的な配置と質感を生かしたレイアウト
関心のある部分にピントを合わせるレイアウト
背景が刻々と変化するレイアウト