フレームワーク活用ガイド
押さえておきたい用語
- ヤコブの法則: ユーザーは大半の時間を「他のサイト」で過ごすため、自分のサイトも同じように動くと期待するという法則
- メンタルモデル: ユーザーが過去の経験から持っている「こう動くはず」という内的な期待
- デザインパターン: 多くのサービスで繰り返し使われる、定着したUIの形式（ハンバーガーメニュー等）
- 漸進的変更: 既存のメンタルモデルを壊さないよう段階的にUIを移行する手法
1
競合UI調査
同カテゴリのサービス5〜10個のUIパターンを収集 → 共通パターン抽出
こんな悩みに効く#
- 「独自UIにこだわったのにユーザーが操作方法を理解してくれない」
- 「リニューアル後にコンバージョンが急落した」
- 「業界標準に合わせるべきか独自路線で行くべきか判断がつかない」
使い方#
競合UIパターンの収集
同カテゴリのサービスを5〜10個ピックアップし、主要画面のスクリーンショットを並べる。ナビゲーション位置、ボタン配置、フォーム構成など操作の「お作法」を書き出す。
共通パターンの特定
収集したUIから、7割以上のサービスで共通している要素を「業界慣習」として抽出する。例：ECならカートアイコンは右上、検索バーはヘッダー中央、商品画像は左・詳細は右。
自サイトとのギャップ分析
自サイトのUIを共通パターンと比較し、乖離がある箇所をリストアップする。各乖離について「この違いはユーザーに学習コストを強いるか」を評価する。
準拠か差別化かを判断する
ナビゲーションや基本操作は慣習に準拠し、プロダクトの独自価値を生む部分だけ差別化する。差別化する場合は、初回利用時のオンボーディングやツールチップで学習コストを下げる施策をセットで設計する。
具体例#
ECサイト — 検索バー位置の変更で売上回復
状況: デザインリニューアルで検索バーをサイドバーに移動したところ、検索利用率が38%低下し売上も減少。
適用プロセス:
- 競合EC10サイトを調査し、全サイトが検索バーをヘッダー中央〜右に配置していることを確認
- ヒートマップでユーザーの視線が最初にヘッダー中央に集中していることを検証
- 検索バーをヘッダー中央に戻し、サイドバーにはカテゴリナビゲーションを配置
成果: 検索利用率がリニューアル前の水準に回復。さらにカテゴリナビゲーションの併用で平均閲覧ページ数が1.4倍に増加し、月間売上が22%回復した。
SaaSダッシュボード — 設定アイコンの標準化
状況: 管理画面の設定機能に独自の「スライダーアイコン」を使用していたが、サポートへの「設定画面はどこですか」という問い合わせが週30件発生。
適用プロセス:
- BtoB SaaS 8サービスのアイコン体系を調査し、歯車アイコンが設定の事実上の標準と確認
- 社内でA/Bテストを実施。歯車アイコン版はタスク完了率が独自アイコン版の2.1倍
- 歯車アイコンに変更し、ツールチップ「設定」も追加
成果: 設定関連のサポート問い合わせが週30件→3件に激減。オンボーディング完了率も15ポイント向上し、トライアル→有料転換率の改善に貢献した。
社内ツール — 段階的UIリニューアル
状況: 10年使われた社内受発注システムを全面リニューアルしたところ、ベテラン社員から「操作が分からなくなった」と苦情が殺到し業務が停滞。
適用プロセス:
- ヤコブの法則の観点で分析：旧UIで10年間形成されたメンタルモデルを一度に破壊したことが原因
- 漸進的変更に方針転換。まず視覚デザイン（色・フォント）のみ更新し、操作導線は旧UIを維持
- 月1回のペースでナビゲーション構造を段階的に移行。変更点はポップアップで案内
成果: 苦情が月50件→5件に減少。段階的移行の完了までに6か月かかったが、その間も業務効率が落ちることなく、最終的には処理速度が旧UIから20%向上した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| 全部独自にする | 基本操作の学習コストが高く離脱が増える | コアの操作は慣習に合わせ、独自性は価値提供部分に限定 |
| 競合の完全コピー | 差別化できず、後発不利になる | 慣習は守りつつ、自社ならではの体験を上乗せする |
| 一括リニューアル | 長年のメンタルモデルを破壊しユーザー混乱 | 漸進的変更で段階的に移行する |
| 調査なしの「直感」 | 自分のメンタルモデルとユーザーのそれが異なる | 競合調査とユーザーテストで客観的に判断する |
まとめ#
ヤコブの法則が示すのは 「ユーザーの期待は他のサイトで形成される」 というシンプルな事実だ。独自性のあるUIを追求すること自体は悪くないが、ナビゲーションやフォームなど基本操作の「お作法」を無視すると、学習コストという見えない壁がコンバージョンを押し下げる。慣習に乗る部分と独自性を出す部分を意識的に切り分けることが、使いやすさと差別化を両立させる鍵になる。