昨年、ある人材系BtoB企業のサイトリニューアル案件で印象的な出来事がありました。

制作会社が作ったデザインカンプを見て、先方の取締役が「うちのサイト、きれいなのに問い合わせが全然来ないんですよね」と言ったんです。見た目は洗練されていました。写真の選定もトーンも統一されている。ただ、実際にサイトを触ってみると、サービス紹介ページにたどり着くまでにクリックが4回必要で、問い合わせフォームは最下部に小さくリンクされているだけ。スマホでは、メニューを開くハンバーガーアイコンが背景と同色でほとんど見えませんでした。

きれいなのに使えない。これは「UIは整えたけれどUXを設計していない」サイトの典型です。

このような話は現場でよく耳にします。UIとUXを混同している、あるいはどちらか一方しか意識していない。結果として、見た目はいいけれど成果が出ない。あるいは機能は揃っているけれど見た目が雑で離脱される。どちらも中途半端な状態です。

この記事では、UIとUXの違いを現場の具体例で解きほぐしながら、サイト設計で実際に使えるフレームワークや原則を紹介します。「自社のサイトで何をすればいいのか」に答える構成にしています。

UIとUXは何が違うのか

UI（User Interface）は、ユーザーが直接目にして触れるもの、操作する接点のすべてです。レストランにたとえるなら、テーブルの配置、メニューのデザイン、照明の明るさ、皿の盛り付けにあたります。

UX（User Experience）は、そのレストランでの体験全体です。予約のしやすさ、入店から着席までのスムーズさ、料理が出てくるタイミング、会計の簡便さ、帰り道での満足感。UIを含む、あらゆるタッチポイントの総合評価がUXです。

つまり、UIはUXの一部であって、イコールではありません。UIが完璧でもUXが悪いことはありますし、その逆もあります。

Webサイトに置き換えると、こうなります。

  • UI：ボタンの色と形、フォントサイズ、余白のとり方、ナビゲーションの配置、フォームのデザイン
  • UX：そのサイトを訪問してから目的を達成する（問い合わせする、情報を見つける、購入する）までの体験全体

Nielsen Norman Groupの定義でも、UXは「ユーザーが企業・サービス・製品とやりとりするすべての側面」を指すとされています。UIはそのうちの「視覚的・操作的な接点」にあたる部分です。

クライアントとの打ち合わせで「UIを良くしたい」と言われたとき、話を聞いてみると実は「ユーザーが目的のページにたどり着けない」「フォームの途中で離脱する」というUXの課題だった、ということが頻繁にあります。言葉の整理は、正しい課題設定の出発点になります。

UXデザインの5段階モデル

UXデザインの全体像を理解するうえで、実務に使いやすいフレームワークがJesse James Garrettの「UXの5段階モデル」です。

抽象度の高い層から順に、5つの段階でUXの設計を捉えます。

第1層：戦略（Strategy）

「このサイトは何のために存在するのか」を定義する層です。ビジネスの目的とユーザーのニーズ、この2つの交点を見つけます。

BtoBサイトなら、ビジネス目的は「問い合わせの獲得」「資料ダウンロード」「ブランド認知」あたりが多いです。一方、ユーザーニーズは「自社の課題を解決できるサービスかどうかを判断したい」「他社と比較するための情報がほしい」あたりになります。

ここが曖昧なままデザインに入ると、見た目はきれいだけれど何をさせたいのかわからないサイトが出来上がります。冒頭の人材系企業がまさにそうでした。「とりあえずきれいにリニューアルしたい」で走った結果、CVに直結する導線が設計されなかったのです。

第2層：要件（Scope）

戦略を実現するために、何のコンテンツと機能が必要かを洗い出す層です。

たとえば「問い合わせ獲得」が目的なら、サービス紹介、導入事例、料金の目安、よくある質問、そして問い合わせフォーム。この5つは最低限必要です。逆に、代表者のポエムのようなメッセージや、更新されないブログは、目的に貢献しないなら削るか後回しにする判断が必要になります。

第3層：構造（Structure）

コンテンツや機能をどう組み合わせて、ユーザーの行動フローを設計するか。情報アーキテクチャ（IA）の話です。

サイトマップを作る工程が該当します。ただ、ページの一覧を作るだけでは不十分で、「トップページからサービスページに遷移して、事例を見て、問い合わせフォームに入る」というユーザーの行動シナリオに沿って構造を組みます。

クライアント案件では、リニューアル前にGA（Google Analytics）の行動フローを分析して、実際のユーザーがどの経路をたどっているかを把握してから構造設計に入ります。想定と実態がずれていることが多いからです。

第4層：骨格（Skeleton）

画面のレイアウト、ナビゲーションの配置、コンテンツの優先順位。ワイヤーフレームの段階です。

