All Patterns
108 patternsHamburger Menu
ハンバーガーメニュー
三本線アイコンでメニューの開閉を制御する。モバイルで頻出。
Tab Bar
タブバー
画面下部に固定配置される主要セクションの切替UI。iOS/Androidの標準パターン。
Breadcrumb
パンくずリスト
現在位置までの階層パスを表示し、上位ページへの導線を提供する。
Sidebar Navigation
サイドバーナビ
画面左側に常時表示されるナビゲーション。デスクトップ管理画面の定番。
Mega Menu
メガメニュー
ホバーで大きなパネルが展開され、多数のリンクをカテゴリごとに表示する。
Pagination
ページネーション
コンテンツを複数ページに分割し、番号付きリンクで移動する。
Infinite Scroll
無限スクロール
スクロール末尾到達時に自動的にコンテンツを追加読み込みする。
More content here. Keep scrolling to see the header remain fixed.
Even more content below the fold.
Sticky Header
固定ヘッダー
スクロールしても画面上部に固定表示されるヘッダー。
Drawer
ドロワー
画面端からスライドインするパネル。ナビやフィルターに使用。
Command Palette
コマンドパレット
キーボードショートカットで呼び出す検索+コマンド実行UI。パワーユーザー向け。
Segmented Control
セグメンテッドコントロール
2〜5個の排他的選択肢を横並びボタンで切り替える。タブの軽量版。
Tabs
タブ
同一画面内でコンテンツ領域を切り替える水平タブ。
Stepper / Wizard
ステッパー
複数ステップのプロセスを順番に案内するナビゲーション。
Anchor Navigation
アンカーナビ
ページ内の各セクションへスムーズスクロールで移動するリンク群。
Grid Layout
グリッドレイアウト
コンテンツを均等なグリッドセルに配置する基本レイアウト。
Masonry Layout
メイソンリー
高さの異なるカードをレンガ積みのように隙間なく並べるレイアウト。
Card Layout
カードレイアウト
情報を独立したカード単位にまとめて並べるパターン。
Split Screen
スプリットスクリーン
画面を左右に2分割し、異なるコンテンツを並べるレイアウト。
Hero Section
ヒーローセクション
ページ冒頭の大きなビジュアル+見出し+CTA。第一印象を決定する。
Bento Grid
ベントグリッド
様々なサイズのカードをタイル状に配置するモダンレイアウト。
Holy Grail Layout
ホーリーグレイル
ヘッダー+フッター+3カラムの伝統的Webレイアウト。
Full Bleed
フルブリード
コンテンツを画面幅いっぱいに広げるレイアウト。没入感を演出。
Sidebar
Sticky Sidebar
スティッキーサイドバー
メインコンテンツのスクロールに追従するサイドバー。
Text Field
テキストフィールド
1行のテキスト入力。ラベル・プレースホルダー・バリデーション状態を持つ。
Textarea
テキストエリア
複数行のテキスト入力。リサイズ可能。
Select / Dropdown
セレクト
選択肢のリストから1つを選ぶ。クリックでリストが展開する。
Notification Preferences
2 of 3 selected
Checkbox
チェックボックス
複数の選択肢から任意の数を選択できるUI。
Choose a Plan
Radio Button
ラジオボタン
複数の選択肢から1つだけを選択するUI。排他的選択。
Toggle Switch
トグルスイッチ
ON/OFFの2状態を切り替えるスイッチUI。即座に設定が反映される。
Price Range
$30 — $80
Slider / Range
スライダー
ドラッグで数値を連続的に選択するUI。
Date Picker
デートピッカー
カレンダーUIから日付を選択する。
Drag & drop files here
or click to browse
PNG, JPG, PDF up to 10MB
File Upload
ファイルアップロード
ファイルを選択またはドラッグ&ドロップでアップロードするUI。
Search Bar
検索バー
キーワードを入力してコンテンツを検索するUI。
Autocomplete
オートコンプリート
入力に応じて候補を自動表示し、選択を補助するUI。
Press Enter or comma to add
Tag Input
タグ入力
タグをチップとして追加・削除できるマルチ入力UI。
Enter OTP
We sent a code to your email
OTP Input
OTP入力
ワンタイムパスワードを1文字ずつ個別入力するUI。
Min 8 chars, uppercase, number, symbol
Password Strength Meter
パスワード強度メーター
パスワード入力時にリアルタイムで強度を表示するUI。
Pick a Color
Color Picker
カラーピッカー
色をビジュアルに選択するUI。
Click to edit
Inline Edit
インラインエディット
表示テキストを直接クリックして編集モードに切り替えるUI。
Multi-step Form
マルチステップフォーム
長いフォームをステップに分割し段階的に入力させるUI。
| Name ↕ | Status | Date ↕ |
|---|---|---|
| Alice Johnson | Active | Apr 12 |
| Bob Smith | Pending | Apr 10 |
| Carol White | Inactive | Apr 8 |
Table
テーブル
行と列で構造化されたデータを表示する。ソート・フィルター機能を持つことが多い。
Alice Johnson
Sent you a file
Bob Smith
Meeting at 3pm?
Carol White
Thanks for the update!
List View
リストビュー
データを垂直リストで表示するシンプルなパターン。
Explorer
Tree View
ツリービュー
階層的なデータを展開/折りたたみ可能なツリーで表示する。
Deploy complete
2m agov2.4.1 deployed to production
PR merged
1h ago#142 — Add dark mode support
Issue created
3h ago#143 — Fix mobile layout
Timeline
タイムライン
時間軸に沿ってイベントを表示するUI。
Design system
DesignAPI docs
DevAuth flow
DevLanding page
DesignSetup CI
OpsKanban Board
カンバンボード
カードをカラム間でドラッグ移動するタスク管理UI。
Revenue
$1.2M
Users
8,421
Bounce
32.4%
Stat Card
統計カード
数値指標を大きく目立たせるカード。ダッシュボードの定番。
Click icons to dismiss
Badge
バッジ
アイコンや要素の隅に付く小さな通知マーク。
Filter by Tag
2 selected
Tag / Chip
タグ / チップ
カテゴリやステータスを小さなラベルで表現する。
Kim Lee
Product Manager
Avatar
アバター
ユーザーのプロフィール画像やイニシャルを円形で表示する。
Progress Bar
プログレスバー
タスクや処理の進捗率を横棒グラフで表示する。
Skeleton Screen
スケルトンスクリーン
コンテンツ読み込み中にレイアウトの骨格をプレースホルダーで表示する。
No data yet
Create your first item to get started
Empty State
エンプティステート
データがない時のプレースホルダー表示。行動を促すCTAを含む。
Chart / Graph
チャート
データを折れ線・棒・円などのグラフで視覚化する。
Toast Notifications
Toast / Snackbar
トースト
一時的なメッセージを画面端に表示し自動で消えるUI。
Modal / Dialog
モーダル
背景を暗転させてコンテンツを前面に表示する。ユーザーの注目を強制する。
Success!
Your changes have been saved.
Alert / Banner
アラート
画面上部などに固定表示される重要な通知メッセージ。
Hover for shortcuts
Tooltip
ツールチップ
ホバーやフォーカス時に補助情報を小さなポップアップで表示する。
Click avatar for profile
Popover
ポップオーバー
クリックでトリガーされるリッチなフローティングUI。
Loading Spinner
ローディングスピナー
処理中であることを示す回転アニメーション。
Confirmation Dialog
確認ダイアログ
破壊的操作の前にユーザーに確認を求めるダイアログ。
Notification Panel
通知パネル
通知一覧をドロップダウンパネルで表示する。
Accordion
アコーディオン
見出しクリックで内容の展開/折りたたみを切り替える。
Welcome to Studio
Build beautiful interfaces
Carousel / Slider
カルーセル
複数のコンテンツを左右にスワイプ/クリックで切り替える。
Lightbox
ライトボックス
画像をフルスクリーンオーバーレイで拡大表示する。
Free
$0/mo
Pro
$12/mo
Team
$49/mo
Pricing Table
料金テーブル
複数プランを横並びで比較表示する。おすすめプランを強調。
This tool completely changed how we build products. It's incredibly fast and intuitive.
Sarah Chen
CTO at Vercel
Testimonial
テスティモニアル
ユーザーの声・レビュー・推薦文を表示するUI。
Get Started Today
Join 10,000+ teams shipping faster
No credit card required · Free 14-day trial
CTA Section
CTAセクション
ユーザーの行動を促す大きなボタンとメッセージのセクション。
FAQ
You get full access to all Pro features for 14 days, no credit card required. Cancel anytime.
FAQ Section
FAQセクション
よくある質問とその回答をまとめた専用セクション。
Why choose us?
Lightning Fast
Optimized for speed
Secure
End-to-end encrypted
Global CDN
200+ edge nodes
Feature Section
フィーチャーセクション
製品の機能をアイコン+テキストでグリッド表示する。
| Feature | Free | Pro | Team |
|---|---|---|---|
| Storage | 1 GB | 50 GB | 500 GB |
| API Access | cancel | check_circle | check_circle |
| Custom Domain | cancel | check_circle | check_circle |
| Team Members | 1 | 5 | Unlimited |
| Analytics | cancel | check_circle | check_circle |
Comparison Table
比較テーブル
複数のオプションを機能ごとに比較する表。
Button
ボタン
クリックでアクションを実行するUI。Primary/Secondary/Ghostなど複数バリエーション。
FAB
フローティングアクションボタン
画面上に浮遊する円形のメインアクションボタン。
Context Menu
コンテキストメニュー
右クリックで表示されるアクションメニュー。
Action Sheet
アクションシート
画面下部からスライドアップするモバイル向けアクション選択UI。
Split Button
スプリットボタン
メインアクションとドロップダウンによる追加アクションを組み合わせたボタン。
Text Format
Alignment
Button Group
ボタングループ
関連するアクションボタンを横並びで結合表示する。
Project proposal.pdf
2.4 MB
Design assets.zip
18.7 MB
Meeting notes.txt
12 KB
Swipe Actions
スワイプアクション
リスト項目を左右にスワイプして操作するモバイルパターン。
Pull to Refresh
プルトゥリフレッシュ
画面を下に引いてコンテンツを更新するモバイルジェスチャー。
Bottom Sheet
ボトムシート
画面下部からスライドアップする半モーダルパネル。
Tap a story to view
Stories
ストーリーズ
画面上部の円形アイコン行。タップで全画面コンテンツを表示する。
Dashboard content
App Bar
アプリバー
アプリ画面上部のタイトルバー。戻るボタン・タイトル・アクションを含む。
Click + to expand
Speed Dial
スピードダイヤル
FABをタップすると複数のサブアクションが扇状に展開するUI。
Chat UI
チャットUI
メッセージを左右に振り分けるチャット形式のUI。
Great work on this feature! The implementation looks solid.
Agreed! The performance improvement is noticeable.
Could we add unit tests for the edge cases?
Comment Thread
コメントスレッド
ネストされたコメントと返信のスレッド表示。
Just shipped a new feature! 🚀
Click reactions to toggle
Emoji Reactions
リアクション
メッセージやコンテンツに絵文字で反応するUI。
Alice Johnson
@alicejohnson · 2h
Just shipped the new design system! 🎉 Took 3 months but it's finally here. Check it out and let me know what you think.
Feed Card
フィードカード
SNSフィードの投稿カード。アバター・テキスト・画像・アクション行。
@Mention
メンション
テキスト入力中に@で始まるユーザー候補をサジェストするUI。
Search
Use the search bar to find anything in your workspace instantly.Walkthrough
ウォークスルー
UIの要素をハイライトし、ステップバイステップで使い方を案内するオーバーレイ。
Welcome!
Get started with the fastest design tool.
Welcome Screen
ウェルカム画面
アプリ初回起動時に表示されるスワイプ式のイントロダクション画面。
Setup Checklist
2/4
Progress Checklist
プログレスチェックリスト
セットアップの完了度をチェックリストで表示し、次のアクションを促す。
Video Player
ビデオプレーヤー
動画再生UI。再生/一時停止・シーク・音量・全画面のコントロールを含む。
Midnight Dreams
Lofi Hip Hop · 3:33
Audio Player
オーディオプレーヤー
音声再生UI。再生ボタン・波形・プログレスバーを含む。
Image Gallery
イメージギャラリー
複数画像をグリッドやスライドで表示する。タップで拡大。
Pro Wireless Headphones
Product Card
商品カード
商品画像・名前・価格・レーティングを1枚にまとめたECカード。
Cart (2)
Pro Headphones
$79
Smart Watch
$249
Shopping Cart
カート
選択した商品と数量・小計を表示し、決済へ進むUI。
4.3
128 reviews
Rate your experience
Rating / Review
レーティング
星やスコアで評価を表示・入力するUI。
Light Mode
Bright and clear for daytime
Dark Mode Toggle
ダークモード切替
ライト/ダークテーマをワンクリックで切り替えるUI。
Drag to reorder
Drag & Drop
ドラッグ&ドロップ
要素をドラッグして並べ替えや移動を行うインタラクション。
Virtual Scroll
10,000 rowsVirtual Scroll
仮想スクロール
大量データのうち画面に表示される分だけをDOMに描画する最適化パターン。
Breakpoints
Laptop
min-width: 1024px
Responsive Breakpoints
レスポンシブブレークポイント
画面幅に応じてレイアウトを変化させるパターン。
Click to interact
Micro-interactions
マイクロインタラクション
ホバー・クリック・遷移時の小さなアニメーションやフィードバック。
Keyboard Shortcuts
Keyboard Shortcuts
キーボードショートカット一覧
利用可能なキーボードショートカットをオーバーレイで一覧表示する。
Sign In
Login Form
ログインフォーム
メール/パスワードでサインインするフォーム。ソーシャルログインボタンを含むことが多い。
Create Account
By signing up you agree to our Terms of Service
Sign Up Form
新規登録フォーム
アカウント作成のためのフォーム。
404
Page Not Found
The page you're looking for doesn't exist or has been moved.
404 Page
404ページ
ページが見つからない時のエラーページ。
Something went wrong
Failed to fetch data from server.
Error State
エラー状態
操作失敗時の状態表示。エラー内容と復旧アクションを提示。
Under Maintenance
We're upgrading our systems
to serve you better.
Estimated completion
We'll be back by April 15, 2026 at 6:00 PM UTC
Maintenance Page
メンテナンス画面
システムメンテナンス中に表示されるページ。
Cookie Notice
This site uses cookies to enhance your browsing experience and analyze traffic. By clicking "Accept", you consent to our use of cookies.
Cookie Banner
クッキーバナー
Cookie利用の同意を求めるGDPR対応バナー。