appgameui https://blog.hatena.ne.jp/appgameui/ ゲームアプリのUIデザイン https://appgameui.hatenablog.com/ 010_タイトル一覧 010_タイトル一覧-新テニスの王子様 RisingBeat 020_アンチパターン 020_アンチパターン-誤タップ_タップ範囲が狭い こんにちは、ちょこきなこです。 「新テニスの王子様 RisingBeat」には楽曲の試聴ができる画面があるのですが、タップ範囲が見た目通りでないのが気になりました。 反応するのは文字列の部分だけで、文字列を囲っている枠は反応しない実装になっています。 ▼この画像の文字列部分がタップ範囲 文字列のみをタップ範囲にするのであれば、下線を引くなどして既存のメンタルモデルを利用すると誤解を招きづらいかなと思います。 一般的なボタンの形状をしていると誤解を招いてしまうので気をつけたいなと思いました。 ところでこのボタン兼進行バーの機能を有したパーツの名称ってなんて言うんだろう…。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fappgameui.hatenablog.com%2Fentry%2F2019%2F08%2F11%2F000000" title="「新テニスの王子様 RisingBeat」楽曲試聴画面のタップ範囲が文字部分だけ。 - ゲームアプリのUIデザイン" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/appgameui/20190804/20190804220241.gif Hatena Blog https://hatena.blog 2019-08-11 00:00:00 rich https://appgameui.hatenablog.com/entry/2019/08/11/000000 1.0 100%