KOKU
COMPANY
BUSINESS
RECRUIT
APP
NEWS
CONTACT
BLOG
AIに相談する
お問い合わせ
資料請求
COMPANY
→
BUSINESS
→
RECRUIT
→
APP
→
NEWS
→
CONTACT
→
BLOG
→
AIに相談する
お問い合わせ
資料請求
KO
K
U
Inc.
dashboard
UI Design Dictionary
menu_book
KOKUのHP制作実績
search
/
108 / 108 patterns
JA
EN
Home
Works
CONTACT
JA
EN
KOKU Home
制作実績
Philosophy
CONTACT
explore
Navigation
14
grid_view
Layout
9
edit_note
Forms & Input
17
bar_chart
Data Display
13
chat_bubble_outline
Feedback
8
article
Content
9
touch_app
Actions
8
smartphone
Mobile
4
forum
Social & Communication
5
school
Onboarding & Guidance
3
play_circle_outline
Media
3
shopping_cart
Commerce
3
settings
Advanced Patterns
6
lock_outline
Authentication
2
error_outline
Error & System
4
explore
Navigation
14 patterns
Logo
Hamburger Menu
ハンバーガーメニュー
三本線のアイコンにナビゲーションを畳み込み、タップで展開するメニュー。画面幅の狭いモバイルで領域を節約できる定番手法。
Mobile
Responsive
home
Home
search
Search
notifications
Alerts
settings
Settings
Tab Bar
タブバー
画面下部に主要な行き先アイコンを横並びで固定するナビゲーション。片手でも押しやすく、アプリの中心的な導線になる。
Mobile
iOS
Android
Home
/
Category
/
Current Page
Breadcrumb
パンくずリスト
サイトの階層構造を「Home / Category / 現在地」の形で示す道しるべ。今どこにいるかを伝え、上位階層へ一発で戻れる。
Web
Hierarchy
Sidebar Navigation
サイドバーナビ
画面の左端に縦並びでメニューを配置するナビゲーション。項目が多くても一覧でき、管理画面やダッシュボードで定番。
Desktop
Admin
Products
Services
About
Category A
Item 1
Item 2
Category B
Item 3
Item 4
Category C
Item 5
Item 6
Mega Menu
メガメニュー
ヘッダーのメニューにホバー／クリックすると、多数のリンクをカテゴリ別に並べた大きなパネルが開くナビゲーション。大規模サイト向き。
Web
EC
Large Site
chevron_left
1
2
3
...
24
chevron_right
Pagination
ページネーション
長いリストを複数ページに分割し、番号や前後ボタンで移動する仕組み。総量が把握でき、狙ったページへ直接飛べる。
Web
List
Loading...
Infinite Scroll
無限スクロール
スクロールが末尾に近づくと自動で次のコンテンツを読み込み、途切れなく閲覧を続けられる仕組み。フィード型UIと相性が良い。
Mobile
SNS
Feed
Sticky Header
Content scrolls beneath the fixed header which stays pinned at the top of viewport...
Sticky Header
固定ヘッダー
スクロールしても画面上部に貼り付いたまま残るヘッダー。ロゴや主要ナビ、検索へいつでもアクセスできる。
Web
Mobile
Menu
Drawer
ドロワー
画面の端からスライドして現れる引き出し状のパネル。普段は隠しておき、必要なときだけメニューや設定を呼び出せる。
Mobile
Responsive
Cmd+K
description
index.html
description
style.css
Command Palette
コマンドパレット
ショートカット（Cmd+K など）で呼び出し、検索窓から画面遷移や操作を一発で実行できるパネル。マウスを使わず高速に操作できる。
Desktop
Productivity
Day
Week
Month
Segmented Control
セグメンテッドコントロール
横並びの選択肢を一つの帯にまとめ、いずれか一つを選ぶトグル型のコントロール。表示の切り替えや期間の絞り込みに向く。
iOS
Mobile
Filter
Overview
Details
Reviews
Tab content area...
Tabs
タブ
同じ画面内で関連するコンテンツをタブに分け、クリックで表示を切り替えるパターン。ページ遷移せず情報を整理できる。
Web
Desktop
Mobile
check
2
3
Stepper / Wizard
ステッパー
複数の工程を順に進める手続きを、番号付きのステップとして可視化するパターン。完了・現在・未着手が一目で分かる。
Form
EC
Onboarding
Overview
Features
Pricing
FAQ
Anchor Navigation
アンカーナビ
同一ページ内のセクションへ、クリックでスムーズにジャンプするナビゲーション。現在地のリンクをハイライトすることが多い。
LP
Web
Long-form
grid_view
Layout
9 patterns
Grid Layout
グリッドレイアウト
要素を等間隔の格子（行と列）に沿って整列させる基本レイアウト。画面幅に応じて列数を変えるだけで、破綻なくレスポンシブ対応できる。
Web
Basic
Responsive
Masonry Layout
メイソンリー
高さの異なる要素を、隙間を詰めながら列ごとに積み上げるレイアウト。レンガ積みのような見た目で、写真など縦横比がバラバラなコンテンツを美しく収められる。
Web
Image
Pinterest
Card Layout
カードレイアウト
画像・見出し・説明などを1枚のまとまり（カード）に束ね、それを並べて見せるレイアウト。情報の単位が視覚的に明確になり、タップ領域も分かりやすい。
Web
Mobile
Basic
Left Pane
Right Pane
Split Screen
スプリットスクリーン
画面を左右（または上下）2つの領域に分け、対等な2つのコンテンツを並置するレイアウト。ビジュアルとテキスト、選択肢A/Bなどを同時に見せられる。
LP
Web
Desktop
Headline
Subtext goes here for the hero section
Get Started
Hero Section
ヒーローセクション
ページ最上部に置く大きな導入エリア。主役級の見出し・サブテキスト・CTAを配し、訪問者が最初に受け取る第一印象を決める。
LP
Web
Marketing
Bento Grid
ベントグリッド
弁当箱の仕切りのように、大小さまざまなサイズのタイルを組み合わせて敷き詰めるモダンなグリッド。情報の重み付けを面積で表現できる。
Web
Modern
Dashboard
Holy Grail Layout
ホーリーグレイル
ヘッダー・フッターと、左右のサイドバーに挟まれた中央メインカラムで構成される古典的な3カラム型レイアウト。Web黎明期からの定番構成。
Web
Classic
Desktop
FULL BLEED
Full Bleed
フルブリード
画像や背景を余白なく画面の端から端まで広げる手法。没入感が高まり、写真やビジュアルの力を最大限に引き出せる。
Web
LP
Photo
Long content area...
Sticky
Sticky Sidebar
スティッキーサイドバー
本文をスクロールしても、脇のサイドバーだけが画面内の定位置に貼り付いて追従する仕組み。目次やCTA、関連情報を常に手の届く場所に置ける。
Web
Blog
EC
edit_note
Forms & Input
17 patterns
Email Address
Text Field
テキストフィールド
1行の文字列を入力させる最も基本的な入力欄。ラベルとプレースホルダで何を入れるかを明確に示すことが使いやすさの鍵になる。
Form
Basic
Message
Type here...
Textarea
テキストエリア
複数行の長い文章を入力させるための領域。問い合わせ内容や自由記述など、まとまった量のテキストを受け取るのに向く。
Form
Basic
Country
Japan
expand_more
Select / Dropdown
セレクト
あらかじめ用意した選択肢から1つを選ばせるドロップダウン。選択肢が多く、画面を占有せずに絞り込みたい場面で有効。
Form
Basic
check
Option A
Option B
Option C
Checkbox
チェックボックス
複数の選択肢から任意の数だけオン・オフを選べる入力要素。同意確認や複数条件の絞り込みなど、独立したブール値の集合に向く。
Form
Basic
Credit Card
Bank Transfer
Radio Button
ラジオボタン
複数の選択肢からちょうど1つだけを選ばせる入力要素。選択肢を常に画面に見せておきたい場面で、セレクトよりも直感的に選べる。
Form
Basic
Notifications
Dark Mode
Toggle Switch
トグルスイッチ
設定のオン・オフを即座に切り替えるスイッチ。物理スイッチのメタファーで、状態が一目で伝わり操作結果もすぐ反映される。
Form
Mobile
Settings
Price Range
$30 - $80
Slider / Range
スライダー
つまみをドラッグして数値を連続的に調整する入力。範囲の下限・上限を2つのつまみで指定する形式もよく使われる。
Form
Filter
chevron_left
March 2026
chevron_right
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Date Picker
デートピッカー
カレンダーUIから日付を選ばせる入力。手入力の書式ミスを防ぎ、選択できない日をあらかじめ無効化できるのが利点。
Form
Booking
cloud_upload
Drag & Drop
or click to browse
File Upload
ファイルアップロード
ファイルを選択またはドラッグ＆ドロップで送信させる入力。点線の枠と説明アイコンで、投げ込める領域だと直感的に伝える。
Form
Web
search
Search...
Search Bar
検索バー
キーワードを入力してコンテンツを絞り込む入力欄。虫眼鏡アイコンとプレースホルダで役割が瞬時に伝わる定番パターン。
Basic
Web
Mobile
React
React Native
React Router
Autocomplete
オートコンプリート
入力途中の文字に合致する候補をリアルタイムで提示する入力。タイプ量を減らし、表記ゆれや入力ミスを未然に防ぐ。
Form
Search
React
close
TypeScript
close
Add...
Tag Input
タグ入力
入力した語句を削除可能なチップとして連続で追加できる入力。1つの欄で複数の値をまとめて扱えるのが強み。
Form
Tag
4
7
2
_
OTP Input
OTP入力
SMSやアプリで届いたワンタイムコードを1桁ずつ枡目に入力させる欄。桁ごとに区切ることで入力状況が把握しやすい。
Form
Auth
Security
Medium strength
Password Strength Meter
パスワード強度メーター
入力中のパスワードの安全性をバーや色でリアルタイムに可視化する要素。強い設定を促し、脆弱なパスワードを未然に防ぐ。
Form
Security
#4F46E5
Color Picker
カラーピッカー
色相グラデーションとカーソルから任意の色を選ばせる入力。選択した色をHEX値などと合わせて確認できるのが一般的。
Form
Design Tool
Project Name
edit
Editing text
Inline Edit
インラインエディット
表示されているテキストをその場でクリックして直接編集できる仕組み。別画面へ遷移せず素早く値を書き換えられる。
Form
Advanced
check
2
3
Shipping Info
Next
arrow_forward
Multi-step Form
マルチステップフォーム
長い入力を複数のステップに分割し、進捗インジケータで現在地を示すフォーム。1画面あたりの負担を減らし離脱を防ぐ。
Form
UX
bar_chart
Data Display
13 patterns
Name
Status
Date
Tanaka
●
Done
3/24
Sato
●
In Progress
3/23
Table
テーブル
行と列でデータを整然と並べ、複数レコードを一覧・比較できるようにする表形式。並び替えやステータス表示と組み合わせると管理業務が一気に楽になる。
Data
Admin
A
Alice
Message preview...
10:30
B
Bob
Hello there...
09:15
List View
リストビュー
各項目を縦に積み重ねて表示する基本レイアウト。アバターや補足テキスト、時刻などを1行にまとめると視線の流れが自然になる。
Data
Basic
Mobile
expand_more
folder
src
expand_more
folder
components
description
Button.tsx
description
Modal.tsx
chevron_right
folder
utils
Tree View
ツリービュー
親子関係を持つデータをインデントと展開アイコンで階層表示するUI。折りたたみで全体像と詳細を行き来できる。
Data
Hierarchy
Deploy complete
3 min ago
PR merged
1 hour ago
Issue created
Yesterday
Timeline
タイムライン
出来事を時系列に沿って縦のライン上に並べ、進行や履歴を一目で追えるようにする表示。ノードの色で状態を表すことが多い。
Data
History
TODO
Task A
Task B
IN PROGRESS
Task C
DONE
Task D
Kanban Board
カンバンボード
タスクをステータス別の列に分け、カードとして並べて進捗を可視化するボード。ドラッグで列を移動して状態を更新できる。
Task
Project
Revenue
$1.2M
trending_up
12%
Users
8,421
trending_up
5%
Stat Card
統計カード
重要な数値指標を1枚のカードに大きく見せ、前期比などのトレンドを添えるダッシュボード部品。KPIを瞬時に把握させる。
Dashboard
Data
notifications
3
chat_bubble_outline
Badge
バッジ
アイコンの隅に小さく重ねて未読件数や新着を知らせる印。数字付きのカウントバッジと、点だけのドットバッジがある。
UI Part
Notification
Published
React
Review
Important
v2.0
Tag / Chip
タグ / チップ
カテゴリや属性を色付きの小さなラベルで表す要素。状態やジャンルを一目で識別でき、フィルタの入口にもなる。
UI Part
Category
K
A
T
M
+3
Avatar
アバター
ユーザーを表す丸いアイコン。写真がなければ頭文字を色付きで表示し、複数人はグループ表示にまとめられる。
UI Part
User
Uploading
67%
Progress Bar
プログレスバー
処理の進捗を横棒の充填率で示すインジケーター。パーセント表示を添えると残りの見通しが伝わりやすい。
UI Part
Progress
Skeleton Screen
スケルトンスクリーン
コンテンツ読み込み中に、実際のレイアウトを模したグレーの箱をシマー表示するプレースホルダー。体感待ち時間を和らげる。
Loading
UX
inbox
No data yet
Add your first item
add
Create New
Empty State
エンプティステート
データがまだ無い画面を、空白のまま放置せずイラストや説明・行動導線で埋めるデザイン。次に何をすべきかを示す。
UX
State
Chart / Graph
チャート
数値データを棒・線・円などのグラフに変換し、傾向や比較を視覚的に伝える表現。数字の羅列より直感的に理解できる。
Data
Dashboard
chat_bubble_outline
Feedback
8 patterns
check_circle
Saved successfully
close
Toast / Snackbar
トースト
画面の隅に一時的に現れ、数秒で自動的に消える軽量な通知。操作の結果をさりげなく伝え、作業の流れを妨げない。
Notification
Lightweight
Delete item?
This action cannot be undone.
Cancel
Delete
Modal / Dialog
モーダル
背景を暗く覆い、その上に前面のウィンドウを重ねて注意を集中させるUI。閉じるか操作を選ぶまで背後の画面は触れなくなる。
Overlay
Critical
warning
An error occurred
check_circle
Processed successfully
Alert / Banner
アラート
コンテンツの上部などに帯状で表示し、状態やメッセージを色とアイコンで一目で伝えるUI。成功・警告・エラーなど意味を色で区別する。
Notification
Important
Save (Cmd+S)
save
Tooltip
ツールチップ
要素にホバーやフォーカスした際、小さな吹き出しで補足説明やショートカットを表示する仕組み。画面を占有せず必要な時だけ現れる。
Help
Micro-interaction
T
Taro
AI Consultant
View profile
arrow_forward
Popover
ポップオーバー
クリックした要素の近くに浮かび、リンクやアクションを含んだ小さなパネルを表示するUI。ツールチップより情報量が多く、操作も置ける。
Overlay
Info
Loading Spinner
ローディングスピナー
回転するアイコンや点滅するドットで処理中であることを示すインジケーター。所要時間が読めない待機状態を穏やかに伝える。
Loading
Basic
warning
Confirm deletion?
Type "delete" to confirm
Delete permanently
Confirmation Dialog
確認ダイアログ
取り消せない操作の直前に、意図の再確認を求めるダイアログ。危険な操作では文字入力などの一手間を挟んで誤操作を防ぐ。
Safety
Confirm
Notifications
Mark all read
New comment
2 min ago
PR was merged
1 hour ago
Notification Panel
通知パネル
ベルアイコンなどから開く、通知を時系列でまとめて一覧表示するパネル。未読を強調し、一括既読などの操作もまとめて行える。
Notification
Overlay
article
Content
9 patterns
Question 1
expand_more
Answer content is displayed here with detailed explanation.
Question 2
chevron_right
Accordion
アコーディオン
見出しをクリックすると本文が開閉する折りたたみUI。限られた縦幅に多くの項目を収め、必要な情報だけを展開して読ませられる。
Content
FAQ
Slide 1
Slide 2
Carousel / Slider
カルーセル
複数のスライドを横方向に切り替えて見せるUI。インジケーターやスワイプで移動でき、限られた面積で多くのビジュアルを提示できる。
Content
Image
Mobile
image
close
chevron_left
chevron_right
Lightbox
ライトボックス
画像などをクリックすると暗い背景の上に拡大表示するオーバーレイUI。前後送りや閉じる操作を備え、コンテンツに集中させられる。
Image
Overlay
Free
$0
5GB
Select
Recommended
Pro
$9
100GB
Select
Team
$24
Unlimited
Select
Pricing Table
料金テーブル
複数の料金プランを横並びで比較させるUI。おすすめプランを強調し、機能差と価格を一目で判断できるよう設計する。
Marketing
LP
SaaS
"This tool tripled our productivity within a week."
T
Taro Tanaka
CTO, Example Inc.
Testimonial
テスティモニアル
利用者の声を顔写真や肩書きとともに紹介するUI。第三者の実感を添えることで、サービスへの信頼と安心感を高める。
Marketing
LP
Trust
Get Started Today
14-day free trial. No credit card.
Start Free
arrow_forward
CTA Section
CTAセクション
ユーザーに次の行動を促す訴求ブロック。目立つ配色と短いコピー、明快なボタンで、申込みや登録への一歩を後押しする。
Marketing
LP
Conversion
FAQ
How much does it cost?
remove
Basic plan starts at $9/mo
Can I cancel?
add
FAQ Section
FAQセクション
よくある質問と回答をまとめて掲載するセクション。開閉式で並べることが多く、ユーザーの疑問を先回りして解消する。
Support
LP
bolt
Fast
10ms response
lock
Secure
E2E encrypted
language
Global
50+ regions
extension
Plugins
100+ integrations
Feature Section
フィーチャーセクション
主要な機能や強みをアイコンと短い説明でグリッド状に並べるセクション。製品の価値を素早く直感的に伝えられる。
LP
Marketing
Free
Pro
Team
Storage
5GB
100GB
Unlimited
API
close
check
check
Comparison Table
比較テーブル
複数の選択肢を行と列で並べ、機能や条件の有無を対比させる表。チェックやバツで差分を明示し、意思決定を助ける。
Marketing
Decision
touch_app
Actions
8 patterns
Primary
Secondary
Ghost
Danger
Pill
Button
ボタン
ユーザーの操作を受け取り、次の処理を起こす最も基本的な部品。役割の重さに応じてプライマリ・セカンダリ・破壊的操作などの見た目を使い分ける。
Basic
Form
add
FAB
フローティングアクションボタン
画面の右下などに浮かせて常設する円形ボタンで、そのページで最も重要な単一のアクションを担う。Material Designを象徴するパターン。
Mobile
Material Design
Copy
Cmd+C
Paste
Cmd+V
Rename
Delete
Context Menu
コンテキストメニュー
対象を右クリック（またはロングプレス）したときに、その場に現れる操作の一覧。選択中の要素に関係するコマンドだけを絞って提示する。
Desktop
Operation
Take Photo
Choose from Library
Delete
Cancel
Action Sheet
アクションシート
画面下部からせり上がり、選択肢を縦に並べて提示するモーダル。iOSで多用され、キャンセルを分離して誤操作を防ぐのが定石。
Mobile
iOS
Save
expand_more
Split Button
スプリットボタン
主要な操作を実行する本体と、関連する選択肢を開くドロップダウン部分を1つにまとめたボタン。既定の動作を素早く行いつつ、代替手段も隠さない。
Desktop
Advanced
format_bold
format_italic
format_underlined
format_strikethrough
Button Group
ボタングループ
関連する複数のボタンを隙間なく連結して1つの塊に見せるUI。ツールバーの書式ボタンのように、排他選択やまとまった操作群を表現する。
UI Part
Basic
check
A
Email Subject
Swipe left / right
delete
Swipe Actions
スワイプアクション
リストの項目を左右にスワイプすると、背後から完了・削除などのアクションが現れる操作方式。指1本でリストを素早くさばける。
Mobile
Gesture
Refreshing...
Pull to Refresh
プルトゥリフレッシュ
一覧の先頭を下に引っ張って離すと最新データを再読み込みするジェスチャー。更新ボタンを置かずに、自然な動作でリフレッシュを促す。
Mobile
Gesture
smartphone
Mobile
4 patterns
Details
Drag to adjust height
Bottom Sheet
ボトムシート
画面下からせり上がって表示される可動パネル。ドラッグで高さを調整でき、下地のコンテンツを保ったまま詳細や操作をその場で提供する。
Mobile
Overlay
user1
user2
user3
Stories
ストーリーズ
横並びの円形アイコンから開く、24時間で消える全画面のスライド型コンテンツ。未読はカラフルなリングで示し、タップで次々と送り見できる。
SNS
Video
arrow_back
Back
Title
more_horiz
App Bar
アプリバー
画面上部に固定される横帯のナビゲーション領域。戻る操作・画面タイトル・その他アクションをまとめ、現在地と主要操作を常に示す。
Mobile
Navigation
add
photo_camera
attach_file
edit
Speed Dial
スピードダイヤル
フローティングアクションボタンをタップすると、関連する複数のアクションが扇状に展開するパターン。主要動作を軸に副次的な操作を素早く呼び出せる。
Mobile
Material Design
forum
Social & Communication
5 patterns
Hello!
Good morning!
When is today's meeting?
Chat UI
チャットUI
自分と相手の発言を左右に振り分け、吹き出しで会話の流れを可視化するインターフェース。時系列に沿ってメッセージが積み上がり、送受信の関係がひと目で伝わる。
Message
Realtime
A
Alice
2h ago
Great implementation!
B
Bob
1h ago
Thank you!
Comment Thread
コメントスレッド
投稿に対する返信を親子関係でインデント表示し、議論の枝分かれを構造的に見せるパターン。誰が誰に返しているのかが視覚的に追える。
Community
Comment
Great release!
thumb_up
12
favorite
8
celebration
5
add
Emoji Reactions
リアクション
絵文字ワンタップで投稿への反応を返し、同じ反応の数をまとめて表示する仕組み。コメントを書くほどではない共感や賛同を、軽い操作で伝えられる。
Social
Micro-interaction
K
Koku
@koku - 1h
Launched a new AI feature today!
chat_bubble_outline
repeat
favorite_border
share
Feed Card
フィードカード
投稿者・本文・画像・アクション類を1枚のカードにまとめ、縦スクロールで連続的に閲覧させる単位。SNSのタイムラインを構成する基本ブロックとなる。
SNS
Feed
@ta
T
taro
T
takumi
@Mention
メンション
「@」に続けて名前を打つと候補者リストがサジェストされ、特定の人物を指名・通知できる入力補助。誰に向けた発言かを明示し、本人へ確実に届ける。
Social
Input Assist
school
Onboarding & Guidance
3 patterns
Button
Click here!
Walkthrough
ウォークスルー
画面上の特定要素をハイライトし、吹き出しで操作を順番に案内するガイド。周囲を暗くして注目を集め、初回利用者に主要機能の使い方を体験しながら覚えてもらう。
Onboarding
Tutorial
celebration
Welcome!
Let us show you around
in 3 easy steps
Next
Welcome Screen
ウェルカム画面
アプリを開いた直後に表示する歓迎の一枚。サービスの価値や次のステップを簡潔に伝え、複数枚のスライドで導入の流れを示すことも多い。
Onboarding
Mobile
Setup 2/4 complete
check_circle
Set up profile
check_circle
Invite team
radio_button_unchecked
Create project
radio_button_unchecked
Connect integration
Progress Checklist
プログレスチェックリスト
初期設定を小さなタスクに分解し、完了状況をチェックとプログレスバーで見せるリスト。達成感を積み上げてセットアップ完了まで導く定番の仕掛け。
Onboarding
Gamification
play_circle_outline
Media
3 patterns
play_circle
1:23 / 3:45
fullscreen
Video Player
ビデオプレーヤー
動画を再生し、再生・停止やシークバー、時間表示、全画面切り替えなどを操作できるコンポーネント。サムネイル上に再生ボタンを重ねて視聴を促すのが定番。
Media
Video
play_arrow
Episode 42
12:30
31:45
Audio Player
オーディオプレーヤー
音声トラックを再生し、進捗バーや経過・残り時間、再生コントロールをコンパクトにまとめたUI。ジャケット画像やタイトルを添えて誰が何を聴いているか分かりやすくする。
Media
Audio
image
+12
Image Gallery
イメージギャラリー
複数の画像をグリッドやモザイク状に並べて一覧できるUI。大きなメイン画像とサムネイルを組み合わせ、残り枚数を「+12」のように示すことが多い。
Image
Media
shopping_cart
Commerce
3 patterns
checkroom
Premium Sneakers
star
star
star
star
star
(128)
$128
shopping_cart
Product Card
商品カード
商品画像・名称・価格・評価・購入ボタンをひとまとめにした、EC一覧の最小単位。情報を凝縮しつつ一目で比較できるようにするのが要点。
EC
Product
shopping_cart
Cart (2)
Item A
x1
$30
Total
$54
Checkout
Shopping Cart
カート
選択した商品と数量・小計・合計を一覧し、決済へ進む導線を備えたパネル。購入直前の最終確認の場として、内容と金額を明快に示す。
EC
Checkout
4.2
star
star
star
star
star
1,284 reviews
5
756
4
321
Rating / Review
レーティング
平均スコアと星、評価分布のバーで商品の評判を可視化する要素。件数と分布まで見せることで、数字の信頼度が伝わる。
EC
Feedback
settings
Advanced Patterns
6 patterns
dark_mode
light_mode
Dark Mode Toggle
ダークモード切替
明るい配色と暗い配色をワンタップで切り替えるスイッチ。夜間の目の負担軽減や省電力に効き、ユーザーの好みに合わせた表示を提供する。
Accessibility
Settings
drag_indicator
Item 1
drag_indicator
Item 2 (dragging)
drag_indicator
Item 3
Drag & Drop
ドラッグ&ドロップ
要素をつかんで別の場所へ移動できる直感的な操作。並べ替えやファイルのアップロード、カンバンのカード移動などに使われる。
Interaction
Advanced
10,000 rows
Virtual Scroll
仮想スクロール
画面に見えている行だけを描画し、残りは必要になった時に差し替える手法。何万件のリストでも軽快にスクロールできる。
Performance
Data
smartphone
tablet
laptop
desktop_windows
Responsive Breakpoints
レスポンシブブレークポイント
画面幅に応じてレイアウトを切り替える境界値。スマホ・タブレット・PCそれぞれで最適な見え方に組み替える設計の土台になる。
Responsive
Basic
CSS
favorite
check
Micro-interactions
マイクロインタラクション
いいねの弾みや保存完了のチェックなど、操作に反応する小さなアニメーション。「ちゃんと届いた」という手応えがUIを心地よくする。
Animation
UX
keyboard
Shortcuts
Save
Cmd+S
Search
Cmd+K
Undo
Cmd+Z
Keyboard Shortcuts
キーボードショートカット一覧
よく使う操作にキー組み合わせを割り当て、その対応を一覧で示すパネル。マウスに持ち替えず素早く作業したいパワーユーザーの効率を高める。
Accessibility
Power User
lock_outline
Authentication
2 patterns
Log In
Log In
or continue with
G
apple
Login Form
ログインフォーム
メールアドレスとパスワードで既存アカウントにサインインするフォーム。ソーシャルログインを併設して手間を減らすことが多い。
Auth
Form
Create Account
Name
Email
Password
Create
Sign Up Form
新規登録フォーム
アカウントを新規作成するためのフォーム。入力項目を必要最小限に絞るほど登録完了率は高くなる。
Auth
Form
error_outline
Error & System
4 patterns
404
Page Not Found
Please check the URL
Go Home
404 Page
404ページ
存在しないURLにアクセスした際に表示する専用ページ。大きな「404」表示に加え、トップへ戻る導線や検索を添えて離脱を防ぐ。
Error
Web
error_outline
Something went wrong
Could not connect to server
Retry
Error State
エラー状態
処理に失敗したことを画面上で明確に伝える表示。何が起きたかと、再試行など次にできる行動をセットで示すのが基本。
Error
UX
build
Under Maintenance
System update in progress
ETA: 15:00 JST
Maintenance Page
メンテナンス画面
システム更新や障害対応でサービスを一時停止している間に表示する案内ページ。復旧予定時刻を伝えることで不安を和らげる。
System
Web
cookie
This site uses cookies for analytics.
Decline
Accept
Cookie Banner
クッキーバナー
Cookieの利用について同意を求める通知バー。同意・拒否を対等に選べるようにするのが法令順守と信頼の両面で望ましい。
Legal
Web