ショッピングカート・ご購入手続き

ステップ 1 ― カート確認

ページタイトル・見出し

ブラウザタブに表示するタイトルは「ショッピングカート｜OIL LIFE」、ページ内の見出し（H2 相当）は「ショッピングカート」とします。

リード文

カート内商品一覧

カートに入っている商品ごとに、以下の情報を 1 行（モバイルでは 1 カード）として表示します。

商品サムネイル画像（72×72px 以上）、商品名（リンクで商品詳細ページに遷移可能）、バリエーション情報（サイズ・容量など該当する場合のみ）、単価（税込表示、例:「¥3,980（税込）」）、数量セレクター（数値入力またはプルダウン。最小 1、最大は在庫上限に連動。変更時にはリアルタイムで小計を再計算）、小計（単価 × 数量。自動算出）、削除ボタン（ラベル:「削除」。タップ時に確認ダイアログ「この商品をカートから削除しますか？」を表示）。

クーポンコード入力

カート一覧の下に、折りたたみ（アコーディオン）形式でクーポン入力欄を設置します。
トグルリンクのラベル: 「クーポンコードをお持ちですか？」
展開後に表示するフォーム要素として、テキスト入力欄（プレースホルダ:「クーポンコードを入力」）と「適用」ボタンを配置します。
適用成功時のメッセージ: 「クーポン「{CODE}」が適用されました。{割引額}円 OFF になります。」
エラー時のメッセージ: 「入力されたクーポンコードは無効か、有効期限が切れています。コードをご確認のうえ、もう一度お試しください。」

合計エリア

合計エリアは、カート一覧の右側（モバイルでは下部に固定）に配置し、以下の項目を縦に並べます。

「小計（税込）」として商品の合計金額を表示します。「送料」の行には、配送先が未確定の段階では「配送先入力後に計算されます」と表示します。クーポン適用済みの場合は「クーポン割引」として「−¥{金額}」を赤字で表示します。最後に「合計（税込）」を太字・大きなフォントサイズで表示します。送料未確定の場合は、合計金額の横に「※送料別」の注記を小さく添えます。

主要アクション（CTA）

• メインボタン: 「ご購入手続きへ進む」（プライマリカラー、フル幅）
• サブリンク: 「お買い物を続ける」（テキストリンク。クリックで直前に閲覧していたカテゴリまたはトップページに遷移）

カートが空の場合

カートに商品がない状態では、商品一覧と合計エリアを非表示にし、代わりに以下のメッセージとボタンを中央に表示します。
見出し: 「カートに商品がありません」
本文: 「気になるアイテムを見つけて、カートに追加してみましょう。」
ボタン: 「商品一覧を見る」（プライマリカラー。商品一覧ページへ遷移）

補足表示（カートページ下部）

カートページ下部には、お客様が安心して購入手続きに進めるよう以下の情報をアイコン付きで横並びに表示します。
「送料: 通常1,200円（税込）、7,980円以上で送料無料。沖縄・離島は別途」、「お届け目安: ご注文から {N} 営業日以内に発送」、「SSL / TLS 暗号化通信で安全にお買い物いただけます」。

ステップ 2 ― 配送先入力

ページタイトル・見出し

ブラウザタブ: 「配送先の入力｜OIL LIFE」
ページ見出し（H2）: 「配送先の入力」

リード文

フォームフィールド一覧

フォームの各フィールドは以下の順序・仕様で配置します。すべての必須フィールドにはラベルの末尾に「*」を付け、フォーム冒頭に「* は必須項目です」と注記します。

