選べるUIパーツ集
サイトに入れられる部品（パーツ）を、実際に動く形でまとめました。
気になるものがあれば、そのままお申し付けください。
お好きな組み合わせでサイトに取り入れます。
Buttonsボタン · 5パーツ
クリック頻度に応じて強弱をつけた、サイトで最も使用頻度が高いパーツです。
Forms & Inputフォーム要素 · 11パーツ
入力・選択・切り替えなど、フォームを構成する基本パーツです。
Text Inputテキスト入力
お名前や自由記述など、文字を入力してもらいたい時に。
Selectセレクト
複数の選択肢から1つ選んでもらいたい時に。
Textareaテキストエリア
お問い合わせ内容など、複数行の自由記述を入力してもらいたい時に。
Checkboxチェックボックス
同意・購読など、はい/いいえを選んでもらいたい時に。
Radio Groupラジオボタン
複数の選択肢から1つだけ選んでもらいたい時に（セレクトより選択肢を見せたい場合）。
Toggleトグル
設定のON/OFFをその場で切り替えてもらいたい時に。
Range Sliderレンジスライダー
予算感などを数値の範囲でざっくり指定してもらいたい時に。
Search Input検索窓
サイト内・一覧ページなどでキーワード検索をしてもらいたい時に。
File Uploadファイルアップロード
見積もり依頼の参考資料など、ファイルを添付してもらいたい時に。
Validationバリデーション表示
入力内容の誤りをその場で気づいてもらいたい時に。
Contact Formお問い合わせフォーム
サイトを見た方から直接問い合わせを受け付けたい時に。
Cardsカード · 3パーツ
サービスや制作サンプルなど、情報をひとまとまりで見せるためのパーツです。
Basic Card基本カード
テキストのみでサービス内容などを紹介したい時に。
Basic
サーバー構築
要件に合わせてクラウド環境を設計・構築します。
Card with Image画像付きカード
制作サンプルの一覧など、サムネイルと合わせて見せたい時に。
With Image
制作サンプル
Hover Cardホバー反応カード
カーソルを乗せた時に反応して、クリックできることを伝えたい時に。
Hover
お問い合わせ
カードにカーソルを乗せてみてください。
詳しく見る →Navigationナビゲーション · 6パーツ
サイト内の移動や現在地を伝えるためのパーツです。
Tab Switcherタブ切り替え
サービス内容や料金プランなど、複数の情報を切り替えながら見せたい時に。
キャンペーンや商品紹介に特化した1ページ完結型のサイトです。公開までのスピードを重視したい方向けです。
Segmented Controlセグメントコントロール
料金表の「月額／年額」切り替えなど、2〜3択をその場で切り替えたい時に。
Stepperステッパー
お申し込みフォームなど、複数ステップの進行状況を示したい時に。
Paginationページネーション
一覧を複数ページに分けて表示したい時に。
Feedbackフィードバック · 5パーツ
訪問者の操作結果や、お知らせを伝えるためのパーツです。
Alertアラート（コールアウト）
注意事項やエラー内容を、その場で色分けして目立たせたい時に。
お知らせ
営業時間は平日10:00〜18:00です。
完了
お問い合わせを受け付けました。
注意
入力内容に不備がある可能性があります。
エラー
送信に失敗しました。時間をおいて再度お試しください。
Modalモーダル（ポップアップ）
詳しい説明や画像を、ページ遷移せずその場でポップアップ表示したい時に。
Toastトースト
操作結果（保存完了など）を一瞬だけ知らせたい時に。
Tooltipツールチップ
補足説明をホバーでさりげなく見せたい時に。
Data Displayデータ表示 · 10パーツ
複数の情報を整理して見せるためのパーツです。
AccordionFAQアコーディオン
よくある質問をコンパクトにまとめて、気になる項目だけ開いて読んでもらいたい時に。
内容にもよりますが、LP1ページであれば2〜3週間程度が目安です。
可能です。軽微な文言修正から機能追加まで、都度お見積りいたします。
はい、すべてのサイトをスマホ・タブレット・PCで確認しながら制作しています。
ご用意いただいた素材を元に制作します。準備が難しい場合はご相談ください。
Pricing Table料金表
複数の料金プランを比較して選んでもらいたい時に。
ライト
¥55,000〜
小さく始めたい方向け
- 1ページ構成
- スマホ対応
- 公開後1週間サポート
スタンダード
¥198,000〜
一番選ばれているプラン
- 複数ページ構成
- お問い合わせフォーム
- SEO基本設定
- 公開後1ヶ月サポート
プレミアム
要相談
システム連携も含めたい方向け
- 予約・在庫管理等の機能
- 複数ページ構成
- 継続的な運用サポート
Badge & Tagバッジ・タグ
状態や使用技術などの属性を短く示したい時に。
Tableテーブル
複数項目を行・列で整理して比較して見せたい時に。
| サイト名 | 業種 | ステータス |
|---|---|---|
| The 1859 Café | カフェ | 公開中 |
| 紺碧行政書士事務所 | 士業 | 公開中 |
| てとてケア | 採用LP | 公開中 |
Avatarアバター
スタッフ紹介やお客様の声など、人物を丸いアイコンで表したい時に。
Progress Barプログレスバー
制作の進行状況や達成率を、一目で伝えたい時に。
Rating評価（星）
お客様満足度や商品評価を星の数で表したい時に。
4.0 / 5.0（クリックで評価を変更）
Timelineタイムライン
制作の流れや沿革など、時系列の出来事を並べて見せたい時に。
ヒアリング
1週目
デザイン制作
2〜3週目
実装・テスト
4週目
公開
5週目
Stat数値実績（KPI）
実績件数や納期目安など、数字で信頼感を伝えたい時に。
8件
制作実績
3週間
平均納期
60%
リピート率
Divider区切り線
セクション同士の境目や「または」の分岐をさりげなく示したい時に。
セクションA
または
セクションB
Loadingローディング · 2パーツ
データ取得中であることを伝え、待ち時間の不安を減らすためのパーツです。
Spinnerスピナー
診断結果の計算中など、処理中であることを示したい時に。
診断結果を計算しています…
Skeletonスケルトン
コンテンツの読み込み中に、大まかな配置を先に見せたい時に。
Essentialsその他の定番パーツ · 6パーツ
カテゴリに収まりきらない、業種を問わずよく使われる定番パーツです。
Image Carousel画像カルーセル
トップページのメインビジュアルを複数枚切り替えたい時に。
春の新商品フェア
店舗リニューアルのお知らせ
会員限定キャンペーン
季節のおすすめメニュー
Testimonial Sliderお客様の声スライダー
お客様の感想をたくさん紹介したいけど、場所を取りたくない時に。
“予約が入るようになり、電話対応の手間が減りました。”
カフェ経営 A様
“スマホで見たときの見やすさに驚きました。”
美容室 B様
“問い合わせフォームからの相談が増えました。”
士業事務所 C様
“写真がきれいに見えるだけで印象が変わりますね。”
個人事業主 D様
“更新のたびに業者に頼まなくてよくなり助かっています。”
小売店 E様
Image Gallery画像ギャラリー
施工事例や商品写真をたくさん並べて、クリックで大きく見せたい時に。
Before / After SliderBefore/Afterスライダー
リフォームや施術など、変化をスライドで比べて見せたい時に。
Countdown Timerカウントダウンタイマー
キャンペーンの締切や予約開始までの時間を目立たせたい時に。
キャンペーン終了まで
03
日
00
時間
00
分
00
秒
Map Embed地図埋め込み
お店や事務所への行き方を地図で分かりやすく伝えたい時に。
東京駅周辺を例に表示しています。納品時は実際の店舗・事務所の住所に差し替えます。