ここで重要なのは、見た目のデザインに入る前に「どの情報をどの位置に置くか」を決めることです。ナビゲーションバーに何の項目を並べるか、ファーストビューに何を表示するか、CTAをどこに配置するか。

この段階ではまだ色もフォントも決めません。灰色の箱と線だけで構成されたワイヤーフレームで情報設計の妥当性を検証します。ここでの判断がCVRに直結します。LPのCVRを上げるUI改善ポイントでも書いた通り、情報の並び順ひとつでコンバージョン率は大きく変動します。

第5層：表層（Surface）

色、フォント、画像、アニメーション。ユーザーが実際に目にするビジュアルデザインの層です。

多くの人がUIデザインと聞いて最初にイメージするのがこの層ですが、5段階モデルのうちでは最後の層になります。つまり、上の4層がしっかり設計されていなければ、表層をいくらきれいにしても成果は出にくいということです。

逆に言えば、戦略から骨格までが的確に設計されていれば、表層は破綻しない程度でもサイトは十分機能します。もちろん、両方揃っているのが理想です。Webデザインのトレンド2026で紹介した最新の表現手法も、この5段階の土台がなければ効果を発揮しません。

UIデザインの4原則

UXの設計思想がわかったところで、次はUIデザインの具体的な原則に入ります。ここでは、現場で特にインパクトが大きい4つの原則を取り上げます。

原則1：一貫性（Consistency）

ボタンの色、フォントサイズ、見出しのスタイル、リンクの挙動。これらがページごとにバラバラなサイトは、ユーザーに認知的な負荷をかけます。「この青いテキストはクリックできるのか」「このアイコンは何を意味するのか」をページごとに判断させるのは望ましくありません。

Google Material Designのガイドラインでも、一貫性はUIデザインの根幹として位置づけられています。コンポーネント（ボタン、カード、入力フィールドなど）の見た目と挙動を統一し、ユーザーが学習コストをかけずに操作できるようにします。

実務で一貫性が崩れやすいのは、複数のデザイナーやページ制作者が関わる案件です。対策としては、デザインシステム（UIコンポーネントとルールの集合体）を最初に定義すること。小規模なサイトであっても、最低限「ボタンスタイル3種」「テキストスタイル5種」「カラーパレット」をドキュメント化しておくだけで、ページ間のブレが大幅に減ります。

原則2：フィードバック（Feedback）

ユーザーが操作したとき、結果を即座に返すこと。ボタンをクリックしたら色が変わる。フォームを送信したら「送信完了しました」のメッセージが出る。エラーがあれば、どの項目がどう間違っているか具体的に表示する。

当たり前のことに聞こえますが、クライアントのサイト診断をしていると、フォーム送信後に何のフィードバックもなく画面が遷移するサイトが今でもあります。ユーザーは「送信できたのか」が不安になり、もう一度送信ボタンを押す。結果として、二重送信が発生します。

Jakob Nielsenが提唱するユーザビリティの10原則でも、「システムの状態の視認性（Visibility of System Status）」は第1原則に挙げられています。操作に対して0.1秒以内にフィードバックを返すのが理想です。

CSSのホバーエフェクトやローディングインジケーターは、実装コストが低い割にユーザーの操作感を大きく改善します。特にBtoBサイトのフォーム周りでは、バリデーションメッセージのリアルタイム表示がフォーム完了率に直結します。

原則3：近接の法則（Proximity）

関連する要素は近くに、関連しない要素は離して配置する。ゲシュタルト心理学の知覚原理のひとつで、UIデザインの基盤になっています。

たとえば、商品の価格と「購入ボタン」が離れた位置にあると、ユーザーは両者の関連性を直感的に把握しにくくなります。「この金額で買えるのか」と確認するために視線が行き来し、迷いが生まれます。

実例を挙げます。あるBtoB SaaSの料金ページで、各プランの価格表示とCTA（「無料で試す」ボタン）の間に長い機能比較リストが挟まっていました。ユーザーは価格を見て「試してみたい」と思っても、スクロールしてCTAを探す必要がありました。

料金表示の直下にCTAを配置し直しただけで、料金ページからトライアル申込への遷移率が向上しました（26%など）。コンテンツは一字も変えていません。配置だけの変更です。

原則4：視覚的階層（Visual Hierarchy）

画面上の情報に優先順位をつけて、ユーザーの視線を誘導すること。フォントサイズ、色のコントラスト、余白、太さ。これらの差で「どこを最初に見てほしいか」をコントロールします。

Nielsen Norman Groupの視線追跡研究では、ユーザーはWebページをF字型に走査する傾向が報告されています。ページ上部の見出しと、左端のテキスト冒頭に視線が集中する。つまり、重要な情報は上部と左に配置するのが合理的です。

