実用UI

実際に使うUIパーツを状況別9つで

gallery2026-09-119種

ビフォーアフタースライダー UI 9選 — ドラッグで比較

ビフォーアフタースライダーは2枚の写真を重ね、動かせる境界線で前後を並べて見せるUIです。境界線はクリックやドラッグにリアルタイムで反応する必要があるため、CSSだけでは作れずJSが数行必要です。

読む

入力UI2026-09-11

入力欄デザインとは、電話番号やカード番号、数量、タグのように会員登録や購入フォームでよく使うのに、素のHTMLだけでは思うように動かない入力ウィジェットのことです。9個のうち5個(タグ・自動伸長・ドラッグ&ドロップ・再送信タイマー・リアル

選択UI2026-09-11

セグメントコントロールとは、iOSの設定画面でよく見る、いくつかの選択肢から一つを選ぶと背景のピルがその位置までスライドするタブ切り替えボタンです。セグメントコントロールから絵文字リアクション・カラースウォッチまで、名前は知らなくてもアプリ

スワイプ削除とは、リストの行を横に押すと裏に隠れていた削除ボタンが現れる動きのことで、アプリで見たあの操作をウェブでもそのまま使いたい人は多いです。この記事では、そのスワイプ削除を含むリストのインタラクションを9個、実際に動くコードでまとめ

ログイン画面デザインはメールと入力欄・ボタンだけに見えますが、実際にはカードの質感・画面分割・ステップ進行まで9つの小さな判断でできています。9つのうち1つは、画面をぼかすと同時にモーダルを重ねて表示し、セッション切れを伝えます。会員登録

gallery2026-09-119種

CSS フォトギャラリーは、複数の写真をグリッドやウォーターフォール状に並べ、ホバーやクリックに反応させるレイアウト技法です。Pinterestで保存したあのギャラリーのように見えても、実際にコードに落とすとグリッドの数式や画像のクロップ

入力UI2026-09-099種

認証コード入力画面は、6桁の数字を1マスずつ入力させ、桁移動や貼り付け、誤入力の処理までUIとして作り込む部品です。この記事では9つの状況を選び、バニラJSとReactの両方で実装しました。格子に並ぶ9つはiframeの中で最初から動いて