チェックアウト画面

配送→支払い→確認の3ステップ。左に住所フォーム／支払い方法の選択カード、右に固定の注文サマリ。狭い画面ではサマリが上部の折りたたみになる。CTA の脇に安心の一言。

ENGLISH

Checkout Flow

約194行画面のかたち / 実用サンプル: アプリ画面の一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

仕様書

向く場面: EC の配送→支払い→確認の 3 段購入手続き
入力中も合計を見せたいチェックアウト
支払い方法で手数料や到着日が変わるとき
避ける場面: 1 画面で済む少項目の申込みフォーム
ステップが 4 つ以上になる複雑な手続き
構成要素: ヘッダー（ステップ表示）
配送先フォーム
支払い方法カード
確認リスト
戻る・主 CTA・安心の一言
注文サマリ（狭幅は折りたたみ）
持っている状態: 通常
ホバー
フォーカス
押下中
無効
エラー
成功
キーボード: Tab で入力欄→支払いのラジオ（←→ で選択）→戻る→主 CTA の順。Enter で次のステップへ進み、焦点は次の見出しへ移る。狭幅ではサマリの開閉を Enter/Space
支援技術: 現在ステップは aria-current=step、済んだ段は隠し文「完了」。未入力は aria-invalid＋role=alert の文言。支払いは radiogroup、完了文は role=status。非表示パネルは hidden
動き: サマリのシェブロンが 200ms で回転するだけ

原則ヤコブの法則・ツァイガルニク効果

デザインの要点

ステップは 3 つまでに絞り、今どこかを太字と塗りで示す。戻るは文字リンクで軽く
主 CTA は 1 つ。脇に「この時点では請求されません」と押した結果を先に言う（規範4）
注文サマリは右に固定して、入力中も合計が見えるようにする。金額の不安が離脱を生む
支払い方法はラジオではなくカードで選ばせ、手数料や到着日の違いをカード内に書く

プロのサイトでの実例

Shopify別サイト ↗ステップ式チェックアウトと右側の注文サマリという配置の代表例

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

コード（コピーして使えます）

<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>配送<span class="co-sr co-step-state"></span></li>
      <li class="co-step" data-step="2"><span class="co-step-num">2</span>支払い<span class="co-sr co-step-state"></span></li>
      <li class="co-step" data-step="3"><span class="co-step-num">3</span>確認<span class="co-sr co-step-state"></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" tabindex="-1">配送先</h1>
        <p class="co-error" id="co-error" role="alert" hidden>未入力の項目があります。赤い枠の欄を埋めてください。</p>
        <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" tabindex="-1">支払い方法</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" tabindex="-1">ご注文内容の確認</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>

チェックアウト画面

プレビュー

仕様書

デザインの要点

プロのサイトでの実例

コード（コピーして使えます）

タグ

同じカテゴリ「実用サンプル: アプリ画面」のほかのパーツ

関連パーツ