スタジオキャンペーン






アクセシビリティ対応LP統一フォーマット - ワイヤーフレーム


1. ファーストビュー (FV)
A11Y ✓
メインキャッチコピー
2.25rem (36px) PC / 1.5rem (24px) SP
サブキャッチコピー - 具体的な数値や期間を含む
1.125rem (18px) PC / 1rem (16px) SP
商品画像
1:1 または 4:3
適切なalt属性付与

🎯 アクセシビリティ対応: キーボードフォーカス可能、適切なコントラスト比、十分なタッチターゲットサイズ

5rem (80px) 間隔

2. 問題提起・共感
A11Y ✓

こんなお悩みありませんか？

✓ 悩み1: 具体的な問題点
✓ 悩み2: ターゲットが共感する内容
✓ 悩み3: 解決したい課題
フォントサイズ: 1rem (16px) 統一
✅ 適切なコントラスト
4.5:1以上
❌ 不適切なコントラスト
3:1未満

3. 商品紹介・特徴
A11Y ✓

商品名

商品画像（複数角度・使用シーン）
alt="商品名の詳細な説明" 付与
特徴1

説明文 50-80文字

3rem×3rem タッチターゲット
特徴2
説明文 50-80文字
キーボード操作対応
特徴3
説明文 50-80文字
フォーカス表示対応

4. 効果・メリット
A11Y ✓
Before/After画像（可能であれば）
詳細な代替テキストで変化を説明
• 効果1: 数値データを含む (1rem/16px)
• 効果2: 具体的な変化 (1rem/16px)
• 効果3: 使用期間の目安 (1rem/16px)
• 効果4: 実感できる内容 (1rem/16px)

全て読みやすい文字サイズで統一

5. お客様の声・口コミ
A11Y ✓
顔写真
お客様名 (30代女性)
★★★★★

「レビュー文 50-100文字程度で具体的な体験談を記載（16px以上で読みやすく）」

顔写真
お客様名 (40代女性)
★★★★★

「レビュー文 50-100文字程度で具体的な体験談を記載（アクセシブルなサイズ）」

6. 商品詳細情報
A11Y ✓
商品仕様（表形式・適切な見出し構造）
内容量: ○○ml (1rem/16px)
使用方法: ○○ (1rem/16px)
成分: ○○ (1rem/16px)
その他仕様 (1rem/16px)
通常価格: ¥○○○
特別価格: ¥○○○
○○%OFF!

適切なコントラスト比で表示

7. 限定性・緊急性
A11Y ✓
⏰ 期間限定！○月○日まで
先着○名様限定 - 残りわずか！
(動きを抑制する設定に対応)
カウントダウンタイマー
（スクリーンリーダー対応・音声読み上げ配慮）
aria-live="polite" で時間更新を通知

8. FAQ（よくある質問）
A11Y ✓
♿ アクセシビリティ: アコーディオンは適切なARIAラベル、キーボード操作、フォーカス管理を実装

9. 最終CTA
A11Y ✓

今すぐご注文ください！

購入特典の再確認 (1rem/16px)
送料無料・返品保証など (1rem/16px)
明確で理解しやすい文章構成

-スタジオキャンペーン

Copyright© EBM , 2025 All Rights Reserved.