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

前回は、ホームページのUX（ユーザー体験）について学びました。

訪問者がどんな情報を探しているのか、どのような順番でページを移動するのか、どこで迷ってしまうのか。

こうしたことを考えるのがUX改善の出発点でした。

今回は、実際のホームページの画面を使って、さらに具体的な改善に挑戦します。

「文字が読みにくい気がするけれど、何が問題なの？」

「問い合わせボタンは目立っている？」

「スマートフォンで見たときの画面が気になる」

「AIに修正を相談したいけれど、どう説明すればいいの？」

そんなとき、ChatGPTの画像入力機能が役立ちます。

スクリーンショットを送ることで、画面の内容を言葉だけで説明する手間を減らせます。

ただし、ChatGPTが画像を正しく理解できるとは限りません。

今回は、AIの意見を参考にしながら、実際の画面と操作を確認して改善する方法を学びましょう。

1．スクリーンショットを使うと何が便利なの？

例えば、ホームページの問い合わせボタンについて相談したいとします。

文章だけで、

「画面の右上に青いボタンがあって、その下には画像があり、左側にはメニューがあります」

と説明するのは大変です。

しかし、スクリーンショットを送れば、画面の配置を視覚的に伝えられます。

ChatGPTには、次のように質問できます。

「このホームページのスクリーンショットを確認してください。文字の読みやすさ、情報の配置、問い合わせボタンの見つけやすさについて改善候補を挙げてください」

画面から読み取れる範囲で、問題点を整理してもらえます。

ただし、画像から分かるのは主に表示されている状態です。

ボタンを押した後の動作や、画面をスクロールした後の状態までは、一枚の画像だけでは確認できません。

画像から判断できることと、実際に操作しなければ分からないことを区別しましょう。

2．Windowsで画面を撮影する方法

今回は、Windowsパソコンでスクリーンショットを撮影する方法を紹介します。

ステップ① ホームページを開く

Microsoft EdgeやGoogle Chromeなどで、確認したいページを開きます。

ステップ② 撮影したい画面を表示する

画面の表示倍率やブラウザの大きさを確認してください。

必要に応じて、問題のある部分が見えるようにします。

ステップ③ スクリーンショットを撮る

キーボードで、

Windowsキー＋Shift＋S

を同時に押します。

Windowsの画面切り取り機能が起動します。

ステップ④ 範囲を選択する

撮影したい部分をマウスで選択します。

ステップ⑤ ChatGPTへ貼り付ける

ChatGPTの入力欄をクリックして、

Ctrl＋V

を押します。

画像が添付されたことを確認してください。

対応する環境では、この方法でスクリーンショットを直接送れます。

また、保存した画像を「＋」から添付する方法もあります。

3．最初は何を確認してもらえばいいの？

ホームページの画面を送るとき、最初からすべての問題を探してもらう必要はありません。

例えば、次の4項目に絞ってみましょう。

① 文字の読みやすさ

文字の大きさ、背景との明暗差、文章の配置など。

② 情報の優先順位

最初に何が目に入り、どの情報が目立っているか。

③ ボタンの分かりやすさ

何を押すと、どこへ進むのか想像できるか。

④ 情報の重複

同じような案内が何度も表示されていないか。

ChatGPTには、

「この画面について、文字・情報の優先順位・ボタン・情報の重複という4つの観点から確認してください。実際に見えている内容と、推測した内容を分けてください」

と依頼できます。

ここで大切なのは、AIの指摘をすべて正解として扱わないことです。

なぜ問題だと考えたのかを確認しながら、自分でも画面を見直しましょう。

4．実践例｜問い合わせボタンが見つけにくい

今回は、架空の製造会社のホームページを考えます。

トップページには、会社の紹介文と大きな製品写真が掲載されています。

しかし、問い合わせボタンはページの一番下にしかありません。

加工を相談したい訪問者が、ボタンを見つけられない可能性があります。

そこで、ChatGPTに次のように質問してみましょう。

「加工を相談したい人がこのページを訪問したとします。問い合わせ方法を見つけるまでに迷う可能性がある部分を整理してください」

ChatGPTは、問い合わせボタンの配置や、案内文の不足などを改善候補として挙げるかもしれません。

しかし、本当に訪問者が困っているかどうかは、画像だけでは判断できません。

実際に、初めてサイトを見る人に問い合わせ先を探してもらう方法もあります。

また、ページの下部まで自然に読んでもらう設計になっている場合は、ボタンの配置に意図があるかもしれません。

