検索…

カタログ統計

CATALOG › UI Components › Modal / Accordion

モーダル / アコーディオン

開閉式の UI。FAQ、詳細展開、確認ダイアログの型。

Patterns

UI Components

Group

isValid=0

Verified

CSS

Animation

Accordion — Bordered Rows

accordion-bordered

Copy

Link

無料プランで使える機能は?

基本機能のすべてがご利用可能です。詳細はプラン比較表をご参照ください。

請求書・領収書は発行できますか?

はい、マイページから PDF をダウンロードいただけます。インボイス対応済みです。

導入サポートはありますか?

Enterprise プランには専任 CSM がつき、導入から運用まで伴走します。

パターン名: Accordion — Bordered Rows
概要: Accordion with top/bottom hairline borders between each row.
使用目的: Modal / Accordion領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, details, paragraph, details, paragraph, details, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Modal / Accordionをミニマルに見せる余白重視版 / Modal / Accordionをリッチに見せるカバー/カード強調版 / Modal / Accordionをコーポレート向けに整える情報密度高め版 / Modal / Accordionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/accordion-bordered"} /-->

CSS:
.section-accordion-bordered { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-accordion-bordered').forEach((el) => el.dataset.ready = 'true');

Accordion — Card Stack

accordion-card-stack

Copy

Link

返金ポリシーについて教えてください

30 日以内であれば全額返金いたします。サポート窓口までご連絡ください。

他社ツールからの移行はできますか?

はい、主要ツールからの CSV インポートに対応しています。移行ガイドもご用意。

チーム管理機能はありますか?

Pro プラン以上で、ロール / 権限管理 / 監査ログなどの機能がご利用いただけます。

パターン名: Accordion — Card Stack
概要: Accordion rows as individually rounded white cards on light background.
使用目的: Modal / Accordion領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, details, paragraph, details, paragraph, details, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Modal / Accordionをミニマルに見せる余白重視版 / Modal / Accordionをリッチに見せるカバー/カード強調版 / Modal / Accordionをコーポレート向けに整える情報密度高め版 / Modal / Accordionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/accordion-card-stack"} /-->

CSS:
.section-accordion-card-stack { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-accordion-card-stack').forEach((el) => el.dataset.ready = 'true');

Accordion — FAQ List (1 Open)

accordion-faq-open

Copy

Link

アコーディオン

サブスクリプションの解約方法は？

−

マイページ → アカウント設定 → サブスクリプションの順に進み、「解約する」ボタンをクリックしてください。期間中は引き続きご利用いただけます。

支払い方法を変更したい

領収書を発行できますか？

パターン名: Accordion — FAQ List (1 Open)
概要: Accordion FAQ list with first item expanded and rest collapsed (visual demo).
使用目的: Modal / Accordion領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 720px、主要ブロック group, heading, group, group, group, paragraph, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Modal / Accordionをミニマルに見せる余白重視版 / Modal / Accordionをリッチに見せるカバー/カード強調版 / Modal / Accordionをコーポレート向けに整える情報密度高め版 / Modal / Accordionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/accordion-faq-open"} /-->

CSS:
.section-accordion-faq-open { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-accordion-faq-open').forEach((el) => el.dataset.ready = 'true');

Modal — Confirmation Dialog

modal-dialog-card

Copy

Link

⚠️

本当に削除しますか？

この操作は取り消せません。プロジェクトと、それに紐づくすべてのデータが削除されます。

キャンセル

削除する

パターン名: Modal — Confirmation Dialog
概要: Modal-style confirmation dialog with cancel + destructive action buttons on dim backdrop.
使用目的: Modal / Accordion領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 480px、主要ブロック group, group, paragraph, heading, paragraph, buttons, button, button

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Modal / Accordionをリッチに見せるカバー/カード強調版 / Modal / Accordionをコーポレート向けに整える情報密度高め版 / Modal / Accordionをカジュアルに見せるアイコン/ラベル強調版 / Modal / Accordionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/modal-dialog-card"} /-->

CSS:
.section-modal-dialog-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-modal-dialog-card').forEach((el) => el.dataset.ready = 'true');

Modal — FX01 Accordion

fx-accordion

Copy

Link

営業時間は?

11:00〜22:00(L.O. 21:00)です。

パターン名: アコーディオン — Modal — FX01 Accordion
概要: 詳細ブロックが滑らかに開閉する
適用シーン: FAQ・詳細情報
使い方: 詳細(details)ブロックに fx-accordion

メリット: WP標準の詳細ブロックが上質に
デメリット: –
バリエーション案: 開閉速度
実装時の注意点: summary文言は詳細ブロックで編集

使い方: 詳細(details)ブロックに fx-accordion
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

モーダル / アコーディオン · Modal / Accordion · Blanc Nail

モーダル / アコーディオン

アコーディオン

本当に削除しますか？