grid_viewUI Design Dictionary
search
108 / 108 patterns
grid_view

All Patterns

108 patterns
Logo

Hamburger Menu

ハンバーガーメニュー

三本線アイコンでメニューの開閉を制御する。モバイルで頻出。

MobileResponsive

Tab Bar

タブバー

画面下部に固定配置される主要セクションの切替UI。iOS/Androidの標準パターン。

MobileiOSAndroid

Breadcrumb

パンくずリスト

現在位置までの階層パスを表示し、上位ページへの導線を提供する。

WebHierarchy
Dashboard

Sidebar Navigation

サイドバーナビ

画面左側に常時表示されるナビゲーション。デスクトップ管理画面の定番。

DesktopAdmin

Mega Menu

メガメニュー

ホバーで大きなパネルが展開され、多数のリンクをカテゴリごとに表示する。

WebECLarge Site
...

Pagination

ページネーション

コンテンツを複数ページに分割し、番号付きリンクで移動する。

WebList
1
2
3
4

Infinite Scroll

無限スクロール

スクロール末尾到達時に自動的にコンテンツを追加読み込みする。

MobileSNSFeed
Sticky Header
Content scrolls beneath the fixed header which stays pinned at the top of viewport...

More content here. Keep scrolling to see the header remain fixed.

Even more content below the fold.

Sticky Header

固定ヘッダー

スクロールしても画面上部に固定表示されるヘッダー。

WebMobile
Menu
Dashboard
Analytics
Settings
Help

Drawer

ドロワー

画面端からスライドインするパネル。ナビやフィルターに使用。

MobileResponsive
searchCmd+K
descriptionindex.html
descriptionstyle.css
foldercomponents/
settingsSettings

Command Palette

コマンドパレット

キーボードショートカットで呼び出す検索+コマンド実行UI。パワーユーザー向け。

DesktopProductivity

Segmented Control

セグメンテッドコントロール

2〜5個の排他的選択肢を横並びボタンで切り替える。タブの軽量版。

iOSMobileFilter
Overview content

Tabs

タブ

同一画面内でコンテンツ領域を切り替える水平タブ。

WebDesktopMobile
1
2
3
Info

Stepper / Wizard

ステッパー

複数ステップのプロセスを順番に案内するナビゲーション。

FormECOnboarding

Anchor Navigation

アンカーナビ

ページ内の各セクションへスムーズスクロールで移動するリンク群。

LPWebLong-form

Grid Layout

グリッドレイアウト

コンテンツを均等なグリッドセルに配置する基本レイアウト。

WebBasicResponsive

Masonry Layout

メイソンリー

高さの異なるカードをレンガ積みのように隙間なく並べるレイアウト。

WebImagePinterest

Card Layout

カードレイアウト

情報を独立したカード単位にまとめて並べるパターン。

WebMobileBasic
Left Pane
Right Pane

Split Screen

スプリットスクリーン

画面を左右に2分割し、異なるコンテンツを並べるレイアウト。

LPWebDesktop
Headline
Subtext goes here for the hero section

Hero Section

ヒーローセクション

ページ冒頭の大きなビジュアル+見出し+CTA。第一印象を決定する。

LPWebMarketing

Bento Grid

ベントグリッド

様々なサイズのカードをタイル状に配置するモダンレイアウト。

WebModernDashboard
Header
Nav
Aside
Footer

Holy Grail Layout

ホーリーグレイル

ヘッダー+フッター+3カラムの伝統的Webレイアウト。

WebClassicDesktop
FULL BLEED

Full Bleed

フルブリード

コンテンツを画面幅いっぱいに広げるレイアウト。没入感を演出。

WebLPPhoto
Sticky
Sidebar

Sticky Sidebar

スティッキーサイドバー

メインコンテンツのスクロールに追従するサイドバー。

WebBlogEC

Text Field

テキストフィールド

1行のテキスト入力。ラベル・プレースホルダー・バリデーション状態を持つ。

