UI/UXデザイン改善をAIスキルで加速させる方法
目次
実用レベルになってきたAI、現場で検証してわかったこと
画像生成、コード生成、デザイン生成などの品質が大きく向上している
「AIはまだチャットしかできない」「AIっぽいものしか作れない」という認識は、すでに過去のものになりつつあります。LYZONの社内チームで検証を重ねた結果、実務で活用しない手はないと実感しています。
ChatGPT Image 2.0の画像生成、Claude CodeやCodexによるコーディング、Claude Designによるサイトデザイン生成——いずれも一次アウトプットとして十分使えるレベルまで進化しています。利用ルールの整備など課題はありますが、問題は「どう使いこなすか」に移ってきています。
画像やURLをAIに渡せばデザイン・コードなど問題を見てくれる
スクリーンショットやURLを渡すだけで、AIはデザインの改善点やコードの問題を指摘してくれます。専門知識がなくても「このボタン、なぜクリックされないのか」「このコード、どこがおかしいか」といった問いに、即座に答えが返ってきます。
ここで重要なのは「プロンプトの品質」です。画像とURLを渡すだけでも見てくれはしますが、都度観点がバラバラだったり、間違ったことを言っていたり、アウトプットの品質を正確にすることは難しい現状です。
UI/UX改善のよくある課題、AIを使う理由
UI/UX改善には、ユーザーテスト・インタビュー・デザイナーによる分析と改善提案など、コストと時間がかかります。「本当に効果があるのか」と疑問視され、後回しにされるケースも少なくありません。また担当者のスキルによって診断の品質にばらつきが出やすいのも課題です。
これを解消するのがAIの活用です。
- 工数削減：何人日もかかっていた分析が、わずか5分でアウトプットとして出てくる
- 品質の均一化：デザイナーの知見をあらかじめAIスキルに組み込むことで、誰が使っても一定品質の診断が可能になる
- 導入ハードルの低下：コストが取れないプロジェクトにも、気軽にUI/UX改善を導入できる
現時点では人間が時間をかけてしっかり分析する品質には及ばないと考えますが、それもAIの使い方やAIと人間の共同作業にすることによって品質を上げることは十分に可能です。
AIで「UI/UX診断スキル」を作りました
Claudeで動作するUI/UX診断スキルを開発
Claudeのチャット画面からUI/UX診断スキルを起動し、あらかじめ設計したフローと診断項目に沿ってAIが分析を進め、レポートまで自動生成します。
① 情報入力
プロジェクト名・改善したい課題・URL・スクリーンショットなどを入力。
デザインガイドラインやアクセス解析データも添付可能です。
なお個人設定になるものの、AIツールへの学習データ提供はオフに設定し、情報漏洩リスクを防いでいます。
② 診断内容の整理
インプットした情報をもとに、あらかじめスキルに入れている「UI/UXチェックリスト」の中から、どの項目を見るべきか、項目ごとに重要度をランク付けを実行してくれます。
これは全てのチェックリストを見ると分析時間もクレジット消費も増加してしまうことを防ぎ
選定した項目を集中して分析する狙いです。
③ 診断実行
インプット内容と選定された診断項目をもとに、AIが診断を実施。
人間が時間をかけて確認していた部分を大幅に短縮します。
③ Excelレポート出力
診断結果・改善アクション・競合比較をシート別に出力。根拠や「人間の目で確認してほしい観点」も明記する設計にしています。
インプットの質が結果を左右する
URLとプロジェクト名だけを渡しても、AIはどのサイトにも当てはまる改善案を返したり、そのサイトにとって重要ではない部分だけ指摘したりと、アウトプットが低品質になりやすいです。
「人間に伝えるようにAIに伝える」レベルのインプットがあればAIもプロのUI/UXデザイナーのように振る舞うことが現実的になってきます。
そのため開発したスキルには「UI/UXデザイナーが確認したい項目」を質問するように作られています。
それらすべてを入力したうえで診断を実行に移すという流れです。
クレジット消費を抑える設計も重要
上記では可能な限り詳細にAIに入力すると言いましたが、多すぎる入力にも懸念はあります。
AIツールにはクレジット上限があり、高性能モデルはすぐ消費してしまいます。
Claudeスキルを単純に作ると1枚のMarkdownにすべての指示がまとまる形になりますが、これだと不要な部分までAIが毎回読み込み、思考時間とクレジットを無駄に消費してしまいます。
これを避けるため、サブスキル的な指示は別ファイルに分けて管理し、必要なタイミングだけ読み込む構造にしています。
他にも、質問項目を絞ることや用途によってモデルを切り替えるなど、消費を抑える工夫やノウハウが必須になってきます。
skill-creatorを使ってデザイナー自身が開発
ClaudeにはデフォルトでAIスキル作成を支援する「skill-creator」が備わっています。
これを使いデザイナーの知見や業務フローをClaudeと対話しながらスキル化していきました。
スキルにはUI/UXの観点や診断項目やベストプラクティスなど、様々な知見が盛り込まれています。
ここが「簡単なインプットだけでAIにおまかせでやってもらう」とは大きく品質で差がつく部分になっています。
そしてスキルを社内メンバーでテストし、ブラッシュアップを繰り返してver1として完成させました。
AIと人間の役割分担
AIがすべてを解決するわけではありません。重要なのは、AIと専門家それぞれの強みを正しく組み合わせることです。
AIが担う部分 ─ 網羅性・速度向上・効率化・一次評価
網羅的にチェックし、短時間で大量の一次評価を生成するのはAIが得意とする領域です。人間では見落としがちな細かい項目も、スキルに組み込まれた診断フレームワークに沿って漏れなく拾い上げます。
人間が担う部分 ─ 人目線での分析・優先度決め・改善提案
AIが出したアウトプットをそのまま使うのではなく、ビジネス目標やユーザー文脈を踏まえた優先順位付け、具体的な改善提案への落とし込みは専門家が担います。
AIの出力はあくまで「素材」であり、価値に変えるのはデザイナーの目と経験です。
「AIに全て任せる」ではなく「AIにサポートしてもらう」という設計思想
このスキル開発のゴールは、人間をAIで置き換えることではありませんでした。
一次診断をAIに任せることで、専門家がより本質的な判断と提案に集中できる環境をつくること。
このスキルを社内に共有し、誰もが一定クオリティのUI/UX改善を提案できること。
本来であれば教育・学習コストや提案期間の縛りがあって厳しかった部分をAIで解消すること、
それがLYZONがUI/UX診断スキルを開発した根本的な目的です。
LYZONのUI/UX改善支援サービス
診断から改善まで一気通貫で伴走できる理由
UI/UXデザイン、AI活用に精通したメンバーをはじめ、ディレクション・デザイン・エンジニアリングまですべて1社で完結できる体制を持っています。
診断で終わらず、改善の実装まで一貫して対応できるのがLYZONの強みです。
こんな課題をお持ちの方はご相談ください
- UI/UXを改善したいが、何から手をつければいいかわからない
- 自社サイトの良し悪しを客観的に把握したい
- コストを抑えてUI/UX改善に取り組みたい
AIを駆使した診断と、UIUXデザイナーによる専門的な判断を組み合わせることで、 AI×プロの目でUI/UXを網羅的に改善していくことができます。
2017年にWebデザイナーとしてLYZONに入社。
現在はアートディレクターとしても活動中。
