概要

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

アプローチとコンセプト

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

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

構成部品

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

<div class="form-group">
    <label for="test" class="form-label">
        ラベル
        <span class="form-necessity">※必須</span>
    </label>
    <div class="form-support">サポートテキスト</div>
    <input id="test" type="text" class="input">
    <div class="form-error">＊エラーテキスト</div>
</div>

入力フィールド

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

ラベル

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

要否ラベル

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

サポートテキスト

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

エラーテキスト

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

文字数カウンター

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