フローティングラベルを使用して、フォームのUI/UXを最小限に抑えて効果的にする

フローティングラベルとは何か、フォームデザインでどのように使用されているか、UI/UXデザインでますます人気のあるアセットになっている理由をご覧ください。

フローティングラベルとは何ですか？

これはフローティングラベルです：

上の図を見るだけで、フローティングラベルが優れたUIアセットである理由をすぐに理解できる人もいるかもしれませんが、「フローティングラベル」の概念に慣れていない場合は、次のようになります。

• 多くのスペースをとらずに、多くの実用的な情報を伝えます。
• 滑らかなトランジション（「アニメーション」）効果により、フォームがより魅力的になります
• 従来の静的なフォームよりも、ブランドをよりモダンに見せます。主な効果は、恐ろしい青い入力フィールドのアウトラインです。

上の図をもう一度見てください。入力時にラベルになるのは、プレースホルダーテキストを含む単なる入力フィールドではありません。何が起こっているのか：

• 最初に、ユーザーにはフィールドの目的を説明するプレースホルダーテキストが表示されます。
• ユーザーが入力フィールド内をクリックするとすぐに、プレースホルダーテキストが上部に移動し、通常の入力ラベルの役割を果たし、表示されたままになります。
• 同時に、新しいプレースホルダーテキストが古いプレースホルダーの代わりになりますが、現在はヒント （プレースホルダーテキストの最も重要な役割です）ユーザーが入力を開始する前に、ユーザーをさらにガイドします。
• 入力を開始すると、プレースホルダーのヒントテキストは表示されなくなりますが、他の多くの入力フィールドとは異なり、元のプレースホルダーテキスト（現在は入力ラベルになっています）は、気が散ってしまった場合に備えて、引き続きユーザーに表示されます。フィールドの目的を忘れてください（これはあなたが思っているよりも頻繁に起こります）。

ミニマリストデザインのファンなら、フローティングラベルがぴったりです。

有名なことわざにあるように：

完璧とは、追加するものがない場合ではなく、取り除くものがない場合です。

そして、それは一言で言えばほとんどフローティングラベルです。

リソース

• CodePenのフローティングラベルコードの例。
• マテリアルUIフレームワークを使用している場合、ウェブサイトにフローティングラベルを実装するのは簡単です。

方法によっては注意してください フローティングラベルを技術的に実装すると（HTML、CSS、JavaScript）、ブラウザの非互換性の問題が発生する可能性があります。必ずcaniuseをチェックしてください。