FormBasic
0/200

Textarea

テキストエリア

複数行のテキスト入力。リサイズ可能。

FormBasic

Select / Dropdown

セレクト

選択肢のリストから1つを選ぶ。クリックでリストが展開する。

FormBasic

Notification Preferences

2 of 3 selected

Checkbox

チェックボックス

複数の選択肢から任意の数を選択できるUI。

FormBasic

Choose a Plan

Radio Button

ラジオボタン

複数の選択肢から1つだけを選択するUI。排他的選択。

FormBasic
notificationsNotifications
dark_modeDark Mode
🔔 Notifications on · ☀️ Light

Toggle Switch

トグルスイッチ

ON/OFFの2状態を切り替えるスイッチUI。即座に設定が反映される。

FormMobileSettings

Price Range

$30 — $80

Min: $30$0 - $150
Max: $80

Slider / Range

スライダー

ドラッグで数値を連続的に選択するUI。

FormFilter
March 2026
Su
Mo
Tu
We
Th
Fr
Sa

Date Picker

デートピッカー

カレンダーUIから日付を選択する。

FormBooking
cloud_upload

Drag & drop files here

or click to browse

PNG, JPG, PDF up to 10MB

File Upload

ファイルアップロード

ファイルを選択またはドラッグ&ドロップでアップロードするUI。

FormWeb
search

Search Bar

検索バー

キーワードを入力してコンテンツを検索するUI。

BasicWebMobile

Autocomplete

オートコンプリート

入力に応じて候補を自動表示し、選択を補助するUI。

FormSearch
TypeScriptReactNext.js

Press Enter or comma to add

Tag Input

タグ入力

タグをチップとして追加・削除できるマルチ入力UI。

FormTag

Enter OTP

We sent a code to your email

OTP Input

OTP入力

ワンタイムパスワードを1文字ずつ個別入力するUI。

FormAuthSecurity

Min 8 chars, uppercase, number, symbol

Password Strength Meter

パスワード強度メーター

パスワード入力時にリアルタイムで強度を表示するUI。

FormSecurity

Pick a Color

#6366f1Indigo

Color Picker

カラーピッカー

色をビジュアルに選択するUI。

FormDesign Tool

Click to edit

editClick any field to edit

Inline Edit

インラインエディット

表示テキストを直接クリックして編集モードに切り替えるUI。

FormAdvanced
1
Account
2
Profile
3
Done

Multi-step Form

マルチステップフォーム

長いフォームをステップに分割し段階的に入力させるUI。

FormUX
Name StatusDate
Alice JohnsonActiveApr 12
Bob SmithPendingApr 10
Carol WhiteInactiveApr 8

Table

テーブル

行と列で構造化されたデータを表示する。ソート・フィルター機能を持つことが多い。

DataAdmin
AJ

Alice Johnson

Sent you a file

2m ago
BS

Bob Smith

Meeting at 3pm?

15m ago
CW

Carol White

Thanks for the update!

1h ago

List View

リストビュー

データを垂直リストで表示するシンプルなパターン。

DataBasicMobile

Explorer

chevron_rightfolder_opensrc
chevron_rightfoldercomponents
chevron_rightfolderpages
descriptionpackage.json

Tree View

ツリービュー

階層的なデータを展開/折りたたみ可能なツリーで表示する。

DataHierarchy
rocket_launch

Deploy complete

2m ago

v2.4.1 deployed to production

merge

PR merged

1h ago

#142 — Add dark mode support

bug_report

Issue created

3h ago

#143 — Fix mobile layout

Timeline

タイムライン

時間軸に沿ってイベントを表示するUI。

DataHistory
TODO2

Design system

Design

API docs

Dev
IN PROGRESS1

Auth flow

Dev
DONE2

Landing page

Design

Setup CI

Ops

Kanban Board

カンバンボード

カードをカラム間でドラッグ移動するタスク管理UI。

TaskProject
payments

Revenue

$1.2M

+12%
people

Users

