こんにちは、ソラ先生です。

前回は、ChatGPTを使って競合会社のホームページを比較し、情報の見せ方や問い合わせ導線を調べる方法を学びました。

今回は、自分たちのホームページを訪問者の立場から考えてみましょう。

「ホームページには情報があるのに、なかなか読んでもらえない」

「問い合わせボタンを設置しているのに、見つけてもらえない」

「スマートフォンでは、どこを押せばよいのか分かりにくい」

「記事を読んだ後、次にどこへ進めばよいのか分からない」

そんな問題を改善するための授業です。

今回のテーマは「UX（ユーザーエクスペリエンス）」です。

難しそうな言葉ですが、考え方はシンプルです。

ホームページを訪れた人が、迷わず、無理なく、必要な情報を得られるか。

その視点でホームページを見直していきましょう。

1．UXとは何でしょうか？

UXとは「User Experience」の略で、日本語では「ユーザー体験」と呼ばれます。

ホームページであれば、訪問者がサイトを見つけ、情報を探し、ページを読み、必要な操作をするまでの体験などが含まれます。

例えば、ある会社へ加工を依頼したい人が、検索からホームページを訪れたとします。

知りたいのは、次のようなことかもしれません。

「この会社は、希望する部品を製作できるのか？」

「図面がなくても相談できるのか？」

「どのように見積もりを依頼すればよいのか？」

これらの情報へ迷わず進めれば、使いやすいと感じてもらえる可能性があります。

反対に、何度もページを移動しなければ答えが見つからない場合、途中で閲覧をやめてしまうかもしれません。

UXは、単にデザインが美しいかどうかではありません。

ホームページを利用する人の目的を考えることが出発点です。

2．UIとUXは何が違うの？

UXと一緒によく登場する言葉に「UI」があります。

UIとは「User Interface」の略で、利用者が操作したり情報を確認したりする画面や仕組みのことです。

例えば、ホームページのボタン、メニュー、入力フォーム、文字の配置などです。

両者の違いを整理してみましょう。

項目	意味	具体例
UI	利用者が接する画面や操作部分	ボタン・メニュー・フォーム
UX	利用を通じた体験全体	情報を探しやすい・安心して相談できる

例えば、大きくて目立つ問い合わせボタンがあるとします。

これはUIの工夫です。

しかし、そのボタンを押した後のフォームが複雑で、入力途中に何度もエラーが出るなら、問い合わせ全体の体験はよくありません。

見やすい画面を作ることと、使いやすいホームページを作ることは、関係していますが同じではありません。

3．訪問者が何をしたいのかを整理する

ホームページの改善では、最初に訪問者の目的を考えます。

例えば、製造会社のホームページには、異なる目的を持つ人が訪れます。

加工を依頼したいお客様

対応可能な加工、材質、数量、相談方法などを知りたい。

技術情報を調べている人

加工方法や材料特性、技術的な説明を知りたい。

協力会社を探している企業

会社の事業内容や技術分野、連携の可能性を知りたい。

就職先を探している人

仕事内容、募集条件、職場環境、応募方法などを知りたい。

こうした目的を整理するために、ChatGPTへ次のように質問してみましょう。

「製造会社のホームページを訪れる人を、訪問目的ごとに分類してください。それぞれが最初に知りたい情報と、次に確認したい情報を整理してください」

ここで注意したいのは、AIが想定した訪問者像は、実際の訪問者を調査した結果ではないということです。

Google Analyticsや問い合わせ内容、実際の利用者への聞き取りなども参考にしましょう。

4．訪問者の行動を「ユーザーフロー」で考える

ユーザーフローとは、利用者が目的を達成するまでに、どのような画面や操作を通るかを整理したものです。

例えば、加工の見積もりを依頼する場合です。

<box border radius="lg" padding={3} gap={2} align="center"> <box background="surface-secondary" radius="md" padding={3} width="100%" align="center"> **検索結果からホームページへ** </box> <icon name="arrow-down" color="tertiary" size="lg"/> <box background="surface-secondary" radius="md" padding={3} width="100%" align="center"> **対応できる加工内容を確認** </box> <icon name="arrow-down" color="tertiary" size="lg"/> <box background="surface-secondary" radius="md" padding={3} width="100%" align="center"> **相談前に必要な情報を確認** </box> <icon name="arrow-down" color="tertiary" size="lg"/> <box background="surface-secondary" radius="md" padding={3} width="100%" align="center"> **問い合わせ方法を選ぶ** </box> <icon name="arrow-down" color="tertiary" size="lg"/> <box background="rgba(20,110,200,0.07)" border radius="md" padding={3} width="100%" align="center"> **相談・見積もり依頼を送信** </box> </box>

この流れの途中で必要な情報が見つからなければ、訪問者は迷ってしまいます。

そこでChatGPTに、

「このユーザーフローについて、利用者が迷う可能性のある場所と、確認すべき情報を整理してください」

と依頼します。

例えば、加工内容を確認した後、見積もり相談へ直接進めない場合は、導線を見直す候補になるかもしれません。

ただし、実際に迷っているかどうかは、利用者の行動を確認する必要があります。

5．ホームページのメニューを分かりやすくする

メニューは、ホームページ内の情報を探すための重要な仕組みです。

例えば、

「会社案内」

「事業内容」

「加工技術」

「製作実績」

「採用情報」

「お問い合わせ」

といった項目があります。

ただし、メニューの名前だけでは内容が分かりにくい場合もあります。

例えば、「ソリューション」という言葉です。

訪問者によっては、具体的に何が掲載されているのか想像しにくいかもしれません。

そこで、

「このホームページのメニュー名を、初めて訪問する人の立場から確認してください。それぞれの項目で何が分かるのか、名前だけで伝わるか評価してください」

とChatGPTに質問してみましょう。

ただし、すべてのメニューを説明的な長い名前にすればよいわけではありません。

分かりやすさと、画面上での見やすさの両方を考えることが必要です。

6．トップページには何を掲載すればいい？

トップページは、ホームページ全体の入口として利用されることがあります。

ただし、訪問者が必ずトップページから入ってくるとは限りません。

Google検索から、技術紹介やブログ記事などへ直接アクセスする人もいます。

そのため、トップページだけでなく、各ページからも必要な情報へ進めることが重要です。

トップページでは、例えば次のような役割を考えられます。

① 何をしている会社なのか伝える

初めて訪問した人が、会社の概要を理解できる。

② 主な情報への入口を用意する

事業内容、会社案内、技術情報、採用情報などへ進める。

③ 必要な行動へ案内する

相談、問い合わせ、応募などの方法が分かる。

ChatGPTには、

「この会社のトップページに必要な情報を整理してください。訪問者の目的別に、どのページへ案内すべきか考えてください」

と依頼できます。

7．問い合わせボタンを増やせば効果は上がる？

問い合わせを増やしたいと考えると、ボタンを目立たせたくなるかもしれません。

しかし、ボタンをたくさん設置すれば必ず問い合わせが増えるわけではありません。

例えば、まだ会社のサービスを理解していない訪問者に、何度も「今すぐお問い合わせ」と表示しても、行動につながらない可能性があります。

一方、必要な情報を読んだ直後に、

「この内容について相談する」

という案内があれば、自然に進めるかもしれません。

重要なのは、ボタンの数よりも、配置する場所と役割です。

例えば、

加工内容を説明するページ

「加工について相談する」

採用情報のページ

「募集条件を確認する」「応募する」

会社案内のページ

「所在地・アクセスを見る」

など、ページごとに次の行動が異なります。

ChatGPTには、

「このページを読んだ人が次に必要とする情報や行動を整理し、適切なボタンの役割と配置場所を提案してください」

と依頼できます。

8．読者が前のページへ戻らずに済む設計

ホームページでは、情報を読み進めた後、別のページへ移動することがあります。

そのとき、何度もブラウザの戻るボタンを押さなければならない構成は、使いにくく感じられる場合があります。

例えば、採用情報を考えてみましょう。

求職者が仕事内容を読んだ後、給与や休日を確認したいと思ったとします。

この場合、仕事内容のページから募集条件へ直接移動できれば便利です。

さらに、応募したいと考えた人には、応募方法へ直接進める導線も必要です。

同時に、ほかの職種と比較したい人には、採用情報の一覧へ戻れる仕組みが役立ちます。

一覧へ戻る導線と、次の行動へ直接進む導線は、役割が異なります。

ChatGPTには、

「仕事内容を読んだ求職者が、募集条件の確認、ほかの職種との比較、応募の3つの行動へ進める導線を考えてください」

と依頼できます。

このように、訪問者が次に選ぶ行動を複数考えることも重要です。

9．スマートフォンでは何が変わるの？

パソコンとスマートフォンでは、画面の大きさや操作方法が異なります。

パソコンでは横に並べられるボタンも、スマートフォンでは縦に配置する必要があるかもしれません。

また、スマートフォンでは指で画面を操作します。

そのため、ボタンが小さすぎたり、隣のボタンと近すぎたりすると、押し間違いが起こる可能性があります。

確認したいのは、次のようなことです。

① 本文を拡大せずに読めるか

② メニューを開きやすいか

③ ボタンを押し間違えないか

④ 横スクロールしないと読めない部分がないか

⑤ 問い合わせフォームを入力しやすいか

