こんにちは！
Webデザイナーのayakaです。
前回、「デザイナーの私が実務で使っているAI活用事例〜Claude・ChatGPT〜」という記事で、日々の業務をAIで効率化する事例をご紹介しました。
今回はそこからさらに一歩踏み込んで、Webサイト改善の方向性を決める上流の工程から、AIを活用した実践プロセスをご紹介します。
Webサイトの改善を進める中で、「何から手をつければいいかわからない」と感じることはありませんか？
今回ご紹介するのは、そういった状態からスタートしたケースの一例です。
過去の事例をもとに、AIと一緒にどのようにサイト改善を進めていったのか、プロセスにフォーカスしてお届けします。
いきなり作らず、まずは整理からはじめる
Webサイトの改善プロジェクトでは、「サービスをより良くしたい！」という想いはあっても、こんな状況であることが多いです。
- 具体的にどこを改善すべきか定まりきっていない
- 課題感はなんとなくわかるが言語化しきれていない
- 最適なアプローチが見えておらず、構成も決まっていない
今回の事例も、まさに「何から手をつけるべきか分からない状態」からのスタートでした。
インハウスクリエイターとしては、ただ「言われたものを作る」のではなく、こういった曖昧な段階から関わる場面も多いと感じています。
サービス運営に関わる立場だからこそ、課題感や原稿を受け取るだけでなく、自分たちで分析をして、施策そのものを一緒に考えていくこともできるのが、インハウスならではの面白さでもあると思っています。
今回は正解がないからこそ、いきなりデザインを作るのではなく、まずは課題を言語化し、方向性をつくる整理からスタートしました。
サイト改善の5つのプロセス
以下の5つのステップで進めたプロセスをご紹介します。
1.進め方の整理
当初は課題をリストアップした後に、すぐに構成案を制作してから進める予定でした。
一度、マーケティングチームに進め方を共有したうえで、分析後は先に課題感や改善内容の認識を揃える方向に変更しました。
| 進め方 | 分析 → 課題の可視化 → すり合わせ → 構成案作成 → デザイン制作 |
|---|
結果として、事前に方向性を揃えることができたことで、後々の差し戻しや修正といった手戻りを減らすことができました。
2.AIで状況分析
ここでAIの出番です！
Claudeを活用し、現状整理と課題抽出を行いました。
具体的には以下のようなことをAIと一緒に進めています。
| GA4の数値確認 | 直近数ヶ月分の推移などのデータを確認 |
|---|---|
| 課題の洗い出し | データをもとに問題点を抽出 |
| 改善案の整理 | 課題に対する解決策のアイデア出し |
| 強みの整理 | 自社サービスの立ち位置や押し出しポイントを明確化 |
自分一人で整理しようとすると視点が偏りがちですが、 AIを挟むことで客観的に整理できたのが大きかったです。
3.課題の可視化
AIで抽出した課題をデザインツール上で整理し、すり合わせ用のボードを作成しました。
細かいものから全体的なものまで、ChatGPTやClaudeを使いながら、以下のような課題や改善案をテキストで一覧化しました。
- スクロール率、離脱率が〇〇%で〇〇の情報が不足している、〇〇コンテンツの強みが伝わりづらい
- 遷移率〇〇%で主要サービスへの導線がわかりづらい
このように課題を並べて整理していくことで、
- なんとなく感じていた課題感が言語化される
- 今後どこから手をつけるべきかが見えてくる
- 共通認識として扱えるようになる
といった変化がありました。
見える化することで、その後の議論もスムーズに進められる状態をつくることができました。
4.マーケティングチームとすり合わせ
作成したボードをもとに、マーケティングチームと方向性や前提条件の認識を揃えていきました。
ページの役割の再確認や、お互いに捉えている課題のすり合わせ、改修の優先順位などを、この段階で確認しながら進めていきます。
事前に前提や制約をすり合わせておくことで、後から大きく方向が変わるリスクを減らすことができました。
また、このフェーズで曖昧だった改修の目的も整理され、方向性を定めることができたのも大きかったです。
作る前に認識を揃えることの重要性を改めて感じた部分でした。
5.構成案作成
AIで叩き台を作り、人で仕上げるという形で構成案を作成しました。
フェーズ3で作成したボードをもとに、ChatGPTで構成案のプロンプトを作成し、Figma Makeでワイヤーフレームを生成しながら構成を固めていきました。
課題リストをベースに設計することで、「この構成でこの課題を解決できているのか」といった視点で考えながら進めることができました。
方向性に迷ったときも、事前にすり合わせた現在の課題を判断軸にすることで、大きくブレることなく設計を進められたと感じています。
また、提案する際にも「この課題に対する改善案としてこの構成にしています」と説明できるため、意図を伝えやすかったのもよかった点でした。
AI活用まとめ
各フローでAIを活用してきました！
| データ分析・調査 | ClaudeでGA4数値の確認などを通して現状を把握 |
|---|---|
| 課題の整理・発見 | Claudeで曖昧な課題を言語化し、整理する |
| 改善案のアイデア出し | ClaudeやChatGPTなどで複数の視点から方向性を検討する |
| 構成案の叩き台作成 | Figma Makeで構成案のベース作り |
また、これまでは「考える補助」としてAIを活用してきましたが、最近はさらに一歩進めて、ブラウザ操作やファイル生成など、実作業の一部を自動化する取り組みも進めています。
今回のプロセスでは各フェーズで補助的な立ち位置でAIを活用していましたが、分析から構成案作成まで、一貫してAIに任せられる可能性も感じています。
まとめ
今回は特に、曖昧な状態から課題を言語化し、共通認識として整理していくフェーズにおいて、AIを挟むことで客観的に考えられる場面が多かったと感じています。
また、いきなりデザインを作るのではなく、事前に課題や方向性を揃えることで、その後の設計や提案がスムーズに進むことも実感しました。
今後もAIを活用しながら、どこまで実務に組み込み、自動化を進めていけるのかを検証しつつ、より良いサービスづくりに活かしていきたいと思います！