改善する前に、ページの目的と訪問者の行動を確認しましょう。

5．AIに改善案を比較してもらう方法

問題が見つかったとしても、すぐに修正する必要はありません。

例えば、問い合わせボタンが見つけにくい場合です。

考えられる改善方法には、次のようなものがあります。

改善案	期待できること	注意点
ページ上部に案内を追加	早い段階で相談先が分かる	情報過多にならないか
メニューに問い合わせを設置	どのページからも探しやすい	メニュー構成との整合
技術説明の後にボタンを配置	内容を読んだ後に相談できる	配置場所が適切か
固定ボタンを使用	スクロール中もアクセスできる	本文を隠さないか

ChatGPTには、

「この問題に対する改善案を3つ考えてください。メリット、注意点、スマートフォンでの使いやすさを比較してください」

と依頼できます。

大切なのは、改善方法を一つに決めつけず、複数の選択肢を比較することです。

6．スマートフォンの画面も確認しよう

パソコンでは問題がなくても、スマートフォンでは表示が変わることがあります。

例えば、横に3つ並んでいたボタンが、スマートフォンでは縦に並ぶ場合があります。

また、画像や文字が画面からはみ出す場合もあります。

スマートフォンの画面を確認するときは、次の項目を見てみましょう。

① 横スクロールが発生していないか

② 文字が小さすぎないか

③ ボタン同士が近すぎないか

④ 固定表示が本文を隠していないか

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

⑥ 入力フォームが操作しやすいか

ChatGPTには、

「このスマートフォン画面について、読みにくい部分や操作しにくい可能性がある部分を指摘してください。スクリーンショットだけでは確認できない内容も整理してください」

と依頼します。

ただし、実際のタップ操作やスクロールの動きは、画像だけでは分かりません。

スマートフォンでの実機確認が必要です。

7．画面に問題が見つかったら、どう進める？

例えば、スマートフォンでボタンが画面からはみ出していることが分かったとします。

このとき、すぐにChatGPTへ、

「コードを全部書き直してください」

と依頼するのはおすすめしません。

ホームページには、HTML、CSS、JavaScript、WordPressのテーマなど、複数の仕組みが関係する場合があります。

原因を確認せずに広い範囲を変更すると、別の場所まで表示が崩れる可能性があります。

そこで、次の順番で進めましょう。

① 問題が起きている場所を確認する

どのページの、どの部分なのかを特定します。

② 再現する条件を確認する

パソコンでも発生するのか。スマートフォンだけなのか。特定の画面幅で発生するのか。

③ 関係する設定やコードを確認する

実際のHTMLやCSS、WordPressの設定などを確認します。

④ 修正する範囲を絞る

影響する部分を特定し、必要最小限の変更を考えます。

⑤ 変更後に確認する

修正した場所だけでなく、ほかの画面にも影響が出ていないか確認します。

ChatGPTには、

「この表示崩れの原因を調べたいです。スクリーンショットだけで原因を断定せず、確認すべき設定やコードを教えてください。修正は原因を確認してから、一か所ずつ進めたいです」

と依頼しましょう。

8．HTML・CSS・JavaScriptの違い

ここで、ホームページを構成する基本的な技術を簡単に紹介します。

HTML

文章、見出し、画像、リンクなど、ページの内容と構造を記述するための言語です。

CSS

文字の色、大きさ、余白、配置など、主に見た目を指定します。

JavaScript

ボタンを押したときの動きや、画面内の動的な処理などに利用されます。

例えば、問い合わせボタンの文字やリンク先はHTMLに関係する場合があります。

ボタンの色や大きさはCSSで指定されていることがあります。

クリックするとメニューが開く動作には、JavaScriptが使われる場合があります。

ただし、実際のホームページでは、WordPressのテーマやプラグインなどによって構成が異なります。

どの部分を変更すればよいかは、実際のファイルや設定を確認しなければ判断できません。

9．ChatGPTにコードの意味を説明してもらう

ホームページを管理していると、CSSなどのコードを見ることがあります。

例えば、次のようなコードです。

.contact-button {
  background-color: #0066cc;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 6px;
}

これは、.contact-buttonというクラスを持つ要素の見た目を指定するCSSの例です。

背景を青色にし、文字を白色にし、内側の余白と角の丸みを指定しています。

ChatGPTには、

「このCSSコードが何を指定しているのか、初心者にも分かるように一行ずつ説明してください」

と質問できます。

さらに、