⑥ 画面の一部が固定表示に隠れていないか

ChatGPTにスマートフォンのスクリーンショットを送って、

「この画面について、文字の大きさ、ボタンの配置、情報の順序を確認してください。画像だけでは分からない操作性は、未確認として整理してください」

と依頼することもできます。

ただし、スクリーンショットだけで実際の操作感を完全に判断できるわけではありません。

スマートフォンの実機で確認することが大切です。

10．問い合わせフォームを改善してみよう

問い合わせフォームも、UXを考えるうえで重要です。

例えば、単純な質問をしたいだけなのに、会社名、部署名、住所、電話番号、役職などをすべて必須入力するフォームがあったとします。

必要性の低い入力項目が多い場合、問い合わせの負担が増える可能性があります。

そこで、入力項目を見直しましょう。

① 本当に必要な情報か

相談内容の確認や返信に必要な項目か考えます。

② 必須項目と任意項目が分かるか

入力する人が迷わない表示にします。

③ エラーの理由が分かるか

入力間違いがあったとき、修正する場所が明確になっているか確認します。

④ 送信できたことが分かるか

送信完了後に、受付結果が表示されるか確認します。

⑤ スマートフォンでも入力できるか

画面が小さくても操作しやすいか確認します。

ChatGPTには、

「この問い合わせフォームの項目について、入力者にとって必要性が分かりにくいものや、操作の負担になりそうなものを整理してください」

と依頼できます。

ただし、見積もりや技術相談では、条件確認のために詳しい情報が必要な場合もあります。

単純に項目数を減らすことだけが改善ではありません。

11．連載記事やブログにもUXがある

UXは、商品紹介や問い合わせページだけのものではありません。

ブログ記事や連載講座にも関係します。

例えば、全100回の講座があるとします。

記事が日付順にほかの投稿と混ざっている場合、読者が次の授業を探しにくいことがあります。

そこで、次のような仕組みを考えられます。

講座の目次ページ

全体の授業を一覧で確認できる。

前の授業・次の授業へのリンク

順番に学びたい人が迷わず移動できる。

テーマ別の分類

画像生成、Excel、文章作成など、興味のある授業を探せる。

講座の最初へ戻るリンク

途中から読んだ人も、第1回から学べる。

Googleも、サイト内の重要なページに関連するページからリンクを設け、利用者が情報を見つけやすくすることを推奨しています。

ただし、こうした仕組みを作っただけで、検索順位が必ず上がるわけではありません。

まずは読者の使いやすさを重視しましょう。

12．実際の訪問者に操作してもらう「ユーザーテスト」

ここまで、ChatGPTを使って改善案を考えてきました。

しかし、AIが使いやすいと評価したからといって、実際の訪問者も同じように感じるとは限りません。

そこで役立つのが、ユーザーテストです。

ユーザーテストとは、実際の利用者にホームページを操作してもらい、迷ったところや使いにくいところを確認する方法です。

例えば、初めてサイトを見る人に、

「この会社に加工を相談する方法を探してください」

とお願いするとします。

その人がどこを見て、何を押し、どこで迷うのかを観察します。

重要なのは、操作方法を先回りして教えないことです。

また、うまく操作できなかった場合も、利用者を責めてはいけません。

どこで迷ったのかを確認することが、改善の出発点です。

13．ChatGPTにユーザーテストの課題を作ってもらう

ユーザーテストを実施したい場合、ChatGPTに課題を考えてもらえます。

例えば、

「製造会社のホームページについて、初めて訪問する人向けのユーザーテストを作成してください。加工相談、会社情報の確認、採用情報の閲覧という3つの目的で、操作課題を考えてください」

と依頼します。

例えば、次のような課題が考えられます。

課題	確認したいこと
加工の相談先を探す	問い合わせまで迷わず進めるか
会社の所在地を探す	会社情報へ進めるか
募集中の職種を調べる	採用情報が見つかるか
応募方法を確認する	必要な条件と手順が分かるか
関連記事を探す	必要な情報へ移動できるか

テストを行う際には、利用者がどこで迷ったか、どのような言葉を使ったかなどを記録します。

ただし、少人数の結果だけで、すべての訪問者が同じように行動すると断定することはできません。

14．数字だけでは分からない問題もある

ホームページの分析では、Google Analyticsなどの数字を確認できます。

例えば、ページビュー、ユーザー数、エンゲージメントなどです。

しかし、数字だけでは分からないこともあります。

例えば、あるページの閲覧時間が短かったとします。

これは、読者が内容に関心を持たなかったからでしょうか。

それとも、必要な情報をすぐに見つけられたからでしょうか。

数字だけでは判断できません。

そこで、実際のページの内容や、訪問者の目的も確認します。

