パーツ一覧

パーツ一覧

同じ色のバッジ＝同じ着せ替えグループ（管理画面で入力そのままに見た目を切り替え可能）。「単独」＝着せ替えなし。上のボタンでグループだけを絞り込めます。

📷 このサンプル画像は「ビジネス向け（siyou-biz）」をパソコンで表示したときのスクリーンショットです。各パーツはレスポンシブ対応なので、スマートフォンなど画面が小さい端末では、レイアウトが自動で変化します（例：横3列 → 縦1列）。実際の見え方は端末によって変わります。
また、文字のフォントや色は、お使いのフレームによって変わります（飾りの大きな数字や英字なども、フレームのフォントで表示されます）。

Free マークのパーツは、無料版でもお使いいただけます。マークのないパーツは、Single・Business でお使いいただけます。

CTA・誘導 8

CTA（誘導ボックス） — CTA（誘導ボックス）CTA系cta

CTAセクション（ボタン横並び）単独ui-tools-cta2

CTAセクション（背景写真） — CTAセクション（背景写真）CTA系ui-tools-cta4

横長ビジュアル（写真＋テキスト誘導） — 横長ビジュアル（写真＋テキスト誘導）CTA系ui-tools-bg-image1

LINE誘導セクション（QR＋ボタン） — LINE誘導セクション（QR＋ボタン）LINE系line-cta1

LINE友だち追加ボタン（単体） — LINE友だち追加ボタン（単体）LINE系line-btn1

アラート（お知らせボックス） — アラート（お知らせボックス）単独ui-tools-alert1

CTA（大きなアイコン＋テキスト＋ボタン） — CTA（大きなアイコン＋テキスト＋ボタン）CTA系ui-tools-cta3

FAQ・開閉 2

FAQ（クリックで開閉） — FAQ（クリックで開閉）FAQ系faq

FAQ（Q&Aマーク付き・カード型） — FAQ（Q&Aマーク付き・カード型）FAQ系ui-tools-openclose3

手入力の簡易版お知らせ 1

手入力の簡易版お知らせ — 手入力の簡易版お知らせ単独news

ギャラリー 7

画像（1枚） — 画像（1枚）単独image

ギャラリー（複数画像） — ギャラリー（複数画像）ギャラリー系gallery

サムネイルギャラリー（クリックで大画像切替） — サムネイルギャラリー（クリックで大画像切替）ギャラリー系ui-tools-thumbnail-changer1

横スクロールギャラリー（スクロール連動）ギャラリー系list-yoko-scroll2

ビフォーアフター（画像比較） — ビフォーアフター（画像比較）ビフォーアフター系list-before-after3

ピックアップギャラリー（大1枚＋小2枚） — ピックアップギャラリー（大1枚＋小2枚）単独gallery-pickup1

ビフォーアフター（吹き出し） — ビフォーアフター（吹き出し）ビフォーアフター系list-before-after4

ステップ・流れ 6

ステップ（手順） — ステップ（手順）ステップ系step

ステップ案内（横4列・アイコン） — ステップ案内（横4列・アイコン）ステップ系ui-tools-step4

沿革・年表（タイムライン） — 沿革・年表（タイムライン）ステップ系ui-tools-timeline1

ステップ案内（縦・番号＋画像） — ステップ案内（縦・番号＋画像）ステップ系ui-tools-step3

特徴・ステップ（アイコン＋番号・枠つき） — 特徴・ステップ（アイコン＋番号・枠つき）ステップ系ui-tools-step5

選ばれる理由（左に見出し＋アイコンのカード） — 選ばれる理由（左に見出し＋アイコンのカード）ステップ系ui-tools-grid2

リスト 22

特徴・サービス（アイコン3列） — 特徴・サービス（アイコン3列）ステップ系list-icon1

実績カウンター（数字）単独list-counter1

カラムリスト（画像・見出し・本文） — カラムリスト（画像・見出し・本文）カード系list1

かわいい形のカラム（自動幅・マスク選択） — かわいい形のカラム（自動幅・マスク選択）カード系list-mask1-auto

