読む前に、目的が見えない。
Beforeは写真と説明が先行。何のサービスで、どこへ進めばよいかを探す構成です。
- 画面幅を360pxにする
- 「フォーカス順を表示」をオンにする
- Before と After を切り替え、申し込みまでに通るリンクの数を比べる
ここまでできたら完了：After のほうが、少ない移動で申し込みにたどり着くのを確かめられた。
順番どおりでなくても大丈夫です。自由に触って、困ったら最初に戻せます。
REFINEの操作内容はページの中だけにあり、保存されません。戻すとページを読み込み直します。
REFINE 2.0 / DESIGN CASE STUDY同じ内容。
同じ内容。
伝わり方は、変えられる。
暮らしの整理サービスを、同じ文章と写真で再設計。並べて見る、切り替える、重ねる。伝わり方の違いを確かめてください。
暮らしの整理サポート
整理収納のオンライン相談です。持ちものを減らすことより、戻せる仕組みをつくることを優先します。はじめの一回は、いまの部屋を見ながら現状を整理するところから始めます。
暮らしに、
余白をつくる。
暮らしの整理サポート
暮らしに、
余白をつくる。
整理収納のオンライン相談です。持ちものを減らすことより、戻せる仕組みをつくることを優先します。はじめの一回は、いまの部屋を見ながら現状を整理するところから始めます。
価値と行動を、ひと続きに。
見出し、説明、相談ボタンをまとめ、写真はその背景となる暮らしを伝えます。
雰囲気だけで、終わらせない。
同じ行き先を保ったまま、実DOMの読み順・操作順とタップ領域を下の検証欄で確認できます。
DOMと操作を検証する
表示中の実要素から計測します。44pxは今回の操作目標であり、WCAG全体の合否ではありません。固定幅ではこの検証枠だけを横スクロールできます。
暮らしの整理サポート
暮らしに、
余白をつくる。
整理収納のオンライン相談です。持ちものを減らすことより、戻せる仕組みをつくることを優先します。はじめの一回は、いまの部屋を見ながら現状を整理するところから始めます。
見た目と操作を、一緒に整える。
見出しを先に
Before は画像と説明のあとに見出しが来ます。After は見出しを先に置き、文字の大きさにも強弱をつけました。文章を増やさず、読む順番を明確にしています。
申し込みを理由のとなりに
Before では申し込みが最後、関連リンクよりあとにあります。After は説明のすぐあとに置き、読み終えた場所で操作できるようにしています。
フォーカスの順番
リンクの数も行き先も同じです。順番が変わると、キーボードで申し込みにたどり着くまでに通過するリンクの数が変わります。「フォーカス順を表示」で確かめられます。
対象版と測定条件
- 対象版
- REFINE 2.0 / 2026-09-29 / 自主制作
- 比較したもの
- 同じ会社・本文・写真・リンクを使い、情報の順番、文字の強弱、余白、配置を変えて比較しています。
- 測定したもの
- 読み順・フォーカス順・見出し数・リンクのタップ領域・内部の横はみ出しは、検証欄に表示したDOMから測定しています。
- 測定していないもの
- 売上・CVR・滞在時間・表示速度は測定していません。実測がないため、改善率は一切表示しません。
Before は「よくある構成」であって、わざと壊した見本ではありません。画像を先に置き、申し込みを下に置く作りは実際によくあります。
GREEN ROOMは架空のサービスです。暮らしの写真は既存のAI生成素材を両方に同じ条件で使用しています。実在企業の改修実績ではありません。
ABOUT THIS DEMO
この体験を、あなたのサービスでも。
比較用に両方を自主制作しています。Beforeはよくある構成であり、わざと崩した見本ではありません。売上・CVR・速度は測定していないため、改善率は一切表示していません。
ご相談はWebフォームから。案件サイトのメッセージでも進められます。