SELF-INITIATED DEMO / 自主制作
REFINE — Webサイト改善 Before / After
OVERVIEW
情報はそのままに。伝わる順番を、確かめられる形で変える。
Live Demoを操作する比較用に両方を自主制作しています。Beforeはよくある構成であり、わざと崩した見本ではありません。売上・CVR・速度は測定していないため、改善率は一切表示していません。
- AI
- 使っていません計算と決まった規則だけで動きます。
- 保存先
- 保存しない比較の表示設定はページの中だけにあり、再読み込みで最初の状態に戻ります。
- 外部送信
- なし入力した内容は、このブラウザの外へ送られません。
- SCOPE
- Design + Build + QA
- EST. DELIVERY / 納期目安
- 1〜2営業日〜
- PRICE GUIDE / 参考価格
- 5,000円〜 / 1ページ
01THE PROBLEM
重要情報とCTAが埋もれ、次の操作が分かりにくいこと。
- 想定したクライアント
- スマートフォンで読みにくいサービス紹介ページを持つ会社（架空）
- 想定依頼
- 既存のサービスページが読みにくい。スマートフォンでも使いやすく改善したい。
- 起きていること
- 大事な情報と申し込みボタンが下の方に埋もれ、スマートフォンでは何度もスクロールが必要。
- 困りごと
- どこが悪いのか言葉にできず、見た目だけを変えるリニューアルになりがち。
- 制作コンセプト
- 装飾を足す前に、情報を整える。
想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。
02SIGNATURE JOURNEY
情報は変えずに、伝わる順番だけを変える。違いを自分の目で。
同じ本文・同じリンクのまま順番だけを変え、画面幅・読み順・フォーカス順を実際に表示して比べられるようにしました。
Before で目的を探す
改善前のページで、申し込みまでたどり着く道のりを確かめます。
After で同じことをする
同じ本文・同じリンクのまま、順番だけを変えたページで同じ操作をします。
並べて、順番を重ねる
Before と After を並べ、画面幅を切り替えたり読み順・フォーカス順を重ねたりして、申し込みまでの道のりを比べます。
画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す
情報の優先順位を、見比べる。
- BEFORE情報の強弱がない
- FOCUS見出し・余白・CTAを整理
- AFTER次の行動が分かる
デモでは比較切替・チェック操作を実際に試せます。数値成果や外部テスト結果を示すものではありません。
03KEY INTERACTIONS
触って確かめられる操作
見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。
4つの見方
比較・Before・After・並べて、を切り替え。
画面幅の切り替え
自動・360・768・1200pxで同じページを見比べます。
順番の可視化
読み順とフォーカス順を番号で重ねて表示します。
04BEHIND THE SYSTEM
画面の裏で、何が決まっているか
データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。
データ
- 同じ本文・同じリンクの Before と After
- 比べる条件（画面幅・表示する順番）
- 対象の版と測定の条件の表示
状態の流れ
- Before
- After
- 並べて比較
安全のための決まりごと
- Before はわざと崩した見本にしない（よくある構成にする）
- 測っていない数値（売上・CVR・速度）は表示しない
05RESPONSIVE & ACCESSIBILITY
ひとつの体験を、どの画面でも。
PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。
- 360pxの画面幅から主要な操作ができること
- キーボードだけで操作でき、フォーカスが見えること
- 入力欄にラベルがあり、エラーの理由が文字で出ること
- 動きを減らす設定（prefers-reduced-motion）を尊重すること
06SCOPE & BOUNDARIES
できること・していないことを、先に書く
自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。
実装済み
このデモで実際に動くこと
- Before / After / 並べての切り替え
- 画面幅の切り替え
- 読み順・フォーカス順の表示
デモ限定
見せ方のために簡略化していること
- Before と After は両方とも自主制作の架空のページ
未接続
公開版では接続していないもの
- アクセス解析
- A/Bテストの配信
本番化に必要なこと
実案件で追加で設計・実装するもの
- 実際のページでの現状の確認（表示崩れ・読み順・操作）
- 改善後の計測方法を、着手前に決める
07DELIVERY & QUOTE
納品物と、見積もりの目安
参考価格 5,000円〜 / 1ページ／納期目安 1〜2営業日〜。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。
もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
Next.js / React / TypeScript / CSS
設計・デザイン・実装・内部QA・ドキュメント整理
1〜2営業日〜
5,000円〜 / 1ページ
- Before / After / 並べて比較
- 360 / 768 / 1200px の画面幅切り替え
- 読み順とフォーカス順の表示
- 対象版と測定条件の明示
- ソースコード・設定ファイル
- 起動・更新手順のREADME
- 画面仕様・検証項目一覧
- PC / Tablet / Mobile表示
- キーボード操作・コントラスト
- リンク・入力・エラー状態
見積もりが変わるところ
- 対象ページの数と、既存のソースを触れるか
- 直す範囲（文言・順番・デザイン・不具合）
- 改善前後の計測を行うか
参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。
検証した内容
- このサイト自体を、公開前に53ページ×8つの画面幅（320〜1920px）で検査し、横はみ出し・文字の重なり0件を確認（2026年9月20日・自主運営サイト）
- このデモを依頼として制作する場合は、実行手順書・サンプルでの確認結果・合意した検収項目が加わります（下の「表示崩れの修正 1か所」）。
確認日 2026-09-21。記載しているのは実際に行った検証だけで、作業時間の削減や売上の変化は測定していません。
08CONTEXTUAL CONTACT
このデモのような制作を相談する
近いと感じた機能に印をつけてください。相談フォームに「REFINEを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。
つくりたいものを、
聞かせてください。
まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。
打ち合わせの前に、相談できます。
- 01相談を送信
- 02内容を確認
- 03メールで返信
- 04合意して制作開始
金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。
案件サイトからのご相談は、そのサービス内メッセージでも進められます。