プログラミングの設計はできるが、UI/UXデザインの心得がない。
向き不向きはあるかもしれないが、まずは基本的な考え方や思考のフレームを押さえたい。

UI/UXデザインの根本にあるのは、「自分が正しいと思う構造」ではなく「相手が迷わない構造」を作るという視点の転換である。
プログラミングでは論理的に正しい構造が良い設計だが、UI/UXでは、ユーザーが「考えなくても次に何をすべきかわかる」状態が良い設計だ。

この記事では、その視点に立って、学び方の指針、認知や視線の法則、事例から導かれる設計原則、そしてビジネスとの関係まで整理する。

学び方と4つの基本フレーム

観察から入り、手を動かす

学び方は3段階で考えると見通しが良い。

• 観察から入る。日常のアプリやWebサービスを「なぜこうなっているのか」という目で見る。使いにくいと感じた瞬間が最高の教材になる
• 最小限の原則を押さえる。後述する4つの思考フレームを軸にする
• 手を動かす。既存の画面を「自分ならこう変える」とスケッチしてみる。紙とペンで十分

プログラムを見るときは「どう作られているか（How）」を考える。
一方、デザインを観察するときは「なぜこうしているか（Why）」から入るほうが実りが多い。
Howから入ると実装テクニックの話になるが、Whyから入ると設計意図に到達できる。

具体例の蓄積が少ない段階で抽象化・体系化すると、狭い枠に閉じるリスクがある。
「いろんな要素があるらしい」とゆるく持っておき、具体的なUIを観察するたびに「これはどの要素が効いているか」を考えるほうが、正確な全体像が育つ。
知識が先で、体系は後からついてくる。

日々の練習としては、1日1回30秒でいい。
「このボタンなんでここにあるんだろう」と仮説を立てる。
正解かどうかは重要ではなく、問いを立てる習慣そのものが蓄積になる。

4つの思考フレーム

UI/UXを考えるときの軸として、以下の4つが基本になる。

• ユーザーの目的は何か。機能ではなく、ユーザーが達成したいことを起点にする
• 情報の優先順位。画面上の情報すべてが同じ重要度ではない。何を最初に見せ、何を隠すか
• 認知負荷を減らす。選択肢が多すぎると人は選べない。一画面で求める判断を最小限にする
• フィードバックを返す。ユーザーの操作に対して結果を即座に伝える

このフレームは、後で出てくる個別の法則を整理するための「容れ物」として機能する。

視線・認知・行動の法則

視線とレイアウトのパターン

人の視線の流れには代表的なパターンがある。

Fパターンは、左上から右に水平、少し下がってもう一度水平、左側を縦に流し読みする動きで、NNGroupのアイトラッキング調査で実証されている。
左から右に読む言語文化圏が前提であり、アラビア語圏などではUIが反転する。

Zパターンは、視線が左上→右上→左下→右下とZ字を描くもので、意図的にビジュアル要素を配置して視線を誘導した結果として現れる。

グーテンベルク・ダイアグラムは、情報が均質に配置された画面で視線が左上から右下へ対角線的に流れ落ちるパターンだ。
左下は「休閑領域」と呼ばれ、ほとんど注目されない。
もともと印刷物の理論であり、Webではスクロールがあるため「右下」が固定されず、適用場面は限られる。
Web上で機能するのは、ダイアログやカードUIなど固定サイズの閉じた領域の中である。

認知と知覚の法則

UI設計の土台にある法則群を整理する。

• ゲシュタルトの法則。近接（近いものは仲間に見える）、類似（似た見た目は仲間に見える）、閉合（閉じた形を補完する）、連続（線や流れを追いかける）の4つが、グループ化の基本原理になる
• ヒックの法則。選択肢が増えると意思決定にかかる時間が対数的に増える。選択肢を絞るか、段階的に分けることで対処する
• フィッツの法則。ターゲットが大きいほど、近いほど、素早く正確にクリックできる。スマホで主要ボタンを画面下部に置くのは、この法則と親指の届きやすさの組み合わせだ
• 画像優位性効果。人間は文字情報より画像情報を圧倒的に速く処理できる。ECサイトで商品画像を左に置くのは、この効果とFパターンの組み合わせだ
• ヤコブの法則。ユーザーは大半の時間を他のサイトで過ごしているので、自分のサイトも他と同じように動くことを期待する。独創的なUIより慣習に沿ったUIのほうが使いやすい
• ドハティの閾値。システムの応答が400ミリ秒以内だとユーザーは「待たされている」と感じない

法則は設計を検証する道具である

「ユーザーがこの画面で何をしているか」の下には3層の制約がある。

• 認知の制約。選択肢が多いと迷う、フィードバックがないと不安になる
• 視覚の制約。視線の流れ、情報の読み取り速度
• 身体の制約。親指の届く範囲、タップの精度

どの制約が支配的になるかは、デバイス・画面の性質・状況によって変わる。

ここで重要なのは設計の順序だ。
法則を起点にして配置を決めるのは誤りで、ユーザーの行動を起点にして、結果としてどの法則が当てはまるかが決まる。
法則は設計を検証する道具であって、設計を生成する道具ではない。
デザインの法則には適用範囲があり、「この法則はどういう条件下で有効か」を常に問う必要がある。

事例から導かれる設計原則

視線と配置の対応

「位置」は「重要度」を表す。
目立つ場所がどこかは人間の認知特性で決まっている。
そのため、情報の消費順序とUIの配置順序を一致させると自然に感じる。
たとえば、画像で認識→テキストで確認→ボタンで行動、この順序が配置と一致しているときだ。
さらに、視線の動きを直線にすることも重要で、方向転換のたびに微小な判断コストが発生する。

