UXデザインとは？ホームページ制作の設計プロセスと発注前に知っておきたいポイントを解説

「ホームページのディレクトリマップとは？」では、公開前にページの構成・階層を決めておく重要性を解説しました。ただ、ページの構成が固まっても、それだけでは「使われるホームページ」にはなりません。訪問者がどんな目的で来て、どんな順序で情報を追い、最終的にどう行動するか——この「体験の設計」が抜け落ちたまま制作が進むと、ページ数も階層も申し分ないのに、なぜか問い合わせにつながらないホームページができあがってしまいます。

この記事では、この「体験の設計」にあたるUXデザインについて、そもそも何を指す言葉なのか、なぜホームページ制作の発注前に考えておく必要があるのか、そして発注者自身が確認・準備しておくべきポイントを解説します。

UXデザインとは — 「使いやすさ」ではなく「体験全体」

UXデザインの「UX」はUser Experience（ユーザーエクスペリエンス）の略で、訪問者がホームページを訪れてから目的を達成する（あるいは離脱する）までに得る体験全体を設計する考え方です。ボタンが押しやすいか、文字が読みやすいかといった画面上の使いやすさだけでなく、「欲しい情報にすぐたどり着けたか」「入力フォームで迷わなかったか」「問い合わせた後の対応に安心できたか」といった、画面の外側も含めた体験のすべてがUXデザインの対象です。

UIとの違い

「UI」と「UX」はセットで語られることが多いものの、指している範囲は異なります。UIは画面の見た目や操作部品といった「接点」を指すのに対し、UXはその接点を含めた体験全体を指す、より広い概念です。両者の詳しい違いや比較表は「UIデザインとは？」の「UIデザインとUXデザインの違い」で詳しく解説しているので、ここでは概念の違いだけ押さえておきます。UIはUXを構成する要素のひとつであり、優れたUIがあっても、そもそもの導線や情報の順序（UX）が訪問者の目的とズレていれば、体験全体としては失敗になります。

なぜホームページ制作でUXが重要なのか

ホームページは「見てもらう」だけでなく「行動してもらう」ことが目的である場合がほとんどです。資料請求、問い合わせ、来店予約——どんなゴールであれ、訪問者がそこにたどり着くまでの体験が分かりにくければ、途中で離脱してしまいます。デザインの見た目がどれだけ洗練されていても、訪問者が「自分の探しているものがここにあるか」を判断できなければ、そのページは機能しません。UXデザインは、この「訪問者が迷わず目的を達成できるか」を制作前から設計しておく作業です。

ディレクトリマップの次に「体験」を設計する理由

ディレクトリマップは「どんなページを、どんな階層で用意するか」という骨格を決める作業でした。一方でUXデザインが扱うのは、「その骨格の上を、訪問者がどう歩くか」という動きの部分です。

たとえば、ディレクトリマップ上で「サービス」ページの下に「事例」ページを配置したとします。ここまでは構造の話ですが、「サービスページを見た訪問者が次に事例を見たくなるのはなぜか」「事例を見た後、料金ページと問い合わせページのどちらに進みたくなるか」といった、訪問者の心理や行動の流れを検討するのがUXデザインです。構造（ディレクトリマップ）が決まっているからこそ、その上でどう歩かせるか（UX）を具体的に議論できるようになります。ページ間をどう結び、信頼をどう積み上げていくかという導線設計そのものについては「ホームページの導線設計とは？」でも詳しく扱っています。

発注者目線で見るUX設計プロセス

制作会社に依頼する場合でも、発注者側がプロセスの流れを理解しておくと、打ち合わせで的確な情報を提供でき、認識のズレも防げます。一般的なUX設計は、大きく次の6段階で進みます。

ステップ1: ユーザーの目的とゴールを定義する

まず「訪問者は何を目的にこのホームページに来るのか」「サイト側は訪問者にどんな行動を取ってほしいのか」を言語化します。「問い合わせを増やしたい」という漠然とした目標だけでなく、「価格を知りたくて訪れた見込み客に、資料請求まで進んでもらう」のように、訪問者側の目的とサイト側のゴールをセットで具体化しておくと、以降の設計がぶれません。

