検索…

カタログ統計

CATALOG › Business › Form UI

フォーム UI

入力フィールド、ラジオ、チェック、ステップフォーム部品集。

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

Form — Contact Card (Visual)

form-contact-card

Copy

Link

お問い合わせ

2 営業日以内にご返信いたします。お急ぎの方は電話でも承ります。

お名前

山田太郎

メールアドレス

[email protected]

お問い合わせ内容

ご質問やご要望をご記入ください…

送信する →

パターン名: Form — Contact Card (Visual)
概要: Static visual stub of a contact form (name / email / message + submit).
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, heading, paragraph, paragraph, group, paragraph, paragraph

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

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

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

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

Form — Login Card

form-login-card

Copy

Link

おかえりなさい

アカウント情報を入力してください

G ・ Google で続ける

— または —

メール

[email protected]

パスワード

••••••••

ログイン

アカウントをお持ちでないですか？新規登録

パターン名: Form — Login Card
概要: Compact login card with social SSO and email/password fields.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 440px、主要ブロック group, group, heading, paragraph, buttons, button, paragraph, paragraph

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

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

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

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

Form — Minimal Login Card

form-login-minimal

Copy

Link

パターン名: Form — Minimal Login Card
概要: Centered login card with email / password mock fields + primary submit.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 420px、主要ブロック group, group, heading, paragraph, group, paragraph, paragraph, buttons

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-login-minimal"} /-->

