あやね
UIデザインツールの操作を覚えることは大切ですが、ショートカットキーの数だけで画面の使いやすさは決まりません。誰が、どの画面で、何を探したり操作したりするのかを先に整理しましょう。
たとえば商品一覧から詳細を開く画面なら、商品名、価格、主要な操作をどの順番で見つけてほしいかを考えます。UIデザインツール・Pixsoでは、フレームや再利用する部品を準備しながら、配置の違いを比較できます。
1. UIデザインを始めるときにフレームを決める理由
画面を具体化するときは、まず対象のユーザーと利用場面を確認し、デザインする領域をフレームとして設定します。Adobe XD、Figma、Sketchなどでも画面の枠を使ってレイアウトを組み立てますが、調査やアイデア出しより前に必ずフレームを作る、という意味ではありません。
フレームがあると、限られた領域で何を優先するかを検討できます。誰に何を見てもらいたいかを決め、その情報が想定する画面幅で読み取れるかを確かめましょう。
1.1 レスポンシブデザインを取り入れているUIデザインが一般的
UIデザインは、Webページやアプリなどでユーザーとサービスをつなぐ接点を設計することです。パソコン、タブレット、スマートフォンなど、利用する機器や画面の広さ、入力方法は一つとは限りません。
レスポンシブデザインでは、表示領域に応じて要素の配置や大きさを調整します。端末名ごとに別の完成図を用意するだけではなく、文字の折り返し、画像の比率、列数などが幅の変化にどう対応するかを決めます。調整が適切でないと、内容が重なったり画面からはみ出したりします。
繰り返し使うボタンやカードを部品として管理すると、文字の長さや余白のルールをそろえやすくなります。ただし、部品にしただけで画面全体がレスポンシブになるわけではありません。親のフレームとの位置関係やサイズの変化も設計します。
1.2 Pixsoでデザインを作成したらアセット機能・コンポーネント機能が便利
Pixsoで画面を作るときも、フレームを用意して作業領域を決められます。ここでは商品一覧を例に、広い画面と狭い画面のフレームを並べ、表示できる情報量を比べます。
フレームのサイズは対象の表示領域に合わせて設定します。アセットやコンポーネントを使えば、商品カードやボタンなど繰り返し使う要素を管理し、チームで共有できます。プリセットの端末サイズは出発点として使い、内容に応じた中間の幅も確認しましょう。
Pixsoでは複数人で同じファイルを編集できます。共通の商品カードを使いながら、「価格は見つかるか」「長い商品名が操作ボタンを押し下げないか」といった具体的な点を、同じ画面上で確認すると判断を共有しやすくなります。
配置のテクニックを試す前に、UIデザインの基本原則を確認することで、読みやすさや一貫性を判断する基準を整理できます。
2. どこに何を配置するかはデザイナーのセンス？有効な配置関係と人間の心理効果
2.1 視線の動きを配置の手がかりにする
視線の動きは、文章の方向、見出しや画像の強さ、探している情報などに影響されます。よく使われるZ型・N型・F型という整理は、配置を考える手がかりにはなりますが、全員の視線が必ず同じ順番で動く法則ではありません。
以下では、それぞれがどのような配置や読み方を表すのかを整理します。商品一覧の例でも、想定した順序をそのまま正解にせず、商品名や価格、次の操作を実際に見つけられるかで確かめます。
2.2 文字が横向きに表示されている媒体で使用されるZ型の視線誘導
Z型は、左上から右上、次に左下から右下へという順序を、アルファベットのZに見立てた配置の考え方です。横書きで要素の少ない画面を組み立てる際の仮説として使えます。
横書きの広告や紹介ページでは、上部で内容を伝え、下部に次の操作を置く構成を考える手がかりになります。ただし、雑誌、広告、商品棚を同じ視線の規則で説明することはできません。媒体と見る目的を分けて考えましょう。
商品紹介の画面なら、上部に商品名と概要、続いて写真や特徴、最後に購入や詳細確認への入口を置く案が考えられます。これは配置案であり、目の高さから視線が必ずこの順番で動くと保証するものではありません。
上部に要素を詰め込むと、それぞれの優先度が分かりにくくなります。見出し、画像、余白を使って情報を分けましょう。読み始める位置は言語の表記方向やレイアウトにも左右されるため、日本人全体の読書習慣だけで一つの動きを説明しないことが大切です。
2.3 新聞や小説などで誘発されるN型の視線誘導の特徴
N型は、右上から右下へ読み、次に左側へ移って上から下へ読む流れをNの形に見立てたものです。縦書きの文章や段組みを考える際の整理として扱います。
縦書きの新聞や小説では、文字は上から下へ、行は右から左へ進みます。W3Cの日本語組版の解説でも、この組方向が整理されています。ただし、新聞の見出しの位置や読み始める記事まで一律に決まるわけではありません。
縦書きの紹介文や読み物を含むUIでは、本文の組方向と、ボタンやメニューの操作順を分けて確認しましょう。横書きの画面へN型をそのまま当てはめるのではなく、文章と操作要素のつながりが自然かを見ます。
2.4 Webページで見られるF型の読み方と注意点
F型は、ページ上部を横に読み、少し下でも横に読み、その後は左側を縦に走査するような読み方です。Nielsen Norman Groupの視線計測研究（英語）で報告された複数のパターンの一つであり、すべてのWebページやアプリが目指すべき形ではありません。
冒頭には、そのページで何が分かるかを簡潔に示します。長い文章が続く場合は、内容の分かる見出しと段落に分け、探している部分へ進めるようにしましょう。途中へのリンクから訪れる人もいるため、冒頭から順番に読まれることを前提にしない設計が必要です。
商品一覧では、商品名、価格、在庫などを同じ位置とまとまりで示すと比較しやすくなります。Fの形を作るために要素を並べるのではなく、必要な項目を見落とさずに探せるかを判断基準にします。
「考えさせない」という表現で知られる『Don’t Make Me Think』の著者はSteve Krug（英語）です。ここで目指したいのは、ユーザーの判断そのものをなくすことではなく、名称や配置の曖昧さによる余計な迷いを減らすことです。F型を守ることと同義ではありません。
まとめ
フレームで表示領域を決め、共通の部品を管理し、読み方の違いを踏まえて情報を配置しましょう。Pixsoで商品一覧の案を並べ、「商品名と価格を見つけて詳細へ進む」という同じ操作を確認すると、視線パターンだけでは分からない配置の課題を見つけられます。