このとき注意したいのは、訪問者側の目的とサイト側のゴールは必ずしも一致しないという点です。訪問者は「まず情報だけ知りたい」段階なのに、サイト側がいきなり「問い合わせ」という強いゴールだけを用意していると、訪問者の温度感とのギャップから離脱につながります。訪問者の温度感に応じて「資料請求」「見積もり相談」「まずは問い合わせ」のように段階的なゴールを用意しておくと、それぞれの訪問者が無理なく次の行動に進みやすくなります。

ステップ2: ペルソナを具体化する

想定する訪問者像（ペルソナ）を、年齢や属性だけでなく「どんな悩みを抱え、何を比較検討しているか」というレベルまで具体化します。BtoBかBtoCか、検討期間が長い商材か短い商材かによって、ペルソナが求める情報も体験の流れも大きく変わります。ここが曖昧なまま次のステップに進むと、後になって「誰のためのサイトか分からない」という状態に陥りやすくなります。

たとえば「注文住宅を検討している30代夫婦」というペルソナであれば、初回訪問時点ではまだ他社との比較段階にあり、いきなり問い合わせるハードルは高いと想定できます。そのため、事例や費用の目安をじっくり読んでもらい、資料請求という軽いアクションから接点を作る体験が求められます。一方「近隣で美容室を探している会社員」というペルソナであれば、比較検討にかける時間は短く、営業時間・アクセス・予約のしやすさといった情報にすぐたどり着ける体験のほうが重要になります。同じ「ホームページ」でも、ペルソナが変われば重視すべき体験はまったく異なります。

業種によって変わるUX設計の重点

想定する訪問者の検討期間の長さによって、カスタマージャーニーマップに描かれる行動や感情の起伏は大きく変わります。工務店のように検討期間が長い業種と、美容室のように即決型の業種とでは、そもそも訪問者が不安を感じるポイントも、情報を求めるペースもまったく異なるためです。業種ごとの具体的な違いは「ホームページの導線設計とは？」の「業種で変わる導線設計」で詳しく解説しているので、ここでは自社がどちらの傾向に近いかを意識しておく、という点だけ押さえておいてください。この段階で傾向を把握しておくと、次のステップ以降の設計判断がぶれにくくなります。

ステップ3: カスタマージャーニーマップで行動を可視化する

ペルソナが「認知→比較検討→問い合わせ」に至るまでの行動・感情・疑問を時系列で書き出したものがカスタマージャーニーマップです。「比較検討の段階でどんな不安を感じるか」「その不安にどのページのどんな情報で応えるか」を一覧化することで、必要なページや見せる順序の根拠が明確になります。ディレクトリマップが「どんなページがあるか」の地図だとすれば、カスタマージャーニーマップは「訪問者がその地図をどう歩くか」の記録です。

ステップ4: 情報設計・導線に落とし込む

カスタマージャーニーマップで見えてきた行動の流れを、実際のページ構成・導線に反映します。「比較検討中の訪問者が事例ページから料金ページに進みやすいようリンクを配置する」など、具体的な導線設計に落とし込む段階です。ここはディレクトリマップの内容とも重なるため、両方を並べて確認しながら進めると手戻りが少なくなります。

たとえば、カスタマージャーニーマップ上で「比較検討の段階で費用感が分からず不安になる」という行動が見えていたなら、事例ページの近くに料金の目安ページへの導線を用意する、あるいは事例そのものに概算費用を添える、といった具体策に落とし込みます。逆にこの段階を飛ばしてワイヤーフレームに進んでしまうと、「なんとなく必要そうだから」という感覚だけでページや導線が追加され、後になって「このリンクは何のためにあるのか」が説明できない設計になりがちです。

ステップ5: ワイヤーフレームで検証する

情報の配置や優先順位を、線と文字だけの簡易な設計図（ワイヤーフレーム）に起こして確認します。ビジュアルデザインが入る前のこの段階で「情報の順序に違和感がないか」「必要な要素が漏れていないか」を確認しておくと、デザイン工程に入ってからの大きな修正を避けられます。

ステップ6: プロトタイプとユーザーテストで仮説を検証する

