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

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Business › Menu (F&B)

メニュー (飲食)

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

15

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

01

Menu — Allergen Badge Board

menu-allergen-badge-board

Copy
Link

SAFETY NOTE

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

W

Gluten

小麦

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

E

Egg

卵

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

M

Milk

乳

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

V

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');

02

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');

03

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');

04

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');

05

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');

06

Menu — EX01 Cafe Two Column

menu-ex01-cafe-2col

Copy
Link

MENU

お品書き

DRINK

ブレンドコーヒー

¥550

カフェラテ

¥620

季節のフルーツソーダ

¥680

FOOD

厚切りトーストセット

¥780

本日のキッシュプレート

¥1,050

自家製プリン

¥480

表示価格はすべて税込です。仕入れ状況によりメニューが変わる場合があります。

  • パターン名: Menu — EX01 Cafe Two Column
  • 概要: Two-column cafe menu with dashed price rows.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex01-cafe-2col"} /-->

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

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

07

Menu — EX02 Course List

menu-ex02-course

Copy
Link

COURSE

コース料理

月 — つき

先付 ・ 椀物 ・ 造り ・ 焼物 ・ 食事 ・ 甘味（全六品）

¥6,600

雪 — ゆき

旬の八寸と強肴を加えた、当店の看板コース（全八品）

¥9,900

花 — はな

特選食材で仕立てる、記念日のための特別会席（全十品）

¥15,400

コースは前日までのご予約制です。苦手な食材は予約時にお知らせください。

  • パターン名: Menu — EX02 Course List
  • 概要: Elegant centered course menu with three tiers and a reservation note.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex02-course"} /-->

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

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

08

Menu — EX03 Sweets Card Trio

menu-ex03-sweets-trio

Copy
Link

本日の甘味

抹茶のテリーヌ

石臼挽きの宇治抹茶を贅沢に。口どけ重視のしっとり仕立て。

¥680

黒蜜きなこのどら焼き

ふんわり生地に粒餡と黒蜜。香ばしいきなこを添えて。

¥520

季節のあんみつ

寒天と白玉、旬の果実。自家炊き餡と一緒にどうぞ。

¥750

  • パターン名: Menu — EX03 Sweets Card Trio
  • 概要: Three sweet item cards with photo, name, copy and price.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex03-sweets-trio"} /-->

CSS:
.section-menu-ex03-sweets-trio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-ex03-sweets-trio').forEach((el) => el.dataset.ready = 'true');

09

Menu — EX04 Izakaya Dark Board

menu-ex04-izakaya-dark

Copy
Link

本日のおすすめ

炙りしめ鯖

¥780

大山鶏の炭火焼き

¥980

出汁巻き玉子

¥650

季節の天ぷら盛り

¥1,200

地酒 飲み比べ三種

¥1,100

〆の鯛茶漬け

¥880

  • パターン名: Menu — EX04 Izakaya Dark Board
  • 概要: Dark chalkboard-style menu with two columns of price rows.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex04-izakaya-dark"} /-->

CSS:
.section-menu-ex04-izakaya-dark { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-ex04-izakaya-dark').forEach((el) => el.dataset.ready = 'true');

10

Menu — EX05 Lunch Set Cards

menu-ex05-lunch-sets

Copy
Link

ランチセット

平日 11:30 — 14:00 ／ サラダ・ドリンク付き

A SET

週替わりパスタ

自家製生麺と旬素材のソース。焼きたてフォカッチャ付き。

¥1,180

B SET — 人気No.1

炭火チキンプレート

皮はぱりっと、中はジューシー。十六穀米と季節の副菜三種。

¥1,380

C SET

本日の魚定食

市場直送の鮮魚を焼きまたは煮付けで。小鉢二品と味噌汁付き。

¥1,280

  • パターン名: Menu — EX05 Lunch Set Cards
  • 概要: Three lunch set cards with badge, contents and price.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex05-lunch-sets"} /-->

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

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

11

Menu — EX06 Seasonal Feature

menu-ex06-seasonal-feature

Copy
Link

SEASONAL — 季節限定

栗と焙じ茶の
モンブランパフェ

渋皮栗の濃厚なペーストに、香ばしい焙じ茶のジェラートを重ねました。底にはサクサクのメレンゲ。一年で今だけの組み合わせです。

¥1,480

提供期間 9月中旬 — 11月末

  • パターン名: Menu — EX06 Seasonal Feature
  • 概要: Featured seasonal item: photo left, story and price right.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex06-seasonal-feature"} /-->

CSS:
.section-menu-ex06-seasonal-feature { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-ex06-seasonal-feature').forEach((el) => el.dataset.ready = 'true');

12

Menu — EX07 Drink Category Grid

menu-ex07-drink-grid

Copy
Link

ドリンク

☕

コーヒー

¥480 〜

🍵

日本茶

¥520 〜

🧃

ジュース

¥580 〜

🍺

アルコール

¥600 〜

  • パターン名: Menu — EX07 Drink Category Grid
  • 概要: Four compact drink category cards with starting prices.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex07-drink-grid"} /-->

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

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

13

Menu — EX08 Omakase Statement

menu-ex08-omakase-note

Copy
Link

おまかせ一本

その日いちばんを、
そのままお出しする。

品書きはありません。市場とのご縁で決まる、十二品ほどのおまかせ。アレルギーと苦手のみ、ご予約時にお伺いします。

¥13,200（税・サ込）

  • パターン名: Menu — EX08 Omakase Statement
  • 概要: Single statement menu block: one omakase offering with story and price.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex08-omakase-note"} /-->

CSS:
.section-menu-ex08-omakase-note { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-ex08-omakase-note').forEach((el) => el.dataset.ready = 'true');

14

Menu — EX09 Allergy and Notes

menu-ex09-allergy-note

Copy
Link

アレルギー・お食事に関するご案内

ベジタリアン対応可

特定原材料 表示対応

お子さまメニューあり

食物アレルギーをお持ちの方は、ご注文前にスタッフへお申し付けください。
調理器具は共用のため、完全な除去対応はいたしかねます。あらかじめご了承ください。

  • パターン名: Menu — EX09 Allergy and Notes
  • 概要: Important dietary notes block: allergy, vegetarian and kids info chips with description.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex09-allergy-note"} /-->

CSS:
.section-menu-ex09-allergy-note { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-menu-ex09-allergy-note').forEach((el) => el.dataset.ready = 'true');

15

Menu — EX10 Takeout Strip

menu-ex10-takeout

Copy
Link

TAKEOUT — お持ち帰り

お店の味を、おうちでも。

お弁当 ¥980 〜 ／ オードブル盛り合わせ ¥3,800 〜。お電話で前日までにご予約ください。

テイクアウトを予約する
  • パターン名: Menu — EX10 Takeout Strip
  • 概要: Compact takeout promo strip with two items and an order CTA.
  • 使用目的: Menu領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/menu-ex10-takeout"} /-->

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

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