【UIデザインパーツを考える】テキスト入力フィールド編
暑いですね、2024年。
平日基本的に家で仕事をしているので、土日くらいは歩こうと外に出るのですが、汗ダラダラになります。冷房最高。
さて今回から不定期にUIコンポーネントについて記事を書ければと思います。
各コンポーネントを今後記事として書いていって、マガジンとしてまとめられると良いなと思っています。
手始めに、本記事では一般的なテキスト入力フィールドについてまとめていこうと思います。
とその前に。
会社員時代、いわゆるデザインシステムの参考としてよく見ていたのが以下の3サイト様です。これからUIデザインの勉強をする方は必見かと思います。
入力パーツ
文字サイズ
まずはテキスト入力フィールドの入力パーツについてまとめていこうと思います。
基本的に、入力パーツの囲いに入る文字のサイズは16pxにしています。
iOS端末では、16px未満だと入力パーツをフォーカスしたタイミングでズームされるためです。かなり鬱陶しいというかズームされた後ズームアウトしないので、ユーザーの無駄なアクションが増えます。
ズームされないように技術的に回避は可能なようなのですが、16pxも推奨されるサイズではありますし、エンジニアの手数も増えるのでよっぽどのことがなければ、最初っから16pxでいいんじゃないかなと思っています。
ステータス差分
ステータスの差分については、以下の5種類を基本的には用意するようにしています。
未入力
入力中
入力済み
入力エラー
非活性（＋場合によってはread only）
サイズ
郵便番号や電話番号、セキュリティコードなどほぼほぼ入力内容に差がない、文字数的にも少ないものについては相応のサイズで入力パーツは作るようにしています。もっと言うと項目ごとに変更するのは面倒くさいので一定のサイズを作っていたりします。
SPでは一定のサイズになりがちですが、PCでは項目との関係でサイズを選択しています。
プレースホルダー
正直プレースホルダーはなくても良いんじゃないかなというのが個人的な見解です。
#002のウェブアクセシビリティの記事でも記載した通り、プレースホルダーをラベルとして使わない、（後述しますが）入力に対する例を述べる場合など入力パーツ外で記載するという考え方なので、なくても問題はないものと考えています。
また、プレースホルダー自体色が薄いケースが多いため、視認性の観点からも不要ではないかなと思います。じゃあコントラスト比をクリアするくらい濃度を濃くすればええやんけとなりそうですが、そうすると入力済みと間違えかねないというジレンマ。
この辺はSmartHRさんがとてもわかりやすい記事を出していました。スクリーンリーダーも含めて気を遣っていてすばらです。
入力パーツ周辺要素
ラベル（項目・必須）
まずはラベルです。#002でも述べたようにラベルは入力パーツとセットで取り扱うようにしています。
入力必須な項目がある場合には必須ラベルを横につけます。
補足テキスト
入力の例や入力の仕方を掲載するエリアです。
またウェブアクセシビリティの話になってしまうのですが、ユーザーが入力に入る前に入力規則・制限を伝達するという項目があり、ラベルと入力パーツの間に入れることが多いです。
エラーテキスト
入力エラーに対するテキストを掲載するエリアです。入力（修正）方法の提示などを行います。
注釈テキスト
入力した内容に対する注意事項などを掲載するエリアです。
入力パーツと周辺要素を含めてFigmaのコンポーネントとして組み合わせていきます。
基本的には入力項目に合わせて、True / Falseで切り替えができるようにしています。（会社員時代XDの期間が長くこの辺はまだ勉強中というか効率の良い作り方を模索中です）
レイアウト
次にレイアウトに落とし込んだ時に気をつける点をまとめようと思います。
最近はスマホファーストでデザインする機会が増えたため、基本的に入力パーツ、周辺要素は縦に積んでいくようにしています。
横に積んだ場合、視線がジグザグになることと、項目が長くなった場合意図していない箇所で文字が折れたり、横積みにする分入力パーツのサイズを気にしなくてはいけないなど汎用的にパーツを作ることが難しいためです。
各要素を崩れなく、かつSP/PCの変化も極力少なくすることを考えた結果です。
難点は横に積んだ場合と比較して高さが出ることです。そのため、項目を多く設定するPC版のみの管理画面系の案件などでデザインする際は、横に積んだりもしています。
+αの要素
本記事では一般的に使える入力フィールドのパーツについて考えてみましたが、項目の内容やデザインのポリシーによっては、ここまでで挙げてきた要素に＋してデザインをしていくこともあると思います。例えば入力済みのチェックマークや入力補助のためのダイアログ、テキストエリアの入力文字数カウンターなどがあると思います。
さいごに
いかがでしたでしょうか。
手始めにテキスト入力フィールドの記事を作ってみましたが、今後前段に書いた通り他のパーツについてもまとめていき、プチデザインシステムのようなものが作れると良いなと妄想をしています。
この記事が気に入ったらサポートをしてみませんか？