elite-ux-strategy

エリート UX 戦略

コンバージョンにつながらなければ、美しいデザインにも意味はありません。このスキルは、心理学、デザイン、ビジネス戦略を結び付けます。

クイックリファレンス

トピック	リファレンスファイル
心理学と説得	psychology-foundations.md
ファネル戦略	funnel-strategy.md
コピーライティング	copywriting.md
ソーシャルプルーフと信頼	social-proof-trust.md
料金ページ	references/pricing-pages.md
フォームと CTA	forms-ctas.md
テストとベンチマーク	testing-benchmarks.md
モバイルコンバージョン	mobile-conversion.md
倫理的な境界	ethical-boundaries.md
最新のパターン	modern-patterns.md
ナビゲーションパターン	navigation-patterns.md
フォームとフィードバック	forms-feedback.md

---

コンバージョン優先の理念

優先順位

1. CLARITY    → Can users understand what you offer in 5 seconds?
2. RELEVANCE  → Does it match what brought them here?
3. VALUE      → Is the benefit clear and compelling?
4. FRICTION   → What's stopping them from acting?
5. URGENCY    → Why should they act now?

美しさとコンバージョンが相反する場合

状況	判断
美しいアニメーションで CTA の表示が遅れる	アニメーションを減らす、または削除する
ミニマルなデザインで信頼のシグナルが見えにくい	信頼のシグナルを戦略的に追加する
独創的なレイアウトで内容を追いにくい	実績のあるパターンを使う
大胆なデザインの選択にリスクを感じる	A/B テストを実施する
「すっきりさせる」ためにコンバージョン要素を減らす	削除する場合と残す場合をテストする

基本ルール： 迷ったときは、独創性よりも明瞭さを優先してください。

---

コンバージョンファネル（AIDA+RR）

┌─────────────────────────────────────────────────────────────┐
│  AWARENESS   │ First impression, hero, headline             │
│              │ Goal: Stop the scroll, communicate value     │
├─────────────────────────────────────────────────────────────┤
│  INTEREST    │ Features, benefits, how it works             │
│              │ Goal: Build curiosity, answer "what?"        │
├─────────────────────────────────────────────────────────────┤
│  DESIRE      │ Social proof, case studies, emotional appeal │
│              │ Goal: Create want, answer "why me?"          │
├─────────────────────────────────────────────────────────────┤
│  ACTION      │ CTA, pricing, signup form                    │
│              │ Goal: Remove friction, make it easy          │
├─────────────────────────────────────────────────────────────┤
│  RETENTION   │ Onboarding, engagement, value delivery       │
│              │ Goal: Create habit, deliver promised value   │
├─────────────────────────────────────────────────────────────┤
│  REFERRAL    │ Share mechanics, referral program            │
│              │ Goal: Turn users into advocates              │
└─────────────────────────────────────────────────────────────┘

各段階に特化したパターンについては、funnel-strategy.mdを参照してください。

---

購買者ペルソナのクイックリファレンス

意思決定スタイル別

タイプ	特徴	デザインのアプローチ
分析型	データを求め、選択肢を比較し、決定に時間をかける	機能比較表、仕様、指標を含む事例研究
感情型	感覚で決定し、ストーリーに影響を受ける	お客様の声、画像、変化のストーリー
衝動型	すばやく決定し、緊急性に反応する	明確な CTA、期間限定オファー、ソーシャルプルーフ
慎重型	プロセスを重視し、すべての情報を必要とする	よくある質問、詳細なドキュメント、ガイド付きツアー

コンテキスト別

コンテキスト	購買行動	戦略
B2B	複数の関係者が関与し、検討期間が長い	ROI を重視し、導入事例、デモ、セキュリティの信頼性を提示する
B2C	個人で決定し、感情的な要素が影響する	機能よりもメリットを訴求し、ライフスタイル画像やレビューを活用する
高額商品	慎重に検討して購入し、リスクを避ける	信頼の証拠、保証、人による対応（電話／チャット）を提供する
低額商品	衝動買いしやすく、価格に敏感	緊急性や社会的証明を示し、購入手続きをスムーズにする
大企業	委員会で決定し、コンプライアンス要件がある	カスタムソリューション、SLA、専任サポートを提供する
中小企業	スピードが重要で、予算を重視する	すぐに得られる価値、明確な価格設定、セルフサービスを提供する

---

主なベンチマーク（2024-2026）

指標	低い	平均	良好	非常に良好
ランディングページのコンバージョン率	< 2%	2-5%	6-10%	15%+
メールアドレス獲得率	< 1%	1-2%	2-5%	5%+
カート放棄率	> 80%	70-80%	60-70%	< 60%
無料トライアルから有料への移行率（SaaS）	< 5%	5-10%	10-20%	25%+
モバイルとデスクトップの差	> 2.5x	2-2.5x	1.5-2x	< 1.5x

---

他の Elite スキルとの連携

あらゆるデザイン上の判断がコンバージョンに影響します。他のスキルがビジネス成果に与える影響は次のとおりです。

elite-gsap（アニメーション）

パターン	コンバージョンへの影響
ScrollTrigger による表示	段階的な情報提示で注目を維持 → 直帰率の低下
SplitText の見出し	注意を引きつける → エンゲージメントの向上
Flip によるフィルタリング	スムーズな商品閲覧 → 平均注文額の増加
ローディングアニメーション	体感速度の向上 → 離脱率の低下

