生成AIの登場以降、文章作成やプロンプト指示によるアイデア出しは日常的なものとなりました。しかし、実際のビジネス現場—特に顧客にダイレクトにAIの評価を提示することは、まだ大きな課題があります。AIの気まぐれを回答を防ぎ、内容の品質をいかに保つか？そのためにAIにどう情報を与えて、具体的な指示を出せばよいかがカギになってきます。
WebサイトのLP（Landing Page）分析を例にとると、これまでは「このLP分析を行った文章をわかりやすく改善して」とテキストで指示を出したり、アクセス解析の数値を貼り付けて見解を求めたりするのが主流でした。しかし、ページのデザインや構成するコンテキスト（背景情報）を欠いてAIに問い合わせても、アドバイスもどこか抽象的なものになりがちです。
こうした課題に対し、グラッドキューブ社のWebサイトの分析サービス「SiTest」から「LP分析AIレポート（β版）」という興味深い機能が出ました。「ページの見た目（視覚データ）」と「ユーザーの行動履歴（数値データ）」の2つの異なるデータ領域（マルチモダル）を掛け合わせ、課題発見から改善画面構成（ワイヤーフレーム）まで自動生成する技術です。実際に操作をして検証することもできましたので、実効性を含めて紹介します。
💡 情報提供・取材協力のご案内 > 本記事の作成にあたり、SiTest（サイテスト）開発元である株式会社グラッドキューブ様より、AI診断機能に関する技術資料および公開レポートのご提供・協力をいただきました。この場を借りて御礼申し上げます。
（※本記事は同社の資料をもとに、当ラボにて独自に検証・再構成したレポートです）
なぜ「画像」と「数値データ」の両方をAIに渡す必要があるのか？
Webページの改善を行う際、従来はそのページのアクセスを時系列に分析した数値データ（定量）と、画面のデザイン（定性）を人間が頭の中で突き合わせて考える必要がありました。なお、この数値データのことをスクロールデータともいいます。
- 数値データだけの場合： 「55%の地点で離脱が多い」ことは分かっても、なぜ離脱されたかの原因（文章が長くて飽きられたのか説明が難しくて読むのを諦めたのか、など）が判断しにくい。
- デザインだけの場合： 見た目の印象で判断するため、「なんとなく見づらい」といった主観的な議論になりやすい。
この「数字」と「デザイン」の双方をAIにセットで与える（マルチモダル入力）ことで、「数値の急落地点（数字）」と「その場所にあるデザイン・文章（見た目）」をAIが同時に照合し、根拠のある改善策を導き出せるようになります。
検証準備 -AIに与える2つの「生データ」
では、実際に操作した内容で検証してみます。AIに対して当サイトの以下の2種類のデータをインプットとして用意しました。
| 入力データ項目 | 形式・ファイル例 | データが持つ役割 |
|---|---|---|
| ① ページ画像 | 全体スクリーンショット | ページのレイアウト、キャッチコピー、画像、配色などの「視覚的情報」 |
| ② スクロールデータ | 実計測のアクセス解析（csvデータ） | ユーザーの到達率、離脱数、平均滞在時間などの「行動数値」 |
この２つを下記の画面で指定し、AIに送ります。
あとは自動で診断、という流れなので、AIへの指示（プロンプト）は不要です。
準備1：ページ全体のロングスクリーンショット
ヒートマップ等の色が重なった状態ではなく、「Webページそのものの素の画像」を使用します。AIはこの画像を視覚的にスキャンし、ファーストビューのキャッチコピー、コンテンツの配置順序、テキストの密度などを読み取ります。入れた画像はサイト内のこのページ（EXCELでアニメーションをつくる 基礎編）の画像データです（ページ全体の画像なので、とても長いので一部省略してます。）。
準備2：計測タグから出力したスクロールデータCSV
あらかじめ対象ページの<head>内にSiTestの計測用タグを埋め込んでおき、集計されたデータをCSV形式でダウンロードして読み込ませます。
CSVには、ページ上部（0%）から下部（100%）までの以下の数値が含まれています。
- 到達数・到達率（%）： どこまで読まれたか
- 離脱数・離脱率（%）： どこでページを閉じられたか
- 平均滞在時間（秒）： 各エリアで何秒留まったか
CSVファイルなので、こんなデータになります。
AI解析の実行と「ドキッとする指摘」の抽出メカニズム
入力完了後、「分析を実行」ボタンを押すと、AIが2つのデータをクロスマッチングして解析を行います。
出力レポートの三段階構造
出力された分析レポートを確認すると、単なる抽象的なアドバイスではなく、論理的な3つの階層で整理されていました。
- 数値データ、画像をクロスさせた結果から読み取れる事実（Fact）：
- 16.7%のユーザーがページ読み込み直後（0%地点）で離脱している。
- 55%地点でさらに16.7%のユーザーが離脱しており、その地点には、「基本その4 (上から下にジグザグ移動)」の筆者コメントと「プログラムのヒント」、そして「基本その5 (右下に向かいつつ、左上のセルを塗る)」の見出しがある。
- 考察される背景・原因（Hypothesis）：
- 該当箇所（55%地点）のデザインやキャッチコピーが、次のコンテンツへ進む動機付けになっていない可能性を指摘。
- 具体的な改善アクション（Action）：
- 導入部の文章を明確化する、55%地点の要素の並び順を変更する。
人間だと「数値の集計」と「デザインのチェック」を別々に行いがちですが、AIは「この数字の動きは、画像のこのパーツが原因である」とダイレクトに紐付けて指摘してくるため、読み手として「なるほど、そこか…」とドキッとする説得力があります。
修正案を視覚化する「ワイヤーフレーム自動生成」
本機能を検証していて最も実用的だと感じたのが、文章での指摘にとどまらず、「改善後の画面構成イメージ（ワイヤーフレーム）」まで出力してくれる点です。「構成案を生成」ボタンを押下すると下記のようなイメージを出力してくれます。
従来のテキストベースのよくあるアドバイスに比べると、やはり具体性、説得力が違うということがわかると思います。
ワイヤーフレームが出力されるメリット
- 文言の置換案が具体的： 「こう言い換えると読者に刺さりやすい」という具体的な代替テキストが示される。
- レイアウト変更案が明確： 「離脱の多いエリアの手前にこの要素を挟む」「ボタンの配置を上にあげる」といった配置の答えが得られる。
- 作業指示への展開がスムーズ： 構成案（画面イメージ）がすでに手元にあるため、自分でゼロから修正案を描く必要がなく、そのままデザイナーへの指示や自分の修正作業に移れる。
まとめ ｰ検証を通して見えたビジネスAI活用のポイント
今回の「LP分析AIレポート（β版）」の検証を通して、Web改善における実用的なAI活用のポイントが明確になりました。
- AIには「質の高い複合データ（画像＋CSV）」を与える： 指示文（プロンプト）工夫するだけでなく、実際の行動数値とデザイン画像をセットで渡すことで、分析の精度が格段に上がる。
- 「課題発見」から「構成案の出力」まで自動化する： ダメ出しだけで終わらせず、ワイヤーフレーム（画面構成）まで出させることで、次の修正アクションへ即座に移行できる。
- 人間は「ゼロからの考案」から「AI案の選定・微調整」へ： 膨大なデータ分析と初期アイデア出しをAIに任せることで、人間は最終判断と仕上げに集中できる。
手元にある「行動データ」と「デザイン画像」をAIに組み合わせるというこの手法は、Webサイト改善の現場作業を大幅に効率化してくれる現実的なアプローチだと実感しました。サイトの改善に悩んでいる方は、こうしたマルチモダル解析の活用をぜひ検討してみてはいかがでしょうか。
コメント