「このコードのどこを変更すると、ボタンの背景色が変わりますか？」

と聞くこともできます。

ただし、コードの意味が分かっても、実際のホームページで変更してよいとは限りません。

ほかのページでも同じクラスが使われている場合、変更の影響が広がる可能性があります。

10．修正前にはバックアップを考えよう

ホームページのファイルを変更する場合は、元の状態に戻せるようにしておくことが重要です。

例えば、CSSファイルを編集する前に、元のファイルを保存しておく方法があります。

WordPressでは、テーマやプラグインの更新、ファイル編集などによって表示に影響が出ることもあります。

そのため、本格的な変更では、ファイルだけでなく、必要に応じてデータベースなども含めたバックアップが必要です。

また、本番サイトへ変更を加える前に、テスト環境で確認できれば、問題の発生を減らせる場合があります。

ChatGPTには、

「WordPressのCSSを変更する前に、確認しておくべきバックアップと復旧方法を整理してください。実際の管理環境が分からない部分は質問してください」

と依頼しましょう。

AIが修正コードを提案できることと、安全に変更できることは別です。

11．変更前と変更後を比較する方法

画面を修正したら、変更前後のスクリーンショットを撮影してみましょう。

例えば、問い合わせボタンの位置を調整したとします。

変更前の画像と、変更後の画像をChatGPTへ送ります。

そして、

「この2枚のスクリーンショットを比較してください。問い合わせボタンの位置、文字の読みやすさ、周囲の余白について、確認できる変化を整理してください」

と質問します。

ここでは、実際に見えている違いを確認してもらいます。

例えば、ボタンが中央へ移動した、文字の位置が変わった、といった内容です。

ただし、スクリーンショットでは正確な寸法を判断できない場合があります。

画像の縮小や表示倍率によって、見た目の大きさも変わります。

必要な場合は、ブラウザの開発者ツールなどで実際の数値を確認しましょう。

12．AIが間違った場所を指摘したら？

ChatGPTに画像を見せたとき、AIが違う部分を見てしまうことがあります。

例えば、

「右上の問い合わせボタンを確認してください」

と依頼したのに、左側のメニューボタンについて説明する場合です。

そんなときは、対象となる場所をより具体的に伝えましょう。

例えば、

「画面右上にある、青い長方形の『お問い合わせ』ボタンについて確認してください」

と説明します。

さらに、スクリーンショットに丸印や矢印を書き込んで、対象を示す方法もあります。

ただし、AIが画像を正確に読み取れない場合もあります。

何度も間違えるときは、対象部分だけを拡大して送ったり、実際のHTMLやCSSを確認したりする方法を考えましょう。

AIが間違ったときは、同じ指示を繰り返すだけでなく、何が伝わっていないのかを確認することが大切です。

13．表示速度もホームページの使いやすさに関係する

ホームページのUXでは、画面の見た目だけでなく、表示速度も重要です。

例えば、画像が大きすぎると、ページの読み込みに時間がかかる場合があります。

Googleは、ウェブページの利用体験を評価する指標として「Core Web Vitals」を提供しています。

代表的な指標は次の3つです。

指標	確認する内容
LCP	主な内容が表示されるまでの時間
INP	利用者の操作に対する応答性
CLS	ページ内の表示位置がどの程度ずれるか

例えば、ページを読もうとした瞬間に画像が読み込まれ、ボタンの位置が突然変わってしまう場合があります。

このような表示のずれは、使いやすさに影響する可能性があります。

Googleの公式案内では、LCPは2.5秒以内、INPは200ミリ秒未満、CLSは0.1未満を良好な状態の目安としています。

ただし、これらの数字が良好であれば、検索順位が必ず上がるというものではありません。

14．PageSpeed Insightsを使ってみよう

ホームページの表示速度などを調べる方法の一つに、Googleの「PageSpeed Insights」があります。

公式サイトはこちらです。

https://pagespeed.web.dev

基本的な操作は次のとおりです。

① PageSpeed Insightsを開きます。

② 調べたいページのURLを入力します。

③ 「分析」を実行します。

④ モバイルとデスクトップの結果を確認します。

⑤ 改善候補を確認します。

分析結果には、画像、表示速度、レイアウトなどに関する情報が表示される場合があります。

ただし、表示された点数だけを見て、ホームページの良し悪しを決めないようにしましょう。

また、実際の利用者のデータと、テスト環境で測定した結果は異なる場合があります。

ChatGPTには、