• お名前（必須）: 姓と名を 1 つの入力欄で受け付けます。ラベル「お名前（姓名）*」、プレースホルダ「例: 山田 太郎」、autocomplete="name"。フリガナが必要な場合は、直下に「フリガナ（セイメイ）*」フィールドを追加します（プレースホルダ「例: ヤマダ タロウ」、autocomplete="off"）。
• 郵便番号（必須）: ラベル「郵便番号 *」、プレースホルダ「例: 173-0037」、autocomplete="postal-code", inputmode="numeric", pattern="\d{3}-?\d{4}"。入力後にフォーカスアウトまたは 7 桁入力完了時に自動住所補完を実行し、都道府県・市区町村・町名を自動入力します。「住所を検索」ボタンを隣に配置することも可とします。
• 都道府県（必須）: プルダウンセレクト。ラベル「都道府県 *」、autocomplete="address-level1"。郵便番号からの自動補完時はプリセットされます。
• 市区町村（必須）: テキスト入力。ラベル「市区町村 *」、プレースホルダ「例: 板橋区小茂根」、autocomplete="address-level2"。
• 番地・建物名（必須）: テキスト入力。ラベル「番地・建物名・部屋番号 *」、プレースホルダ「例: 1-10-14-102」、autocomplete="address-line1"。
• 電話番号（必須）: ラベル「電話番号 *」、プレースホルダ「例: 090-1234-5678」、autocomplete="tel", inputmode="tel", type="tel"。配送業者からの連絡に使用する旨の補足テキスト「※配送に関するご連絡に使用いたします」を小さく表示します。
• メールアドレス（必須）: ラベル「メールアドレス *」、プレースホルダ「例: you@example.com」、autocomplete="email", type="email"。補足テキスト「※ご注文確認メールをこのアドレスにお送りします」。

配送先を保存（会員ユーザー向け）

ログイン済みのお客様には、登録済み住所をプルダウンから選択できるようにします。新しい住所を入力した場合は「この住所を保存する」チェックボックス（デフォルト OFF）を表示します。

配送日時指定（任意）

配送日時指定のセクションを配送先フォームの下に配置します。
「配送日指定」: カレンダーピッカーまたはプルダウン。最短配送日から 14 日後までの日付を選択可能とします。未指定の場合は最短日で発送します。
「配送時間帯」: プルダウン。選択肢は「指定なし / 午前中 / 12:00〜14:00 / 14:00〜16:00 / 16:00〜18:00 / 18:00〜20:00 / 19:00〜21:00」。

バリデーション

フォーム送信時ではなく、各フィールドのフォーカスアウト時にリアルタイムでバリデーションを行います。エラーメッセージは該当フィールドの直下に赤字で表示します。
代表的なエラーメッセージ例: 「お名前を入力してください」「郵便番号は半角数字7桁（ハイフンあり/なし）でご入力ください」「有効なメールアドレスを入力してください」「電話番号は半角数字でご入力ください」。

主要アクション

• メインボタン: 「お支払い方法の選択へ進む」
• 戻るリンク: 「← カートに戻る」

ステップ 3 ― お支払い方法の選択

ページタイトル・見出し

ブラウザタブ: 「お支払い方法の選択｜OIL LIFE」
ページ見出し（H2）: 「お支払い方法の選択」

リード文

支払い方法のラジオボタン一覧

それぞれの支払い方法をラジオボタンで選択できるようにし、選択すると対応する入力フォームまたは説明テキストがスライドダウンで展開されます。

• クレジットカード決済（デフォルト選択）: 対応ブランドのロゴ（VISA / Mastercard / JCB / American Express / Diners Club）をラベル横にアイコン表示します。選択時にカード情報入力フォーム（後述）が展開されます。
• コンビニ決済: 「ローソン / ファミリーマート / ミニストップ / セイコーマート でお支払いいただけます。ご注文完了後にお支払い用の番号をメールでお知らせします。お支払い期限はご注文日を含めて 3 日以内です。」手数料の記載:「※コンビニ決済手数料: ¥{金額}（税込）」。
• 銀行振込（前払い）: 「ご注文完了後にお振込先口座情報をメールでご案内いたします。ご入金確認後の発送となります。お振込期限はご注文日を含めて 7 日以内です。期限を過ぎた場合はご注文をキャンセルさせていただく場合がございます。」手数料の記載: 「※振込手数料はお客様のご負担となります。」
• 代金引換（代引き）: 「商品お届け時に配送員へ現金でお支払いください。」手数料の記載: 「※代引き手数料: ¥{金額}（税込）」。
• Amazon Pay / PayPay 等の外部決済（導入済みの場合）: 各サービスのロゴを表示し、選択時に外部サービスの認証フローへ遷移する旨を記載します。