クリックできる簡易な試作（プロトタイプ）を作り、実際に第三者に操作してもらって仮説を検証します。制作側だけで「分かりやすいはず」と判断するのではなく、実際のユーザーの反応を見て、迷った箇所や離脱しそうになった箇所を洗い出し、設計に反映します。予算や期間の都合でここまで踏み込めない場合も、社内の別部署のメンバーに触ってもらうだけでも、思わぬ気づきが得られることがあります。

発注前に決めておきたい5つのポイント

制作会社にUXデザインを依頼する場合でも、発注者側が次の5点をあらかじめ整理しておくと、打ち合わせの質と設計の精度が上がります。

これらは特別な専門知識がなくても、発注者自身の頭の中にある情報を言語化するだけで整理できます。逆にここが整理されないまま「おしゃれなデザインでお願いします」とだけ伝えて発注してしまうと、見た目は整っていても訪問者の行動につながらないホームページになりがちです。

自社で設計するか、外注するか

ペルソナの具体化やカスタマージャーニーマップの作成といった上流の工程は、日頃から顧客と接している発注者自身のほうが土地勘を持っていることが少なくありません。営業担当者やお客様対応の窓口が「よく聞かれる質問」「契約前によく比較される競合」を把握していれば、それだけで精度の高いペルソナ・ジャーニーの土台ができます。

一方で、それをワイヤーフレームやプロトタイプという具体的な設計に落とし込み、客観的な視点でユーザーテストを設計・実施する工程は、専門的な知見や第三者的な視点が求められる領域です。すべてを制作会社に丸投げするのではなく、「自社が持つ顧客理解」と「制作会社が持つ設計・検証の専門性」を分担する意識を持つと、双方にとって進めやすいプロジェクトになります。打ち合わせの初期段階で、上流（目的・ペルソナ）は発注者側が主導し、下流（ワイヤーフレーム以降）は制作会社が主導するという役割分担を明示しておくと、認識のズレも防げます。

UXデザインでよくある失敗（発注者が陥りがちな罠）

デザインの見た目の話から入ってしまう。打ち合わせで色やフォントといった見た目の話は盛り上がりやすい一方、「誰が」「何のために」訪れるかという体験の土台の話は後回しにされがちです。見た目を決める前に、まず体験の流れを固めることが結果的に近道になります。

社内の担当者目線でペルソナを設定してしまう。日常的に自社の商品・サービスに詳しい担当者は、訪問者が初見でどこにつまずくかを見落としやすくなります。ペルソナは「業界知識のない見込み客」を基準に設定することが重要です。

カスタマージャーニーマップを作って満足してしまう。マップを作成すること自体が目的化し、実際のページ構成や導線に反映されないまま制作が進んでしまうケースがあります。マップは「情報設計に落とし込むための道具」であり、作成後は必ずディレクトリマップや導線設計に反映されているかを確認します。

ユーザーテストを省略してそのまま公開してしまう。予算や納期の都合でユーザーテストが省略されることは珍しくありませんが、その場合は「制作側の仮説」で設計が確定していることを発注者側も認識しておく必要があります。公開後にアクセス解析でユーザーの実際の動きを確認し、想定と違う箇所があれば改善していく前提で進めると、リスクを抑えられます。

パソコンでの見え方だけで判断してしまう。打ち合わせや確認作業はパソコンの大画面で行うことが多いため、パソコン表示では気にならなかった余白や文字量が、スマートフォンでは読みにくい・タップしづらいという形で問題になることがあります。業種によってはスマートフォンからの訪問者が中心になるケースも多く、確認の際は必ずスマートフォン表示でも同じ画面を見て、実際に指で操作しながら体験を確かめる必要があります。

公開後にUXを検証する方法

ここまでのステップは、あくまで公開前の「仮説」です。ユーザーテストを行っても、実際に公開して不特定多数の訪問者が使ってみないと分からないことは残ります。公開後は、設計時に立てた仮説が実際の訪問者の行動と一致しているかを、アクセス解析で確認していく必要があります。

