UXデザイナーが競合調査とデザイン監査にSaveを活用する方法

·

UXデザイナーは競合のベンチマーク作業に何時間も費やしている――競合アプリのスクリーンショット撮影、インタラクションパターンのドキュメント化、デザインのインスピレーション収集。しかしスクリーンショットはAIで分析できないし、ブックマークは迷子になる。コンテンツは本当に使える形式で持っている必要がある。

UXデザイナーたちがSaveを使ってリサーチをどう強化しているかを紹介しよう。

ワークフロー1: 競合のランディングページ → UX監査

ホームページをリデザインしている。競合に何が効いているかを理解する必要がある。

ワークフロー:

  1. 競合の5〜8のランディングページをMarkdownで保存 — コピー、CTA、セクション構造、ナビゲーションがすべて保持される
  2. 比較監査を実行:

「[業界]の8つの競合ランディングページです。コンテンツ構造を分析してください:ヒーローセクション、ソーシャルプルーフ、機能ブロック、CTAをどう整理していますか?5つ以上のページに共通するパターンは何ですか?上位2つに固有なものは何ですか?」

「これらのページを基に、ランディングからコンバージョンまでの最も一般的なユーザージャーニーは何ですか?どのステップを優先していますか?」

  1. データを持ってデザインする — 業界標準のパターンと差別化できるポイントを把握した状態でリデザインを開始できる

ワークフロー2: デザインシステムドキュメント → コンポーネント計画

デザインシステムを構築または更新している。確立した企業がどのようにドキュメント化しているかを学びたい。

ワークフロー:

  1. Shopify Polaris、Atlassian、IBM Carbonなどのデザインシステムドキュメントページを保存
  2. パターンを抽出:

「3つの主要デザインシステムのドキュメントページです。コンポーネントドキュメントの構造を比較してください:どのセクションを含んでいますか?バリアントをどう扱っていますか?どんなガイドラインを提供していますか?自分のデザインシステムに活用できるテンプレートを作成してください。」

「コンポーネントのドキュメントに直接組み込まれているアクセシビリティガイドラインは何ですか?すべてのコンポーネントに適用すべきチェックリストを作成してください。」

  1. 実績ある基礎の上に構築 — デザインシステムのドキュメントが初日からベストプラクティスに沿ったものになる

ワークフロー3: アクセシビリティガイドライン → WCAG監査チェックリスト

プロダクトのアクセシビリティ監査が必要だ。WCAGのガイドラインは包括的だが内容が濃い。

ワークフロー:

  1. 関連するWCAGページと、自分のプロダクトタイプに焦点を当てたアクセシビリティ記事を保存
  2. 実用的なチェックリストを生成:

「WCAG 2.2のAAレベル準拠ガイドラインと、[アプリの種類]のアクセシビリティに関する2つの記事です。[プロダクトの説明]に特化した実用的な監査チェックリストを作成してください。WCAGの基準ではなく、ページ/コンポーネントごとにグループ化してください。クイックウィンと大きな工数がかかるものを区別してください。」

  1. 効率的に監査 — カスタマイズされたチェックリストは生のWCAG仕様より10倍使いやすい

ワークフロー4: ユーザーフィードバック + 競合調査 → リデザインブリーフ

ユーザーからの苦情と競合のインスピレーションがある。これらを一貫したリデザイン計画に変える必要がある。

ワークフロー:

  1. ユーザーフィードバックページ(App Storeレビュー、サポートスレッド、ユーザビリティテスト結果)とより良いアプローチを示す競合ページを保存
  2. リデザインブリーフを書く:

「自社プロダクトの[機能]に関するユーザーフィードバックと、同じ機能をより良く扱っている競合の4ページです。各ユーザーの苦情を競合のソリューションにマッピングしてください。次に、最良の競合アプローチを参照しながら、すべての痛点に対処する[機能]のリデザインブリーフを書いてください。」

  1. チームを整合させる — ユーザーの痛みを実証済みのソリューションに結びつけるブリーフ。抽象的なデザインアイデアではなく。

はじめよう

  1. Saveをインストール(無料、月3回保存)
  2. リサーチ中に競合ページ、デザインシステムのドキュメント、ガイドラインを保存
  3. Claude やChatGPTに渡して分析と統合を依頼
  4. リサーチをデザイン判断に素早く変換する

優れたデザインは単にクリエイティブなだけでなく、情報に基づいている。Saveはあなたのリサーチがすべての判断に反映されるようにする。


ご質問やフィードバックは[email protected]まで

## Continue reading

Jean-Sébastien Wallez

Written by

Jean-Sébastien Wallez

I've been making internet products for 10+ years. Built Save on weekends because I wanted my own reading library in clean markdown for Claude and Obsidian. Write here about web clipping, AI workflows, and the small things that make a personal knowledge base actually useful.

## try save

よりスマートに保存しませんか?

あらゆるウェブページをワンクリックでMarkdownに変換。

Chromeに追加 🐿️