値を自動入力できます。これはモバイルで特に重要であり、フォームの放棄率が高いことを避けるために不可欠です。オートコンプリートには、ユーザー補助機能のさまざまなメリットもあります。フォーム項目に適切なオートコンプリート値を使用できる場合は、その値を使用する必要があります。ドキュメントには、値の完全なリストと正しい使用方法の説明が記載されています。属性に固定値を指定することで、ブラウザでフォームに自動入力できるようになります。固定値は、ページの読み込み後やウェブサイトのデプロイ時に変更されません。請求先住所デフォルトでは、請求先住所を配送先住所と同じに設定します。要素を使用)することで、視覚的にわかりやすくします。配送先住所の場合と同様に、請求先住所にも適切なオートコンプリート値を使用します。これにより、ユーザーはデータを複数回入力する必要がなくなります。異なるセクションで同じ名前の入力に対して異なる値がある場合は、オートコンプリート属性に接頭辞を追加します。...>ユーザーが適切なデータを入力できるよう支援するお客様は「何か間違っていた」ことを理由に「それを外す」ことは避けてください。問題が発生したらすぐにユーザーが修正できるようにすることで、ユーザーがフォームに迅速かつ簡単に入力できるようにします。顧客は決済プロセスを通じて、企業に商品やサービスの対価を提供しようとします。企業の役割は、罰するのではなく、顧客を支援することです。許容値を指定できます。要素の値が有効かどうかに応じて、要素の有効性の状態が自動的に設定されます。疑似クラスも、有効な値または無効な値で要素のスタイル設定に使用できます。年の間で入力するよう指定しています。指定された範囲内の数値のみに制限されます。範囲外の数値を入力しようとすると、入力は無効な状態に設定されます。使用して、スペースを許可しながら有効な支払いカード番号を確保しています。型の入力に対しても基本的な検証が行われます。回の入力で複数のカンマ区切りメールアドレスに対する組み込み検証を有効にできます。フォームの送信時に、ブラウザは、問題のある値や必須項目が欠落しているフィールドに自動的にフォーカスを設定します。ブラウザによる基本的な組み込み検証。ユーザーが送信ボタンをクリックしたときにエラーのリストを提供するのではなく、インラインで検証して、ユーザーがデータを入力するときにフィードバックを提供します。フィールドを明確にハイライト表示します。問題のある各フィールドの横に、修正が必要な項目を説明するメッセージをインライン表示します。データに一般的なエラーがないか確認します。場合によっては、フォームの設計を見直します。使用して、より確実な検証を行う必要があります。使用してカスタム検証を追加し、フォーカスと表示のプロンプトを設定します。使用して複雑なリアルタイム検証を行うをご覧ください。クライアントサイド検証とデータ入力の制約がある場合でも、バックエンドでユーザーからのデータの入出力を安全に処理する必要があります。ユーザー入力は悪意のある可能性があるので、信頼しない。リファレンスをご覧ください。フィールドにフォーカスを設定します。疑似クラスを使用して必須フィールドをハイライト表示できます。すべての必須フィールドのラベルにアスタリスクを追加し、フォームの先頭にアスタリスクの意味を説明するメモを追加します。コマースのギャップに注意するユーザーが予算疲れしているとします。残量を使い切るとユーザーは離れていくでしょう。モバイルでは、煩わしさを減らし、集中力を維持する必要があります。多くのサイトでは、モバイルでのトラフィックは多くなりますが、パソコンでのコンバージョン数も多くなります。コマースのギャップとして知られています。エクスペリエンスの低下が原因でもあります。あなたの仕事は、モバイルでのコンバージョンの損失を最小限に抑え、パソコンでのコンバージョン数を最大化することです。エクスペリエンスを改善するには大きなチャンスがあることがわかっています。何よりも、長く見え、複雑で、方向性のないフォームは、ユーザーが見捨てる可能性が高くなります。これは、ユーザーが小さな画面を使用している場合、注意が散漫になっているとき、急いでいるときに特に当てはまります。ショップの場合、フォームの煩わしさを軽減する最も簡単な方法は、「ログインせずに決済」をデフォルトにすることです。購入前にユーザーにアカウントの作成を要求しないでください。購入手続き後にアカウント登録を提示できます。この時点で、アカウントの設定に必要なほとんどのデータはすでに存在するため、アカウントの作成はすばやく簡単に行うことができます。購入手続き後に登録を提示する場合は、ユーザーが行ったばかりの購入が、新しく作成したアカウントにリンクされていることを確認してください。購入手続きの進行状況を表示する進行状況を表示し、次に何をする必要があるかを明確にすることで、購入手続きの複雑さを軽減できます。これをどのように実現しているかを示しています。購入手続きの進行状況を表示する。勢いを維持する必要があります。支払いのステップごとに、ページ見出しとわかりやすいボタンの値を使用して、今すぐ行う必要があることと、次の決済ステップが明確にわかるようにします。フォームのボタンに、次に何が表示されるかがわかるわかりやすい名前を付けます。キーボードの入力キーラベルを設定します。サポートされています。ユーザーが購入手続きの間を簡単に行き来できるようにし、支払いの最後のステップであっても、注文を簡単に調整できるようにします。限定的な概要だけでなく、注文の詳細全体を表示します。ユーザーが支払いページからアイテムの数量を簡単に調整できるようにします。商品のプロモーションなど、見た目が乱雑なものや気を散らすものを削除して、離脱点をできるだけ抑えます。成功を収めている小売業者の多くは、購入手続きからナビゲーションや検索まで削除しています。購入手続きの際に、検索、ナビゲーション、その他の注意散漫を排除。プロセスに集中しましょう。今は、ユーザーに他の行動を起こさせるタイミングではありません。ユーザーが購入を完了するのを妨げることがないようにしてください。リピーターに対しては、必要のないデータを非表示にすることで、購入手続きをさらに簡素化できます。配送先住所を(フォームではなく)書式なしテキストで表示し、ユーザーがリンクを使用して変更できるようにします。ユーザーに表示する必要がないデータを非表示にします。名前と住所を簡単に入力できるようにする必要なデータのみをリクエストする名前と住所のフォームのコーディングを開始する前に、必要なデータを確認してください。必要のないデータはリクエストしないでください。フォームの複雑さを軽減する最も簡単な方法は、不要なフィールドを削除することです。データの費用と法的責任を軽減できます。回で名前を入力できるようにします。つにすることで、フォームの複雑さが軽減され、切り取りと貼り付けが容易になり、自動入力が簡単になります。ユーザーは必要に応じて自分の名前を入力できます。オートコンプリートはほとんどのブラウザで動作しないため、名前の接頭辞またはタイトルにフィールドを追加すると、ほとんどのユーザーにとって、住所フォームの自動入力が機能しなくなります。...>名前の部分を分割する正当な理由がある場合は、適切なオートコンプリート値を使用するようにしてください。honorific-prefixgiven-namenicknameadditional-name-initialadditional-namefamily-namehonorific-suffix国際名を許可する入力内容を検証したり、名前データに使用できる文字を制限したりできます。アルファベットでは可能な限り制限を緩める必要があります。名前が無効だと言われるのは失礼なことです。検証で、ラテン文字のみと一致する正規表現は使用しないでください。アルファベット以外の文字が使用されているユーザーは除外されます。安全にサポートするようにしてください。最新のブラウザで適切にサポートされています。文字一致とラテン文字のみの文字一致の比較。多言語化とローカライズについて詳しくは、下記をご覧ください。ユーザーがいるすべての地域の名前でフォームが機能することを確認してください。日本語の名前の場合は、発音を表す名前のフィールドを用意することを検討してください。サポートのスタッフが電話で顧客の名前を言うことができます。つの国内であっても、住所形式が非常に多様であることに留意してください。「通常の」アドレスであると仮定しないように注意してください。住所フォームを柔軟に活用ユーザーに住所の収まる範囲に収まらない項目に住所を詰め込もうとしないでください。番地と番地を別々の入力にする必要はありません。多くの住所でこの形式が使用されていません。不完全なデータがあるとブラウザの自動入力が機能しなくなる可能性があります。住所フィールドは特に注意が必要です。英国の大都市の住所には郡がありませんが、多くのサイトでは郡名の入力が求められています。行使用すると、さまざまな住所形式に対応できます。...>以下に埋め込まれたデモをリミックス、編集して、この機能を試すことができます。ユーザーにとって問題となる可能性があることがわかっています。住所フォームを設計する際は、この点に留意してください。textarea(以下を参照)を使用するなどの代替手段や、他のオプションを検討する必要があります。アプローチはあらゆる住所形式に適合し、切り取りと貼り付けに適していますが、データ要件には合わない可能性があることに留意してください。フォームのみを使用していた場合、自動入力を行えない可能性があることに留意してください。使用するフォームの例を次に示します。住所フォームの多言語化とローカライズ住所フォームは、ユーザーの所在地に応じて、多言語化とローカライズを考慮することが特に重要です。同じ言語であっても、住所部分の名称は住所の形式によっても異なります。India住所に合わないフォームや、期待した単語が使用されないフォームが表示されると、不快に感じたり、戸惑ったりする可能性があります。地域向けに住所フォームをカスタマイズする必要がある場合もありますが、上記のようにフォームの柔軟性を最大化する手法で十分である場合もあります。住所フォームをローカライズしない場合は、さまざまな住所形式に対応できるよう、重要な優先事項を把握してください。番地や番地を強要するなど、住所の部分を過度に限定することは避けてください。多くの国では郵便番号がありません。地方部の住所には番地や道路名がないこともあります。地域」や「郵便番号」ではなく「郵便番号」のような包括的な名前を使用してください。地域で適切に機能するように適応させることができます。郵便番号による住所の検索を避けることを検討する一部のウェブサイトでは、郵便番号に基づいて住所を検索するサービスがあります。ユースケースによってはこれが理にかなっている場合もありますが、潜在的なデメリットに注意する必要があります。郵便番号に基づく住所の候補は、すべての国で利用できるわけではありません。地域によっては、郵便番号に多数の住所が含まれている可能性があります。郵便番号には複数の住所が含まれている可能性があります。ユーザーが長い住所リストから選択するのは困難です。急いでいる場合やストレスを感じているモバイルの場合は、そのリストから選ぶのは困難です。回のタップまたはクリックで完全な住所を入力できるように、より簡単に、かつミスを犯しにくくなります。入力すると、ワンタップ(ワンクリック)で住所を入力できます。支払いフォームをシンプルにする支払いフォームは、購入手続きにおいて最も重要な部分です。カートが放棄される一般的な原因の一つです。モバイルでは、小さな不具合がユーザーに購入の放棄につながることがあります。あなたの仕事は、ユーザーができるだけ簡単にデータを入力できるようにフォームを設計することです。値(支払いカード番号、カードの名義、有効期限の月と年など)を追加してください。cc-numbercc-namecc-exp-monthcc-exp-yearこれにより、ブラウザは支払いカード情報を安全に保存し、フォームデータを正しく入力することで、ユーザーを支援します。オートコンプリートを使用しない場合、ユーザーが支払いカードの詳細を物理的に記録することや、支払いカードデータをデバイスに安全でない状態で保存してしまう可能性が高くなります。支払いカードタイプのセレクタは追加しないでください。これは常に支払いカード番号から推測される可能性があるためです。支払いカードの日付にカスタム要素を使用しないカスタム要素が適切に設計されていない場合、自動入力が中断されて支払いフローが中断される可能性があります。古いブラウザでは動作しません。その他の支払いカード情報がオートコンプリートからすべて確認可能であっても、カスタム要素に対して自動入力が機能せず、ユーザーが物理的な支払いカードを見つけて有効期限を調べることを余儀なくされる場合は、販売を失う可能性があります。要素を使用し、それに応じてスタイル設定することを検討してください。有効期限を除くすべてのフィールドにオートコンプリートされました。つの入力のみにします。数字を分割せず、これにより、ユーザーによるデータ入力や検証の手間が軽減され、ブラウザでの自動入力が可能になります。銀行コードなどの他の数値データについても同様に検討してください。カード番号に複数の入力を使用しないでください。慎重に検証するデータ入力は、リアルタイムとフォーム送信前の両方で検証する必要があります。属性を追加する方法です。ユーザーが無効な値を指定して支払いフォームを送信しようとすると、ブラウザは警告メッセージを表示し、入力にフォーカスを設定します。桁(またはそれ以上))を処理できる柔軟性が必要です。ユーザーが新しい支払いカード番号の入力時にスペースを含められるようにします。これは、物理的なカードでは番号がこのように表示されるためです。フローが中断される可能性が低くなります。処理前に数字のスペースを簡単に削除できます。パスコードを使用することをおすすめします。テキストからコピーするよう求めたりすると、エラーが発生しやすく、摩擦の原因になります。プラクティスをご覧ください。さまざまなデバイス、プラットフォーム、ブラウザ、バージョンでテストフォーム要素の機能と外観はさまざまであり、ビューポートのサイズの違いによって配置に問題が生じる可能性があるため、ユーザーが最もよく使用するプラットフォームで住所と支払いフォームをテストすることが特に重要です。プロジェクトの無料テストを行えます。ボタンが非表示にならないようにしてください。実装するユーザビリティとパフォーマンスをローカルでテストすることは有用ですが、ユーザーが支払いフォームと住所フォームをどのように使用するかを適切に把握するには、実際のデータが必要です。エクスペリエンスに関するデータです。ファネルとイベントは、ユーザーが購入手続きのフローを放棄した場所と、フォームを操作したときにどのようなアクションを取ったかを示します。ユーザー中心の指標から、購入手続きページの読み込みが遅いかどうかや、遅い場合は原因を把握できます。テストと組み合わせると特に有用です。これにより、割引コードが収益を増やすかどうかや、フォームのレイアウトの変更がコンバージョンを改善するかどうかなどの質問に答えることができます。その結果、取り組みに優先順位を付け、変化を起こし、成功を称える確固たる基盤となります。か国以上の住所形式について、便利なリンクと詳細なガイダンスを提供しています。国のリストには、国コードと国名を複数の言語で複数の形式でダウンロードできるツールがあります。ライセンスにより使用許諾されます。ライセンスにより使用許諾されます。サイトのポリシーをご覧ください。関連会社の登録商標です。