「見た目の美しさ」だけでなく、使いやすく魅力的なUIデザインについて深く学べる解説書 -表層UIデザインの解剖学

Book Review

Post on:2026年7月10日

sponsorsr

※本ページは、アフィリエイト広告を利用しています。

Webサイトやスマホアプリで重要なのは、コンテンツやサービスです。しかし、そのコンテンツやサービスをどのように見せ、体験させるかを担うUIも非常に重要です。

デザインが美しいUIを作るだけで終わり、ではありません。ユーザーにどのように伝え、どんな体験を提供すればよいのか、AIには任せられない領域をどのように人の手によって価値を深めるのかが分かる解説書を紹介します。

著者は、グッドデザイン賞を受賞したAmebaのデザインシステム「Spindle」を立ち上げた本田雅人氏。また、書籍では『モバイルアプリアクセシビリティ入門』（紹介記事）で共著の一人です。

本書はそんな氏による初の単独書。単なる「見た目」だけでなく、使いやすく魅力的なUIデザインについて深く学べます。

表層UIデザインの解剖学
ユーザーの知覚に訴える「見た目」の作り方
ISBN 978-4-297-15706-7
[Amazonでみる]
[楽天でみる]

著者: 本田雅人
出版社: 技術評論社
発売日: 2026/7/8

Kindle版も同時発売されています！

表層UIデザインの解剖学 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

まずは、「表層UIデザイン」って何？と思った人もいるでしょう。
言葉から何となく想像できると思いますが、本書で扱う「表層UIデザイン」はWebサイトやスマホアプリでマウスやタッチで操作するGUIのデザインにおいて、中でもスクリーン上に表示されるビジュアルインターフェイスの部分のことです。

本書は5章構成、UIデザインの価値、UIデザインの役割、UIデザインの各要素の解剖、UIが持つ表現としての可能性、デザインシステムの実践まで、くわしく解説されています。

第1章はUIの意義、第2章は表層UIの基礎知識、第3章「表層UIを解剖する」では、UIデザインの各要素について解き明かします。

たとえば、最近はダークモードに対応したサイトやアプリが増えてきました。しかし、暗い背景にの純白（#FFFFFF）のテキストが使用されていると、逆に眩しく感じませんか？

テキストはグレーがかった白（#F0F0F0）や色味を含んだグレー（#E1E1Ea）が増えてきました。こういった配慮は目に優しく、ユーザーの使い勝手も向上します。

UIにおける色はダークモードにおける白のように、相対的に知覚されます。これはUIの他の要素にも有効なテクニックです。

たとえば、カードやボタンなどで立体感を出したいときに、ドロップシャドウを使っている人も多いと思います。しかし、ドロップシャドウを使い過ぎると、影のぶん暗くなってしまい、全体が暗い印象になったり、凸凹の要素が多くて画面の情報構成がつかみづらくなったりします。

立体感を表現するには、他のやり方もあります。色に明度差を与えて深度表現を使います。具体的には、背景色に対して要素を相対的にすこし暗くすることで、すこし沈んでいると錯覚させることができます。

UIデザインで重要な要素の一つが、余白です。余白を効果的に使うことで、要素どうしの関係性を作り出すことができ、全体の情報構造を把握しやすくします。

また、余白はミニマルやシンプルさの追求としても多用されますが、UIデザインにおいてはユーザーの欲求に応えるために使います。ユーザーが受動的に情報を見ているときに、余白を少なくして情報密度を高くすると、認知的な負荷が高まります。たとえば、広告やプロモーションなどを見せられているときは、ぎっしり情報が詰まっていてもあまり見ないということです。

逆に能動的にユーザーが積極的に情報を見ているときには、その意欲に応えるために情報密度を高くします。アプリのダッシュボードや検索結果、商品一覧なんかはユーザーが「たくさん見たい」という状態です。

iOS 26で採用されたLiquid Glassからでしょうか、ぼかしを使ったエフェクトも最近のUIでよく見かけます。ドロップシャドウや角丸といったエフェクトは要素の形状や立ち位置を補強する方向に働きますが、このぼかしはそれらとはすこし異なります。装飾の一種ではなく、注意の配分を設計するためのツールと言えるでしょう。

ぼかしは、見えているけど主役ではないものを作り出します。ユーザーに迷わせないで、必要な情報に集中してもらうことが目的です。人間には中心視野と周辺視野があり、くっきり見えるのはごく狭い範囲だけで、それ以外はぼやけて見えます。

第3章ではこんな感じにUIで重要な、色、影と空間、余白と密度、文字と言葉、ぼかし、形、アイコン、動きについて学べます。作者の深い考察から新たな発見や視野が広がると思います。

第4章は「UIが持つ表現としての可能性を考察する」
UIデザインは常に進化を続けています。ここ数年でもっとも注目された進化は、AppleのLiquid Glassでしょう。「ぼかし」でも取りあげましたが、Liquid GlassはiOS 26に採用された新しい表現で、静止状態では透明なガラスの質感で、動かすと粘性のある流体のように追従します。人によって好き嫌いがあると思いますが、こういった試みの積み重ねが、新しいスタンダードに繋がります。