縁の下のUIデザイン 小さな工夫で大きな効果をもたらす実践TIPS&テクニック WEB+DB PRESS plusシリーズ

池田拓司(著者)

• 販売会社／発売会社: 技術評論社
• 発売年月日: 2023/05/04
• JAN: 9784297134099

商品レビュー

2025/10/25

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

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

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

2025/06/01

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

2025/01/30

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

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

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

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

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

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