Spindleブランド原則スタイルコンポーネントSpindleについて更新情報コンポーネントステータスボタンチェックボックスリストモーダルテキストフィールドテキストフィールドTextFieldユーザーが自発的に文字を入力できるコンポーネントです。Storybook原則ユーザーが、自身で入力できる箇所であることがひと目で分かるデザインであること。ユーザーが、そこに何をどのように入力すべきかが明瞭に記載されていること。ユーザーの誤った入力に対して過不足無く指摘すること。ユーザーの入力状況を、明瞭に伝えること。ラベルユーザーが何を入力すればよいのかを、簡潔に明示したエリアです。必須ラベル入力が必須な項目に対して必要なラベルです。入力エリアユーザーがテキストを入力するエリアです。プレースホルダーユーザーが入力を開始すると消える、デフォルトの仮入力状態のテキストです。ユーザーの入力フォーマットを暗示するためのヒントとして使用します。プレースホルダーテキストを見出しや入力規則を書くことは推奨されません。入力内容に制限がある場合は、ここに記載します。文字数に制限がある場合は、入力可能な残り文字数をカウントします。入力にあたっての注意事項など、クリティカルなエラーには繋がらないが、ユーザーに周知したい内容を記載します。トレーリングアイコン入力エリアに作用する動作や、入力エリアに映し出されている情報を、簡易的に表すことのできるアイコンです。エラーテキストユーザーにエラーの状態を伝えるテキストです。ユーザーがエラーを見逃さないようにしてください。表示チェックボックス主にパスワードの入力フォームで使用するチェックボックスです。チェックを入れるとパスワードが表示されるようになります。基本オートコンプリートテキストエリアパターン入力される内容やValidationのパターンに対応するため、TextFieldにはいくつかの型が用意されています。基本AmebaにおけるTextFieldの基準となる型です。必須ユーザーの入力が必須な時に使用するTextFIeldです。非表示(パスワード等)パスワード等、セキリュティの観点からデフォルトで非表示状態になっているTextFieldです。ユーザーの誤入力を未然に防ぐため、パスワードのマスキングを任意で解除できるチェックボックスを用意してください。リアルタイム判定ユーザーが入力中のテキストに対して、確定ボタンを押す前に、その入力内容が使用可能か否かをリアルタイムで判定するサインです。アメーバIDのように重複不可能なものなど、サービスの使用上エラーを誘発しやすい物に対して使用します。テキストエリアプロフィールなどの自由記述が可能な項目に使用するテキストエリアです。ユーザーが文字数をカウントすることが難しいため、標準機能としてテキストカウンターをTextField下部に設けてください。オートコンプリートユーザーが入力した文字列から、それを補完する形で候補を提示するものです。地理情報など、選択肢に限りがあるがその数が多く、一覧から選択するのが難しい時に使用してください。振る舞いTextFieldは、システムの要件によって、どのタイミングでユーザーの入力に対してレスポンスをするかが変わります。制限時間を作らない入力や操作に時間のかかるユーザーもいます。単純に気づかずに見逃してしまうこともあるかもしれません。入力に制限時間を設けないことはもちろん、一時的に表示するようなエラーテキストなどの表示も、時間が経ったからといって隠してはいけません。Guidelines入力時に予測できない変化を起こさない「1文字入力すると自動で次の入力欄にフォーカスが移動してしまう」など、入力時に予測できない変化を起こしてはいけません。全盲の人や特定の認知能力が低下している人は、その変化に気づかず入力エリアを間違えたり、気を取られて操作が困難になってしまったりする可能性があります。Guidelinesエラーの箇所、内容を特定できる入力エラーが機械的に検出できる場合は、エラーとなっている箇所とエラー内容が特的できるように表示します。詳細なエラーを伝えることが難しい場合、ヘルプページへのリンクなどを用意し、エラーが解決できるよう補助します。Guidelines色とコントラスト色だけで説明しない色だけで情報や状態を表現すると、ユーザーや環境によっては状態の違いがわからなくなってしまいます。色以外の、テキストやborder、weightの太さで変化をつけるようにしましょう。例:「赤文字は必須項目です」表記、エラーのある入力エリアを赤いborderで表現する。Guidelinesテキスト色、アイコン色と背景色のコントラスト比を高くするテキスト、アイコンの視認性を高めるため、背景色に対してそれぞれ下記のコントラスト比を担保しましょう。Colorの組み合わせを適切に利用することで、コントラスト比が十分に担保されます。Guidelinesライティング入力エリアに見出しか説明をつけるユーザーが何を入力すれば良いのかを、見出しか説明文で明らかにしてください。実装で入力エリアと紐づけておくことで、支援技術を使って閲覧しているユーザーにも関係性がわかるようになります。プレースホルダーはあくまで入力例を補足的に示すために用い、見出しの代わりとして使ってはいけません。入力中に内容がわからなくなったり、視認性が極端に低いため支援技術で認識できないことがあったりするためです。Guidelinesレイアウトテキスト・アイコンが拡大縮小できるテキストやアイコンサイズは、200%まで拡大できるようにします。ロービジョンのユーザーは、小さなテキストを読むことが困難です。そのため、テキストサイズを大きく設定していたり、一時的に画面をズームして表示したりすることがあります。拡大縮小した際に、見出しやエラーテキストなどの要素が見切れて表示され、読めないことのないように設計しましょう。拡大してもアイコンだけが小さいままだと、アイコンを見逃してしまうかもしれません。一部のOSでは入力エリアのフォントサイズが16px相当以下の場合に、入力時にズームして表示することがあります。支援技術で操作ができるプラットフォームごとに標準の要素でボタンを実装します。標準的な実装であれば、キーボードやスクリーンリーダーなどの支援技術でも操作できます。Talkbackなど)で動作を確認しましょう。入力できない(disabledな)入力エリアが、キー操作・支援技術でも操作できなくなることを確認しましょう。Guidelinesアイコンには代替テキストを設定するトレーリングアイコンなどのアイコンにテキストラベルがないと、支援技術にはステータスがわからなくなってしまうことがあります。アイコンだけの表示には、代替テキストを設定しましょう。GuidelinesSpindleはAmebaを作るすべての人が「Amebaらしさ」をつくるための約束ごとや、それを手助けするツールやガイドラインが揃ったデザインシステムです。