UIデザインのアイデア帳

2025年6月15日

UIデザインのアイデア帳 アプリ・Web制作の現場で使える 基本＋実践ノウハウ83

内容とは関係ないけど、全体的に本のパラグラフ部分が2カラムだったのはちょっとだけ読みづらかった。

全体的にそうだね、と思える内容ではあるものの、ケースバイケースだろうなと思うことが何度かあった。すべてのケースをカバーするわけにはいかないだろうけど、読み手側に鵜呑みにしない少しの経験値が必要かもなと思う。まぁどんな本にも言えることではあるが…。

アクセシビリティの考慮が十分でない記述（色に依存したデザインとか）がいくつかあったので、そこは少し残念だったかなぁ。

とはいえ、定番のUIはほとんど紹介されているし、デザインの基本の「き」と言えるような気がする。スクロールバーに関することをわりとページ数を割いていて、これまでスクロールバーについてはそこまで深く考えてなかったので勉強になった。

「なるほど」と思ったことのまとめ。

• 余白が狭いと高機能で複雑な印象を与える。逆に余白が広いと全体的に簡単そうな印象を与える
• 角丸の半径を大きくすると、角の部分に文字を置けない分、余白が自然と生まれる
• 配色割合はベースカラー70 : メインカラー25 : アクセントカラー5くらいがよい
• ダークモードではドロップシャドウの表現は見えにくくなるので白い影を落としたり罫線を濃くしたりする
• アプリでは写真は装飾としてあまり使わない。そう言われればたしかに。
• 写真が中心となるサイトは色数を抑える（写真自体に色数がおおいため）
• イラストは不要な情報をデフォルメすることでノイズを減らすことができる。写真だと伝えたいところ以外が気になってしまったりする。
• ユーザーはアイコンに見慣れており、暗黙的な共通認識があるためテキスト情報が不要（なことが多い）。珍しいアイコンは文字もセットで。
• アウトラインだけのアイコンは他の要素に馴染みやすい。シンプルに見せることができる
• ユーザーに先に「動詞」を選ばせるメニューの提示の仕方をタスク型UI、先に「名詞」を選ばせるものをオブジェクト型UIと呼ぶ
  • 個人的にはタスク型のほうが分かりやすいと思うことがおおい
• 情報のまとまりを視覚的に区別したいときに考えられるのは、まとまりとまとまりの間に余白を広めに設定することと、罫線でくぎること、その中間の選択肢として違う背景色を使うなどがある
• Webサイトは「見る」、アプリは「使う」のが主目的という前提を置くと、Webサイトにおける見出しは目立つ方がいい（情報が探しやすい）が、アプリにおける見出しは目立たないほうがいい（というか操作する対象を強調すべき）
• ボタンの配置の整理が分かりやすかった
  • 左上: 視線誘導の最初のため、目に入りやすいが操作がしにくく、優先度の高いボタンは置かない
  • 右上: 操作しやすく、何かを開始するボタンなど、画面全体に対する操作ボタンを置く
  • 左下: 操作しにくく、削除などのネガティブなボタンを置く
  • 右下: 視線誘導の最終地点のため「保存」などの最終実行となるであろうアクションボタンを置くのに適している
• ページャーで複数ページにまたがる要素に対してチェックボックスを使って一括選択できるようにする場合は、選択件数を表示するなどしてページをまたいで選択できるのかを示す必要がある
• バッジを消したいという心理に働きかける

メモ書き

単純にそうとは言えないだろうなぁと思ったことのメモ書き。

ラベルは削り、値だけにしても、ユーザーはその書式や周辺の情報によって、その文字が何を表しているのかすぐに理解できます。

極端なことを言うとユーザーを馬鹿にしてるのでは、というデザインはたまにある。そこまで気を遣う必要なくない？みたいな。でも人は一様ではなく、わからない人にはわからないので、その塩梅は難しいところ。

ただ、削りすぎると、なにがなんだか分からなくてストレスになる場合もあるので、しっかり整えるスキルを持っている、もしくは明確な根拠があるとき以外は注意したほうがいいと思う。

若干逸れるが、HTMLは情報の構造を示すものであり、情報を削るとコンテンツのアウトラインが成立しなくなることがある。値だけの情報はマークアップがしづらい。

人や優秀なAIは、文脈からなんとなく読み取れるかもしれないが、機械にとっては不親切な場合もある気がした。あとCSSを無効にしてもちゃんと伝わるか、とかね。

ビジュアルデザインは伝わりやすくすることが仕事であって、ビジュアルデザインありき、ビジュアルデザインがないと伝わらない情報設計はどうなんだろう、とおもったりもする。まぁ今時の考え方じゃないのかもしれないな。

データを省略しよう

これは画面からはみ出る部分は「…」を使うなどして省略しよう、という話。

分かるけど、なぜ省略する必要があるのかを考えたほうがいい。省略しないほうが絶対に分かりやすいのにあえて省略をするのは「明瞭さを犠牲にして見た目をよくしたいから」なんだと思う。

別のところにも「画面の見やすさを優先し、情報を削ることも考えましょう。」と書いてあって、なかなか大胆なことを書きますね…と思った。

たとえばメールの本文をプレビューしたりするような場面では有効な気はするが、件名やタイトルを省略するのは控えたほうがいいと個人的には思う。

特に最近のアプリケーションはほぼすべて確認のダイアログを表示するため、ユーザーもそれに慣れており、削除の実行ボタンを気軽に押してしまうこともあります。

個人的には、情報を復元できる前提なら削除のときは確認ダイアログはいらないと思う派。逆に削除が頻繁に行われることが想定されるアプリケーション（メールとか）の場合はいちいち出してたらうっとしいので出さないでほしい。

あと「window.confirmは使わない」って急にJavaScriptの話が出てきたので若干混乱した。

見た目も操作性も一貫していて機能としての品質が高いことが理想だと思うけど、半端なカスタマイズしてUXが損なわれるくらいならブラウザの標準機能使ったほうがいい気がするけどね。

hover時にボタンや文字を出すようにする

これは私が一番苦手なUI…。マウスを扱うのが得意じゃないので端っこのボタンを押そうとしたらホバーが外れて押せない、みたいなことが結構ある。

ユーザーが気付きやすい場所に表示する

これはトーストの説明だが、気付きやすい場所 = 頻繁に操作する場所であることが多く、個人的には邪魔だなと思うことがおおい。トーストの裏側に隠れているUIに用があるんです。すみません。

メンタルモデルと思われるもの

「それぞれに合った操作方法を考える」というところで、PCとスマホ時の複数選択操作の違いについて述べられていた。

例えばPCでは一般的にShiftを押しながらクリックしたり、ドラッグしたりすることで複数選択が可能になる。

一方スマホではまずはモードの切り替えが必要になる。対象を長押しすることで複数選択モードになる場合もあれば、「編集」というボタンがどこかにあって、それを押すとチェックボックスが現れ、複数選択できるようになる場合もある。

このような操作はメンタルモデルに頼っている部分が大きいと思う。長押ししたらモードが変わるなんて、最初にインストラクションがないと知ることは難しい。

あと、こういうメンタルモデルは環境によって差がある。たとえばiPhoneユーザーとAndroidユーザーでは部分的に異なると思う。とはいえ、WebサイトをつくるときにiOSとAndroidでUIを分けるのは現実的ではないので、結果的にメンタルモデルには頼らないほうがいいよなぁと思ったりもする。

難しいですね。