8,421

+5%
trending_down

Bounce

32.4%

-3%

Stat Card

統計カード

数値指標を大きく目立たせるカード。ダッシュボードの定番。

DashboardData
mail

Click icons to dismiss

ErrorWarningSuccess

Badge

バッジ

アイコンや要素の隅に付く小さな通知マーク。

UI PartNotification

Filter by Tag

2 selected

Tag / Chip

タグ / チップ

カテゴリやステータスを小さなラベルで表現する。

UI PartCategory
K
A
T
M
+3
K

Kim Lee

Product Manager

Online

Avatar

アバター

ユーザーのプロフィール画像やイニシャルを円形で表示する。

UI PartUser
Uploading files...67%
Storage used45 / 100 GB

Progress Bar

プログレスバー

タスクや処理の進捗率を横棒グラフで表示する。

UI PartProgress

Skeleton Screen

スケルトンスクリーン

コンテンツ読み込み中にレイアウトの骨格をプレースホルダーで表示する。

LoadingUX
inbox

No data yet

Create your first item to get started

Empty State

エンプティステート

データがない時のプレースホルダー表示。行動を促すCTAを含む。

UXState
Mon
Tue
Wed
Thu
Fri
Weekly VisitorsAvg 73

Chart / Graph

チャート

データを折れ線・棒・円などのグラフで視覚化する。

DataDashboard

Toast Notifications

Toast / Snackbar

トースト

一時的なメッセージを画面端に表示し自動で消えるUI。

NotificationLightweight

Modal / Dialog

モーダル

背景を暗転させてコンテンツを前面に表示する。ユーザーの注目を強制する。

OverlayCritical
check_circle

Success!

Your changes have been saved.

Alert / Banner

アラート

画面上部などに固定表示される重要な通知メッセージ。

NotificationImportant

Hover for shortcuts

Save
Share
Delete

Tooltip

ツールチップ

ホバーやフォーカス時に補助情報を小さなポップアップで表示する。

HelpMicro-interaction

Click avatar for profile

Popover

ポップオーバー

クリックでトリガーされるリッチなフローティングUI。

OverlayInfo
Default
Small
Large
Loading data...

Loading Spinner

ローディングスピナー

処理中であることを示す回転アニメーション。

LoadingBasic

Confirmation Dialog

確認ダイアログ

破壊的操作の前にユーザーに確認を求めるダイアログ。

SafetyConfirm

Notification Panel

通知パネル

通知一覧をドロップダウンパネルで表示する。

NotificationOverlay
A UI pattern reference dictionary.

Accordion

アコーディオン

見出しクリックで内容の展開/折りたたみを切り替える。

ContentFAQ

Welcome to Studio

Build beautiful interfaces

Carousel / Slider

カルーセル

複数のコンテンツを左右にスワイプ/クリックで切り替える。

ContentImageMobile

Lightbox

ライトボックス

画像をフルスクリーンオーバーレイで拡大表示する。

ImageOverlay

Free

$0/mo

5 projects
1 GB storage
Community support
BEST VALUE

Pro

$12/mo

Unlimited projects
50 GB storage
Priority support

Team

$49/mo

Everything in Pro
500 GB storage
Dedicated support

Pricing Table

料金テーブル

複数プランを横並びで比較表示する。おすすめプランを強調。

MarketingLPSaaS
"

This tool completely changed how we build products. It's incredibly fast and intuitive.

SC

Sarah Chen

CTO at Vercel

Testimonial

テスティモニアル

ユーザーの声・レビュー・推薦文を表示するUI。

MarketingLPTrust
rocket_launch

Get Started Today

Join 10,000+ teams shipping faster

No credit card required · Free 14-day trial

CTA Section

CTAセクション

ユーザーの行動を促す大きなボタンとメッセージのセクション。

MarketingLPConversion

FAQ

You get full access to all Pro features for 14 days, no credit card required. Cancel anytime.

FAQ Section

FAQセクション