フォームの送信ボタンが左揃えなのは、ラベル→入力欄と左端を縦に降りてきた視線の延長線上にボタンを置くためだ。
スクロールの有無ではなく、そこに至るまでの視線の軌道が判断基準になる。
一方、ダイアログのOKが右下なのは、「読んで→判断する」という構造の終着点だからである。

ユーザー情報の配置も変化してきた。
従来は右上（視線の優先度が低い位置）だったが、最近は左下に置かれることが増えている。
スマホでの親指の届きやすさが理由だ。
良い設計は、一つの配置が複数の制約を同時に解決している。

同時性とコントロール感

Googleマップの情報カードは、地図の上に重ねて表示される。
画面遷移してしまうと「店の情報」と「店の位置」のどちらかしか見られないからだ。
「ユーザーがこの操作をしている瞬間、他に何を見ていたいか」を問うのが設計の起点になる。

Pull to Refreshが手動なのは、自動だと「自分が今どこにいるかわからなくなる」からだ。
ユーザーのコントロール感を奪わない、という原則が背後にある。
パスワードの表示/非表示も同じで、セキュリティとユーザビリティの衝突を、ユーザー自身に選ばせている。

判断コストと一覧性のトレードオフも、この観点から整理できる。
Netflixが横スクロールを採用しているのは、映画は1つの判断に負荷がかかるので選択肢を制限したいからだ。
メルカリが縦スクロールなのは、商品は写真と価格で瞬時に判断できるので一覧性を上げたいからである。
一つの選択肢を判断するのにかかるコストが、UIの並べ方を決める。

一貫性、予防と回復

一貫性には2種類ある。

• 表面的な一貫性。同じ操作は同じ挙動をする
• 体験の一貫性。ユーザーの期待通りに動く

この2つが衝突するとき、良いUIは体験の一貫性を取る。
バックスペースの長押しによる連続削除や、フリック入力での候補表示は、操作の一貫性を破っているが、体験の一貫性は保っている。

ミスへの対応も2つの設計に分かれる。

• 予防的設計。確認ダイアログのような事前の防御。ただし頻繁な操作では条件反射で「はい」を押すようになり、安全装置として機能しなくなる
• 回復的設計。「取り消し」リンクのように、ユーザーが結果を見てから判断できるようにする

使い分けの基準は取り返しがつくかどうかだ。
Gmailの削除はゴミ箱から戻せるので回復的設計、銀行の送金のような不可逆な操作は予防的設計になる。

そして、操作の重大さと到達の難易度を比例させるという原則もある。
危険な操作や重要な設定を画面の深い階層に置くのは、物理的な距離を認知的なハードルに変換しているからだ。

ビジネスの意図とUI

UIはビジネスの意図を反映する

UIの設計を決める軸は、ユーザーの行動からの逆算だけではない。
ビジネスの意図も同時に作用する。

• YouTubeの投稿ボタンが中央にあるのは、ユーザーの最頻アクションではなく、プラットフォームが望む行動への誘導だ
• Amazonの「今すぐ買う」ボタンは、ユーザーの利益とビジネスの利益が重なる設計である
• GoogleとYahoo! JAPANのトップページの違いは、ビジネスモデルの違いがUIの形を決めることを示している

ユーザーの意図の明確さも情報量の方針を決める。
意図が明確なユーザー（Google検索）には情報を減らすほうが良く、意図が曖昧なユーザー（Yahoo! JAPAN）には情報を並べるほうが価値になる。
「この画面に来るユーザーは目的が明確か、曖昧か」を問うだけで方針が定まる。

LINEとSlackのレイアウトの違い

同じ「チャット」でも、ユーザーが求めているものでUIの正解は変わる。

• LINEは自分が右、相手が左。会話のリズムを視覚化しており、「あなたと私」の関係性が主役だ
• Slackは全員が左揃え。情報のログとして機能し、「何が決まったか、何が共有されたか」を追えることが重要になる

対話の体験を売るのか、情報の蓄積を売るのか。
求められているものが違えば、最適なレイアウトも違う。

ダークパターンの判断基準

設計者の意図（善か悪か）でダークパターンを判断するのは難しい。
意図は外から見えないからだ。

実用的な判断基準は2つある。

• ユーザーがこの仕組みを完全に理解した上でも、便利だと思うか
• 到達した後に妨害があるかどうか。奥に置くことと、たどり着いた人を引き止めることは質が違う

「ユーザーの意思決定を尊重しているか妨害しているか」で判断する、と言い換えてもいい。

まとめ

UI/UXデザインの大部分は「ユーザーの行動を予測し、情報を構造化し、仮説を検証する」プロセスであり、美意識やセンスの話ではなくエンジニアリングの思考と重なる部分が大きい。
ビジュアルデザイン（色、タイポグラフィ、余白、アニメーション）は別スキルであり、分業できる。

機能数で世界最先端だった日本のガラケーがiPhoneに置き換えられたのは、Appleが「何をやらないか決めた」からだ。
機能を削ることで導線が明確になり、ユーザーが迷わなくなった。
機能の寄せ集めではなくデザインが必要、ということである。

生成AIに見た目は作らせられるが、「なぜこのボタンがここにあるのか」という意図は人間が与える必要がある。
設計判断ができる人の価値は、生成AIの時代にむしろ上がる。
意図なくデザインされた結果が、「なんとなくよさそうだけど何をしたらいいかわからないサービス」になる。

原理を説明できることと、自分でデザインを組み上げられることは別だ。
次のステップは、既存のUIを模写して一箇所だけ変えてみること。
なぜ元の位置だったかが、体感でわかる。