追従・行動誘導
UI COMPONENTS FOR BEGINNERS
名前が分からなくても探せる
Webパーツ図鑑
見て、触って、名前と使い方を知る。
Web制作でよく出会うUIを、ひとつずつ集めました。
これ何て名前？
START HERE
まず覚えたいWebパーツ
まずはよく使う12種類から。名前と使いどころを一緒に覚えられます。LOOK & TRY
よく見るWebパーツ
カテゴリ・難易度・JavaScriptの有無を組み合わせて、100種類から絞り込めます。カテゴリ
難易度
JavaScript
☆で登録したお気に入りは、このブラウザに保存されます。
100件中 100件
ナビゲーション
Header
ヘッダーロゴと主要な操作をまとめる、サイトの入口となるパーツ。ナビゲーション
Navigation
ナビゲーションページやコンテンツへ迷わず移動するための案内です。表示・オーバーレイ
Accordion
アコーディオン情報を折りたたみ、必要なときだけ見せます。表示・オーバーレイ
Modal
モーダル画面に重ねて、確認や入力を促します。コンテンツ
Card
カード関連する情報をひとまとまりにして見せます。表示・オーバーレイ
Tabs
タブ同じ階層の内容を切り替えて比較できます。ナビゲーション
Carousel
カルーセル複数のコンテンツを横方向に見せるスライドです。表示・オーバーレイ
Dropdown
ドロップダウン選択肢をコンパクトにまとめて表示します。フィードバック・状態
Tooltip
ツールチップ短い補足を、必要なときだけ表示します。フィードバック・状態
Toast
トースト操作結果を一時的に知らせるメッセージです。表示・オーバーレイ
Drawer
ドロワー画面の横から補助パネルを表示します。追従・行動誘導
Toggle
トグルスイッチON / OFFをひとつのスイッチで切り替えます。フォーム・入力
Checkbox
チェックボックス複数の項目から選ぶときに使います。フォーム・入力
Radio Button
ラジオボタン候補の中からひとつだけ選びます。フォーム・入力
Select
セレクトボックス決まった候補からひとつを選択できます。フォーム・入力
Search
検索ボックス入力した言葉に合う情報を絞り込みます。ナビゲーション
Pagination
ページネーション長い一覧をページごとに分けて移動します。ナビゲーション
Hamburger Menu
ハンバーガーメニュー小さな画面でメニューを開閉します。ナビゲーション
Mega Menu
メガメニュー多くの項目をグループで見せる大きなメニュー。表示・オーバーレイ
Lightbox
ライトボックス画像を画面上で大きく表示します。フォーム・入力
Form Validation
入力チェック入力内容に応じてエラーや成功を伝えます。フィードバック・状態
Progress Bar
プログレスバー処理や入力の進み具合を視覚化します。フィードバック・状態
Skeleton
スケルトンUI読み込み中のレイアウトを予告表示します。ナビゲーション
Stepper
ステッパー複数ステップの現在地を示します。フォーム・入力
File Upload
ファイルアップロードファイルを選択・アップロードします。フォーム・入力
Date Picker
日付ピッカー日付をカレンダーから選択します。フォーム・入力
Password Input
パスワード入力文字を隠してパスワードを入力します。追従・行動誘導
Floating Button
フローティングボタン画面上で目立つ固定アクションボタンです。表示・オーバーレイ
Popover
ポップオーバーボタンの近くに補助情報を表示します。フォーム・入力
Slider
スライダースライドで値や表示内容を切り替えます。フォーム・入力
Rating
レーティング星などで満足度や評価を入力します。フォーム・入力
Range Slider
範囲スライダー数値の範囲をドラッグして指定します。ナビゲーション
Breadcrumb
パンくずリスト今いるページまでの階層を短く示します。コンテンツ
Chip
チップ条件や選択内容を小さなラベルで見せます。フィードバック・状態
Alert
アラート大切な注意や結果を目立たせて伝えます。コンテンツ
Avatar
アバターユーザーや投稿者をひと目で識別します。コンテンツ
Badge
バッジ件数や新着などの小さな状態を伝えます。データ・一覧
Timeline
タイムライン出来事や手順を時系列で分かりやすく並べます。データ・一覧
Table
テーブル複数の項目を行と列で比較しやすくします。フィードバック・状態
Empty State
空の状態まだ内容がない状態で、次の行動を案内します。表示・オーバーレイ
Cookie Banner
CookieバナーCookie利用について選択を促す案内です。フォーム・入力
Quantity Stepper
数量ステッパー数量をプラス・マイナスで調整します。コンテンツ
Hero
ヒーローセクションページの目的や主な行動を最初に伝える大きな導入です。コンテンツ
Section Heading
セクション見出し長いページを読みやすく区切る見出しです。コンテンツ
Feature List
特徴リスト特徴やメリットを短く分かりやすく並べます。コンテンツ
Pricing Table
料金表料金プランを比較して選びやすくする表です。コンテンツ
Testimonial
お客様の声利用者の声やレビューを紹介するパーツです。コンテンツ
Article List
記事一覧記事・お知らせなどを時系列で一覧表示します。コンテンツ
Footer
フッターサイト末尾に補助リンクや案内をまとめます。コンテンツ
Logo Cloud
ロゴ一覧導入企業や連携先のロゴを並べて紹介します。ナビゲーション
Bottom Navigation
下部ナビゲーションスマホ画面の下部で主要画面へすばやく移動します。ナビゲーション
Sidebar Navigation
サイドバーナビ横長画面で使いやすい、左側のメニューです。ナビゲーション
Context Menu
コンテキストメニュー三点ボタンなどから補助操作を開くメニューです。ナビゲーション
Segmented Control
セグメントコントロール少数の選択肢を横並びで素早く切り替えます。ナビゲーション
Command Palette
コマンドパレットキーボードで機能やページをすばやく探す操作盤です。ナビゲーション
Table of Contents
目次ページ内の見出しへ移動できる目次です。ナビゲーション
Skip Link
スキップリンクキーボード利用者が本文へ移動するための近道です。フォーム・入力
Text Input
テキスト入力名前や短い文章を一行で入力する基本の欄です。フォーム・入力
Textarea
テキストエリア感想や問い合わせなど長い文章を入力します。フォーム・入力
Combobox
コンボボックス入力しながら候補を絞って一つ選びます。フォーム・入力
Multi Select
複数選択複数の条件や項目をまとめて選択します。フォーム・入力
Tag Input
タグ入力キーワードを入力してタグとして追加します。フォーム・入力
OTP Input
認証コード入力認証用の数字コードを一桁ずつ入力します。フォーム・入力
Phone Input
電話番号入力国番号を含む電話番号を入力する欄です。フォーム・入力
Address Form
住所フォーム配送先などの住所をまとめて入力します。フォーム・入力
Date Range Picker
期間選択開始日と終了日をまとめて指定します。フォーム・入力
Time Picker
時刻選択予約などに使う時刻を選択します。フォーム・入力
Color Picker
カラーピッカー色を視覚的に選び、値として扱います。表示・オーバーレイ
Confirmation Dialog
確認ダイアログ削除などの重要な操作前に確認を求めます。表示・オーバーレイ
Bottom Sheet
ボトムシートスマホで下から補助操作を表示します。表示・オーバーレイ
Fullscreen Menu
全画面メニュー画面全体にメニューを大きく開きます。表示・オーバーレイ
Image Comparison
画像比較ビフォー・アフターの画像を比較します。表示・オーバーレイ
Video Player
ビデオプレーヤー動画の再生・停止を操作するプレーヤーです。表示・オーバーレイ
Code Block
コードブロックコードを読みやすく表示してコピーできます。表示・オーバーレイ
Read More
続きを読む長い文章を省略し、必要なとき全文を開きます。フィードバック・状態
Spinner
スピナー処理中であることを短く伝える回転表示です。フィードバック・状態
Inline Message
インラインメッセージ入力欄の近くで注意や補足を伝えます。フィードバック・状態
Snackbar
スナックバー画面下部で、取り消し付きの通知を出します。フィードバック・状態
Loading Button
ローディングボタン送信中など、処理中のボタン状態を示します。フィードバック・状態
Success State
成功状態完了後に次の行動を案内する成功画面です。フィードバック・状態
Error State
エラー状態失敗したときに原因と復帰方法を案内します。フィードバック・状態
Notification Center
通知センター未読を含む通知をまとめて確認します。データ・一覧
Sortable Table
並べ替えテーブル列見出しを押して表の順番を並べ替えます。データ・一覧
Filterable Table
絞り込みテーブル条件で表の内容を絞り込めます。データ・一覧
Selectable Table
選択テーブル一覧の行を選んでまとめて操作します。データ・一覧
Calendar View
カレンダー表示予定や予約を月ごとのカレンダーで見せます。データ・一覧
Kanban Board
カンバンボードタスクを状態ごとの列に分けて管理します。データ・一覧
Activity Feed
アクティビティフィード最近の更新や操作履歴を時系列で表示します。データ・一覧
Metric Card
数値カード売上やアクセス数などの重要な数値を見せます。追従・行動誘導
Sticky Header
追従ヘッダースクロールしても上部に残るヘッダーです。追従・行動誘導
Sticky Sidebar
追従サイドバー目次などを横に固定して読み進めやすくします。追従・行動誘導
Back to Top
ページ上部へ戻る長いページの先頭へ戻るための固定ボタンです。追従・行動誘導
Scroll Progress
スクロール進捗ページをどこまで読んだかを細いバーで示します。追従・行動誘導
Chat Widget
チャットウィジェット右下から問い合わせや会話を始める入口です。追従・行動誘導
Sticky CTA Bar
追従CTAバー申込みなどの主な行動を下部に固定します。上級インタラクション
Sortable List
並べ替えリスト項目をドラッグして表示順を入れ替えます。上級インタラクション
Resizable Split Pane
リサイズ可能な分割表示左右の領域の幅をドラッグで調整します。上級インタラクション
Virtualized List
仮想リスト大量の一覧を軽く表示するためのリストです。上級インタラクション
Tree View
ツリービューフォルダのような階層データを開閉して見せます。INTERACTIVE PREVIEW
Accordionアコーディオン
情報を折りたたみ、必要なときだけ見せます。
中級
編集結果のライブプレビュー
<div class=class="syntax-string">"accordion"> <button class=class="syntax-string">"accordion-trigger" aria-expanded=class="syntax-string">"false" aria-controls=class="syntax-string">"accordion-panel-1">料金について <span aria-hidden=class="syntax-string">"true">+</span></button> <p class=class="syntax-string">"accordion-panel" id=class="syntax-string">"accordion-panel-1" hidden>基本プランは月額0円から利用できます。</p> </div>
どんなパーツ？
情報を折りたたみ、必要なときだけ見せます。
実装で気を付けること
開閉状態とキーボード操作を考えます。
アクセシビリティ
- 操作には button 要素を使う
- 開閉状態を aria-expanded で伝える
- 対象の内容を aria-controls で結び付ける
- キーボードで操作できるようにする
キーボード操作
- Tab
- 操作にフォーカス
- Enter / Space
- 実行・開閉・選択
検索できる言葉
アコーディオン / 開閉 / 開く / 閉じる / 折りたたみ / FAQ / 質問 / 押すと開く
関連パーツ
ABOUT THIS PROJECT
「これ、何て名前？」を
10秒で解決するための図鑑です。
見た目から探して、触ってみて、名前・用途・コードまで自然にたどり着けることを目指しています。