縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック

池田拓司

UIデザインの中でも普段はあまり注目されることのない細かい部分にフォーカスした書籍です。デザイナーがどのような意図を持ってUIをデザインしているのかを解説します。身近なサービスを例として取り上げているので，実感を持って理解できます。筆者のデザイナーとしてのノウハウがふんだんに織り込まれているので，WebサービスのUIデザインをもっと良くするためのヒントになるはずです。

• カテゴリ: ビジネス・実用
• ジャンル: IT・コンピュータ / 言語・プログラミング
• 出版社: 技術評論社
• タイトル: 縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック
• タイトルID: 1347800
• ページ数: 256ページ
• 電子版発売日: 2023年05月01日
• コンテンツ形式: EPUB
• サイズ(目安): 33MB

[ブクログ · ★★★★★]

★ 引用1文
普段ユーザーとしてサービスを使っていても「なぜこの配色になったのか」「ボタンがなぜここにあるのか」といったことを考えることは少ないと思います。しかし、そのような普段目に留まることのないような何気ないデザインも、すべて意図があって作られています。

★ 感想・レビュー
1人でウェブシステムを作ることになったのでこの本を読んだ。そうそうこういうデザイン多いよね～と納得のいく具体例と説明が良い。まさに上記の引用1文のように、よくあるデザインをTIPS的に綺麗にまとめられている。実例の画面がカラーで提示されているのがさらに良い。このような書籍はなかなか貴重かと思われる。デザインにおいては最高の一冊。それゆえか値段は少し張る。

Webデザイン素人の自分が1人でをイチから考えようとすると、本書で紹介されているデザインについてキチンと意識しての導入できなかったと思う。せいぜいどこかのサイトのデザインをパクって少しでもマシにする程度だろう。
デザインをパクっても、それが自分のウェブシステムにマッチしているかどうかはわからない。

■デザインする際によく考えるべき項目
・色（メインカラー、背景色、エラー時の色など）
・ヘルプUI/お知らせUI（強制的にするか、？アイコンで説明するかなど）
・動きを楽しませる工夫（ハートマークを押すと弾むなど）
・ライトフィードバック（いいね、とそれ以外のアクション）
・未読の表示（数を出す出さない、未読が消える条件）
・ボタンのデザイン（重要度によって2パターンのボタンを用意するなど）
・コンテンツの並べ方（カードUI/リストUI）
・エラーの伝えかた（タイミング、色など）
・サイトの特性（能動的コンテンツ、受動的コンテンツ）
・待ち時間の配慮（スピナーぐるぐる、プログレスバー）
・コンテンツがない場合の案内（ユーザー側でなんとかできるものかそうでないか）
・もっと見るの見せ方（展開、画面遷移、横スクロールなど）

★ 読後の行動
・自分のウェブサイトのデザイン設計時に上記内容を考慮する。

★ 得た知識など
各社がデザインガイドラインを出している。
iOS ⇒ Human Interface Guideline
Android ⇒ Material Design

[ブクログ · ★★★☆☆]

アプリやWebサービスを開発するときのあるある集。
２０２５年ではやや内容が古めではあるが、今でも通じるものも多い。

「エラーと確認」の章で、必要条件が成立しないと押せないボタンの件は、本当によくある話で、永遠にこれについて議論している節がある。筆者の言うとおり、私も基本的にはボタンは押せるようにしておく派である。ただし、最近は、すべてのケースでボタンを押せるようにしておくべきかでいうと微妙だなと思っています。理由は、明らかに押しても意味ないボタンを活性化させておく必要はないからである。例えば数量が０で買えるはずのない商品に対し得て購入ボタンを活性化させておくなどは、ユーザに期待をさせておいて実際には押してもエラーなどは体験的には良くないだろうと思うため。（この場合は、そもそもボタンを非表示などがいいのかもしれない）
とにかく、ボタンはデフォルトすべて非活性よりすべて活性化の方がまだましだが、一律活性化が正義かというとそうでもないなと思いはじめています。適材適所かなと。

本当に現場でよくある事例がたくさんあるので、UIデザインの失敗をしないためにさくっと読んでおいて損はない。

[ブクログ · ★★★★☆]

日常で当たり前に使っている
ウェブサイトやアプリのUIデザインを
言語化。実例が豊富でとてもわかりやすいです。
「あの機能ってそういう名前だったんだ」という
発見もあり、初心者にもおすすめです。