書籍概要

表層UIデザインの解剖学
──ユーザーの知覚に訴える「見た目」の作り方

著者
発売日
更新日

概要

UI(ユーザーインターフェース)は,現代のデジタル社会において,人とサービスをつなぐ「道具」のような存在です。道具としてのUIに求められるのは,使いやすさ,アクセシビリティ,そして「また使いたい」と思わせる魅力です。良い道具は使い手の生活に溶け込み,その価値を見出され続けるものです。そして,UIデザインとは,まさにそのような「道具としての魅力」を形にする作業です。

しかし,昨今のUIデザインは,均質化が進み,パターン化されたデザインの模倣が繰り返されがちになっており,UIは個性や独自性を失い,形式的な表現に留まりがちになっています。

このような状況の中で,本書ではUIデザインの意義を問い直します。UIを「道具」として見つめ直し,その魅力をどう育み,サービスを通じてユーザーの心を動かす存在にするか。本書を通じて,UIが生み出す体験の価値を再定義し,デザイナーが果たすべき役割とその意義を伝えたいと考えています。

本書は,Amebaのデザインシステム「Spindle」の制作者が,自らの経験と哲学をもとに,「なぜ表層UIデザインにこだわるのか」「どのようにその価値を深めるべきなのか」を言語化し,体系的にまとめたものです。UIデザインの初心者から中堅デザイナーまで,多くの人にとって新たな発見と視点をもたらすはずです。

UIデザインを「道具としての魅力」という視点から深く掘り下げることで,単なる見た目を超えた,心を動かすUIデザインをともに考えましょう。

こんな方におすすめ

  • UIデザイナー・ウェブデザイナー
  • より品質の高いデザイン,より独自性の高いデザインをしたい方
  • 生成AIにはできないデザインを追求したい方

サンプル

samplesamplesamplesamplesample

目次

  • はじめに

第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 デザインシステムを「信じられるもの」にするために

  • おわりに

サポート

現在サポート情報はありません。

商品一覧