フォーム
入力や選択の操作に、その場で反応を返すフォームの演出です。フォーカスするとラベルが上に移る入力欄や、切り替わりが目で追えるトグルスイッチを、デモとコードで紹介しています。
フォームのインタラクション（25件）
-
-
利用規約を最後まで読むと、同意のチェックと送信のボタンが順に使えるようになる
-
予約の時間枠が並び、選んだ枠へ印が移り、埋まった枠は選べない形で示される
-
郵便番号を入れると、都道府県・市区町村・町名が順に流れ込んで埋まる
-
表示中の文字を押すとその場で入力欄になり、保存すると元の表示に戻る
-
通知の設定で親のトグルを切ると、子のトグルがまとめて切れて畳まれる
-
日付の入力欄を押すとカレンダーが開き、選んだ日に丸い印が滑って移る
-
検索欄に読みを打つと候補が絞られ、残った行が新しい順番へ滑る
-
入力フォームが 3 つのステップに分かれ、次へで横に滑って進む
-
パスワードの入力に合わせて強度メーターが伸び、色が変わる
-
認証コードの入力欄に数字が 1 つずつせり上がり、そろうと緑に色づく
-
ファイルをドラッグするとアップロード欄の枠が光り、落とすと進捗が満ちる
-
数量の ＋ と － のボタンで、数字が上下に回って変わる
-
やることにチェックすると取り消し線が引かれ、行が下へ移る
-
入力欄に打った語がタグのチップになって並び、× で消える
-
入力欄の文字数カウンターの輪が満ち、上限に近づくと色が変わる
-
セレクトボックスを開くと選択肢が順に降り、選ぶと閉じる
-
ラジオボタンの選んだ印が、前の選択肢から滑って移る
業務画面に組み込む場合は、WEBアプリケーションのページをご覧ください。
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。