概要

美しく便利で使いやすいデジタルサービスには、美しいフォームがあります。ユーザーを行う、デジタルサービスにおいて最も重要な部分であり、わかりやすく簡潔なUIを提供するために、各種最適化を行っています。

アプローチとコンセプト

主流のUIコンポーネントやデザインシステムでフォームの実装方法は様々です。私のアプローチは<input>要素に設定したクラスのみで、フォームの状態管理を行う設計になっています。この設計により、モダンなフロントエンドフレームワークやテンプレートシステムと容易に統合可能で、開発効率を高めます。

具体的には、入力フィールド、ラベル、必須表示、サポートテキスト、エラーテキストなどの各要素が連携し、状態に応じたスタイルの切り替えを実現します。これにより、開発者は直感的にフォームの状態を変更でき、開発速度が大幅に向上します。

一つの入力フィールドは次の部品で構成されています。実際に組み合わせた動作は次の通りです。

ラベル ※必須

サポートテキスト

＊エラーテキスト

すべての基準になるフィールドです。このフィールドのclassを変更することで各種状態変化を行うことが可能です。

入力フィールドに入力すべき内容の説明です。

フォームを送信するに際に、その入力フィールドへの入力が必須かを説明するラベルです。

入力フィールドへ入力する値について補助を提供するテキストです。

なにかしらのエラーが発生した際にエラーの内容を表示するテキストです。

textareaで必要な文字数カウンターです。デジタル庁デザインシステムでは定義されていますが、 AsagaoUIでは利用を推奨していません。