ダッシュボード

用途

チュートリアル UI デザイン9選 — コピペOKのツアー部品

チュートリアル ui デザインは、登録したばかりの人に「次にどこを押せばいいか」を画面上で直接指し示す部品です。チェックリスト・スポットライト・ステップ式ツールチップなど、形はだいたい決まっているので、選んで貼るだけで済みます。実際に動かし

読む

円形プログレスバー css とは、棒の代わりに円に沿って値の分だけ埋めていく進捗表示で、SVGの円ひとつに stroke-dasharray と stroke-dashoffset の二つを与えるだけで作れます。九つとも、ボタンやスライダー

ステータスバッジ ui は、オンライン・優先度・認証といった状態を小さな点やラベル一つで伝える部品です。動きを加えるとそのまま使えるほど目を引きます。ステータスバッジ ui のアイデアを9つ集めました。

アコーディオンリストとは、行をクリックするとその場で高さがなめらかに伸びて詳細内容が開くUIで、別ページに移動せずリスト画面の中で情報を増やしたいときに使います。タップすると行がふわっと開くあの感じを、実際に動くコードとして九つ用意しました

ダッシュボードコンポーネントとは、完成した管理画面をまるごと組み込む代わりに、ヘッダーやフィード、カレンダーのように画面の一部品だけをそのまま自分のプロジェクトに移せるUI部品です。画面ごとではなくこの部品だけで、九つのうち一つは Ctr

ローディング画面デザインとは、サービスが開く最初の瞬間に「今準備しています」と伝える待ち画面のことです。デフォルトのスピナーでも動きますが、パステルのリングや満ちていく水のような画面にすると、同じ待ち時間が意図のあるものに見えます。コピ

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

管理画面をまるごと使うのではなく、この部品だけを自分のプロジェクトにそのまま貼りたい人のために、単体で動くダッシュボードウィジェットを9個集めました。ドーナツチャートは実際に数字が数え上がります。

ChatGPTやClaudeのようなAIチャットに質問を送ると、返事が来るまでの数秒間、小さな点が順番に光ったり、画面の文字がふわっと浮かび上がったりする瞬間を見たことはないでしょうか。この記事はその「考え中」の合図を作るローディングアニ

Reactで作った画面に動きを付けたいとき最初に思い浮かぶのはreact アニメーションライブラリの導入ですが、コンポーネントが現れたり消えたりするタイミングさえ押さえれば一行でコピペOKなCSSだけで済むことも多いです。この記事はそんな