UIデザインのコツ：視線・余白・情報の優先順位を商品一覧で学ぶ

UIデザインを見やすくするコツは、情報の優先順位を決め、関連する要素を近づけ、同じ情報を同じ位置に置くことです。色や装飾を足す前に、利用者が「何を見つけ、何を判断し、どこへ進むか」を一つの作業として整理します。

たとえば商品一覧なら、商品名と価格を比較してから詳細へ進める配置が必要です。まずUIデザインの基本原則を判断の軸にし、その原則をフレーム、余白、視線の流れへ落とし込んでいきましょう。

UIデザインツールの操作を覚えることも大切ですが、ショートカットキーの数だけで画面の使いやすさは決まりません。Pixsoでフレームや再利用する部品を準備するときも、どの商品名と価格を組にして読んでもらうかを先に決めます。

1. UIデザインを始めるときにフレームを決める理由

画面を具体化するときは、まず対象のユーザーと利用場面を確認し、デザインする領域をフレームとして設定します。Adobe XD、Figma、Sketchなどでも画面の枠を使ってレイアウトを組み立てますが、調査やアイデア出しより前に必ずフレームを作る、という意味ではありません。

フレームがあると、限られた領域で何を優先するかを検討できます。誰に何を見てもらいたいかを決め、その情報が想定する画面幅で読み取れるかを確かめましょう。

1.1 レスポンシブデザインを取り入れているUIデザインが一般的

UIデザインは、Webページやアプリなどでユーザーとサービスをつなぐ接点を設計することです。パソコン、タブレット、スマートフォンなど、利用する機器や画面の広さ、入力方法は一つとは限りません。

レスポンシブデザインでは、表示領域に応じて要素の配置や大きさを調整します。端末名ごとに別の完成図を用意するだけではなく、文字の折り返し、画像の比率、列数などが幅の変化にどう対応するかを決めます。調整が適切でないと、内容が重なったり画面からはみ出したりします。

繰り返し使うボタンやカードを部品として管理すると、文字の長さや余白のルールをそろえやすくなります。ただし、部品にしただけで画面全体がレスポンシブになるわけではありません。親のフレームとの位置関係やサイズの変化も設計します。

1.2 Pixsoで共通のカードとボタンを部品にする

Pixsoで画面を作るときも、フレームを用意して作業領域を決められます。ここでは商品一覧を例に、広い画面と狭い画面のフレームを並べ、表示できる情報量を比べます。

フレームのサイズは対象の表示領域に合わせて設定します。アセットやコンポーネントを使えば、商品カードやボタンなど繰り返し使う要素を管理し、チームで共有できます。プリセットの端末サイズは出発点として使い、内容に応じた中間の幅も確認しましょう。

Pixsoでは複数人で同じファイルを編集できます。共通の商品カードを使いながら、「価格は見つかるか」「長い商品名が操作ボタンを押し下げないか」といった具体的な点を、同じ画面上で確認すると判断を共有しやすくなります。

2. 視線の動きをレイアウトの手掛かりにする

2.1 視線の動きを配置の手がかりにする

視線の動きは、文章の方向、見出しや画像の強さ、探している情報などに影響されます。よく使われるZ型・N型・F型という整理は、配置を考える手がかりにはなりますが、全員の視線が必ず同じ順番で動く法則ではありません。

以下では、それぞれがどのような配置や読み方を表すのかを整理します。商品一覧の例でも、想定した順序をそのまま正解にせず、商品名や価格、次の操作を実際に見つけられるかで確かめます。

2.2 Z型：要素の少ない横書きの画面で考える

Z型は、左上から右上、次に左下から右下へという順序を、アルファベットのZに見立てた配置の考え方です。横書きで要素の少ない画面を組み立てる際の仮説として使えます。

横書きの広告や紹介ページでは、上部で内容を伝え、下部に次の操作を置く構成を考える手がかりになります。ただし、雑誌、広告、商品棚を同じ視線の規則で説明することはできません。媒体と見る目的を分けて考えましょう。

商品紹介の画面なら、上部に商品名と概要、続いて写真や特徴、最後に購入や詳細確認への入口を置く案が考えられます。これは配置案であり、目の高さから視線が必ずこの順番で動くと保証するものではありません。

上部に要素を詰め込むと、それぞれの優先度が分かりにくくなります。見出し、画像、余白を使って情報を分けましょう。読み始める位置は言語の表記方向やレイアウトにも左右されるため、日本人全体の読書習慣だけで一つの動きを説明しないことが大切です。

2.3 N型：縦書きの読み順とUIの操作順を分ける

N型は、右上から右下へ読み、次に左側へ移って上から下へ読む流れをNの形に見立てたものです。縦書きの文章や段組みを考える際の整理として扱います。