警告： 過剰なアニメーションは CTA の表示を遅らせ、ユーザーをいら立たせます。目的を持って使用してください。

elite-layouts（構造）

パターン	コンバージョンへの影響
Bento グリッド	特徴を一覧しやすくする → 理解の迅速化
水平スクロール	没入感のあるストーリーテリング → 感情的なつながり
スティッキーセクション	CTA を常に表示 → クリック率の向上
コンテナークエリ	一貫したユーザー体験 → モバイルのコンバージョン向上

elite-performance（速度）

1秒ごとに差が出ます：

• 1秒の遅延 = コンバージョンが7%低下
• 読み込みに3秒かかる = モバイルの直帰率が53%
• LCP > 2.5s = 検索順位に大きな悪影響

速度はコンバージョンを左右する要素です。

elite-accessibility

取り組み	コンバージョンへの影響
WCAG 準拠	アプローチ可能なユーザー層の拡大
明確なフォーカス状態	キーボードユーザーもコンバージョンできる
アクセシブルなフォーム	エラーの減少、完了数の増加
信頼性の提示	プロフェッショナルな印象を与える

---

すばやく判断するためのフレームワーク

この要素を追加すべきですか？

1. Does it reduce friction? → Add it
2. Does it build trust? → Add it (strategically placed)
3. Does it distract from the CTA? → Remove or de-emphasize
4. Does it answer an objection? → Add it near the decision point
5. Does it look good but serve no purpose? → Remove it

この変更をテストすべきですか？

HIGH IMPACT (test first):
- Headlines and value props
- CTA copy and placement
- Pricing presentation
- Form fields (removing any)
- Social proof placement

LOW IMPACT (implement without test):
- Minor copy tweaks
- Color variations (usually)
- Icon changes
- Spacing adjustments

---

よくあるコンバージョン阻害要因

ファーストビュー

• 価値提案が不明確
• CTA が見当たらない
• メイン画像／動画の読み込みが遅い
• ありきたりなストックフォト
• 専門用語の多い見出し

ページ全体

• 社会的証明がない
• 信頼性を示す要素がない（特に決済付近）
• 選択肢が多すぎる（選択のパラドックス）
• フォーム入力の負担が大きい（不要な項目）
• 緊急性や今すぐ行動する理由がない
• モバイルでの使い勝手が大幅に劣る

心理面

• 異論に対応していない
• 特徴の説明に埋もれて、メリットが伝わらない
• リスクを軽減する施策がない（保証、無料トライアル）
• 早い段階で多くを求めすぎている
• ユーザーの認知段階を考慮していない

---

プロジェクトタイプ別クイックスタート

SaaS ランディングページ

Priority order:
1. Clear value prop in headline
2. Social proof (logos, testimonials)
3. Feature/benefit section
4. Pricing with recommended tier
5. FAQ addressing objections
6. Final CTA with guarantee

E コマース商品ページ

Priority order:
1. High-quality product images
2. Clear price and availability
3. Reviews and ratings
4. Add to cart (prominent, sticky on mobile)
5. Trust signals (shipping, returns, security)
6. Cross-sells/upsells (post add-to-cart)
7. Scarcity badges for real inventory status
→ See mobile-conversion.md: Sticky Add-to-Cart
→ See social-proof-trust.md: Scarcity Badges

リード獲得

Priority order:
1. Compelling offer (what they get)
2. Minimal form (name + email minimum)
3. Social proof (number of subscribers, testimonials)
4. Clear privacy assurance
5. Expectation setting (what happens next)

Advanced: Quiz-based lead gen (40-60% completion rates)
→ See forms-ctas.md: Quiz-Based Lead Generation

サービス業（法律、医療、職人）

Priority order:
1. Trust signals (credentials, trust strips)
2. Clear service descriptions
3. Mobile bottom bar CTA (call + book)
4. Social proof (testimonials, reviews)
5. FAQ addressing common concerns
→ See mobile-conversion.md: Mobile Bottom Bar CTA
→ See social-proof-trust.md: Trust Strips and Credential Logos

エンタープライズ／B2B

Priority order:
1. Credibility (client logos, case studies)
2. Clear problem/solution framing
3. Demo/consultation CTA (not "Buy Now")
4. Security and compliance signals
5. Multiple contact options
6. Detailed documentation accessible

---

コンバージョンの80対20の法則

最大の効果を得るために、まずは以下に注力してください。

1. 見出しの明確さ - 5秒テスト：初めて見る人にも価値が伝わりますか？
2. CTA の視認性 - 次に何をすべきかが明確ですか？
3. ソーシャルプルーフの配置 - ページの最下部だけでなく、意思決定のポイントの近くに配置します
4. モバイルでの使いやすさ - トラフィックの大半がどこから来るかを意識します
5. ページの読み込み速度 - 3秒未満で読み込まれるようにします
6. 信頼性を示す要素 - 特に決済／登録の近くに配置します

---

リソース

• psychology-foundations.md - 意思決定の背後にある科学
• funnel-strategy.md - 段階ごとの最適化
• copywriting.md - コンバージョンにつながる言葉
• testing-benchmarks.md - テストすべき項目と「良好」の基準
• ethical-boundaries.md - 説得と操作の違い