「ホームページのアクセス解析とは？」で解説しているGA4は、訪問者がどのページで離脱したか、想定していた導線通りに進んでいるかを「見る」ためのツールです。さらに「GTMでイベント計測を設計する方法」で扱ったGTMを使えば、特定のボタンがクリックされているか、フォームのどの項目で離脱が多いかといった、UX設計上の仮説をピンポイントで「検証する」ことができます。

たとえば「事例ページを見た訪問者は料金ページに進むはずだ」という仮説を立てて導線を設計したなら、公開後にGA4でその遷移が実際に起きているかを確認します。想定より少なければ、事例ページ内のリンクの見せ方や配置に問題がある可能性が高いと判断でき、UXの仮説を修正する材料になります。UXデザインは公開して終わりではなく、この「仮説→設計→検証→改善」のサイクルを回し続けることで精度が上がっていきます。

よくある質問

UXデザインは制作会社に依頼しないと決められませんか？

ペルソナの具体化やカスタマージャーニーマップの作成は、発注者自身が普段の営業活動や顧客対応で得ている知見をもとに、ある程度まで自社で整理できます。すべてを制作会社に一任するより、自社で分かる範囲を整理したうえで持ち込むほうが、精度の高いUX設計につながります。

ペルソナは1人に絞るべきですか？

商材やサービスによっては訪問者の属性が複数に分かれることもありますが、最初から欲張って何人分も設定すると、どのページも誰にも刺さらない内容になりがちです。まずは最も優先度の高い1人のペルソナを軸に設計し、必要に応じて別のペルソナ向けの導線を追加していく進め方が現実的です。

ディレクトリマップとカスタマージャーニーマップは何が違いますか？

ディレクトリマップは「どんなページが、どんな階層であるか」というサイトの構造そのものを示す地図です。一方カスタマージャーニーマップは「訪問者がその構造をどんな心理・行動で歩くか」を時系列で示したものです。前者が静的な骨格、後者が動的な歩き方を表していると捉えると分かりやすくなります。

スマートフォンでの体験は別に考える必要がありますか？

パソコンとスマートフォンでは画面の広さも操作方法も異なるため、パソコンで読みやすい情報量や配置が、スマートフォンではそのまま読みにくさ・操作しづらさにつながることがあります。カスタマージャーニーマップやワイヤーフレームを検討する段階から、スマートフォンで見る訪問者を主要な対象として想定しておくと、公開後の手戻りを減らせます。

UXデザインの工程は必ずこの順番で進める必要がありますか？

実際の制作現場では、予算や規模に応じてステップを簡略化したり、複数のステップを同時に進めたりすることもあります。ただし「目的とペルソナを決めないまま情報設計に進む」という順序の入れ替えだけは避けるべきです。土台となる目的・ペルソナが曖昧なまま先に進むと、後の工程すべてに手戻りが発生しやすくなります。

UXデザインの費用はどれくらいかかりますか？

UX単体を切り出した見積もりを出す制作会社は多くなく、多くの場合はUIデザインやホームページ制作全体の費用の中に含まれます。そのため相場は制作会社の規模やユーザーテストの有無によって幅が大きく、一概には言えません。ホームページ制作全体の費用感は「ホームページ制作の費用相場と内訳」、UIデザインの費用感は「UIデザインとは？」でそれぞれ解説しているので、見積もりを比較する際の参考にしてください。

まとめ

UXデザインは、画面の使いやすさだけでなく、訪問者がホームページを訪れてから目的を達成するまでの体験全体を設計する考え方です。ディレクトリマップで決めたページの骨格の上に、訪問者がどう歩き、何を感じ、どう行動するかを設計するのがUXデザインの役割であり、その先の画面デザインを担うのがUIデザインです。

発注前に「サイトのゴール」「ペルソナ」「保有コンテンツ」「検討期間」「検証の可否」の5点を整理しておくだけでも、制作会社との打ち合わせの精度は大きく変わります。見た目の相談に入る前に、まず訪問者の体験を言語化するところから始めてみてください。

ディレクトリマップで骨格を決め、UXデザインで体験の流れを設計し、UIデザインで画面に落とし込み、公開後は解析データで答え合わせをする——この一連の流れを意識しておくことが、問い合わせにつながるホームページづくりの土台になります。