◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Expression › Wafu

和風 / 縦書き

縦書き、墨色、余白。日本的な静けさを演出する表現セクション。

10

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

01

Wafu — EX01 Sumi Vertical Hero

wafu-ex01-sumi-hero

Copy
Link

創業明治四十三年
素材と向き合い、手で仕上げる

手仕事の宿 灯

完全予約制

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

CSS:
.section-wafu-ex01-sumi-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex01-sumi-hero').forEach((el) => el.dataset.ready = 'true');

02

Wafu — EX02 Washi Vertical Greeting

wafu-ex02-washi-greeting

Copy
Link

ひと匙の餡に、季節をたたみ込む。
本日も、店先でお待ちしております。

御菓子司 すず音

京都市中京区例町 1-2-3 ・ 十時より十八時 ・ 水曜定休

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

CSS:
.section-wafu-ex02-washi-greeting { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex02-washi-greeting').forEach((el) => el.dataset.ready = 'true');

03

Wafu — EX03 Photo Pair with Vertical Copy

wafu-ex03-photo-pair

Copy
Link
海原の写真

と

山並みの写真

土の声、風の便り。

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

CSS:
.section-wafu-ex03-photo-pair { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex03-photo-pair').forEach((el) => el.dataset.ready = 'true');

04

Wafu — EX04 Three Vertical Principles

wafu-ex04-shuhari

Copy
Link

型を学び、型を守る。
すべての仕事の出発点。

守

型を疑い、工夫を重ねる。
己の解釈を加える段階。

破

型を離れ、型をつくる。
仕事が文化になる瞬間。

離

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

CSS:
.section-wafu-ex04-shuhari { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex04-shuhari').forEach((el) => el.dataset.ready = 'true');

05

Wafu — EX05 Vertical Menu Board

wafu-ex05-kondate

Copy
Link

本日の献立

水菓子
季節の葛切り 六百円

焼き物
鰆の幽庵焼き 千二百円

椀物
蛤と三つ葉のお吸い物 八百円

先付
旬野菜の白和え 六百円

仕入れにより内容が変わります ・ 価格は税込

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

CSS:
.section-wafu-ex05-kondate { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex05-kondate').forEach((el) => el.dataset.ready = 'true');

06

Wafu — EX06 Four Seasons Columns

wafu-ex06-shiki

Copy
Link

畑のいちねん

春

土づくりと種まき。
一年の味が決まる季節。

夏

朝採れ最盛期。
直売所は六時に開きます。

秋

収穫祭と仕込み。
加工品づくりが始まります。

冬

土を休ませる時間。
来年の計画を立てます。

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

CSS:
.section-wafu-ex06-shiki { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex06-shiki').forEach((el) => el.dataset.ready = 'true');

07

Wafu — EX07 Vertical CTA with Seal

wafu-ex07-hanko-cta

Copy
Link

まずは一度、
ご相談ください。

相談無料

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

CSS:
.section-wafu-ex07-hanko-cta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex07-hanko-cta').forEach((el) => el.dataset.ready = 'true');

08

Wafu — EX08 Parallax Cover Vertical Title

wafu-ex08-ryokan-cover

Copy
Link

山あいの一軒宿 ・ 全八室

湯と、静寂と。

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

CSS:
.section-wafu-ex08-ryokan-cover { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex08-ryokan-cover').forEach((el) => el.dataset.ready = 'true');

09

Wafu — EX09 Vertical Quote

wafu-ex09-kotoba

Copy
Link

いそがない、という
技術がある。

三代目当主 ・ 灯野 宗一

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

CSS:
.section-wafu-ex09-kotoba { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex09-kotoba').forEach((el) => el.dataset.ready = 'true');

10

Wafu — EX10 Vertical Footer

wafu-ex10-tate-footer

Copy
Link

お問い合わせ

店舗のご案内

お品書き

御料理 ほし乃

© 2026 御料理 ほし乃

プライバシーポリシー ・ 特定商取引法に基づく表記

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

CSS:
.section-wafu-ex10-tate-footer { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-wafu-ex10-tate-footer').forEach((el) => el.dataset.ready = 'true');