クレジットカード情報入力フォーム

クレジットカードが選択されている場合に表示するインラインフォームです。PCI DSS 準拠のため、トークン型の決済代行サービス（Stripe Elements、GMO-PG トークン方式など）の JavaScript SDK を使用し、カード情報を自社サーバーに通過させない設計とします。以下はフォームの UI コピーおよびフィールド仕様です。

• カード番号: ラベル「カード番号 *」、プレースホルダ「0000 0000 0000 0000」、autocomplete="cc-number", inputmode="numeric"。単一のテキストフィールドを使用し、4 桁ごとにスペースを自動挿入する書式設定を行います。フィールド右側にカードブランドアイコンを動的に表示します（最初の数桁で判別: 4→VISA、5→Mastercard、35→JCB、3[47]→Amex、36→Diners）。
• カード名義: ラベル「カード名義（ローマ字）*」、プレースホルダ「TARO YAMADA」、autocomplete="cc-name"。大文字への自動変換を適用します（text-transform: uppercase）。
• 有効期限: ラベル「有効期限 *」。月と年のプルダウンを横並びで配置します。月のプルダウン（autocomplete="cc-exp-month"）には 01〜12 を表示。年のプルダウン（autocomplete="cc-exp-year"）には当年から 10 年後までの西暦を表示します。プレースホルダはそれぞれ「月」「年」。
• セキュリティコード: ラベル「セキュリティコード *」、プレースホルダ「000」、autocomplete="cc-csc", inputmode="numeric", maxlength="4"（Amex は 4 桁、その他は 3 桁）。ラベル横に「？」アイコンを設置し、タップでツールチップ「カード裏面（または Amex の場合は表面）に記載されている 3〜4 桁の番号です」と、カードイラストを表示します。

JavaScript バリデーション仕様

カード番号フィールドについては Luhn アルゴリズムによるチェックディジット検証を行い、不正な番号をリアルタイムで検出します。以下に検証ロジックの疑似コード（JavaScript）を示します。

/**
 * Luhn アルゴリズムによるカード番号バリデーション
 * @param {string} number - スペースやハイフンを除去した数字文字列
 * @returns {boolean}
 */
function isValidCardNumber(number) {
  // 数字以外を除去
  const digits = number.replace(/\D/g, '');

  // 桁数チェック（13〜19 桁）
  if (digits.length < 13 || digits.length > 19) return false;

  let sum = 0;
  let shouldDouble = false;

  // 末尾から先頭へ走査
  for (let i = digits.length - 1; i >= 0; i--) {
    let digit = parseInt(digits[i], 10);

    if (shouldDouble) {
      digit *= 2;
      if (digit > 9) digit -= 9;
    }

    sum += digit;
    shouldDouble = !shouldDouble;
  }

  return sum % 10 === 0;
}

その他のバリデーションルールは以下のとおりです。