ただし、F字型パターンはテキスト中心のページで顕著なもので、ビジュアルが多いページでは異なるパターンになります。重要なのは「ユーザーの視線がどう動くかを想定して、情報を配置する」という考え方そのものです。

実務では、ページのスクリーンショットを撮ってモノクロに変換し、「色情報を除いた状態でも重要な要素が目立っているか」を確認する手法が使えます。モノクロで埋もれる要素は、ユーザーにも見落とされている可能性が高いです。

UI/UX改善がCVRに与える影響

UIとUXの理論を整理したところで、それを実行すると数字は動くのか、という話に移ります。

Forrester Researchは、UXに投資した1ドルは100ドルのリターンを生む（ROI 9,900%）と試算しています。数字の大きさはともかく、UX改善の投資対効果がきわめて高いという主張は、他の複数の調査とも整合的です。

また、McKinsey & Companyが2018年に発表した「The Business Value of Design」では、デザインへの投資を経営レベルで重視している企業は、そうでない企業に比べて収益成長率が約2倍であったと報告されています。

大きな調査の数字は参考になりますが、もう少し現場に近い話をします。

ケース1：ナビゲーション構造の見直し

BtoB向けのITサービス会社のサイトで、グローバルナビゲーションの項目が12個あり、ユーザーが目的のページを見つけられないという課題がありました。ヒートマップを分析すると、ナビゲーション内でクリックされていた項目は実質4つだけでした。

ナビゲーションを4項目に整理し、残りはフッターとサイトマップに移動。結果として、サービスページへの遷移率が改善し（34%など）、問い合わせ件数も増加しました（月あたり1.6倍など）。

ケース2：フォームのUX改善

製造業のBtoBサイトの問い合わせフォームで、入力完了率が低迷していました（28%など）。フォームのUI自体はそこまで悪くなかったのですが、問題はUXにありました。フォームへの導線が「お問い合わせ」としか書かれておらず、押した先で何が起きるかの期待値設定がされていなかったのです。

フォームページの冒頭に「1営業日以内にメールでご返信します。まずはお気軽にご相談ください」のテキストを追加し、フォーム項目を8個から4個に削減。バリデーションをリアルタイム化。これで入力完了率が改善しました（28%→52%など）。

ケース3：モバイルUIの再設計

不動産テック系のBtoBサービスで、スマホからのフォーム完了率がPCの3分の1しかなかった案件です。調べてみると、スマホでCTAボタンが画面外に押し出されており、指でスクロールしないと見えない状態でした。また、入力フィールドのタップ領域が小さく、隣のフィールドを誤タップする問題も発生していました。

追従型CTAバーの追加、タップ領域の拡大（高さ48px以上）、入力フィールド間のマージン拡大を実施。スマホのフォーム完了率がPCに近い水準まで回復し、全体のCV件数も増加しました（月あたり22%など）。

よくある失敗パターン

UI/UX改善でありがちな失敗パターンを3つ挙げます。

パターン1：UIだけを磨いてUXを放置する

見た目のリニューアルに予算を全振りして、情報設計やユーザー導線は旧サイトのまま。結果として、「きれいになったけれど数字は変わらない」状態になります。

冒頭の人材系企業はまさにこのケースでした。デザインカンプの段階で情報設計とユーザーフローの検討が抜けていた。表層（第5層）だけ変えても、構造（第3層）と骨格（第4層）が旧来のままなら体験は変わりません。

パターン2：UXの設計はできているがUIが雑

逆のパターンもあります。ユーザーフローは考えられているのに、ボタンのサイズが小さすぎる、テキストのコントラストが不足している、レスポンシブ対応が中途半端。UIが雑なために、せっかく設計したUXが台無しになっている状態です。

UXは骨組み、UIは仕上げ。どちらが欠けても成果には結びつきません。

パターン3：ユーザー不在のまま「社内の合意」で設計する

「うちの社長はこの色が好き」「営業チームはこの情報を入れてほしい」。社内の声だけで作られたサイトには、ユーザーの視点が入っていません。

UXデザインの根本は「ユーザーを理解し、ユーザーのために設計する」ことです。社内の好みで作ったサイトは、社内の人には快適かもしれませんが、ユーザーが求めている体験とは乖離していることが多いです。

対策は単純です。サイト改善の意思決定に、データを入れる。GAのユーザー行動データ、ヒートマップ、フォームの離脱率。数字は好みの議論を終わらせてくれます。

自社サイトのUI/UXをチェックする方法

ここまで原則と事例を並べてきましたが、結局「自分のサイトでは何をすればいいのか」が一番知りたいところだと思います。まず手を動かすためのチェックリストを用意しました。

