表層UIデザインの解剖学
──ユーザーの知覚に訴える「見た目」の作り方
- 本田雅人 著
- 定価
- 2,860円（本体2,600円＋税10%）
- 発売日
- 2026.7.8
- 判型
- A5
- 頁数
- 208ページ
- ISBN
- 978-4-297-15706-7 978-4-297-15707-4
サポート情報
概要
UI（ユーザーインターフェース）は、現代のデジタル社会において、人とサービスをつなぐ「道具」のような存在です。道具としてのUIに求められるのは、使いやすさ、アクセシビリティ、そして「また使いたい」と思わせる魅力です。良い道具は使い手の生活に溶け込み、その価値を見出され続けるものです。そして、UIデザインとは、まさにそのような「道具としての魅力」を形にする作業です。
しかし、昨今のUIデザインは、均質化が進み、パターン化されたデザインの模倣が繰り返されがちになっており、UIは個性や独自性を失い、形式的な表現に留まりがちになっています。
このような状況の中で、本書ではUIデザインの意義を問い直します。UIを「道具」として見つめ直し、その魅力をどう育み、サービスを通じてユーザーの心を動かす存在にするか。本書を通じて、UIが生み出す体験の価値を再定義し、デザイナーが果たすべき役割とその意義を伝えたいと考えています。
本書は、Amebaのデザインシステム「Spindle」の制作者が、自らの経験と哲学をもとに、「なぜ表層UIデザインにこだわるのか」「どのようにその価値を深めるべきなのか」を言語化し、体系的にまとめたものです。UIデザインの初心者から中堅デザイナーまで、多くの人にとって新たな発見と視点をもたらすはずです。
UIデザインを「道具としての魅力」という視点から深く掘り下げることで、単なる見た目を超えた、心を動かすUIデザインをともに考えましょう。
こんな方にオススメ
- UIデザイナー・ウェブデザイナー
- より品質の高いデザイン、より独自性の高いデザインをしたい方
- 生成AIにはできないデザインを追求したい方
目次
- はじめに
第1章 今、私たちは何をデザインすべきなのか
1.1 デザインの「意義」
1.2 UIの意義とは
1.3 機能的存在から文化的存在へ変化する道具
1.4 UIにおける「情緒的価値」の創出の意義
1.5 情緒的価値を生み出すクリエイターの矜持と執心
1.6 共感の時代におけるデザインの役割
1.7 多様性が生み出す豊かさ
第2章 表層UIの価値を考える
2.1 UI概論
- 本書で扱う「表層UI」とは
- GUIの革新性と特徴
- GUIがもたらした民主化
- GUIの制約
- 表層への着目
- 「表層UI」を切り出す
2.2 認知と想起から表層UIを解き明かす
- 「良い」表層UIデザインを導くということ
- 人間の認知とトップダウン処理
- 現実世界の模倣と違和感の排除
- スキューモーフィズムの再定義
2.3 身体性とインタラクション
- 操作可能性
- デバイスと身体の一体化
- 物理法則の再解釈
2.4 人間とUIの共生関係の創造
- 身体の一部としてのデバイス
- 愛着を生み出す表層UIデザイン
- UIデザイナーに求められるものづくりの精神
第3章 表層UIを解剖する
3.1 解剖の意義
3.2 色
- 色が持つ意味
- 白と黒の役割
- ダークモードの考え方
- グラデーションを用いた光沢表現
- 影を使わない立体表現
3.3 影と空間
- 二次元に三次元を起こす
- 影の効果
- 影の物理学的制約とリアリズムの追求
- 影が持つコンテキスト
- インナーシャドウ
- 影の相対性と文脈依存性
- 影の設計における留意点
3.4 余白と密度
- 有限な空間における選択
- 情報密度とユーザーのモード
- 絵としての密度
- 余白は引き算ではなく設計である
3.5 文字と言葉
- 文字の二重性
- 文字量と読みやすさのバランス
- 日本語の形の難しさ
3.6 ぼかし
- ぼかしの特徴
- 中心視野と周辺視野
- 光学的な焦点調節による被写界深度
- 選択的注意によるぼやけ
- ダイアログとぼかし
- バックグラウンドブラー
- ぼかしの二つの役割
3.7 形
- 形は「なんとなく」で決められている
- 形は機能を符号化している
- 形の意味を支える三つの根拠
- 形の「品詞」という考え方
- デザイナーにとっての形の言語化
- ユーザーにとっての形の一貫性
- 形を意識的に設計する
3.8 アイコン
- アイコンの二重性
- 記号としての意味性
- 表現としての可能性
- 人間的個別性の体現
- 情緒的価値の源泉
- 制約の中の自由
3.9 動き
- 静止と運動の間
- 動きが生む理解の構造
- 動きの方向と意味
- 動きが語るキャラクター性
- UIにおける物理法則の設計
- 動きの設計における留意点
第4章 UIが持つ表現としての可能性を考察する
4.1 UIが持つ潜在的な意味を考える
4.2 UIは新しい表現の探究でもある
- マテリアルメタファーの深化と技術的進歩
- デジタル世界ならではの新しいマテリアルの開拓
4.3 UIはユーザーとのコミュニケーションとして捉える
- UIは接客でもある
- 「生きた」UIをデザインする
- 生きたキャラクターを意識したライティングの工夫
- タイポグラフィは声として知覚される
- インタラクションは所作として知覚される
4.4 さらに進化するUIデザイン
- UIデザインは常に進化すべき
- 技術的転換点がもたらす進化
- 三次元空間への拡張がもたらす進化
4.5 AIによって変化するUI
- 「操作」から「依頼」へ
- トレードオフの存在
- 複数のUIが共存する未来
- 表層UIが担う責任
第5章 デザインを運用することの意義
5.1 デザインを運用する
5.2 サービスを主語にし、個別性を生む
- 「チームのため」ではなく「サービスのため」にある
- 一貫性ではなく、「個別性」を発生させる
5.3 理想の定義、説得力、そして普遍性へ
- Amebaで目指したのは「居心地の良さ」の定義
- 説得力のない定義は、うつろう
- 「なぜそうなったのか」がなければ、軌道修正できない
- 変化が前提の時代に、普遍性をどこに置くか
- 人間にとって都合のよい状態、物理世界にとって自然な動き
5.4 Spindleにおける実践：アイコン形状の定義
- 感覚ではなく、根拠を求める
- Ameba Sansを起点にする
- 形状の分析と数式化
- 現場で使える形に落とす
- 根拠があることで生まれる効果
- 思考の過程を残すということ
5.5 Spindleにおける実践：ドロップシャドウの定義
- 光源を定義する
- 物理シミュレーションで数値を導く
- 説明可能性と世界観の表現
- 二つの実践に共通すること
5.6 デザインシステムを「信じられるもの」にするために
- おわりに
プロフィール
本田雅人
早稲田大学文学部卒。2017年に株式会社サイバーエージェントに入社。現在はAmebaLIFE事業本部のプロダクトデザインリードを担当し、プロダクト戦略の設計を担う。Amebaのデザインシステム「Spindle」を立ち上げ、2023年にグッドデザイン賞を受賞。サイバーエージェントの各種サービスのデザインシステムのアドバイザーとしても活動中。共著書に『モバイルアプリアクセシビリティ入門──iOS＋Androidのデザインと実装』（技術評論社）がある。