ChatGPTには、

「このページの閲覧時間が短い理由として考えられる可能性を整理してください。アクセス解析の数字だけでは判断できないことも説明してください」

と質問できます。

利用状況の数字と、実際の操作体験を組み合わせて考えることが重要です。

15．改善するときは一度に何でも変更しない

ホームページを見直すと、改善したいところが次々に見つかるかもしれません。

例えば、

「メニューを変更したい」

「問い合わせボタンを大きくしたい」

「文章を短くしたい」

「写真を変更したい」

といった内容です。

しかし、一度に多くの部分を変更すると、何が使いやすさに影響したのか分かりにくくなります。

また、ある部分を改善したつもりでも、別の部分が使いにくくなることがあります。

そこで、次のような進め方が考えられます。

① 現在の画面を確認する。

② 問題になっている場所を特定する。

③ 改善案を考える。

④ 必要な部分を変更する。

⑤ 実際に操作して確認する。

⑥ 問題があれば修正する。

ChatGPTには、

「このホームページの問題を一度に変更せず、一か所ずつ改善したいです。確認すべき内容と、変更後のテスト方法を整理してください」

と依頼できます。

変更する前に、元の状態を記録しておくことも大切です。

16．UX改善で優先したい問題とは？

改善候補が複数ある場合は、優先順位を考えます。

例えば、次のような問題があったとします。

問題A

トップページの写真が少し古い。

問題B

スマートフォンで問い合わせボタンが押せない。

問題C

会社案内の説明が少し長い。

問題D

採用ページから応募方法を確認できない。

この場合、どれから対応するのがよいでしょうか。

一つの考え方として、訪問者が目的を達成できない問題を優先する方法があります。

例えば、問い合わせボタンが押せなければ、相談したい人が次へ進めません。

応募方法が分からなければ、求人に興味を持った人が応募できないかもしれません。

もちろん、実際の優先順位はサイトの目的や利用状況によって異なります。

ChatGPTには、

「UXの改善候補を、目的達成への影響、問題の重大性、発生頻度、改善に必要な作業量で比較してください。確認できない情報は未確認としてください」

と依頼しましょう。

見た目の調整だけでなく、訪問者が困る問題を見つけることが重要です。

17．今日のミニレッスン

今回は、架空の製造会社のホームページを使って、UX改善案を作成します。

ステップ① 訪問者の目的を整理する

ChatGPTに次のように入力してください。

「製造会社のホームページについて、加工を依頼したいお客様、会社を知りたい人、就職先を探している人の3つの立場から、必要な情報を整理してください」

ステップ② ユーザーフローを考える

続けて、

「加工を依頼したい人が、検索結果からホームページを訪問し、加工内容を確認して問い合わせするまでの流れを考えてください」

と依頼します。

ステップ③ 迷いやすい場所を考える

「この流れの中で、訪問者が迷う可能性のある場所を整理してください。推測であることを明確にしてください」

と質問します。

ステップ④ スマートフォンを確認する

「スマートフォンでこのホームページを使う場合に、実際の画面で確認すべき項目を一覧にしてください」

と依頼します。

ステップ⑤ ユーザーテストを考える

「初めてこのサイトを訪問する人へ、加工相談・会社情報の確認・応募方法の確認という3つの課題を出すユーザーテストを作成してください」

と質問します。

ステップ⑥ 改善案を整理する

最後に、

「これまでに考えた問題点を整理し、訪問者の目的達成への影響を基準に、改善の優先順位を考えてください。根拠がない部分は確認事項として残してください」

と依頼します。

ここまでできれば、訪問者の目的を考えるところから、改善案を作成するところまで体験できます。

ソラ先生からひとこと

ホームページを作るとき、どうしても運営する側の考えが中心になりがちです。

「この技術を紹介したい」

「この写真を見てもらいたい」

「会社の強みを伝えたい」

どれも大切なことです。

しかし、訪問者が知りたいことと一致していなければ、必要な情報が伝わらない場合があります。

ChatGPTは、訪問者の立場を想定し、情報の並び方や導線を考える手助けができます。

ただし、AIが想像した利用者の行動と、実際の行動は異なる可能性があります。

だからこそ、実際の画面を確認し、必要なら利用者に操作してもらうことが重要です。

ホームページの主役は、作った人ではなく、訪問して利用する人です。

読者が何を知りたいのか、どこへ進みたいのか、何に困っているのか。

その視点を大切にしながら、ホームページを改善していきましょう。

次回【第46回】は「ChatGPTでホームページの改善点を発見する方法｜実際の画面・スクリーンショット・操作テストを使った実践分析」です。

今度は、実際の画面をChatGPTに見せながら、問題の発見から修正後の確認まで進める方法を学びます。