ウェブサイトでよく使われるパーツを、見本から探せる名鑑です。名称だけでなく、使い道やデザイナーへ伝えるときの言い方も確認できます。
32パーツ収録
32件を表示しています。
ナビゲーション
Global Navigation
サイト全体の主要ページへ移動するための案内です。
デザイナーへの伝え方「ヘッダーには、主要ページへ移動できるグローバルナビゲーションを配置したいです。」
ナビゲーション
Hamburger Menu
主にスマートフォンで、メニューを開閉する三本線のボタンです。
デザイナーへの伝え方「スマートフォンでは、右上のハンバーガーメニューからグローバルナビを開く形にしたいです。」
ナビゲーション
Drawer Menu
画面の端から引き出しのように現れるメニュー領域です。
デザイナーへの伝え方「メニューボタンを押したら、右側からドロワーメニューが開くようにしたいです。」
ナビゲーション
Mega Menu
多数のリンクを分類し、大きな領域にまとめて表示するメニューです。
デザイナーへの伝え方「商品カテゴリが多いので、分類を一覧できるメガメニューにしたいです。」
ナビゲーション
Breadcrumbs
現在のページがサイト内のどの階層にあるかを示す案内です。
デザイナーへの伝え方「各ページの上部に、現在地が分かるパンくずリストを表示したいです。」
ナビゲーション
Pagination
長い一覧を複数ページに分け、前後や番号で移動する案内です。
デザイナーへの伝え方「記事一覧の下部は、ページ番号が分かるページネーションにしたいです。」
ナビゲーション
Anchor Navigation
同じページ内の見出しへ移動するためのリンク群です。
デザイナーへの伝え方「ページが長いので、各セクションへ移動できるアンカーナビを上部に置きたいです。」
個人向けプランの内容
ナビゲーション
Tabs
同じ領域の内容を、見出しを選んで切り替える部品です。
デザイナーへの伝え方「料金を個人向けと法人向けのタブで切り替えられるようにしたいです。」
コンテンツ・レイアウト
Hero Section
ページを開いて最初に見える、主題を伝える大きな領域です。
デザイナーへの伝え方「ファーストビューには、サービス名・短い説明・問い合わせボタンがあるヒーローを置きたいです。」
コンテンツ・レイアウト
Card
画像・見出し・説明など、ひとまとまりの情報を箱にした部品です。
デザイナーへの伝え方「事例一覧は、画像・タイトル・概要をまとめたカード形式にしたいです。」
コンテンツ・レイアウト
Accordion
見出しを押すと、その項目の内容が縦に開閉する部品です。
デザイナーへの伝え方「よくある質問は、質問を押すと回答が開くアコーディオン形式にしたいです。」
コンテンツ・レイアウト
Carousel
複数の画像やカードを、横方向へ順番に切り替えて見せる部品です。
デザイナーへの伝え方「導入事例を、左右の矢印で送れるカルーセルにしたいです。」
コンテンツ・レイアウト
Modal
現在の画面に重なり、確認や入力を求める小さな画面です。
デザイナーへの伝え方「送信前の確認内容を、ページ移動せずモーダルで表示したいです。」
コンテンツ・レイアウト
Lightbox
画像や動画を、背景を暗くして画面上へ大きく表示する部品です。
デザイナーへの伝え方「写真をクリックしたら、背景が暗くなって大きく見られるライトボックスにしたいです。」
| プラン | 基本 | プロ |
|---|---|---|
| ページ数 | 5 | 10 |
| サポート | — | ● |
コンテンツ・レイアウト
Table
複数の項目を行と列の関係で整理して見せる部品です。
デザイナーへの伝え方「各プランの機能差を、項目ごとに比較できるテーブルで見せたいです。」
コンテンツ・レイアウト
Timeline
出来事や手順を、時間・順序に沿って一本の流れとして見せます。
デザイナーへの伝え方「制作の流れを、相談から公開まで順番が分かるタイムラインで見せたいです。」
フォーム・操作
Button
押すことで送信・保存・次へ進むなどの操作を実行する部品です。
デザイナーへの伝え方「フォームの最後に、「内容を送信する」と書いた目立つボタンを置きたいです。」
フォーム・操作
Text Field
名前・メールアドレスなど、短い文字列を一行で入力する欄です。
デザイナーへの伝え方「氏名とメールアドレスは、一行のテキストフィールドで入力する形にしたいです。」
フォーム・操作
Textarea
問い合わせ内容など、複数行の文章を入力するための広い欄です。
デザイナーへの伝え方「お問い合わせ内容は、複数行を書けるテキストエリアにしたいです。」
フォーム・操作
Select / Dropdown
候補一覧を開き、その中から一つの値を選ぶ入力部品です。
デザイナーへの伝え方「お問い合わせ種別は、候補から一つ選ぶセレクトボックスにしたいです。」
フォーム・操作
Checkbox
複数の候補をそれぞれ選ぶ、または条件への同意を示す部品です。
デザイナーへの伝え方「希望する連絡方法は、複数選べるチェックボックスにしたいです。」
フォーム・操作
Radio Button
複数の候補から、どれか一つだけを選ぶ部品です。
デザイナーへの伝え方「希望プランは、三つの候補から一つ選ぶラジオボタンにしたいです。」
フォーム・操作
Toggle Switch
設定をオン・オフの二つの状態で即座に切り替える部品です。
デザイナーへの伝え方「メール通知は、その場でオン・オフできるトグルスイッチにしたいです。」
フォーム・操作
Search Bar
キーワードを入力し、目的の情報を探すための入力領域です。
デザイナーへの伝え方「記事名やキーワードから探せるサイト内検索バーを、ヘッダーに置きたいです。」
フォーム・操作
File Upload
端末から画像や書類などのファイルを選び、送信するための部品です。
デザイナーへの伝え方「画像は、ドラッグ＆ドロップでも選べるファイルアップロード欄にしたいです。」
通知・状態
Alert / Banner
重要なお知らせや注意事項を、目立つ帯や箱で伝える部品です。
デザイナーへの伝え方「メンテナンス情報を、全ページ上部の通知バナーで案内したいです。」
通知・状態
Toast / Snackbar
操作結果を短時間だけ画面の端へ表示する小さな通知です。
デザイナーへの伝え方「保存後は画面遷移せず、右下に完了を知らせるトーストを表示したいです。」
通知・状態
Tooltip
アイコンや短い用語の意味を、その近くへ一時的に補足表示します。
デザイナーへの伝え方「各アイコンへマウスを重ねると、機能名がツールチップで出るようにしたいです。」
通知・状態
Loading Spinner
処理中であることを、回転する図形で知らせる表示です。
デザイナーへの伝え方「検索結果を取得している間は、処理中と分かるローディングスピナーを表示したいです。」
通知・状態
Skeleton Screen
読み込み後の配置に近い灰色の形を先に見せる表示です。
デザイナーへの伝え方「記事一覧の読み込み中は、カードの形をしたスケルトンスクリーンを表示したいです。」
通知・状態
Empty State
表示するデータがないときに、理由と次の行動を案内する状態です。
デザイナーへの伝え方「検索結果が0件のときは、条件変更へ誘導するエンプティステートを表示したいです。」
通知・状態
Error State
処理や入力が失敗した理由と、直し方を利用者へ伝える状態です。
デザイナーへの伝え方「入力に誤りがある場合は、該当欄の直下に理由を示すエラーステートにしたいです。」
「三本線」「横から出る」のように、見た目や動きの言葉でも探せます。