よくある質問とその回答をまとめた専用セクション。

SupportLP

Why choose us?

bolt

Lightning Fast

Optimized for speed

lock

Secure

End-to-end encrypted

language

Global CDN

200+ edge nodes

Feature Section

フィーチャーセクション

製品の機能をアイコン+テキストでグリッド表示する。

LPMarketing
FeatureFreeProTeam
Storage1 GB50 GB500 GB
API Accesscancelcheck_circlecheck_circle
Custom Domaincancelcheck_circlecheck_circle
Team Members15Unlimited
Analyticscancelcheck_circlecheck_circle

Comparison Table

比較テーブル

複数のオプションを機能ごとに比較する表。

MarketingDecision

Button

ボタン

クリックでアクションを実行するUI。Primary/Secondary/Ghostなど複数バリエーション。

BasicForm

FAB

フローティングアクションボタン

画面上に浮遊する円形のメインアクションボタン。

MobileMaterial Design
mouse

Right-click here

Context Menu

コンテキストメニュー

右クリックで表示されるアクションメニュー。

DesktopOperation

Action Sheet

アクションシート

画面下部からスライドアップするモバイル向けアクション選択UI。

MobileiOS

Split Button

スプリットボタン

メインアクションとドロップダウンによる追加アクションを組み合わせたボタン。

DesktopAdvanced

Text Format

Alignment

Button Group

ボタングループ

関連するアクションボタンを横並びで結合表示する。

UI PartBasic
description

Project proposal.pdf

2.4 MB

← swipe
description

Design assets.zip

18.7 MB

← swipe
description

Meeting notes.txt

12 KB

← swipe

Swipe Actions

スワイプアクション

リスト項目を左右にスワイプして操作するモバイルパターン。

MobileGesture
arrow_downward
Last updated: Just now
Latest update arrived
System check complete
New messages synced

Pull to Refresh

プルトゥリフレッシュ

画面を下に引いてコンテンツを更新するモバイルジェスチャー。

MobileGesture

Bottom Sheet

ボトムシート

画面下部からスライドアップする半モーダルパネル。

MobileOverlay

Tap a story to view

Stories

ストーリーズ

画面上部の円形アイコン行。タップで全画面コンテンツを表示する。

SNSVideo
Dashboard

Dashboard content

App Bar

アプリバー

アプリ画面上部のタイトルバー。戻るボタン・タイトル・アクションを含む。

MobileNavigation

Click + to expand

Speed Dial

スピードダイヤル

FABをタップすると複数のサブアクションが扇状に展開するUI。

MobileMaterial Design
AJ
Alice
Hey! How's the project going? 👋
Going great! Just finished the UI.
Looks amazing! Can you share it?

Chat UI

チャットUI

メッセージを左右に振り分けるチャット形式のUI。

MessageRealtime
AJ
Alice Johnson2h ago

Great work on this feature! The implementation looks solid.

BS
Bob Smith1h ago

Agreed! The performance improvement is noticeable.

CW
Carol White30m ago

Could we add unit tests for the edge cases?

Comment Thread

コメントスレッド

ネストされたコメントと返信のスレッド表示。

CommunityComment

Just shipped a new feature! 🚀

Click reactions to toggle

Emoji Reactions

リアクション

メッセージやコンテンツに絵文字で反応するUI。

SocialMicro-interaction
AJ

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フィードの投稿カード。アバター・テキスト・画像・アクション行。

SNSFeed

@Mention

メンション

テキスト入力中に@で始まるユーザー候補をサジェストするUI。

SocialInput Assist
search

Search

Use the search bar to find anything in your workspace instantly.
1/3

Walkthrough

ウォークスルー

UIの要素をハイライトし、ステップバイステップで使い方を案内するオーバーレイ。

OnboardingTutorial
rocket_launch

Welcome!

Get started with the fastest design tool.

Welcome Screen

ウェルカム画面

アプリ初回起動時に表示されるスワイプ式のイントロダクション画面。

OnboardingMobile

