チェックアウト画面
配送→支払い→確認の3ステップ。左に住所フォーム／支払い方法の選択カード、右に固定の注文サマリ。狭い画面ではサマリが上部の折りたたみになる。CTA の脇に安心の一言。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- ステップは 3 つまでに絞り、今どこかを太字と塗りで示す。戻るは文字リンクで軽く
- 主 CTA は 1 つ。脇に「この時点では請求されません」と押した結果を先に言う（規範4）
- 注文サマリは右に固定して、入力中も合計が見えるようにする。金額の不安が離脱を生む
- 支払い方法はラジオではなくカードで選ばせ、手数料や到着日の違いをカード内に書く
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="co-app">
<header class="co-head">
<span class="co-brand">ミナト工房</span>
<ol class="co-steps" id="co-steps">
<li class="co-step is-on" data-step="1"><span class="co-step-num">1</span>配送</li>
<li class="co-step" data-step="2"><span class="co-step-num">2</span>支払い</li>
<li class="co-step" data-step="3"><span class="co-step-num">3</span>確認</li>
</ol>
<span class="co-secure">🔒 SSL 暗号化</span>
</header>
<div class="co-body">
<main class="co-main">
<section class="co-panel" data-panel="1">
<h1 class="co-h1">配送先</h1>
<div class="co-grid">
<label class="co-field co-span2"><span class="co-label">氏名</span><input class="co-input" type="text" value="佐々木 悠" autocomplete="off"></label>
<label class="co-field"><span class="co-label">郵便番号</span><input class="co-input" type="text" inputmode="numeric" value="231-0023" autocomplete="off"></label>
<label class="co-field"><span class="co-label">都道府県</span><input class="co-input" type="text" value="神奈川県" autocomplete="off"></label>
<label class="co-field co-span2"><span class="co-label">住所</span><input class="co-input" type="text" value="横浜市中区山下町 12-3 みなとビル 4F" autocomplete="off"></label>
<label class="co-field co-span2"><span class="co-label">電話番号</span><input class="co-input" type="tel" value="045-000-0000" autocomplete="off"><span class="co-help">配送時の連絡にのみ使います</span></label>
</div>
</section>
<section class="co-panel" data-panel="2" hidden>
<h1 class="co-h1">支払い方法</h1>
<div class="co-pay" role="radiogroup" aria-label="支払い方法">
<label class="co-pay-card"><input type="radio" name="co-pay" value="card" checked><span class="co-pay-body"><span class="co-pay-name">クレジットカード</span><span class="co-help">手数料なし・今日発送</span></span></label>
<label class="co-pay-card"><input type="radio" name="co-pay" value="konbini"><span class="co-pay-body"><span class="co-pay-name">コンビニ払い</span><span class="co-help">手数料 ¥220・入金確認後に発送</span></span></label>
<label class="co-pay-card"><input type="radio" name="co-pay" value="bank"><span class="co-pay-body"><span class="co-pay-name">銀行振込</span><span class="co-help">振込手数料はお客さま負担・入金確認後に発送</span></span></label>
</div>
</section>
<section class="co-panel" data-panel="3" hidden>
<h1 class="co-h1">ご注文内容の確認</h1>
<dl class="co-confirm">
<dt>配送先</dt><dd id="co-confirm-addr">神奈川県 横浜市中区山下町 12-3 みなとビル 4F<br>佐々木 悠</dd>
<dt>支払い方法</dt><dd id="co-confirm-pay">クレジットカード</dd>
<dt>お届け予定</dt><dd>4月24日（木）</dd>
</dl>
</section>
<div class="co-actions">
<button type="button" class="co-back" id="co-back" hidden>戻る</button>
<div class="co-cta-wrap">
<button type="button" class="co-cta" id="co-next">支払いへ進む</button>
<span class="co-reassure" id="co-reassure">この時点では請求されません</span>
</div>
</div>
<p class="co-done" id="co-done" role="status" hidden>ご注文ありがとうございます。確認メールをお送りしました。</p>
</main>
<aside class="co-summary" id="co-summary">
<button type="button" class="co-summary-toggle" id="co-summary-toggle" aria-expanded="false" aria-controls="co-summary-body">
<span>注文内容（2点）</span><strong class="co-summary-total">¥8,360</strong>
<svg class="co-chev" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="m5 8 5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</button>
<div class="co-summary-body" id="co-summary-body">
<div class="co-item"><span class="co-item-thumb" style="background:linear-gradient(135deg,#b45309,#f59e0b)"></span><span class="co-item-text"><span class="co-item-name">木製カッティングボード L</span><span class="co-help">× 1</span></span><span class="co-item-price">¥5,800</span></div>
<div class="co-item"><span class="co-item-thumb" style="background:linear-gradient(135deg,#0f766e,#5eead4)"></span><span class="co-item-text"><span class="co-item-name">蜜蝋ワックス 100g</span><span class="co-help">× 2</span></span><span class="co-item-price">¥1,900</span></div>
<dl class="co-totals">
<dt>小計</dt><dd>¥7,700</dd>
<dt>送料</dt><dd>¥660</dd>
<dt class="co-total-label">合計（税込）</dt><dd class="co-total-val">¥8,360</dd>
</dl>
</div>
</aside>
</div>
</div>