コース・メニュー一覧 — コース・メニュー一覧カード系list-cource1

スケジュール・1日の流れ — スケジュール・1日の流れステップ系list-schedule1

スタッフ紹介 — スタッフ紹介カード系list-staff1

お客様の声（星評価） — お客様の声（星評価）お客様の声系list-voice1

丸画像リスト（スタッフ・講師） — 丸画像リスト（スタッフ・講師）カード系list-circle1

ランキング — ランキングカード系list-ranking1

カタログ（写真＋価格ラベル） — カタログ（写真＋価格ラベル）カード系list-catalog1

自動スライド（写真の横流れ）カード系list-auto2

横並び（写真＋文章） — 横並び（写真＋文章）カード系list-yoko1

スポット紹介（テキスト＋段違いカード） — スポット紹介（テキスト＋段違いカード）カード系list-spot1

写真＋アイコンのカード — 写真＋アイコンのカードカード系list-grid-icon1

縦線で区切ったカード — 縦線で区切ったカードカード系list-grid2

コース・クラス紹介（色の帯つきカード） — コース・クラス紹介（色の帯つきカード）カード系list-cource2

メニュー名と価格（2列） — メニュー名と価格（2列）カード系list-yoko2

枠がゆらゆら動く写真のカードカード系list-mask2

横スクロールのカード（手で動かす）カード系list-yoko-scroll1

お客様の声（横スクロール・文字だけ）お客様の声系list-yoko-scroll4

写真に文章が回り込む横長ブロック — 写真に文章が回り込む横長ブロックカード系list-yoko4-float

レイアウト 8

横長レイアウト（テキスト＋写真） — 横長レイアウト（テキスト＋写真）CTA系list-yoko5

横幅いっぱいレイアウト（テキスト＋写真） — 横幅いっぱいレイアウト（テキスト＋写真）CTA系ui-tools-flex2

汎用レイアウト（画像＋テキスト・配置選択） — 汎用レイアウト（画像＋テキスト・配置選択）カード系ui-tools-free1

コラージュ（写真2枚＋テキスト） — コラージュ（写真2枚＋テキスト）CTA系ui-tools-collage1

テキスト＋写真2枚（角丸と丸） — テキスト＋写真2枚（角丸と丸）CTA系ui-tools-flex3

見出しが追いかけてくるブロックスクロール固定系ui-tools-sticky1

写真が止まるブロック（順に重なる）スクロール固定系ui-tools-fixed1

写真が止まるブロック（ふわっと切り替え）スクロール固定系ui-tools-fixed2

埋め込み 4

埋め込み（YouTube・地図・iframe） — 埋め込み（YouTube・地図・iframe）単独embed

アクセス（案内＋地図） — アクセス（案内＋地図）単独ui-tools-access1

行き方の案内（アイコン付きの枠） — 行き方の案内（アイコン付きの枠）ステップ系ui-tools-access2

店舗情報（写真＋情報＋地図） — 店舗情報（写真＋情報＋地図）単独ui-tools-access3

基本セット 4

基本セット（見出し＋本文＋画像） — 基本セット（見出し＋本文＋画像）単独basic

箇条書き（中黒・番号） — 箇条書き（中黒・番号）単独list-bullet

ボタン（単体） — ボタン（単体）単独button

区切り線・余白 — 区切り線・余白単独divider

表・料金 4

料金表（プラン比較） — 料金表（プラン比較）単独ta-pricing1

多列テーブル（自由な列数） — 多列テーブル（自由な列数）単独ta-yoko

表（項目と内容） — 表（項目と内容）単独ta1

営業時間・曜日表 — 営業時間・曜日表単独ta-week1

装飾・効果 5

オーバーレイ（画像リンク・横並び）オーバーレイ系effects-overlay1

オーバーレイ（写真＋テキスト＋ボタン）オーバーレイ系effects-overlay2

横流れテキスト（マーキー）単独effects-slidetext1

サムネイル横スライド（写真の流れ）ギャラリー系effects-slideimg

パララックス背景（写真／動画）単独effects-bg-slideup