【Polaris和訳】Experiences/Admin/Text fields
この記事について
この記事は、Polaris/Experiences/Text fieldsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
テキストフィールド
テキストフィールドは、フィールドのラベル（タイトル）と入力エリアを組み合わせたものです。入力には、入力されたテキスト、URL、日付ピッカーなどがあります。
テキストフィールドは、フォーム内でグループ化したり、UI 内に個別に配置することができます。テキスト・フィールドには、一般的にプレースホルダー・テキストを使用しないでください。テキスト入力エリアの下にヘルプテキストを使用して、ユーザーが許容できる入力をガイドすることができます。
フィールドラベル
フィールドラベルは、テキストフィールドのタイトルの役割を果たします。ラベルは一般的に短く、名詞形式にします。例えば、"Name "などです。
エッジケースです。テキストフィールドがフォームの一部ではなく、ページ上に個別に配置されている場合（コメントフィールドなど）、フィールドのラベルをコールトゥアクションとして記述することができます。例えば、"Leave a comment "のように。これは、周囲に文脈がなく、「Comment」だけでは混乱を招く恐れがあるためです。
プレースホルダーテキスト
一般的に、テキストフィールドでのプレースホルダーテキストの使用は避けてください。次のような、さまざまなアクセシビリティ上の問題を引き起こす可能性があります。
- 色のコントラストが低く、文字が読みづらい
- ブラウザとスクリーンリーダーの間で動作が統一されていない
- ユーザーが入力を開始するとテキストが消えてしまうため、認知機能に障害のある人が混乱する可能性がある
- フィールドサイズの関係で、文脈を追加するためのスペースが限られる
例外:検索フィールドに関するガイドラインをお読みください。
ヘルプテキスト
ヘルプテキストは、フォームフィールドに入力する人に追加のガイダンスや指示を与えるものです。また、情報がどのように使用されるかを明確にするためにも使用されます。
ヘルプテキストを使う:
- テキストフィールドのラベルが、テキスト入力の目的を明確に説明していない場合
- 必要な情報の種類に関するガイダンスや指示を提供するため
- モデル化されたテキスト入力に必要なフォーマットの例を示すために
ベストプラクティス:
- フィールドラベルの繰り返しは避けてください。フィールドラベルがアクションを完了するための十分な情報を提供している場合は、ヘルプテキストを追加する必要はありません。
- 説明文と例文の両方を入れるスペースがない場合は、例文のみを入れてください。
テキスト入力タイプ
テキスト入力には 3 種類あります:
モデル化されたテキスト入力
これは、特定のフォーマットを必要とするフィールドです。タグや日付、一部のトラッキングナンバーなどによく使われます。モデル化されたテキストは高度に構造化されているため、例を示すことが有効です。詳しくはこちら
フリーテキスト入力
短い文字列を入力するフィールドです。SKU、バーコード、タイトルなどによく使われます。追跡番号や割引コードなど、テキストの構造がわかっている場合にのみ、例文を入力してください。詳しくはこちら
複数行のテキスト入力
これは、複数行の textarea 要素として表示されるフィールドで、長い文字列を受け付けるテキスト入力要素でもあります。商品説明、注文コメント、顧客メモなどによく使われます。ユーザーは好きなことを書けるので、例文を用意してもあまり意味がありません。詳しくはこちら
モデル化されたテキスト入力
モデル化されたテキスト入力とは、テキストが特定の方法でフォーマットされることを必要とするテキストフィールド入力です。例えば、タグはカンマで区切らなければならず、日付は YYYY-MM-DD 形式で入力しなければなりません。モデル化されたテキスト入力は特定の構造を必要とするため、ユーザーがどのように情報を入力すべきかを示す例を必ず含めるようにしてください。
- ヘルプテキストには、行動を促す説明と、必要なテキストフォーマットを示す例が含まれています。
- 行動の指示と例の両方を記載するのに十分なスペースがない場合は、例のみを記載してください
- 例を示すには、"Example "の後にコロンを使用する（e.g.の代わりに）。
フリーテキスト入力
フリーテキスト入力では、特定の構造を持たない単一のテキスト文字列を入力します。フィールドラベルを使って、テキストフィールドに何を入力すべきかを明確に示してください。
フリーテキスト入力では、例を示さないでください。テキストは特定のフォーマットに従っていないので、何がフィールドに入っているかを想定すべきではありません。より詳しい説明が必要な場合は、ヘルプテキストを使用してください。
冗長性を避ける
テキストフィールドのラベルにコールトゥアクションが記載されている場合、それをヘルプテキストで繰り返す必要はありません。代わりに、文脈を提供する文章を追加してください。
例えば、フリーテキスト入力がフォームとは別の場所にあり、周囲に文脈がない場合、そのフィールドラベルを行動喚起のためのものにすることができます。
正しい方向を示す
テキストフィールドのラベルで、ユーザーがどこで情報を得られるかが明確でない場合、ヘルプテキストを使ってユーザーを誘導します。
タイトル、名前、説明
自由入力のタイトル、名前、説明にはプレースホルダーテキストを使用せず、ヘルプテキストを使用してください。
コードと追跡番号
コードやトラッキングナンバーには、プレースホルダーテキストを使用せず、ヘルプテキストを使用してください。コードが標準化されたフォーマットに従っている場合は、モデル化されたコンテンツのヘルプテキストと同じフォーマットを使用して例を含めます。標準化されていない場合は、フィールドの内容が異なる可能性があるため、例を省略します。
フィールドのラベルにはわかりやすい名前を選び、できればヘルプテキストでは繰り返さないようにします。代わりに、ユーザーが理解してタスクを素早く完了できるようなコンテキストを提供します。
マルチラインテキスト入力
マルチラインフィールドでは、マーチャントが長いテキストブロックを入力することができます。いくつかの異なるバージョンがあります:
- 書式オプションのないプレーンなテキストエリア要素
- WYSIWYG（What You Sease Is What You Get）メニューのあるフォーマットされたテキストエリア要素
- 長い文字列を受け付けるプレーンテキスト入力要素
- 長い文字列を受け付け、ユーザーが入力すると展開されるプレーンテキスト入力要素
複数行の入力欄には、商品やコレクションの説明、店舗スタッフのみがアクセス可能な注文に関するメモ、顧客がアクセス可能なメモなど、マーチャントが入力したい内容が格納されます。
通常、マルチラインフィールドに何を入力するかはわかりませんので、例文を用意しても役に立ちません。代わりに、そのテキストがどのように使用されるか、誰が閲覧できるかを説明するヘルプテキストを入れてください。
コメントとメモ
コメントやメモには、プレースホルダーテキストを使用せず、ヘルプテキストを使用してください。コメントとメモは、マーチャントが注文や購入者について必要な非構造化情報を追跡するのに役立ちます。
コメントやメモはお客様には見えないものもありますが、見えるものもあります。ヘルプテキストでは、誰がそのノートを見ることができるのかを明確に記述してください。
検索やメールのフィールド
標準的なテキストフィールドでは、プレースホルダーテキストは避けてください。ただし、通常のプレースホルダーテキストやフローティングプレースホルダーテキストは、以下のような場合に使用できます:
- 検索フィールド
- 絞り込み項目
- メール入力欄
プレースホルダテキストは、これらのフィールドタイプに共通する認識しやすいパターンです。プレースホルダーテキストをテキストフィールドボックスの外に移動させると、場違いな感じがして、マーケティングページのビジュアルデザインに悪影響を与える場合があります。
検索、フィルタ、メール入力フィールドにアクセスしやすくするために、フィールドにフォーカスが当たっている間は、プレースホルダーテキストを常にカーソルの上に移動させてください。これにより、ユーザーはフィールドを選択するとすぐにプレースホルダーテキストを読むことができます。
ミニマルなページデザインとプレースホルダー
ヘルプテキストがあると、ページが煩雑になる場合があります。例えば、管理者ログインページのようなミニマルなデザインのページでは、テキストの行を追加することで大きく変化します。
標準的なプレースホルダーテキストと同様に、フィールドが選択されると、プレースホルダーはテキスト入力の上に浮かび上がるようにします。フローティングテキストの小さな文字を読むのは誰にとっても簡単ではありませんので、この方法は控えめに使用してください。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion