はじめに

第0章 本書について

• 0-1 本書について
  • ケースバイケースとルール
  • Web デザインはブラウザを使うということ
  • デザインリニューアルの本質
  • 技術だけで勝負しないスキルを身につける
• 0-2 対象となる読者
  • 会社に入って1 〜2 年目のWeb デザイナー
  • DTP やグラフィック関連など紙媒体を主としたデザイナー
  • 会社勤めだが、他の会社に転職を考えているWeb デザイナー
  • 独立を考えているWeb デザイナー

第1章 デザイナーの役割とは？

• 1-1 Webサイトをつくる、はじめの一歩
• 1-2 問題解決に参加しよう

第2章 Web デザインをコミュニケーションと考える

• 2-1 伝える
  • 2-1-1 人が目で見て理解しやすいことが大事
  • 2-1-2「 ユーザーがいまいちばん必要としている情報はなにか？」を考えよう
  • 2-1-3「 なぜこのレイアウトになったの？」に迷わない正しい根拠を持とう
• 2-2 ユーザーとコミュニケーションをとる
  • 2-2-1 紙とWeb の2 つの大きな違い
  • 2-2-2 不動産物件検索を例に見た2 つのダイナミックポイントとユーザー行動の流れ
  • 2-2-3 ユーザーとのコミュニケーション
• 2-3 コミュニケーションをデザインに落とし込む
  • 2-3-1 なぜ紙のデザインをWeb ではそのまま使えないのか？
  • 2-3-2 一覧ページを見る人の心理を考えてみよう
  • 2-3-3 フラットデザインとの向き合い方
  • 2-3-4 企業こそ「顔が見える安心感」をアピールしよう

第3章 人と人とのコミュニケーション

• 3-1 発注者とのコミュニケーション
  • 3-1-1 なにごとにもコミュニケーション　〜発注者とのすり合わせで品質を高める〜
  • 3-1-2 発注者の中に、「答えはない」
  • 3-1-3 発注者の要望を引き出すためのヒアリング術
• 3-2 チーム内でのコミュニケーション
  • 3-2-1 デザイナーとエンジニアのコミュニケーション

第4章 視覚とデザインの実践

• 4-1 ナビゲーションを考える
  • 4-1-1「 押したくなるボタン」とは「主張しないボタン」
• 4-2 文字を考える
  • 4-2-1 Web フォントの活用
  • 4-2-2 画像文字のほうが見栄えがよいというのはRetina で覆された！？
  • 4-2-3 テキストリンクの表現を考える
• 4-3 アイコンを考える
  • 4-3-1 アイコン・ピクトグラムについて
  • 4-3-2 アイコンの配置を考える
• 4-4 視覚に訴える
  • 4-4-1 メインビジュアルを改善する
  • 4-4-2 Flash への偏見とリッチコンテンツへの正しい理解

第5章 ユーザーが使いやすい実装を考える

• 5-1 ユーザーが使いやすいフォームとは？
  • 5-1-1 フォーム入力が好きな人はいない
  • 5-1-2 フォームエラー表示のデザインサンプル
  • 5-1-3 選択しやすいのはどんなインターフェイス？

第6章 スマートフォン編

• 6-1 スマートフォンは本来は電話である
  • 電話番号が画像だったら
  • aタグで電話をかけられる
  • PCではどうするか？
  • 通話ができるという気づきを与える
• 6-2 横1列か横2列か？
• 6-3 設計で注意すること
  • 6-3-1 テキストリンクが密集しすぎている
  • 6-3-2 スマホでのhover は、ヒントがないのでPCよりも気づかれにくい
  • 6-3-3 意外と注意したい、展開リスト（アコーディオン）
  • 6-3-4 狭い領域ならではの表現方法を考える
• 6-4 スマートフォンのことを考えた実装の例
  • 6-4-1 スマホサイトでの製品比較表をどう見せるか？
  • 6-4-2 Web サイトからマップアプリへうまく連携しよう
  • 6-4-3 スマホだって攻めのアピール！

第7章 Web デザイナーこそ技術を幅広く理解しよう

• 7-1 HTML5にデザイナーはどう向き合うか
• 7-2 便利なデータ形式、JSON ってなに？
• 7-3 デザイナーも理解しておきたいAjaxのキホン
• 7-4 現在地から探す
• 7-5 ユーザーの好みを記憶する
• 7-6 待ち時間に配慮するデザイン

おわりに