縁の下のUIデザインを読みました
縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック (WEB+DB PRESS plus) を読みました。 読んで学びが多く、今回は特に印象に残った内容を感想としてまとめてみます。 すべての章に触れるのではなく、特に心に残った部分について自分の視点から気づきを書き留めました。 振り返りやすい備忘録として、今後の仕事で役立てたいと思います。
書籍について
書籍『縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック (WEB+DB PRESS plus)』は Webアプリ開発における 「あるある」なUI設計に関する実践的なアイデアが豊富に詰まった一冊 です。 WEB+DB PRESSの5年間の連載をもとに、UIデザインのノウハウが体系的にまとめられており、全35章が7つのテーマに分かれ、それぞれ異なる観点からUIの工夫が紹介されています。
書籍で紹介されている内容の一部はWeb上でも確認できるので、購入前に見てみるのもおすすめです。
対象読者
書籍の対象読者は以下の通りです。
- 自分のデザイン視点を広げたいUIデザイナー
- UIデザインに興味を持つデザイナー
- UIデザインも担当しているエンジニア
- デザインラフまで自分で考えることがあるディレクター
気になった章
読んで印象に残った章を以下に挙げます。
- 画像はどう置く？──位置、大きさ、そろえ方
- ユーザーに使い方を文字で説明するためのUI
- カードUIの向き不向き
- 長くなりがちなコンテンツをどう見やすくするか
ここから、それぞれの章について掘り下げます。
画像はどう置く？──位置、大きさ、揃え方
画像の配置が視線誘導に与える影響を改めて実感しました。一般的に人の視線は左から右、上から下へ移動するため、左側に画像を配置し、右側にテキストを置くと、画像を見た後に自然に内容を読み進められます 。 反対に右側に画像があると、視線がテキストに向かいやすく、画像が目立ちにくくなります。
画像の大きさも大きな効果を与えます。宿泊サービスのサイトでは、部屋の写真を大きく表示することで「行ってみたい」という気持ちが引き出され、小さな画像を並べるよりも強い印象を与えます。また、Pinterestのようにランダムなサイズで画像を配置する手法も視線をさまざまな場所に誘導し、情報が目に留まりやすくなります。
ネットサーフィンで観察してみたところ、多くのサイトでこの原則がうまく活用されていました 。たとえば、Yahooニュースランキングでは、左に画像、右にタイトルが配置され、画像が先に目に入り、次にニュースタイトルが読まれる流れが作られています。同じページ内のコメントランキングでは、左にタイトル、右に画像が配置されており、ページの補足的な要素として扱われています。
日経では、左に大きくタイトルを配置し、右側に画像があるため、タイトルが目立ち情報が強調されるデザインになっています。
また、びゅうトラベルでは宿泊先の部屋がリストで表示され、「選択」ボタンが右側に配置され、視線の流れに合わせてアクションを促します。同様に、トリバコも宿泊先候補を左から画像、ホテル名、料金の順で表示し、画像が重要な視覚要素として強調されています。
ECサイトのAmazonでも、PC表示では商品リストが縦長に並び、上から商品画像、商品名、評価、価格、カートボタンという順です。まず商品画像を見て、次に商品名、評価、価格を確認し、最後にカートボタンへ と自然に誘導されています。
このように、サービスの種類やユーザーの動線に応じた視線誘導をデザインに取り入れる重要性を再確認しました。
ユーザーに使い方を文字で説明するためのUI
ユーザーが操作しやすい画面を作るには、ある程度の説明が欠かせません。特にtoB向けの場合、専門用語が多くなるため丁寧な説明が必要です。
書籍の中で「説明を惜しまない」という言葉が印象的 でした。シンプルにしようとしすぎると、かえって説明が不足し、意味が伝わりにくくなります。分かりやすさを意識して、しっかり伝わる説明文を用意することが大切です。
専門用語やよくある質問は別ページにまとめてリンクを付け、必要に応じて参照しやすくすると良いですが、モーダル表示で同ページ内に出す方法も効果的です。バルーンヘルプやツールチップも、必須ではないけれどあると助かる補助情報として有効です。
アイコンで意味を伝えるのも手段のひとつですが、一般的に認知されたアイコンに限ります。その他のアイコンには補助テキストを添えるのが望ましいでしょう。
ボタンの文言も「登録」ではなく「登録する」とすることで、柔らかい印象が生まれ、ボタンサイズも少し大きくなり見やすくなります。
また、テーブルレイアウトで右側に重要な情報を配置すると画面の端に隠れてしまうことがあるため、縦に並べるなどして重要なものは左側に配置し、視認性を向上させます。
最近ではサイドパネルを隠したり表示したりできるUIも多く見られますが、初回はチュートリアルのようなオンボーディング機能があると親切です。写真や動画、インタラクティブなチュートリアルなどが操作方法の理解を助け、再度表示できるようにもしたいところです。
やはり最も重要なのは、しっかり伝わる説明文を用意することだと感じます。
カードUIの向き不向き
普段からカードUIをよく使ってきました。情報がひとまとめにできて目立たせやすく、レイアウト上も使いやすいからです。 しかし、今回改めてカードUIの特徴について学び、考え直すきっかけになりました。
カードUIは、複数の情報をひとまとめに表示する際に便利で、影をつけることで情報が整理され、 存在感を持たせられるという利点があります。ただし、使いすぎには注意が必要です。
たとえば、商品レビュー一覧をカードで表示すると、各コメントが目立ちすぎて比較がしにくくなり、シンプルなリスト表示のほうが適している場合もあります。 一方、1つ1つのレビューをじっくり読ませたい場合にはカードが効果的です。カードで区切ることで、個々のレビューにフォーカスを当てやすくなります。
カードUIは、1つの情報をしっかり見せたいときに向いていますが、情報同士の比較には不向きな場合もあります。 また、カードはレスポンシブ対応がしやすく、内部レイアウトを柔軟に変更できるため、画面サイズに応じた調整が容易です。
テーブルやカードはよく目にするUIですが、使いどころを見極めて、効果的に活用することが大切です。
長くなりがちなコンテンツをどう見やすくするか
改善を重ねるとコンテンツが増えて画面がごちゃごちゃした印象になり、使い勝手が悪くなることがあります。この章で、著者が紹介する次のルールは非常に参考になりました。
「その画面に本来あるべき要素が7割、関連する情報など関係の薄い要素は3割」
新しいコンテンツを追加する際は、既存の内容を整理することが重要です。既存コンテンツを減らしたり、表示する面積を調整したりして、情報の渋滞を防ぎます。 こうすることで、必要なコンテンツの量とバランスが維持されやすくなります。
似たコンテンツをまとめて表示する工夫も有効ですが、同じ内容が続くとユーザーが飽きてしまうため、たとえば検索結果一覧にレコメンド項目を差し込んだり、ページ下部に配置するなどして適度に分散させることで視覚的なメリハリが生まれます。
また、スマホではディスプレイサイズが小さいため、縦スクロールを減らしてページを切り替える工夫が良いのかもしれません。
最後に
この本を通して、UIデザインの細やかな工夫が最終的にユーザー体験全体に大きな影響を与えることを再認識しました。 小さな改善でも、今後の開発にも積極的に取り入れていきたいと思います。