縦書きの新聞や小説では、文字は上から下へ、行は右から左へ進みます。W3Cの日本語組版の解説でも、この組方向が整理されています。ただし、新聞の見出しの位置や読み始める記事まで一律に決まるわけではありません。

縦書きの紹介文や読み物を含むUIでは、本文の組方向と、ボタンやメニューの操作順を分けて確認しましょう。横書きの画面へN型をそのまま当てはめるのではなく、文章と操作要素のつながりが自然かを見ます。

2.4 Webページで見られるF型の読み方と注意点

F型は、ページ上部を横に読み、少し下でも横に読み、その後は左側を縦に走査するような読み方です。Nielsen Norman Groupの視線計測研究（英語）で報告された複数のパターンの一つであり、すべてのWebページやアプリが目指すべき形ではありません。

冒頭には、そのページで何が分かるかを簡潔に示します。長い文章が続く場合は、内容の分かる見出しと段落に分け、探している部分へ進めるようにしましょう。途中へのリンクから訪れる人もいるため、冒頭から順番に読まれることを前提にしない設計が必要です。

商品一覧では、商品名、価格、在庫などを同じ位置とまとまりで示すと比較しやすくなります。Fの形を作るために要素を並べるのではなく、必要な項目を見落とさずに探せるかを判断基準にします。

「考えさせない」という表現で知られる『Don’t Make Me Think』の著者はSteve Krug（英語）です。ここで目指したいのは、ユーザーの判断そのものをなくすことではなく、名称や配置の曖昧さによる余計な迷いを減らすことです。F型を守ることと同義ではありません。

3. 商品一覧で、情報の優先順位と余白を決める

架空のアウトドア用品店で、防水ジャケットを比較する一覧を作るとします。利用者は「通勤で使える商品を、価格と在庫を見て選びたい」と考えています。各カードには商品画像、商品名、価格、在庫、短い説明、「詳細を見る」があります。この段階では装飾をそろえるより、比較に必要な情報が各カードのどこにあるかをそろえます。

3.1 商品名・価格・在庫を一つのまとまりにする

画像と商品名が遠く、価格が隣のカードに近いと、どの商品についての情報か読み取りにくくなります。カードの外側にある間隔と、カード内の間隔を分け、同じ商品に属する情報が近く見えるようにします。枠線を増やす前に、余白だけでまとまりを区別できるか試してください。

3.2 短い商品名だけで配置を決めない

「レインジャケット」と「軽量パッカブル・防水ジャケット」を同じカードに入れると、商品名の行数が変わります。短い名前だけで整った画面を作ると、実際の商品を載せたときに価格や操作がずれることがあります。名前が長いカード、在庫表示が加わるカード、説明がないカードを並べて設計します。

比較を重視する一覧では、商品名に必要な領域を確保し、価格の開始位置をそろえる案が考えられます。狭い画面でそれでも窮屈なら、列数を減らします。文字を小さくして同じ列数を維持するより、何の商品かと価格を読めることを優先します。

3.3 狭い画面でも、読む順番を保つ

デスクトップで3列だった一覧をスマートフォンで1列にする場合、カードを縮めるだけではなく、画像と説明の並びも検討します。画像が大きすぎて商品名が下へ押し出されるなら、一覧では画像の比率を抑え、詳細画面で大きく見せる方法があります。商品の識別に必要な写真まで小さくしないよう、実際の内容を入れて判断します。

確認するのは完成サイズだけではありません。幅を途中まで狭め、長い商品名が折り返す瞬間を見ます。価格と在庫が重ならないこと、詳細へ進む操作が画面外にはみ出さないことを確かめ、列を切り替える基準を決めます。

4. Pixsoで配置案を比較する

PixsoのUIデザイン機能で商品カードをコンポーネントにし、同じ商品情報を使った二つの配置案を作ります。一方は画像を大きく、もう一方は価格と在庫のまとまりを優先する、と変更する点を絞ると、違いを説明しやすくなります。オートレイアウトでは、カード内の余白、情報同士の間隔、伸縮させる領域を分けて設定します。

レビューでは「おすすめの配置はどちらですか」だけでなく、「在庫があり、予算に合う商品を選んで詳細を開いてください」と依頼します。商品名と価格を何度も見直す、別の商品に付いた在庫表示を読む、といった迷いがあれば、まとまりや整列を修正します。視線計測をしていない場合も、操作中の発言や選択した場所から改善点を探せます。

配置が決まったら、採用したカードと、長い文字を入れた確認用のカードを同じファイルに残します。後から商品が増えたときも、どの情報を同じ位置に保つのかがチームに伝わります。

情報のまとまりから、見やすいUIを作る

UIデザインの配置は、Z型やF型に当てはめることからではなく、利用者が比較する情報を決めることから始まります。商品名と価格を一組にし、長い内容と狭い画面でも関係が崩れないように整える。そのうえで実際の操作を見れば、次に変えるべき余白や位置が具体的になります。