Setup Checklist

2/4

check
person_addCreate your account
check
editSet up your profile
group_addInvite team members
add_boxCreate your first project

Progress Checklist

プログレスチェックリスト

セットアップの完了度をチェックリストで表示し、次のアクションを促す。

OnboardingGamification
0:54
3:00
fullscreen

Video Player

ビデオプレーヤー

動画再生UI。再生/一時停止・シーク・音量・全画面のコントロールを含む。

MediaVideo

Midnight Dreams

Lofi Hip Hop · 3:33

0:003:33

Audio Player

オーディオプレーヤー

音声再生UI。再生ボタン・波形・プログレスバーを含む。

MediaAudio

Image Gallery

イメージギャラリー

複数画像をグリッドやスライドで表示する。タップで拡大。

ImageMedia
headphones
-20%

Pro Wireless Headphones

(128)
$79$99

Product Card

商品カード

商品画像・名前・価格・レーティングを1枚にまとめたECカード。

ECProduct
shopping_cart

Cart (2)

headphones

Pro Headphones

$79

1
watch

Smart Watch

$249

1
Total$328

Shopping Cart

カート

選択した商品と数量・小計を表示し、決済へ進むUI。

ECCheckout

4.3

128 reviews

5
4
3
2
1

Rate your experience

Rating / Review

レーティング

星やスコアで評価を表示・入力するUI。

ECFeedback

Light Mode

Bright and clear for daytime

Aa
123
!@#

Dark Mode Toggle

ダークモード切替

ライト/ダークテーマをワンクリックで切り替えるUI。

AccessibilitySettings

Drag to reorder

drag_indicatorDesign wireframesunfold_more
drag_indicatorWrite unit testsunfold_more
drag_indicatorReview PR #42unfold_more

Drag & Drop

ドラッグ&ドロップ

要素をドラッグして並べ替えや移動を行うインタラクション。

InteractionAdvanced

Virtual Scroll

10,000 rows
#NameValue
1Row item 13%
2Row item 220%
3Row item 337%
4Row item 454%
5Row item 571%
6Row item 688%
7Row item 75%
8Row item 822%

Virtual Scroll

仮想スクロール

大量データのうち画面に表示される分だけをDOMに描画する最適化パターン。

PerformanceData

Breakpoints

Laptop

min-width: 1024px

Responsive Breakpoints

レスポンシブブレークポイント

画面幅に応じてレイアウトを変化させるパターン。

ResponsiveBasicCSS

Click to interact

Micro-interactions

マイクロインタラクション

ホバー・クリック・遷移時の小さなアニメーションやフィードバック。

AnimationUX

Keyboard Shortcuts

Save· File
+S
Search· Navigation
+K
Undo· Edit
+Z
Redo· Edit
++Z
New File· File
+N
Close· File
+W

Keyboard Shortcuts

キーボードショートカット一覧

利用可能なキーボードショートカットをオーバーレイで一覧表示する。

AccessibilityPower User

Sign In

or

Login Form

ログインフォーム

メール/パスワードでサインインするフォーム。ソーシャルログインボタンを含むことが多い。

AuthForm

Create Account

By signing up you agree to our Terms of Service

Sign Up Form

新規登録フォーム

アカウント作成のためのフォーム。

AuthForm

404

search_off

Page Not Found

The page you're looking for doesn't exist or has been moved.

404 Page

404ページ

ページが見つからない時のエラーページ。

ErrorWeb
error_outline

Something went wrong

Failed to fetch data from server.

Error State

エラー状態

操作失敗時の状態表示。エラー内容と復旧アクションを提示。

ErrorUX
build
settings

Under Maintenance

We're upgrading our systems
to serve you better.

Estimated completion

02hrs
30min
00sec

We'll be back by April 15, 2026 at 6:00 PM UTC

Maintenance Page

メンテナンス画面

システムメンテナンス中に表示されるページ。

SystemWeb
🍪

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対応バナー。

LegalWeb