「PageSpeed Insightsの結果を読んで、初心者にも分かるように説明してください。改善候補と、実際のサイトで確認すべきことを分けてください」

と質問できます。

15．ホームページの修正でよくある失敗

ChatGPTを使ってホームページを改善するとき、次のような失敗が起きることがあります。

① 問題の原因を確認せずにコードを変更する

原因と関係のない部分を修正してしまう場合があります。

② 一度に複数の場所を変更する

表示が崩れたとき、どの変更が原因なのか分かりにくくなります。

③ パソコンだけで確認する

スマートフォンで表示が崩れていることに気づかない場合があります。

④ 変更した部分だけを確認する

ほかのページに影響が出ている可能性があります。

⑤ AIの説明を確認せずに採用する

存在しないファイル名や、実際の環境と異なるコードを提案される場合があります。

例えば、ChatGPTが、

「style.cssの200行目を修正してください」

と説明したとしても、実際のファイルを見ていなければ、その行に目的のコードがあるとは限りません。

ファイル名や行番号は、実際の環境で確認することが必要です。

16．今日のミニレッスン

今回は、自分で確認できるホームページを使い、画面の分析から改善案の作成まで体験してみましょう。

ステップ① スクリーンショットを撮る

自分が管理するホームページ、または公開されている練習用のページを開きます。

Windowsキー＋Shift＋Sを使って、画面を撮影してください。

ステップ② ChatGPTに画像を送る

画像を添付して、次のように入力します。

「このホームページの画面を確認してください。実際に見えている要素を整理し、文字、情報の配置、ボタンの分かりやすさについて改善候補を挙げてください」

ステップ③ 問題を一つ選ぶ

回答を確認したら、改善したい部分を一つ選んでください。

例えば、問い合わせボタンの配置です。

ステップ④ 修正前に必要な情報を整理する

「この問題を修正する前に、実際のHTMLやCSS、管理画面で確認すべきことを整理してください。スクリーンショットだけで原因を断定しないでください」

と質問します。

ステップ⑤ 改善案を比較する

「この問題に対する改善案を3つ考えてください。メリット、注意点、ほかの表示への影響を比較してください」

と依頼します。

ステップ⑥ 実際の動作を確認する

今回は、必ずしもコードを修正する必要はありません。

まず、実際の画面でボタンを押し、正しいページへ移動できるか確認してみましょう。

また、スマートフォンでも操作できるか確認します。

ステップ⑦ 修正した場合は比較する

安全に変更できる環境で修正した場合は、変更前後の画面を撮影します。

「変更前と変更後の画像を比較し、改善した部分と、新たに問題が発生している可能性のある部分を整理してください」

と依頼します。

最終的には、自分でも画面を操作して確認しましょう。

17．AIと一緒にホームページを改善するときの考え方

ChatGPTを使うと、ホームページの問題点を整理したり、改善案を考えたり、コードの意味を説明してもらったりできます。

しかし、AIが提案した修正を、そのまま採用すればよいというものではありません。

ホームページには、実際の利用者がいます。

お客様が問い合わせをしたり、求職者が仕事を調べたり、技術者が必要な情報を探したりします。

そのため、一か所の修正でも、ほかの機能に影響する場合があります。

例えば、スマートフォンの表示を改善したつもりが、パソコンのレイアウトを崩してしまうこともあります。

だからこそ、実際の画面やコードを確認し、必要な部分を一つずつ改善していくことが重要です。

また、ChatGPTが間違った指示を出した場合は、何が原因だったのかを調べ、次の修正に活かしましょう。

ソラ先生からひとこと

ホームページの改善は、一度ですべて完成させるものではありません。

利用する人の行動や、掲載する情報、使用する端末などが変われば、必要な改善も変わります。

ChatGPTは、画面の確認や改善案の検討を手伝うことができます。

しかし、実際に正しく動いているかどうかは、画面を操作して確かめなければなりません。

分からないことがあれば調べる。

必要な資料やコードを確認する。

改善案を考え、小さく試してみる。

うまくいかなければ原因を調べ、もう一度考える。

こうした積み重ねが、ホームページを使いやすくしていきます。

AIに修正してもらうことが目的ではありません。訪問する人が迷わず、安心して利用できるホームページを作ることが目的です。

次回【第47回】は「ChatGPTでプログラミングを学ぶ方法｜コードの意味・エラーの原因・修正方法を初心者向けに解説」です。

今回少し触れたHTMLやCSSなどのコードについて、ChatGPTを先生にして基礎から学んでいきましょう。