検索…

カタログ統計

CATALOG › Business › Menu (F&B)

メニュー (飲食)

飲食店メニュー。コース、ドリンク、季節メニュー、価格表記。

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

Menu — Allergen Badge Board

menu-allergen-badge-board

Copy

Link

SAFETY NOTE

アレルギー・食事制限の表示

Gluten

小麦

パン、パスタ、揚げ衣を含むメニューに表示します。

Egg

卵

ソースや焼き菓子など、見えにくい材料も補足します。

Milk

乳

チーズ、バター、生クリームを含む料理の注意喚起に使います。

Vegan

植物性

ヴィーガン、ベジタリアン対応メニューを一覧化します。

パターン名: Menu — Allergen Badge Board
概要: Four badge cards for allergens and dietary restrictions.
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-allergen-badge-board"} /-->

CSS:
.section-menu-allergen-badge-board { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-allergen-badge-board').forEach((el) => el.dataset.ready = 'true');

Menu — Tasting Course List

menu-course-list

Copy

Link

— OMAKASE COURSE —

夜のおまかせコース

先付け・三種盛り

旬の食材をひと口ずつ。季節の挨拶として。

¥1,800

お椀・蛤の清汁仕立て

産地直送の蛤を、出汁の香りとともに。

¥2,200

お造り・本日の三種

築地から届いた、その日の魚を厳選してお出しいたします。

¥3,400

締め・季節の土鍋御飯

旬の食材を、土鍋でふっくら炊き上げて。お一人さま一杯までおかわり。

¥1,600

パターン名: Menu — Tasting Course List
概要: Course menu list on dark background, kaiseki / tasting style.
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, group, group, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-course-list"} /-->

CSS:
.section-menu-course-list { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-course-list').forEach((el) => el.dataset.ready = 'true');

Menu — Drinks 2-Column List

menu-drinks-2col

Copy

Link

ドリンクメニュー

COFFEE

ハンドドリップコーヒー

¥580

エスプレッソ

¥420

ラテ・カプチーノ

¥620

SOFT & TEA

煎茶・玄米茶

¥480

アールグレイティー

¥520

本日のフレッシュジュース

¥780

パターン名: Menu — Drinks 2-Column List
概要: Two-column drinks menu (coffee, tea, soft) with category headers.
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, heading, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-drinks-2col"} /-->

CSS:
.section-menu-drinks-2col { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-drinks-2col').forEach((el) => el.dataset.ready = 'true');

Menu — Featured Dishes 3-Up

menu-food-grid

Copy

Link

— MENU —

本日のおすすめ

🍝

渡り蟹のトマトクリームパスタ

北海道産の渡り蟹を、特製トマトクリームソースで仕上げた看板メニュー。

¥1,980

🥗

グリーンサラダボウル

契約農家の有機野菜 8 種類と、自家製キヌアドレッシング。

¥1,480

🥩

和牛のローストビーフ

低温調理でしっとり仕上げた、特選黒毛和牛のローストビーフ。

¥2,680

パターン名: Menu — Featured Dishes 3-Up
概要: Three featured menu items with photo, description and price (cafe / bistro style).
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, cover, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-food-grid"} /-->

CSS:
.section-menu-food-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-food-grid').forEach((el) => el.dataset.ready = 'true');

Menu — Lunch Set Matrix

menu-lunch-set-matrix

Copy

Link

LUNCH SET

ランチセット比較

Daily

Standard

¥1,280

メイン、サラダ、スープ。短時間のランチ導線に向いた基本セット。

Balanced

Healthy

¥1,480

野菜多めの主菜、玄米、デリ 2 種。健康志向の訴求に適しています。

Popular

Premium

¥1,980

季節の主菜、前菜、デザート、ドリンク。週末や記念日に向いた構成。

パターン名: Menu — Lunch Set Matrix
概要: Three lunch-set cards comparing price, purpose and included items.
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-lunch-set-matrix"} /-->

CSS:
.section-menu-lunch-set-matrix { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-lunch-set-matrix').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 01 Sticky Entry

reference-complete-menu-01-sticky-entry-trail-inc

Copy

Link

Sampled Site

16001 / Trail Inc

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-01-sticky-entry-trail-inc"} /-->

CSS:
.section-reference-complete-menu-01-sticky-entry-trail-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-01-sticky-entry-trail-inc').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 02 Editorial Issue

reference-complete-menu-02-editorial-issue-meisei-es

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-02-editorial-issue-meisei-es"} /-->

CSS:
.section-reference-complete-menu-02-editorial-issue-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-02-editorial-issue-meisei-es').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 03 Brand Index

reference-complete-menu-03-brand-index-uki-editions

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-03-brand-index-uki-editions"} /-->

CSS:
.section-reference-complete-menu-03-brand-index-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-03-brand-index-uki-editions').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 04 Recruit Story

reference-complete-menu-04-recruit-story-morohoshi-portfolio

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-04-recruit-story-morohoshi-portfolio"} /-->

CSS:
.section-reference-complete-menu-04-recruit-story-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-04-recruit-story-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 05 Commerce Compare

reference-complete-menu-05-commerce-compare-montblanc-pictures

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-05-commerce-compare-montblanc-pictures"} /-->

CSS:
.section-reference-complete-menu-05-commerce-compare-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-05-commerce-compare-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 06 Timeline Proof

reference-complete-menu-06-timeline-proof-chiba-dojo

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-06-timeline-proof-chiba-dojo"} /-->

CSS:
.section-reference-complete-menu-06-timeline-proof-chiba-dojo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-06-timeline-proof-chiba-dojo').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 07 Gallery Led

reference-complete-menu-07-gallery-led-anbe-shoten

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-07-gallery-led-anbe-shoten"} /-->

CSS:
.section-reference-complete-menu-07-gallery-led-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-07-gallery-led-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 08 Dashboard Proof

reference-complete-menu-08-dashboard-proof-ichizenbooks

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-08-dashboard-proof-ichizenbooks"} /-->

CSS:
.section-reference-complete-menu-08-dashboard-proof-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-08-dashboard-proof-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 09 Contact Ready

reference-complete-menu-09-contact-ready-ems-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-09-contact-ready-ems-recruit"} /-->

CSS:
.section-reference-complete-menu-09-contact-ready-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-09-contact-ready-ems-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — menu 10 Mobile Rail

reference-complete-menu-10-mobile-rail-violet-patisserie

Copy

Link

Violet

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-menu-10-mobile-rail-violet-patisserie"} /-->

CSS:
.section-reference-complete-menu-10-mobile-rail-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-menu-10-mobile-rail-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

Reference Brand — Editorial Menu Board

reference-editorial-menu-board

Copy

Link

余白で価格を上品に見せる。

サロン、飲食、体験型サービスのメニューに使えます。

Signature

Nuance course 8,800円
Care course 6,600円
Order course 12,100円から

Option

Off 3,300円
Parts 110円から
Repair 550円から

パターン名: Reference Brand — Editorial Menu Board
概要: 価格表をブランドサイト風に見せる暗色メニューボード。
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 38% / 62% / 1px / 1px、推奨コンテンツ幅 1120px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-editorial-menu-board"} /-->

CSS:
.section-reference-editorial-menu-board { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-editorial-menu-board').forEach((el) => el.dataset.ready = 'true');

SANKOU — Harvest Icon Row Story

sankou-harvest-icon-row-story

Copy

Link

Harvest

一粒から始まる物語

余白の広い画面に小さなアイコン列を置く食品・地域ブランド向け構成。

APPLE

LEMON

GRAPE

PEAR

パターン名: SANKOU — Harvest Icon Row Story
概要: 食品・地域ブランド向けのアイコン列付きストーリー導線。
使用目的: Menu (F&B)領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 1120px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-harvest-icon-row-story"} /-->

CSS:
.section-sankou-harvest-icon-row-story { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-harvest-icon-row-story').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 012 Allright Inc

sankou100-012-allright-inc

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-012-allright-inc"} /-->

CSS:
.section-sankou100-012-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-012-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 052 Saranosono

sankou100-052-saranosono

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU100 — 092 Chugaitoen

sankou100-092-chugaitoen

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — menu 01 Meisei Es

sankoumax-menu-01-meisei-es

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-01-meisei-es"} /-->

CSS:
.section-sankoumax-menu-01-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-01-meisei-es').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 02 Unicell

sankoumax-menu-02-unicell

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-02-unicell"} /-->

CSS:
.section-sankoumax-menu-02-unicell { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 03 Uki Editions

sankoumax-menu-03-uki-editions

Copy

Link

Collage

素材感を重ねる

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

3003

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-03-uki-editions"} /-->

CSS:
.section-sankoumax-menu-03-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-03-uki-editions').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 04 Kikyougaoka

sankoumax-menu-04-kikyougaoka

Copy

Link

Kikyougaoka

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-04-kikyougaoka"} /-->

CSS:
.section-sankoumax-menu-04-kikyougaoka { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 05 J Security

sankoumax-menu-05-j-security

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-05-j-security"} /-->

CSS:
.section-sankoumax-menu-05-j-security { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-05-j-security').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 06 Serious Ceramic

sankoumax-menu-06-serious-ceramic

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-06-serious-ceramic"} /-->

CSS:
.section-sankoumax-menu-06-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-06-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 07 Tsumari Chamame

sankoumax-menu-07-tsumari-chamame

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-07-tsumari-chamame"} /-->

CSS:
.section-sankoumax-menu-07-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-07-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 08 Notahotel Architects

sankoumax-menu-08-notahotel-architects

Copy

Link

数字で納得させる

88%

改善率

5分

短縮

21156

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-08-notahotel-architects"} /-->

CSS:
.section-sankoumax-menu-08-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-08-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 09 Montblanc Pictures

sankoumax-menu-09-montblanc-pictures

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-09-montblanc-pictures"} /-->

CSS:
.section-sankoumax-menu-09-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-09-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 10 Tattoo Rays

sankoumax-menu-10-tattoo-rays

Copy

Link

Tattoo Rays

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

About
Service
Works

News
Recruit
Contact

Sample 3010

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-10-tattoo-rays"} /-->

CSS:
.section-sankoumax-menu-10-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-10-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 11 Rim Jins

sankoumax-menu-11-rim-jins

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-11-rim-jins"} /-->

CSS:
.section-sankoumax-menu-11-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-11-rim-jins').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 12 Obunko

sankoumax-menu-12-obunko

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-12-obunko"} /-->

CSS:
.section-sankoumax-menu-12-obunko { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 13 Pronets Recruit

sankoumax-menu-13-pronets-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-13-pronets-recruit"} /-->

CSS:
.section-sankoumax-menu-13-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-13-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 14 Glanta

sankoumax-menu-14-glanta

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-14-glanta"} /-->

CSS:
.section-sankoumax-menu-14-glanta { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 15 Tashi Portfolio

sankoumax-menu-15-tashi-portfolio

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-15-tashi-portfolio"} /-->

CSS:
.section-sankoumax-menu-15-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-15-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 16 Kitanohashi

sankoumax-menu-16-kitanohashi

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-16-kitanohashi"} /-->

CSS:
.section-sankoumax-menu-16-kitanohashi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-16-kitanohashi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 17 Morinosato Clinic

sankoumax-menu-17-morinosato-clinic

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-17-morinosato-clinic"} /-->

CSS:
.section-sankoumax-menu-17-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-17-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 18 Asuzac Highschool

sankoumax-menu-18-asuzac-highschool

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-18-asuzac-highschool"} /-->

CSS:
.section-sankoumax-menu-18-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-18-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 19 Junni Newyear

sankoumax-menu-19-junni-newyear

Copy

Link

3019

Junni Newyear

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-19-junni-newyear"} /-->

CSS:
.section-sankoumax-menu-19-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-19-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 20 Mizota Ks

sankoumax-menu-20-mizota-ks

Copy

Link

Sampled Site

3020 / Mizota Ks

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-20-mizota-ks"} /-->

CSS:
.section-sankoumax-menu-20-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-20-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 21 Nissan Career

sankoumax-menu-21-nissan-career

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-21-nissan-career"} /-->

CSS:
.section-sankoumax-menu-21-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-21-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 22 Shueisha Recruit

sankoumax-menu-22-shueisha-recruit

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-22-shueisha-recruit"} /-->

CSS:
.section-sankoumax-menu-22-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-22-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 23 Sanu Weekday

sankoumax-menu-23-sanu-weekday

Copy

Link

Collage

素材感を重ねる

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

3023

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-23-sanu-weekday"} /-->

CSS:
.section-sankoumax-menu-23-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-23-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 24 Newspicks Business

sankoumax-menu-24-newspicks-business

Copy

Link

Newspicks

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-24-newspicks-business"} /-->

CSS:
.section-sankoumax-menu-24-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-24-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 25 Miyakawa Lab

sankoumax-menu-25-miyakawa-lab

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-25-miyakawa-lab"} /-->

CSS:
.section-sankoumax-menu-25-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-25-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 26 Matsuo Komuten

sankoumax-menu-26-matsuo-komuten

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-26-matsuo-komuten"} /-->

CSS:
.section-sankoumax-menu-26-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-26-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 27 Yokohama Timberwharf

sankoumax-menu-27-yokohama-timberwharf

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-27-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-menu-27-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-27-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 28 Janu

sankoumax-menu-28-janu

Copy

Link

数字で納得させる

38%

改善率

7分

短縮

21296

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-28-janu"} /-->

CSS:
.section-sankoumax-menu-28-janu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 29 Daimatsu

sankoumax-menu-29-daimatsu

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-29-daimatsu"} /-->

CSS:
.section-sankoumax-menu-29-daimatsu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 30 Omotesando Ortho

sankoumax-menu-30-omotesando-ortho

Copy

Link

Omotesando Ortho

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

About
Service
Works

News
Recruit
Contact

Sample 3030

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-30-omotesando-ortho"} /-->

CSS:
.section-sankoumax-menu-30-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-30-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 31 Dodasports

sankoumax-menu-31-dodasports

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-31-dodasports"} /-->

CSS:
.section-sankoumax-menu-31-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-menu-31-dodasports').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — menu 32 Ja Aichi Recruit

sankoumax-menu-32-ja-aichi-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-32-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-menu-32-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 33 Kiyasuku

sankoumax-menu-33-kiyasuku

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-33-kiyasuku"} /-->

CSS:
.section-sankoumax-menu-33-kiyasuku { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 34 Hirono Recruit

sankoumax-menu-34-hirono-recruit

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-34-hirono-recruit"} /-->

CSS:
.section-sankoumax-menu-34-hirono-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 35 Ichizenbooks

sankoumax-menu-35-ichizenbooks

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-35-ichizenbooks"} /-->

CSS:
.section-sankoumax-menu-35-ichizenbooks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 36 Mec Residence Recruit

sankoumax-menu-36-mec-residence-recruit

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-36-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-menu-36-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 37 Greenpark Santo

sankoumax-menu-37-greenpark-santo

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-37-greenpark-santo"} /-->

CSS:
.section-sankoumax-menu-37-greenpark-santo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 38 Land Sapporo

sankoumax-menu-38-land-sapporo

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-38-land-sapporo"} /-->

CSS:
.section-sankoumax-menu-38-land-sapporo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 39 Tokachi Fruits

sankoumax-menu-39-tokachi-fruits

Copy

Link

3039

Tokachi Fruits

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-39-tokachi-fruits"} /-->

CSS:
.section-sankoumax-menu-39-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 40 Echitora

sankoumax-menu-40-echitora

Copy

Link

Sampled Site

3040 / Echitora

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-40-echitora"} /-->

CSS:
.section-sankoumax-menu-40-echitora { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 41 Megamis

sankoumax-menu-41-megamis

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-41-megamis"} /-->

CSS:
.section-sankoumax-menu-41-megamis { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 42 Kagami

sankoumax-menu-42-kagami

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-42-kagami"} /-->

CSS:
.section-sankoumax-menu-42-kagami { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 43 Antscr

sankoumax-menu-43-antscr

Copy

Link

Collage

素材感を重ねる

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

3043

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-43-antscr"} /-->

CSS:
.section-sankoumax-menu-43-antscr { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 44 Meisei Kg

sankoumax-menu-44-meisei-kg

Copy

Link

Meisei

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-44-meisei-kg"} /-->

CSS:
.section-sankoumax-menu-44-meisei-kg { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 45 Iamwithyou

sankoumax-menu-45-iamwithyou

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-45-iamwithyou"} /-->

CSS:
.section-sankoumax-menu-45-iamwithyou { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 46 Depsoa

sankoumax-menu-46-depsoa

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-46-depsoa"} /-->

CSS:
.section-sankoumax-menu-46-depsoa { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 47 Nothing Tech

sankoumax-menu-47-nothing-tech

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-47-nothing-tech"} /-->

CSS:
.section-sankoumax-menu-47-nothing-tech { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 48 Upvege

sankoumax-menu-48-upvege

Copy

Link

数字で納得させる

58%

改善率

9分

短縮

21436

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-48-upvege"} /-->

CSS:
.section-sankoumax-menu-48-upvege { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 49 Fujiya1935

sankoumax-menu-49-fujiya1935

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-49-fujiya1935"} /-->

CSS:
.section-sankoumax-menu-49-fujiya1935 { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — menu 50 Omodakaya

sankoumax-menu-50-omodakaya

Copy

Link

Omodakaya

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

About
Service
Works

News
Recruit
Contact

Sample 3050

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-menu-50-omodakaya"} /-->

CSS:
.section-sankoumax-menu-50-omodakaya { max-width: 1200px; margin-inline: auto; }

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

メニュー (飲食) · Menu (F&B) · Blanc Nail

メニュー (飲食)

アレルギー・食事制限の表示

小麦

卵

乳

植物性

夜のおまかせコース

ドリンクメニュー

COFFEE

SOFT & TEA

本日のおすすめ

渡り蟹のトマトクリームパスタ

グリーンサラダボウル

和牛のローストビーフ

ランチセット比較

Standard

Healthy

Premium

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Violet

余白で価格を上品に見せる。

Signature

Option

一粒から始まる物語

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Kikyougaoka

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

88%

5分

21156

次の相談先を明確にする

Tattoo Rays

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Newspicks

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

Collection Selector

選びやすい商品導線

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