はじめに
AIにUI改善案を相談すると、便利な一方で、どうしても次のような回答になりがちです。
- 一般論としては正しい
- どこかで見たような提案になる
- 実在するアプリの設計パターンに基づいているか分かりにくい
- 「なぜその改善案が有効なのか」の根拠が弱い
そこで使えそうなのが、Lazyweb です。
Lazywebは、AIエージェントが実在アプリやWebサービスの画面事例を参照しながら、UI/UXの調査・改善案作成を行うためのサービスです。
公式サイトはこちらです。
本記事では、Claude CodeでLazywebを使うためのインストール手順、アンインストール手順、そして実務で使いやすいプロンプト例を整理します。
Lazywebとは
Lazywebは、AIエージェント向けのデザインリサーチ支援サービスです。
公式ページ上では、「Design Context for AI Agents」 と説明されています。
また、Lazywebでは 257,000件以上の実在アプリ画面 を参照できると紹介されています。
一言でいうと、次のようなものです。
AIにUIを想像だけで作らせるのではなく、実在アプリの画面事例を調べさせてから改善案を出させるためのツール
Claude CodeなどのAIコーディングエージェントに対して、実在するアプリやWebサービスの画面例を参照させることで、より現実的なUI改善案を出しやすくなります。
たとえば、以下のような調査に使えます。
- 購入導線の改善
- 会員登録導線の改善
- オンボーディング画面の改善
- 検索画面の改善
- 商品詳細・コンテンツ詳細画面の改善
- クーポン・キャンペーン訴求の改善
- 決済前後のユーザー導線の改善
- Figmaデザイン案のレビュー
- 競合・類似サービスのUIパターン調査
Lazywebの特徴
Lazywebの特徴は、AIエージェントに実在するUI事例を参照させられる点です。
通常、AIにUIを作らせると、AIの学習データ上の平均的なパターンに寄りやすくなります。
たとえば、以下のようなUIになりがちです。
- どこかで見たようなカード型レイアウト
- 無難な角丸ボタン
- 一般的なダッシュボード構成
- 抽象的な改善提案
- 根拠が分かりにくいUIレビュー
Lazywebを使うと、AIエージェントに対して、次のような進め方を依頼できます。
まず実在アプリの画面事例を調査してください。
そのうえで、改善案を出してください。
つまり、AIの回答を、
AIの想像ベース
から、
実在UIの事例ベース
に近づけることができます。
これは、UI改善やデザインレビューにおいてかなり重要です。
Lazywebでできること
Lazyweb Pluginを使うと、Claude Code上で以下のようなことができます。
- 実在アプリやWebサービスのスクリーンショットを検索する
- 類似する画面パターンを調査する
- 参考画像をローカルに保存する
- Markdown形式のレポートを生成する
- 既存画面の改善案を出す
- Figmaやスクリーンショットを起点にUIレビューする
- 自社プロダクトに転用できる設計思想を整理する
公式READMEでは、Lazyweb Pluginについて、AIエージェントがデザインする前に実例を検索し、参考画像をローカルに保存し、構造化されたレポートを作るものとして説明されています。
出力イメージは以下のような構成です。
.lazyweb/{skill}/{topic}-{date}/
├── report.md
└── references/
├── example-1.png
├── example-2.png
└── ...
Markdownレポートと参考画像がセットで残るため、後から見返したり、社内共有の材料にしたりしやすいです。
Lazywebで使える主なSkill
Claude Code Pluginとして導入すると、Lazywebには複数のSkillが用意されています。
主なSkillは以下です。
-
/lazyweb:lazyweb-design-research- 競合・類似サービスのUIを深く調査する
-
/lazyweb:lazyweb-quick-references- 参考スクリーンショットを素早く集める
-
/lazyweb:lazyweb-design-improve- 既存画面やFigma案をもとに改善案を出す
-
/lazyweb:lazyweb-design-brainstorm- 異業種のUIパターンからアイデアを探す
-
/lazyweb:lazyweb-add-inspo-source- 外部インスピレーションソースを追加する
-
/lazyweb:lazyweb-remove-inspo-source- 外部インスピレーションソースを削除する
個人的に特に使いやすいと感じるのは、以下の3つです。
/lazyweb:lazyweb-design-research
/lazyweb:lazyweb-quick-references
/lazyweb:lazyweb-design-improve
使い分けは以下のように考えると分かりやすいです。
-
まず広くUI/UXの傾向を調査したい
/lazyweb:lazyweb-design-research
-
参考画面を素早く集めたい
/lazyweb:lazyweb-quick-references
-
既存画面やFigma案を改善したい
/lazyweb:lazyweb-design-improve
-
同業他社ではなく異業種から発想を得たい
/lazyweb:lazyweb-design-brainstorm
インストール手順
Claude CodeでLazywebを使う場合、まずLazywebのPlugin Marketplaceを追加します。
claude plugin marketplace add https://github.com/aboul3ata/lazyweb-skill
次に、Lazyweb Pluginをインストールします。
claude plugin install lazyweb@lazyweb
これで、Claude Code上からLazywebのSkillを呼び出せるようになります。
Claude Codeでは、LazywebのSkillは名前空間付きで呼び出します。
たとえば、以下のような形式です。
/lazyweb:lazyweb-quick-references
Lazyweb用トークンの作成
Lazyweb MCPを使うには、ローカルにトークンを保存します。
以下のコマンドを実行します。
mkdir -p ~/.lazyweb
curl -sS -X POST https://www.lazyweb.com/api/mcp/install-token \
-H "content-type: application/json" \
-d '{}' | node -e "let s='';process.stdin.on('data',d=>s+=d);process.stdin.on('end',()=>require('fs').writeFileSync(process.env.HOME+'/.lazyweb/lazyweb_mcp_token', JSON.parse(s).token))"
トークンは以下に保存されます。
~/.lazyweb/lazyweb_mcp_token
トークンについて
Lazywebは無料で利用できます。
公式READMEでは、このBearer Tokenは Lazyweb MCPの参照ツールを認可するためのもの と説明されています。
このトークンによって、以下のような権限が付与されるわけではありません。
- 購入
- 課金
- 個人データへのアクセス
- 破壊的操作
ただし、トークンであることに変わりはありません。
そのため、以下の点には注意します。
- GitHubなどのpublic repositoryにコミットしない
-
.gitignoreされていない場所にコピーしない - スクリーンショットなどにトークンを写さない
- 不要になったら削除する
インストール確認
インストール後、Claude Code上でLazywebのSkillが使えるか確認します。
たとえば、次のように依頼できます。
/lazyweb:lazyweb-quick-references を使ってください。
ECアプリの商品詳細画面における購入ボタン周辺UIの参考例を集めてください。
観点:
- CTA配置
- 価格表示
- クーポン訴求
- 購入前の注意文言
Claude CodeがLazywebを使って参考画面を調査し、レポートや画像を保存してくれれば成功です。
使い方1: UIリサーチに使う
まず、広く調査したい場合は /lazyweb:lazyweb-design-research が向いています。
たとえば、電子書籍・EC・コンテンツ配信系のサービスで購入導線を調査したい場合は、以下のように依頼できます。
/lazyweb:lazyweb-design-research を使ってください。
コンテンツ配信系アプリにおける購入導線のUI/UXを調査してください。
調査対象:
- 電子書籍サービス
- ECサービス
- 動画配信サービス
- サブスクサービス
- デジタルコンテンツ販売サービス
観点:
- 購入ボタンの配置
- 価格表示
- クーポンやキャンペーン訴求
- 購入前の不安を減らす説明
- 外部ブラウザ遷移前の案内
- 決済後にユーザーをどこへ誘導しているか
出力:
- 参考UI事例
- 共通パターン
- アンチパターン
- 改善に使えそうな示唆
- 実装時の注意点
この使い方は、まだ具体的な画面を修正する前の調査段階に向いています。
使い方2: 参考画面を素早く集める
「まずは参考UIだけ見たい」という場合は、/lazyweb:lazyweb-quick-references が向いています。
/lazyweb:lazyweb-quick-references を使ってください。
モバイルアプリの商品詳細画面におけるCTA周辺UIの参考例を集めてください。
観点:
- メインCTAの配置
- サブCTAの配置
- 価格表示
- キャンペーン表示
- レビュー表示
- 関連コンテンツへの導線
出力は、パターン別に整理してください。
深い分析よりも、まず参考例を集めたいときに使いやすいです。
使い方3: 既存画面やFigma案を改善する
既存画面やFigmaデザイン案を改善したい場合は、/lazyweb:lazyweb-design-improve が向いています。
たとえば、Figmaの画面案をレビューしたい場合は、以下のように依頼できます。
/lazyweb:lazyweb-design-improve を使ってください。
以下のFigmaデザインを対象に、購入導線改善の観点でUI/UXレビューをしてください。
対象Figma:
<ここにFigmaリンクを貼る>
目的:
- ユーザーが購入に進むまでの迷いを減らす
- CTAの意味を明確にする
- 外部リンク遷移前後の不安を減らす
- 購入導線上の離脱ポイントを洗い出す
確認してほしい観点:
1. 画面構成
2. CTAの配置と文言
3. 購入前説明の分かりやすさ
4. 外部ブラウザ遷移前の案内
5. 情報の優先順位
6. 類似サービスの参考UI
7. 改善案
出力形式:
- 現状の良い点
- 課題候補
- 参考UI事例
- 改善案 最大5個
- 各改善案の目的
- 実装する場合の変更対象候補
- 効果検証で見るべき指標
注意:
- 不明な点は不明と書いてください
- 推測は「仮説」と明記してください
- 他社UIのコピーではなく、設計思想として抽象化してください
このように依頼すると、単なる感想ではなく、実在UIを参考にした改善提案になりやすいです。
使い方4: 実装プロジェクトと組み合わせる
Claude Codeでアプリのプロジェクトを開いている場合は、LazywebによるUIリサーチと、既存コードの構造確認を組み合わせることができます。
ただし、mainブランチを開いている場合は、いきなり修正させない方が安全です。
まずは以下のように、分析だけを依頼します。
/lazyweb:lazyweb-design-improve を使ってください。
現在のプロジェクトのmainブランチを参照し、対象画面の実装構造を確認したうえで、Lazywebで類似UI事例を調査してください。
対象:
- コンテンツ詳細画面
- 購入導線
- 外部リンク遷移前の案内
制約:
- mainブランチのファイルは変更しないでください
- まずは分析と改善提案のみ行ってください
- 実装変更が必要な場合は、変更対象ファイルと修正方針だけ提示してください
出力:
- 関連ファイル候補
- 現在の画面構造
- 課題候補
- Lazywebで見つけた参考UI
- 改善案
- 実装する場合の影響範囲
おすすめの流れは以下です。
1. mainブランチで現状分析
2. Lazywebで参考UI調査
3. 改善案を作成
4. 優先度を決める
5. 別ブランチを切る
6. 優先度の高い改善案だけ実装する
mainブランチでは、あくまでレビュー・分析に留めるのが安全です。
使い方5: 異業種のUIからアイデアを得る
競合や同業サービスだけを見ると、改善案が似通ってしまうことがあります。
その場合は、/lazyweb:lazyweb-design-brainstorm が向いています。
/lazyweb:lazyweb-design-brainstorm を使ってください。
コンテンツ配信系アプリの購入導線について、同業サービス以外から転用できるUIアイデアを探してください。
参考にしたい業界:
- ゲーム
- 動画配信
- EC
- フードデリバリー
- チケット購入
- 学習アプリ
目的:
- 購入前の不安を減らす
- CTAの納得感を上げる
- キャンペーンやクーポンに気づきやすくする
- 次の行動を直感的にする
出力:
- 参考になりそうな異業種UI
- 転用できる設計思想
- 具体的な改善案
- 実装時の注意点
同業他社のUIを横並びで見るだけではなく、異業種から発想を持ち込める点もLazywebの面白いところです。
アンインストール手順
Lazyweb Pluginを削除する場合は、以下を実行します。
claude plugin uninstall lazyweb@lazyweb
Lazywebのマーケットプレイスも不要な場合は、以下も実行します。
claude plugin marketplace remove lazyweb
インストール状況を確認する場合は、以下です。
claude plugin list
必要に応じて、Claude Code上でPluginを再読み込みします。
/reload-plugins
Lazyweb用トークンも削除する場合
Lazyweb用に作成したトークンも不要な場合は、以下で削除できます。
rm -f ~/.lazyweb/lazyweb_mcp_token
rmdir ~/.lazyweb 2>/dev/null
これで、ローカルに保存したLazyweb用トークンも削除できます。
スコープ指定してインストールしていた場合
通常はuserスコープでインストールされます。
ただし、以下のようにprojectやlocalスコープでインストールしていた場合は、
claude plugin install lazyweb@lazyweb --scope project
または、
claude plugin install lazyweb@lazyweb --scope local
アンインストール時も同じスコープを指定します。
claude plugin uninstall lazyweb@lazyweb --scope project
claude plugin uninstall lazyweb@lazyweb --scope local
どのスコープで入っているか分からない場合は、まず以下で確認します。
claude plugin list
注意点
1. 他社UIをコピーしない
Lazywebは、実在するアプリやWebサービスの画面を参考にできます。
ただし、参考UIをそのままコピーする使い方は避けるべきです。
安全な使い方は、以下です。
参考画面を見る
↓
導線や情報設計を分析する
↓
なぜそのUIが有効なのかを抽象化する
↓
自分のプロダクトの文脈に合わせて改善案に落とす
つまり、見るべきなのは「見た目」そのものではなく、設計思想です。
2. 業務利用時は公開情報の扱いに注意する
競合サービスや他社サービスのUIを参考にする場合、社外向け資料や記事にそのままスクリーンショットを載せるのは避けた方が安全です。
社外公開する場合は、以下のように扱うのが無難です。
- 固有サービス名を必要以上に出さない
- 画像をそのまま転載しない
- UIパターンを抽象化して説明する
- 「事実」「観察」「仮説」「提案」を分ける
3. AIの提案をそのまま採用しない
Lazywebを使うと、AIの提案に参考UIという根拠が加わります。
ただし、それでも最終判断は人間が行うべきです。
特に以下は確認が必要です。
- 自社サービスのユーザー層に合っているか
- 既存のデザインルールに合っているか
- 実装コストが妥当か
- 法務・表記・決済まわりの制約に反していないか
- 効果検証できる形になっているか
どんな人に向いているか
Lazywebは、以下のような人に向いていると思います。
- Claude CodeでWebサービスやアプリ開発をしている人
- UI改善案をAIに相談したい人
- Figma案のレビュー精度を上げたい人
- 競合・類似サービスのUIパターンを調査したい人
- 購入導線や会員登録導線を改善したい人
- AIの一般論ではなく、実例ベースの示唆が欲しい人
特に、EC、電子書籍、動画配信、SaaS、サブスク、予約サービス、チケット販売、教育系サービスなど、ユーザー導線が重要なプロダクトでは使いやすいと感じます。
まとめ
Lazywebは、Claude CodeでUI/UX改善を行うときに便利なツールです。
特に良い点は、AIに対して、
実在するUI事例を見てから考えてください
と依頼できることです。
これにより、AIの提案を単なる一般論ではなく、より実例ベースの改善案に近づけることができます。
UI改善、購入導線改善、Figmaレビュー、競合UI調査、オンボーディング改善などに使いやすいので、Claude Codeでアプリ開発やWebサービス改善をしている方は、一度試してみる価値があると思います。