CSS:
.section-form-login-minimal { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-login-minimal').forEach((el) => el.dataset.ready = 'true');

Form — Hero Search Bar

form-search-bar

Copy

Link

何をお探しですか？

記事、動画、ドキュメントから、まとめて検索できます。

🔍 キーワードを入力…

検索

人気の検索: API リファレンス ・ 料金プラン ・ 導入事例

パターン名: Form — Hero Search Bar
概要: Centred hero search bar with rounded pill input and quick suggestions.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, heading, paragraph, group, paragraph, buttons, button, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-search-bar"} /-->

CSS:
.section-form-search-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-search-bar').forEach((el) => el.dataset.ready = 'true');

Form — Inline Search with Suggestions

form-search-inline

Copy

Link

何をお探しですか?

人気の検索: 料金・使い方・ブログ

パターン名: Form — Inline Search with Suggestions
概要: Centered pill-shape search bar with popular-search suggestions below.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 640px、主要ブロック group, heading, search, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-search-inline"} /-->

CSS:
.section-form-search-inline { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-search-inline').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 01 Sticky Entry

reference-complete-form-ui-01-sticky-entry-nii-recruit

Copy

Link

Sampled Site

16101 / Nii Recruit

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: Reference Complete — form-ui 01 Sticky Entry
概要: 参照サンプル再確認から追加したform-ui向け部品。固定導線つきの大判ファーストビュー。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 49283px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-01-sticky-entry-nii-recruit"} /-->

CSS:
.section-reference-complete-form-ui-01-sticky-entry-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-01-sticky-entry-nii-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 02 Editorial Issue

reference-complete-form-ui-02-editorial-issue-dac-web

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

記事を見る

パターン名: Reference Complete — form-ui 02 Editorial Issue
概要: 参照サンプル再確認から追加したform-ui向け部品。雑誌的な見出しと導入文の編集レイアウト。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 17122px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-02-editorial-issue-dac-web"} /-->

CSS:
.section-reference-complete-form-ui-02-editorial-issue-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-02-editorial-issue-dac-web').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 03 Brand Index

reference-complete-form-ui-03-brand-index-suntory-sic

Copy

Link

Card Flow

迷わない比較カード

Suntory Sic から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: Reference Complete — form-ui 03 Brand Index
概要: 参照サンプル再確認から追加したform-ui向け部品。複数ブランドやサービスを迷わせず並べる索引。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17183px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-03-brand-index-suntory-sic"} /-->

CSS:
.section-reference-complete-form-ui-03-brand-index-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-03-brand-index-suntory-sic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 04 Recruit Story

reference-complete-form-ui-04-recruit-story-mec-residence-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

Mec Residence Recruit の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: Reference Complete — form-ui 04 Recruit Story
概要: 参照サンプル再確認から追加したform-ui向け部品。採用・企業紹介に使える人物/思想の分割構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 17144px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-04-recruit-story-mec-residence-recruit"} /-->

CSS:
.section-reference-complete-form-ui-04-recruit-story-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-04-recruit-story-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 05 Commerce Compare

reference-complete-form-ui-05-commerce-compare-studio-cbr

Copy

Link

Collection Selector

Studio Cbr の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: Reference Complete — form-ui 05 Commerce Compare
概要: 参照サンプル再確認から追加したform-ui向け部品。料金・商品・プランを比較しやすい構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 17205px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-05-commerce-compare-studio-cbr"} /-->

CSS:
.section-reference-complete-form-ui-05-commerce-compare-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-05-commerce-compare-studio-cbr').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 06 Timeline Proof

reference-complete-form-ui-06-timeline-proof-mycampus

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: Reference Complete — form-ui 06 Timeline Proof
概要: 参照サンプル再確認から追加したform-ui向け部品。沿革・導入手順・制作工程の時系列。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17146px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-06-timeline-proof-mycampus"} /-->

CSS:
.section-reference-complete-form-ui-06-timeline-proof-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-06-timeline-proof-mycampus').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 07 Gallery Led

reference-complete-form-ui-07-gallery-led-spicato-daruma

Copy

Link

Detail

パターン名: Reference Complete — form-ui 07 Gallery Led
概要: 参照サンプル再確認から追加したform-ui向け部品。写真量の多い商材を見せるギャラリー導線。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 17227px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-07-gallery-led-spicato-daruma"} /-->

CSS:
.section-reference-complete-form-ui-07-gallery-led-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-07-gallery-led-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 08 Dashboard Proof

reference-complete-form-ui-08-dashboard-proof-notahotel-architects

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: Reference Complete — form-ui 08 Dashboard Proof
概要: 参照サンプル再確認から追加したform-ui向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 17188px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-08-dashboard-proof-notahotel-architects"} /-->

CSS:
.section-reference-complete-form-ui-08-dashboard-proof-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-08-dashboard-proof-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 09 Contact Ready

reference-complete-form-ui-09-contact-ready-echitora

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: Reference Complete — form-ui 09 Contact Ready
概要: 参照サンプル再確認から追加したform-ui向け部品。問い合わせ前の入力項目を整理する導線。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 17169px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-09-contact-ready-echitora"} /-->

CSS:
.section-reference-complete-form-ui-09-contact-ready-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-09-contact-ready-echitora').forEach((el) => el.dataset.ready = 'true');

Reference Complete — form-ui 10 Mobile Rail

reference-complete-form-ui-10-mobile-rail-meisei-kg

Copy

Link

Meisei

About

Works

Journal

Contact

Reserve

パターン名: Reference Complete — form-ui 10 Mobile Rail
概要: 参照サンプル再確認から追加したform-ui向け部品。スマホ閲覧で要点を縦に追えるレール型。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 17290px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-form-ui-10-mobile-rail-meisei-kg"} /-->

CSS:
.section-reference-complete-form-ui-10-mobile-rail-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-form-ui-10-mobile-rail-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 021 Echitora

sankou100-021-echitora

Copy

Link

Sampled Site

021 / Echitora

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: SANKOU100 — 021 Echitora
概要: SANKOU! sample 021から抽出したcover型の商用サイト向け構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 27% / 73%、推奨コンテンツ幅 1043px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-021-echitora"} /-->

CSS:
.section-sankou100-021-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-021-echitora').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 061 Niwaya

sankou100-061-niwaya

Copy

Link

Sampled Site

061 / Niwaya

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: SANKOU100 — 061 Niwaya
概要: SANKOU! sample 061から抽出したcover型の商用サイト向け構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 31% / 69%、推奨コンテンツ幅 1163px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-061-niwaya"} /-->

CSS:
.section-sankou100-061-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-061-niwaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 01 Ja Aichi Recruit

sankoumax-form-ui-01-ja-aichi-recruit

Copy

Link

Collection Selector

Ja Aichi Recruit の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — form-ui 01 Ja Aichi Recruit
概要: SANKOU100 sample setから展開したform-ui向けproduct構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4201px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-01-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-form-ui-01-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-01-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 02 Kiyasuku

sankoumax-form-ui-02-kiyasuku

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — form-ui 02 Kiyasuku
概要: SANKOU100 sample setから展開したform-ui向けtimeline構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4142px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-02-kiyasuku"} /-->

CSS:
.section-sankoumax-form-ui-02-kiyasuku { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-02-kiyasuku').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 03 Hirono Recruit

sankoumax-form-ui-03-hirono-recruit

Copy

Link

数字で納得させる

43%

改善率

10分

短縮

21821

導入数

パターン名: SANKOU Max — form-ui 03 Hirono Recruit
概要: SANKOU100 sample setから展開したform-ui向けstats構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4063px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-03-hirono-recruit"} /-->

CSS:
.section-sankoumax-form-ui-03-hirono-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-03-hirono-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 04 Ichizenbooks

sankoumax-form-ui-04-ichizenbooks

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — form-ui 04 Ichizenbooks
概要: SANKOU100 sample setから展開したform-ui向けcontact構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4184px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-04-ichizenbooks"} /-->

CSS:
.section-sankoumax-form-ui-04-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-04-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 05 Mec Residence Recruit

sankoumax-form-ui-05-mec-residence-recruit

Copy

Link

Mec Residence Recruit

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 3105

パターン名: SANKOU Max — form-ui 05 Mec Residence Recruit
概要: SANKOU100 sample setから展開したform-ui向けfooter構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4225px、主要ブロック group, columns, column, heading, paragraph, column, list, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-05-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-form-ui-05-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-05-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 06 Greenpark Santo

sankoumax-form-ui-06-greenpark-santo

Copy

Link

NEWS

Greenpark Santo から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — form-ui 06 Greenpark Santo
概要: SANKOU100 sample setから展開したform-ui向けalert構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4186px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-06-greenpark-santo"} /-->

CSS:
.section-sankoumax-form-ui-06-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-06-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 07 Land Sapporo

sankoumax-form-ui-07-land-sapporo

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — form-ui 07 Land Sapporo
概要: SANKOU100 sample setから展開したform-ui向けmap構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4147px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-07-land-sapporo"} /-->

CSS:
.section-sankoumax-form-ui-07-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-07-land-sapporo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 08 Tokachi Fruits

sankoumax-form-ui-08-tokachi-fruits

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — form-ui 08 Tokachi Fruits
概要: SANKOU100 sample setから展開したform-ui向けform構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4168px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-08-tokachi-fruits"} /-->

CSS:
.section-sankoumax-form-ui-08-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-08-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 09 Echitora

sankoumax-form-ui-09-echitora

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — form-ui 09 Echitora
概要: SANKOU100 sample setから展開したform-ui向けtabs構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4089px、主要ブロック group, group, columns, column, group, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-09-echitora"} /-->

CSS:
.section-sankoumax-form-ui-09-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-09-echitora').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 10 Megamis

sankoumax-form-ui-10-megamis

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — form-ui 10 Megamis
概要: SANKOU100 sample setから展開したform-ui向けdashboard構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4190px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-10-megamis"} /-->

CSS:
.section-sankoumax-form-ui-10-megamis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-10-megamis').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 11 Kagami

sankoumax-form-ui-11-kagami

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — form-ui 11 Kagami
概要: SANKOU100 sample setから展開したform-ui向けfaq構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4031px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-11-kagami"} /-->

CSS:
.section-sankoumax-form-ui-11-kagami { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-11-kagami').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 12 Antscr

sankoumax-form-ui-12-antscr

Copy

Link

Detail

パターン名: SANKOU Max — form-ui 12 Antscr
概要: SANKOU100 sample setから展開したform-ui向けgallery構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4232px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-12-antscr"} /-->

CSS:
.section-sankoumax-form-ui-12-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-12-antscr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 13 Meisei Kg

sankoumax-form-ui-13-meisei-kg

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — form-ui 13 Meisei Kg
概要: SANKOU100 sample setから展開したform-ui向けroster構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4233px、主要ブロック group, heading, columns, column, image, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-13-meisei-kg"} /-->

CSS:
.section-sankoumax-form-ui-13-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-13-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 14 Iamwithyou

sankoumax-form-ui-14-iamwithyou

Copy

Link

3114

Iamwithyou

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — form-ui 14 Iamwithyou
概要: SANKOU100 sample setから展開したform-ui向けmanifesto構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4014px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-14-iamwithyou"} /-->

CSS:
.section-sankoumax-form-ui-14-iamwithyou { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-14-iamwithyou').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 15 Depsoa

sankoumax-form-ui-15-depsoa

Copy

Link

Sampled Site

3115 / Depsoa

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: SANKOU Max — form-ui 15 Depsoa
概要: SANKOU100 sample setから展開したform-ui向けcover構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 10325px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-15-depsoa"} /-->

CSS:
.section-sankoumax-form-ui-15-depsoa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-15-depsoa').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 16 Nothing Tech

sankoumax-form-ui-16-nothing-tech

Copy

Link

Split Story

写真と要点で信頼を作る

Nothing Tech の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — form-ui 16 Nothing Tech
概要: SANKOU100 sample setから展開したform-ui向けsplit構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 4156px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-16-nothing-tech"} /-->

CSS:
.section-sankoumax-form-ui-16-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-16-nothing-tech').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 17 Upvege

sankoumax-form-ui-17-upvege

Copy

Link

Card Flow

迷わない比較カード

Upvege から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — form-ui 17 Upvege
概要: SANKOU100 sample setから展開したform-ui向けcards構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4197px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-17-upvege"} /-->

CSS:
.section-sankoumax-form-ui-17-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-17-upvege').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 18 Fujiya1935

sankoumax-form-ui-18-fujiya1935

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

3118

パターン名: SANKOU Max — form-ui 18 Fujiya1935
概要: SANKOU100 sample setから展開したform-ui向けcollage構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 36% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 4238px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-18-fujiya1935"} /-->

CSS:
.section-sankoumax-form-ui-18-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-18-fujiya1935').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 19 Omodakaya

sankoumax-form-ui-19-omodakaya

Copy

Link

Omodakaya

About

Works

Journal

Contact

Reserve

パターン名: SANKOU Max — form-ui 19 Omodakaya
概要: SANKOU100 sample setから展開したform-ui向けrail構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4299px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-19-omodakaya"} /-->

CSS:
.section-sankoumax-form-ui-19-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-19-omodakaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 20 Favtown

sankoumax-form-ui-20-favtown

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

記事を見る

パターン名: SANKOU Max — form-ui 20 Favtown
概要: SANKOU100 sample setから展開したform-ui向けeditorial構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 56% / 1px、推奨コンテンツ幅 4140px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-20-favtown"} /-->

CSS:
.section-sankoumax-form-ui-20-favtown { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-20-favtown').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 21 Mizuya Kyoto

sankoumax-form-ui-21-mizuya-kyoto

Copy

Link

Collection Selector

Mizuya Kyoto の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — form-ui 21 Mizuya Kyoto
概要: SANKOU100 sample setから展開したform-ui向けproduct構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4221px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-21-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-form-ui-21-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-21-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 22 Allright Inc

sankoumax-form-ui-22-allright-inc

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — form-ui 22 Allright Inc
概要: SANKOU100 sample setから展開したform-ui向けtimeline構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4162px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-22-allright-inc"} /-->

CSS:
.section-sankoumax-form-ui-22-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-22-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 23 Jins Holdings

sankoumax-form-ui-23-jins-holdings

Copy

Link

数字で納得させる

63%

改善率

3分

短縮

21961

導入数

パターン名: SANKOU Max — form-ui 23 Jins Holdings
概要: SANKOU100 sample setから展開したform-ui向けstats構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4083px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-23-jins-holdings"} /-->

CSS:
.section-sankoumax-form-ui-23-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-23-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 24 Tsuchitokaze

sankoumax-form-ui-24-tsuchitokaze

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — form-ui 24 Tsuchitokaze
概要: SANKOU100 sample setから展開したform-ui向けcontact構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 54% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4204px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-24-tsuchitokaze"} /-->

CSS:
.section-sankoumax-form-ui-24-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-24-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 25 Yamato 50Th

sankoumax-form-ui-25-yamato-50th

Copy

Link

Yamato 50Th

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 3125

パターン名: SANKOU Max — form-ui 25 Yamato 50Th
概要: SANKOU100 sample setから展開したform-ui向けfooter構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4245px、主要ブロック group, columns, column, heading, paragraph, column, list, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-25-yamato-50th"} /-->

CSS:
.section-sankoumax-form-ui-25-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-25-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 26 Action Npo

sankoumax-form-ui-26-action-npo

Copy

Link

NEWS

Action Npo から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — form-ui 26 Action Npo
概要: SANKOU100 sample setから展開したform-ui向けalert構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4206px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-26-action-npo"} /-->

CSS:
.section-sankoumax-form-ui-26-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-26-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 27 Mycampus

sankoumax-form-ui-27-mycampus

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — form-ui 27 Mycampus
概要: SANKOU100 sample setから展開したform-ui向けmap構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4167px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-27-mycampus"} /-->

CSS:
.section-sankoumax-form-ui-27-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-27-mycampus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 28 Mejinavi

sankoumax-form-ui-28-mejinavi

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — form-ui 28 Mejinavi
概要: SANKOU100 sample setから展開したform-ui向けform構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4188px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-28-mejinavi"} /-->

CSS:
.section-sankoumax-form-ui-28-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-28-mejinavi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 29 Niwaya

sankoumax-form-ui-29-niwaya

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — form-ui 29 Niwaya
概要: SANKOU100 sample setから展開したform-ui向けtabs構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4109px、主要ブロック group, group, columns, column, group, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-29-niwaya"} /-->

CSS:
.section-sankoumax-form-ui-29-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-29-niwaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 30 Mindful Connect

sankoumax-form-ui-30-mindful-connect

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — form-ui 30 Mindful Connect
概要: SANKOU100 sample setから展開したform-ui向けdashboard構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4210px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-30-mindful-connect"} /-->

CSS:
.section-sankoumax-form-ui-30-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-30-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 31 Spicato Daruma

sankoumax-form-ui-31-spicato-daruma

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — form-ui 31 Spicato Daruma
概要: SANKOU100 sample setから展開したform-ui向けfaq構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4051px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-31-spicato-daruma"} /-->

CSS:
.section-sankoumax-form-ui-31-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-31-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 32 Morohoshi Portfolio

sankoumax-form-ui-32-morohoshi-portfolio

Copy

Link

Detail

パターン名: SANKOU Max — form-ui 32 Morohoshi Portfolio
概要: SANKOU100 sample setから展開したform-ui向けgallery構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4252px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-32-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-form-ui-32-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-32-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 33 Vision Structure

sankoumax-form-ui-33-vision-structure

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — form-ui 33 Vision Structure
概要: SANKOU100 sample setから展開したform-ui向けroster構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4253px、主要ブロック group, heading, columns, column, image, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-33-vision-structure"} /-->

CSS:
.section-sankoumax-form-ui-33-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-33-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 34 Nakiri Shota

sankoumax-form-ui-34-nakiri-shota

Copy

Link

3134

Nakiri Shota

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

パターン名: SANKOU Max — form-ui 34 Nakiri Shota
概要: SANKOU100 sample setから展開したform-ui向けmanifesto構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4034px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-34-nakiri-shota"} /-->

CSS:
.section-sankoumax-form-ui-34-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-34-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 35 Koba Clinic

sankoumax-form-ui-35-koba-clinic

Copy

Link

Sampled Site

3135 / Koba Clinic

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る

パターン名: SANKOU Max — form-ui 35 Koba Clinic
概要: SANKOU100 sample setから展開したform-ui向けcover構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 27% / 73%、推奨コンテンツ幅 10385px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-35-koba-clinic"} /-->

CSS:
.section-sankoumax-form-ui-35-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-35-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 36 Ems Recruit

sankoumax-form-ui-36-ems-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

Ems Recruit の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

パターン名: SANKOU Max — form-ui 36 Ems Recruit
概要: SANKOU100 sample setから展開したform-ui向けsplit構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 4176px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-36-ems-recruit"} /-->

CSS:
.section-sankoumax-form-ui-36-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-36-ems-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 37 Felissimo Panda

sankoumax-form-ui-37-felissimo-panda

Copy

Link

Card Flow

迷わない比較カード

Felissimo Panda から抽出した、選択を促すカード群。

見つける

導線を小さな判断単位に分解します。

選ぶ

導線を小さな判断単位に分解します。

進む

導線を小さな判断単位に分解します。

パターン名: SANKOU Max — form-ui 37 Felissimo Panda
概要: SANKOU100 sample setから展開したform-ui向けcards構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4217px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-37-felissimo-panda"} /-->

CSS:
.section-sankoumax-form-ui-37-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-37-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 38 Iriam Miraito

sankoumax-form-ui-38-iriam-miraito

Copy

Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

3138

パターン名: SANKOU Max — form-ui 38 Iriam Miraito
概要: SANKOU100 sample setから展開したform-ui向けcollage構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 32% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 4258px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-38-iriam-miraito"} /-->

CSS:
.section-sankoumax-form-ui-38-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-38-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 39 Gaaboo

sankoumax-form-ui-39-gaaboo

Copy

Link

Gaaboo

About

Works

Journal

Contact

Reserve

パターン名: SANKOU Max — form-ui 39 Gaaboo
概要: SANKOU100 sample setから展開したform-ui向けrail構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4319px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-39-gaaboo"} /-->

CSS:
.section-sankoumax-form-ui-39-gaaboo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-39-gaaboo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 40 Violet Patisserie

sankoumax-form-ui-40-violet-patisserie

Copy

Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

背景を伝える
選ぶ理由を示す
次の行動へ進める

記事を見る

パターン名: SANKOU Max — form-ui 40 Violet Patisserie
概要: SANKOU100 sample setから展開したform-ui向けeditorial構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 48% / 52% / 1px、推奨コンテンツ幅 4160px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-40-violet-patisserie"} /-->

CSS:
.section-sankoumax-form-ui-40-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-40-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 41 Nii Recruit

sankoumax-form-ui-41-nii-recruit

Copy

Link

Collection Selector

Nii Recruit の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

パターン名: SANKOU Max — form-ui 41 Nii Recruit
概要: SANKOU100 sample setから展開したform-ui向けproduct構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4241px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-41-nii-recruit"} /-->

CSS:
.section-sankoumax-form-ui-41-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-41-nii-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 42 Saranosono

sankoumax-form-ui-42-saranosono

Copy

Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

パターン名: SANKOU Max — form-ui 42 Saranosono
概要: SANKOU100 sample setから展開したform-ui向けtimeline構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4182px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-42-saranosono"} /-->

CSS:
.section-sankoumax-form-ui-42-saranosono { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-42-saranosono').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 43 Dac Web

sankoumax-form-ui-43-dac-web

Copy

Link

数字で納得させる

83%

改善率

5分

短縮

22101

導入数

パターン名: SANKOU Max — form-ui 43 Dac Web
概要: SANKOU100 sample setから展開したform-ui向けstats構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4103px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-43-dac-web"} /-->

CSS:
.section-sankoumax-form-ui-43-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-43-dac-web').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 44 Asuzac Recruit

sankoumax-form-ui-44-asuzac-recruit

Copy

Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

パターン名: SANKOU Max — form-ui 44 Asuzac Recruit
概要: SANKOU100 sample setから展開したform-ui向けcontact構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4224px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-44-asuzac-recruit"} /-->

CSS:
.section-sankoumax-form-ui-44-asuzac-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-44-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 45 Suntory Sic

sankoumax-form-ui-45-suntory-sic

Copy

Link

Suntory Sic

商用サイトの締めに必要な主要リンクを整理します。

About
Service
Works

News
Recruit
Contact

Sample 3145

パターン名: SANKOU Max — form-ui 45 Suntory Sic
概要: SANKOU100 sample setから展開したform-ui向けfooter構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4265px、主要ブロック group, columns, column, heading, paragraph, column, list, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-45-suntory-sic"} /-->

CSS:
.section-sankoumax-form-ui-45-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-45-suntory-sic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 46 Amano Clinic

sankoumax-form-ui-46-amano-clinic

Copy

Link

NEWS

Amano Clinic から抽出した告知導線。重要なお知らせを短く表示します。

確認する

パターン名: SANKOU Max — form-ui 46 Amano Clinic
概要: SANKOU100 sample setから展開したform-ui向けalert構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4226px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-46-amano-clinic"} /-->

CSS:
.section-sankoumax-form-ui-46-amano-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-46-amano-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 47 Infocus

sankoumax-form-ui-47-infocus

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — form-ui 47 Infocus
概要: SANKOU100 sample setから展開したform-ui向けmap構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4187px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-47-infocus"} /-->

CSS:
.section-sankoumax-form-ui-47-infocus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-47-infocus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 48 Tomore

sankoumax-form-ui-48-tomore

Copy

Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — form-ui 48 Tomore
概要: SANKOU100 sample setから展開したform-ui向けform構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4208px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-48-tomore"} /-->

CSS:
.section-sankoumax-form-ui-48-tomore { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-48-tomore').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 49 Dan Brise Barber

sankoumax-form-ui-49-dan-brise-barber

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

パターン名: SANKOU Max — form-ui 49 Dan Brise Barber
概要: SANKOU100 sample setから展開したform-ui向けtabs構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4129px、主要ブロック group, group, columns, column, group, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-49-dan-brise-barber"} /-->

CSS:
.section-sankoumax-form-ui-49-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-49-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 50 Allureville Elements

sankoumax-form-ui-50-allureville-elements

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

パターン名: SANKOU Max — form-ui 50 Allureville Elements
概要: SANKOU100 sample setから展開したform-ui向けdashboard構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4230px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-50-allureville-elements"} /-->

CSS:
.section-sankoumax-form-ui-50-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-50-allureville-elements').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 51 Studio Cbr

sankoumax-form-ui-51-studio-cbr

Copy

Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

パターン名: SANKOU Max — form-ui 51 Studio Cbr
概要: SANKOU100 sample setから展開したform-ui向けfaq構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4071px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-51-studio-cbr"} /-->

CSS:
.section-sankoumax-form-ui-51-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-51-studio-cbr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 52 Yamakachi

sankoumax-form-ui-52-yamakachi

Copy

Link

Detail

パターン名: SANKOU Max — form-ui 52 Yamakachi
概要: SANKOU100 sample setから展開したform-ui向けgallery構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4272px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-52-yamakachi"} /-->

CSS:
.section-sankoumax-form-ui-52-yamakachi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-52-yamakachi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — form-ui 53 Chiikawa Pocket

sankoumax-form-ui-53-chiikawa-pocket

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — form-ui 53 Chiikawa Pocket
概要: SANKOU100 sample setから展開したform-ui向けroster構成。
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4273px、主要ブロック group, heading, columns, column, image, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-form-ui-53-chiikawa-pocket"} /-->

CSS:
.section-sankoumax-form-ui-53-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-form-ui-53-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

フォーム UI · Form UI · Blanc Nail

フォーム UI

お問い合わせ

おかえりなさい

ログイン

何をお探しですか？

何をお探しですか?

商用サイトの入口を強くする

読み物のように理解させる

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

体験の流れを一列で見せる

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Meisei

商用サイトの入口を強くする

商用サイトの入口を強くする

Collection Selector

選びやすい商品導線

体験の流れを一列で見せる

出会う

試す

続ける

数字で納得させる

43%

10分

21821

次の相談先を明確にする

Mec Residence Recruit

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

不安を先回りして解消する

People Line

静かな思想を置く

商用サイトの入口を強くする

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Omodakaya

読み物のように理解させる

Collection Selector

選びやすい商品導線

体験の流れを一列で見せる

出会う

試す

続ける

数字で納得させる

63%

3分

21961

次の相談先を明確にする

Yamato 50Th

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

不安を先回りして解消する

People Line

静かな思想を置く

商用サイトの入口を強くする

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