原田 秀司 著
マルチデバイス時代になって、スマートフォンだけでなく、タブレット、スマートTV、もちろんPC、これら4スクリーンを前提にサイトの設計を考える必要性が出てきています。本書は、デバイスごとの特性を考慮に入れつつ、いつのまにか迷ってしまう、なぜかわからなくなってしまう、操作がしっくりこない、といった「わかりやすさ」「使いやすさ」における考えの要点を解説する書籍です。
こうしたマルチデバイス環境におけるインターフェース・デザインにおけるエッセンスを、「サイト・アーキテクチャ(構造)」、「デバイス・インターフェース」、「ユーザーエクスペリエンス(UX)」の3 側面からまとめているので、エンジニアだけでなくサイトデザインやサイト制作に関わる、あらゆる方にオススメです。
CHAPTER-01 Web サイトアーキテクチャ—構造について
1-1. 縦・横・前後の立体的構造
01 リンクのもたらす影響とは
02 縦・横・前後で立体的に考える
03 どこにいるか「わかる」ための4 つの要因
04 ビジュアルによる前後関係の表現
05 インタラクションによる前後関係の表現
06 現在地を視覚的に判別させる
07 階層の広さ・深さ・ラベリングの関係
1-2. レイアウトパターン
08 レイアウトによるパターンとは
09 1 カラムレイアウト
10 1 カラムレイアウトのバリエーション
11 2 カラムレイアウト
12 3 カラムレイアウト
13 2 カラム& 3 カラムレイアウトのバリエーション
14 グリッドデザイン
15 レスポンシブデザイン
1-3 . ナビゲーション
16 ナビゲーションの役目とは
17 ナビゲーションエリアのバリエーション
18 常に設置される「ヘッダとフッタ」
19 住所と経路を表現する「パンくず」
20 「パンくず」のバリエーション
21 「グローバルナビゲーション」と「ローカルナビゲーション」
22 他へ回遊できる「関連ナビゲーション」
23 縦型と横型の「ローカルナビゲーション」
24 「ローカルナビゲーション」で表示する階層
25 「ローカルナビゲーション」で表示する系統
26 「ツリー型ローカルナビゲーション」の位置
27 「メインコンテンツ」の位置
28 ナビゲーションは定位置・定内容にする
1-4. 一貫性
29 一貫性と柔軟性とは
30 一貫性の効果
31 「わからない」とは何か
CHAPTER-02 デバイスインターフェース—デバイスについて
2-1. 物理的制約
32 デバイスの多様性とは
33 画面の大きさによる影響
34 画面との距離による影響
35 画面の向きによる影響
36 入力手段による影響
2-2. ソフトウェアの制約
37 テキストデータの特性
38 画像データの特性
39 画像データのテキスト化・ベクター化
40 プラットフォームによる違い
2-3. スクロールの指向性
41 自然に感じるスクロールの方向性とは
42 テキストによるスクロールの影響
43 画面の形によるスクロールの影響
44 要素の形によるスクロールの影響
45 要素の隙間によるスクロールの影響
46 縦と横が混在するスクロール
47 スクロールとページングの関係
2-4. デバイスによるインタラクション
48 インタラクションとフィードバックの関係性とは
49 マウスによるフィードバック
50 タッチパネルによるフィードバック
51 リモコンによるフィードバック
2-5. シームレスなインターフェース
52 画面を切り替えないインターフェースとは
53 オーバーレイ
54 インレイ
55 スライド
56 インクリメンタル・スクロール
57 インクリメンタル・ページング
58 インクリメンタル・パンニング
59 カルーセル
60 シームレスなステップ
CHAPTER-03 エクスペリエンスデザイン—理解と体験、デザインの追究について
3-1. 理解と体験
61 平面的構造と立体的構造の違いとは
62 平面的に考察する
63 立体的に理解する
64 部分的なプロトタイプで体験する
65 実デバイスで体験する
3-2. デザインの追究
66 シンプルにする
67 当たり前に使えて気付かせない
68 共通概念を活用する
69 色による判別効果を利用する
70 パーツやレイアウトを標準化する
71 冗長さを排除する
72 より少なくすることで、より多くのことをする
内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。
正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。
本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。
Daiki Futami さん
2016-11-27
デザインの勉強のために読了。UIがなんであってUXが何であるかというレベルからどうしたらユーザーが迷わないかという説明をしてくれている。具体的な例もあって見やすい。あとは自分で実際の例を見まくって分析。
galoisbaobab さん
2015-06-10
デバイスと人間の関係、人間の感じ方を意識したインタフェースを作るには?って教科書。ひとつひとつは「知っとるわいっ!今更なにいっとんじゃいっ!」と言う人が多いかもしれないがちゃんとまてめてくれてるので読む価値あり。デバイスによって人間との距離が変わるって確かに大事ねー
ぷるいち さん
2014-12-22
スマートフォンの画面設計がしたいです。