5分でできるセルフチェック（UI編）

  • CTAボタンの色がページ内で一貫しているか
  • テキストと背景のコントラスト比が4.5:1以上あるか（Chrome DevToolsで確認可能）
  • スマホで主要なボタンをすべて親指でタップできるか（48px以上）
  • フォームにリアルタイムバリデーションが入っているか
  • ナビゲーションの項目が7個以下に収まっているか

5分でできるセルフチェック（UX編）

  • トップページからサービスページまで3クリック以内でたどり着けるか
  • 初訪問のユーザーが10秒以内に「このサイトは何屋か」を理解できるか
  • 問い合わせフォームの入力項目が5個以下か
  • フォーム送信後に何が起きるか（返信の目安、次のステップ）が明記されているか
  • モバイルでページが3秒以内に表示されるか（PageSpeed Insightsで計測）

ひとつでもチェックが外れた項目があれば、そこから改善を始めてみてください。全部を同時にやる必要はありません。インパクトが大きいのはCTA周りとフォームです。この2つから着手するのが、CVR改善の近道になります。

UI/UXの学習リソース

UI/UXの原則をもっと深く学びたい方向けに、実務で参照しているリソースを紹介します。

Nielsen Norman Group（NN/g）は、UXリサーチの第一人者であるJakob Nielsenが共同設立した組織です。記事は英語ですが、ユーザビリティの10原則をはじめ、UIデザインのほぼすべての論点を調査ベースで解説しています。現場で判断に迷ったとき、まず参照する先のひとつです。（https://www.nngroup.com/）

Google Material Designは、Googleが公開しているデザインシステムのガイドラインです。コンポーネントの設計基準、アクセシビリティの実装指針、レイアウトの原則が網羅されています。自社のデザインシステムを作る際の参考資料として優秀です。（https://m3.material.io/）

Apple Human Interface Guidelinesは、Apple製品向けですが、プラットフォームを問わずUIデザインの原則として通用する内容が多い資料です。特にタップターゲットのサイズ指針やナビゲーション設計のセクションは、Webサイトのモバイルデザインにも直接応用できます。（https://developer.apple.com/design/human-interface-guidelines/）

Laws of UXは、Jon YablonskiがまとめたサイトでUIデザインに関連する心理学の法則を簡潔にビジュアル化しています。近接の法則（ゲシュタルト）、ヒックの法則（選択肢が多いと判断に時間がかかる）、フィッツの法則（ターゲットが大きいほどクリックしやすい）など。打ち合わせでクライアントに説明するときに引用しやすいです。（https://lawsofux.com/）

「見た目の問題」ではなく「事業の問題」として扱う

最後に、UI/UXの改善をどう社内で推進するかの話をします。

UI/UXの改善提案をすると、しばしば「デザインの話でしょう」と軽く扱われることがあります。特にBtoBの企業では、デザインを見た目の好みの問題と捉えている経営層がまだ多いです。

ですが、ここまで書いてきた通り、UI/UXの問題は見た目の問題ではなく事業の問題です。ナビゲーションが悪ければ問い合わせ件数が減る。フォームが使いにくければリードが漏れる。モバイル対応が不十分ならトラフィックの半分以上を活かせない。すべて売上に跳ね返ります。

社内を動かすには、「UIを変えたい」ではなく「CVRが低い原因はUIにある。改善すれば月あたりの問い合わせが何件増える見込みだ」という伝え方が必要です。デザインの言葉ではなく、ビジネスの言葉で語る。データを添える。

McKinseyの調査で示された通り、デザインを経営レベルで意思決定に組み込んでいる企業は、そうでない企業の約2倍の成長率を見せています。UI/UXはコスト項目ではなく、投資項目だと言えます。

おわりに

UIとUXの違い、5段階モデルの構造、UIの4原則、CVRへの影響。ここまで読んで感じてほしいのは、UI/UXデザインは「センスがある人がやること」ではなく、「論理と原則に基づいた設計プロセス」だということです。

原則を知っていれば、改善すべきポイントが見えます。データを見れば、優先順位がつけられます。テストを回せば、効果を検証できます。

全部を一度にやる必要はありません。まずはCTAの配置とフォームの離脱率を確認するところから始めてみてください。この2つだけで、サイトの成果が大きく変わった事例をいくつも見てきました。

株式会社ティーラが提供するCVアップパートナーズは、UI/UX改善をCVRという数字に紐づけて支援するサービスです。GAの分析、ヒートマップ診断、UI改善の優先順位づけ、A/Bテストの設計と実行まで一気通貫で対応します。

「自社サイトのUI/UXがどの水準にあるのか知りたい」「改善したいけれど何から手をつけるべきかわからない」という方は、まず改善ポイントを整理した資料をご覧ください。

UI/UX改善の資料をダウンロードする

参考文献