• カード名義: 空欄不可。英字・スペース・ハイフン・ピリオドのみ許容（/^[A-Za-z\s.\-']+$/）。空欄時エラー:「カード名義を入力してください」。
• 有効期限: 選択された月/年の組み合わせが現在日以降であることを検証。期限切れの場合のエラー:「有効期限が過去の日付です。カードの有効期限をご確認ください」。
• セキュリティコード: 3〜4 桁の数字のみ許容。桁数不足エラー:「セキュリティコードは 3 桁（American Express は 4 桁）で入力してください」。
• すべてのエラーメッセージは該当フィールドの直下に赤字で表示し、フィールドのボーダーを赤色に変更します。エラーが解消された時点で即座に通常表示に戻します。

セキュリティ安心メッセージ

主要アクション

• メインボタン: 「ご注文内容の確認へ進む」
• 戻るリンク: 「← 配送先の入力に戻る」

ステップ 4 ― ご注文内容の確認（最終確認画面）

ページタイトル・見出し

ブラウザタブ: 「ご注文内容の確認｜OIL LIFE」
ページ見出し（H2）: 「ご注文内容の確認」

リード文

特定商取引法 最終確認画面 ― 法定 6 項目の表示

2022 年 6 月施行の改正特定商取引法（法第 12 条の 6）により、通信販売の最終確認画面には以下の 6 項目を一覧性をもって表示する義務があります。各項目が画面上で見切れたり、小さすぎたり、離れた場所に分散しないよう設計してください。

配送先・お支払い方法の変更リンク

配送先情報ブロックとお支払い方法ブロックの右上に、それぞれ「変更する」テキストリンクを配置します。タップするとステップ 2 またはステップ 3 に遷移し、入力済みデータを保持したまま修正できるようにします。

注文確定ボタン周辺のコピー

注文確定ボタンの直上には、お客様が「これをクリックすると注文が確定する」ことを明確に認識できる文言を配置します。

• メインボタン: 注文を確定する（プライマリカラー、フル幅、太字。ダブルクリック防止のため、1 回目のクリック後は即座にボタンをグレーアウトし「処理中…」と表示）
• ボタンの直下に安心テキスト: 「お客様の情報は暗号化されて安全に送信されます」
• 戻るリンク: 「← お支払い方法の選択に戻る」

EMV 3-D セキュア（本人認証）

クレジットカード決済の場合、注文確定ボタンのクリック後に EMV 3-D セキュア（3Dセキュア 2.0）の認証フローが起動する可能性があります。認証画面はカード発行会社が提供するポップアップまたはインラインフレームとして表示されます。この認証プロセスについて、必要に応じて以下のインフォメーションテキストをボタン付近に表示します。

5 ステップ 5 ― 注文完了（サンクスページ）

ページタイトル・見出し

ブラウザタブ: 「ご注文ありがとうございます｜OIL LIFE」
ページ見出し（H2）: 「ご注文ありがとうございます」

メインメッセージ

画面中央に、チェックマークのアイコン（✓ / 成功を示す緑色の円形アイコン）を表示し、その下に以下のテキストを配置します。

ご注文内容サマリー

最終確認画面と同じフォーマットで、注文内容のサマリーを読み取り専用で表示します。含まれる情報は、ご注文商品一覧（商品名・数量・小計）、お支払い合計（税込）、お支払い方法、お届け先、お届け予定日です。

今後の流れ

お客様が注文完了後に何が起こるかを理解できるよう、次のステップを時系列で案内します。

支払い方法別の追加案内

• コンビニ決済の場合: 「お支払い番号をメールでお知らせしましたので、期限内にお近くのコンビニエンスストアでお支払いをお済ませください。お支払い期限: {YYYY}年{M}月{D}日」
• 銀行振込の場合: 「お振込先口座情報をメールでお知らせしました。期限内にお振込をお願いいたします。ご入金確認後に発送いたします。お振込期限: {YYYY}年{M}月{D}日」

補足リンク

サンクスページ下部には、お客様が次に取りうるアクションへのリンクを配置します。
「注文履歴を見る」（マイページへ。ログインユーザーのみ表示）、「お買い物を続ける」（トップページまたは商品一覧へ）、「ご不明な点はこちら」（お問い合わせページへのリンク）。

コンバージョントラッキング

サンクスページは GA4 等のアクセス解析ツールにおけるコンバージョンの計測ポイントです。ページ読み込み時にデータレイヤーへ購入イベント（purchase）を送信するスクリプトを埋め込みます。含めるパラメータは transaction_id（注文番号）、value（お支払い合計）、currency（"JPY"）、items 配列（各商品の item_name, item_id, price, quantity）です。

フォーム全体の UX ガイドライン

チェックアウトフロー全体を通じて守るべき UX 原則をまとめます。

• フォームフィールドの数は各ステップで最小限に絞り、不要な項目は排除します。モバイルでの入力負担を減らすため、autocomplete 属性を全フィールドに設定し、ブラウザのオートフィル機能を最大限に活用します。
• ゲスト購入をデフォルトとし、アカウント登録を強制しません。アカウント作成は注文完了後にオプションとして提案します（「アカウントを作成すると、次回のご注文がよりスムーズになります。パスワードを設定しますか？」）。
• バリデーションはインライン・リアルタイムで行い、送信後にまとめてエラーを表示するのではなく、フォーカスアウト時に即座にフィードバックします。エラーメッセージは具体的に、何が間違っていてどう修正すればよいかを伝えます（悪い例:「入力エラー」、良い例:「郵便番号は 7 桁の半角数字で入力してください（例: 173-0037）」）。
• プログレスインジケーターは全ステップで画面上部に常時表示し、完了済みステップには完了マーク（✓）を付与します。ユーザーが完了済みステップをタップして前の画面に戻れるようにします。
• チェックアウト中のナビゲーション（サイトヘッダーの全メニュー、検索バー、バナー広告など）は最小限に簡略化し、離脱ポイントを削減します。ヘッダーにはロゴ（トップページへのリンク付き）とプログレスバーのみを表示します。
• 送信ボタンは、クリック後にダブルクリックを防止するため、即座にローディング表示に切り替え、二重注文を防ぎます。

レスポンシブ対応メモ

JSON-LD 構造化データ（補足）

サンクスページには、リッチリザルト対応のために以下の JSON-LD を <head> 内に出力することを推奨します。なお、チェックアウトフロー中のページ（ステップ 1〜4）には "noindex" メタタグを設定し、検索エンジンにインデックスさせないようにします。

Order スキーマ（サンクスページ用）

{
  "@context": "https://schema.org",
  "@type": "Order",
  "orderNumber": "#{ORDER_NUMBER}",
  "orderStatus": "https://schema.org/OrderProcessing",
  "merchant": {
    "@type": "Organization",
    "name": "合同会社フリーワーク",
    "url": "https://oil-life.com"
  },
  "priceCurrency": "JPY",
  "price": "{ORDER_TOTAL}",
  "acceptedOffer": [
    {
      "@type": "Offer",
      "itemOffered": {
        "@type": "Product",
        "name": "{PRODUCT_NAME}"
      },
      "price": "{PRODUCT_PRICE}",
      "priceCurrency": "JPY",
      "eligibleQuantity": {
        "@type": "QuantitativeValue",
        "value": "{QUANTITY}"
      }
    }
  ],
  "billingAddress": {
    "@type": "PostalAddress",
    "addressCountry": "JP"
  },
  "customer": {
    "@type": "Person",
    "name": "{CUSTOMER_NAME}"
  },
  "orderDate": "{ISO_8601_DATE}"
}

WebSite スキーマ（サイト全体・検索ボックス対応）

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "OIL LIFE 公式オンラインストア",
  "url": "https://oil-life.com",
  "publisher": {
    "@type": "Organization",
    "name": "合同会社フリーワーク",
    "address": {
      "@type": "PostalAddress",
      "postalCode": "173-0037",
      "addressRegion": "東京都",
      "addressLocality": "板橋区",
      "streetAddress": "小茂根1-10-14-102",
      "addressCountry": "JP"
    },
    "telephone": "050-1794-4331",
    "contactPoint": {
      "@type": "ContactPoint",
      "contactType": "customer service",
      "url": "https://oil-life.com/contact",
      "availableLanguage": "Japanese"
    }
  }
}

参照リソース

本ドキュメントの作成にあたり、以下の情報源を調査・参照しました。

運営元情報

• 会社名 合同会社フリーワーク
• 代表者 辻ノ隆史
• 所在地 〒173-0037 東京都板橋区小茂根 1-10-14-102
• 電話番号 050-1794-4331
• お問合せ お問い合わせページはこちら

※本ドキュメントは OIL LIFE 公式オンラインストアのカート&チェックアウトフロー実装に使用するためのコピー原稿です。法的助言を構成するものではありません。特定商取引法への対応については弁護士等の専門家にご確認ください。
（最終更新日：2026年2月）