『表層UIデザインの解剖学』を読みました。
技術評論社 から出版された『表層UIデザインの解剖学』を読みました。
本記事では、読了した感想について記録したいと思います。
UI と物理世界
UI は、物理世界（アナログ世界）に存在する人がデジタル世界へ接するための橋渡し・タッチポイント。
人がデジタル世界を自然に体験するためには、UI が物理世界の法則や人の知覚情報に沿ったデザインであること。
物理世界や人は普遍的なものなので、ここに即したデザインにしておくと、
デジタル世界へ没頭できる 、みたいな感じ。
例えば、物理世界では太陽と影があり、重力があり、色鮮やかです。
デジタル世界、私の仕事場であるスマホのブラウザの中も、ドロップシャドウやアニメーション、カラーを定義できます。
これらの定義について、より物理世界に従ったルール、人の知覚に沿ったルールになっていると、
手に馴染む「なんか良いな」と思えるサービスになる。
「なんか良いな」と思えるUIって優れた機能も大事ですが、
なかなか気づきそうにないちょっとしたことの集合体と、私も思うので本書には共感しました。
今の世の中、AI で UI 生成が簡単にできるようになりましたが、
生成された UI はどこかチープな感覚になります。
AI の生成は過去データから確率論的にベターなデザインが生まれやすく、どこにでもあるような無機質なものに見えます。
これは悪ではなく、お問い合わせフォームのような どのサービスにもよくある UI は、AI 生成されたもので十分に思えます。
ただそのサービス独自の機能においては差別化が求められます。
- 「押せると思ったら押せなかった」
- 「影がなんか変」
- 「色がチカチカしてみにくい」
など、小さなストレスが蓄積すると例え素晴らしい機能があっても、不便に感じます。
物理世界では当たり前だった法則が、デジタル世界ではその法則が乱れていると、
人は物理とデジタルのギャップに差を感じて、使いにくいと思うのです。
形の考え
私は今まで様々な UIやデザイン周りについての本を読んできました。
配色や余白設計、タイポグラフィ（字形や字間、寄せ、etc）やコピーライティング（ボイスアンドトーン）、
あしらい、トンマナ、エレベーション、マイクロインタラクション、心理学・経験則、などです。
今回目から鱗だったのは、 形の考え です。
UIを作る際、円形なのか長方形なのか正方形なのか、様々な形を作ります。
ではなぜ、その形を選んだのでしょうか？
- 「なぜカード型の長方形にしたのか？」
- 「なぜ角丸をつけたのか？」
- 「なぜ...」
振り返れば、私の場合は「情報を整理しやすいものをグルーピング」で容器に入れる意識で、長方形型のカードUIをよく使っていました。
左右が丸い横長のピル型のUIや、アバター画像の円形のUIって、なんでそんな形にしたのだろう？
多くの場合は「なんとなく」感覚でやるのが多いと思います。
ただその「なんとなく」を言語化できれば、より Webサイトの世界観を作り込むことができるため、利点だと思いました。
ここでも、現実世界のルールや人のルールを当てはめるのも良いかもしれません。
- 紙は四角いので、記事コンテンツは長方形（正方形）を選んだ
- 顔は丸いので、アバター画像は円形を選んだ
角丸をつける場合は「その空間にスペースが生まれるので、少し余裕のある落ち着いた世界観」につながります。
影をつける場合は「その物体がZ軸上の高さが上がるため、押せると思わせる」意図に繋がります。
私が運営する こぶりー でも少し言語化してみました。
- タイムラインの週間UIは、紙のカレンダーの見た目にした
- ブログ記事UIは、1枚の紙としたいので長方形（角丸なし）にした
- 絞り込みや日付移動など操作をしてもらいたいところは、角丸ボタンにした
- 少しZ軸を上げると、尚良いのかもしれない
形に関して意識したことが少なかったため、今回の読書のおかげで、
形に関する疑問を持つことができるようになりました。
アニメーション
アニメーションは、機能的な観点だけだと不要な存在です。(瞬間のフィードバックだけで良い）
これは、ユーザーが行ったアクションのフィードバックを視覚的に伝えることで、
その結果を滑らかに理解できる補助になります。
アニメーションには、現在値から期待値までをどれぐらいの時間をかけて、どのぐらいの角度で伸ばすのか、
自由度の高い設計になります。
私の場合はあまりそれを拘ったことがなくて、
使用するライブラリや既存のアニメーション設定を踏襲することが多かったです。
そっちの方が外れなくて済むかなと。
それも悪くないと思うのですが、
どういう意図でアニメーションの値を設定するのか考えると深み（世界観への没入感）が出て良いです。
物理世界では、上から下へ物が落ちる重力や、移動における摩擦や反発などがあります。
そのルールに沿って、例えばボトムシートのような下から上に上がるアニメーションは、
上がる時は少しだけ遅くして、閉じる時は少し早く動くようにする と良いかもしれません。
カルーセルのような横移動させるコンテンツの場合は、移動時にほんの少し減速してみると良いかもしれません。
浮いているボタンをクリックしたら、『少し凹ませた影と色にした後に、平な状態にして、元の浮いたボタンにする』
の一連をアニメーションを、硬そうなボタンや柔らかそうなボタン でも、緩急が違ってきそうです。
終わりに
UIデザインは細部に拘ることで「なんか分からないけど、使いやすい」と思わせると考えています。
本書を通して、また一つ拘るための考え軸が増えて勉強になりました。
執筆頂いた著者の方に、感謝を申し上げます。
-
s※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「書籍レビュー」の記事
以下の書籍を15章と16章を読みました。 これで最後になります。 https://www.oreilly.co.jp/books/9784814401574/ 1章から14章の感想については、以下で書いています。 『Webブラウザエンジニア
2026年04月13日
以下の書籍を13章と14章を読みました。 もうコードを詳しくトレースするのを諦めました。笑 https://www.oreilly.co.jp/books/9784814401574/ 1章から12章の感想については、以下で書いています。
2026年04月07日
以下の書籍を12章を読みました。 12章は難解でした。 https://www.oreilly.co.jp/books/9784814401574/ 1章から11章の感想については、以下で書いています。 『Webブラウザエンジニアリング』第
2026年04月03日