◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Expression › Story

ストーリーテリング

章立て、手紙、フォトエッセイ。読ませる物語型セクション。

10

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

01

Story — EX01 Meandering Rows

story-ex01-meander

Copy
Link
畑の朝

第一章 ・ 出会い

捨てられる予定の畑から、すべては始まった。

後継ぎのいない 1.2 ヘクタール。最初の年は、雑草との戦いだけで終わりました。

第二章 ・ 仲間

手伝いに来た友人が、そのまま社員になった。

いまでは元営業、元保育士、元設計士の 5 人。肩書はばらばら、目線はひとつです。

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

CSS:
.section-story-ex01-meander { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex01-meander').forEach((el) => el.dataset.ready = 'true');

02

Story — EX02 Three Act Chapters

story-ex02-chapters

Copy
Link

序

続けるための、廃業でした。

百貨店からの撤退を決めた日。悔しさより、身軽さが残ったのを覚えています。

破

工場を、店にした。

作る現場をそのまま見せる。ガラス一枚はさんで、職人と客の距離が消えました。

急

そして、あなたの番です。

物語の続きは、店先で。週末の工房見学は予約なしでご参加いただけます。

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

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

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

03

Story — EX03 Horizontal Scroll History

story-ex03-snap-history

Copy
Link

あゆみ、横にながく。

→ 横にスクロールできます

1998

商店街の一角で創業

三坪の店から。初日の売上は 4,200 円でした。

2007

自社工房を構える

製造から販売まで一気通貫の体制に。

2016

二代目に交代

看板はそのまま、中身は少しずつ新しく。

2022

オンラインストア開設

全国の常連さんができました。

2026

そして、いま

この続きを、一緒につくる人を探しています。

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

CSS:
.section-story-ex03-snap-history { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex03-snap-history').forEach((el) => el.dataset.ready = 'true');

04

Story — EX04 Interview Q&A Editorial

story-ex04-interview

Copy
Link

—— 入社の決め手は何でしたか?

面接で「弱点を教えてください」と聞いたら、社長が 10 分間ノンストップで話したことです(笑)。隠さない会社なんだと思いました。

—— 入って一番驚いたことは?

議事録が全部オープンなこと。新人 1 日目から、役員会議の議事録まで読めます。判断の理由を追えるので、仕事の覚えが早くなります。

社員の写真

企画部 ・ 入社 3 年目 ・ 元アパレル販売員

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

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

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

05

Story — EX05 Quiet Photo Essay

story-ex05-photo-essay

Copy
Link
夜明けの海

船が戻るのは、まだ暗いうち。
市場のいちばんいい魚は、
夜明け前に決まっています。

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

CSS:
.section-story-ex05-photo-essay { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex05-photo-essay').forEach((el) => el.dataset.ready = 'true');

06

Story — EX06 Prologue Lines

story-ex06-prologue

Copy
Link

はかる。

けずる。

そして、あわせる。

精密板金加工 ・ 公差 0.05mm の世界へようこそ

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

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

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

07

Story — EX07 Letter from the Owner

story-ex07-letter

Copy
Link

拝啓

このページを見つけてくださって、ありがとうございます。私たちは大きな会社ではありませんし、最安値でもありません。それでも、引っ越しのたびに「またお願いします」と言っていただける仕事を、二十年続けてきました。お見積もりの前に、まず一度、倉庫を見に来てください。私たちの仕事のしかたが、いちばんよく分かる場所です。

敬具
例町運送 代表 ・ 真山 健

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

CSS:
.section-story-ex07-letter { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex07-letter').forEach((el) => el.dataset.ready = 'true');

08

Story — EX08 Milestone Journey

story-ex08-journey

Copy
Link

ご相談 — まずはオンラインで 30 分。費用はかかりません。

↓

体験入店 — 半日、実際の現場へ。お互いの相性を確かめます。

↓

入社 — 最初の 3 ヶ月は先輩と二人一組。ひとりにはしません。

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

CSS:
.section-story-ex08-journey { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex08-journey').forEach((el) => el.dataset.ready = 'true');

09

Story — EX09 A Day in the Life

story-ex09-day-in-life

Copy
Link

パン職人の、ある一日。

3:30

仕込みの様子

仕込み開始。生地の機嫌は、その日の湿度しだい。手のひらで確かめます。

7:00

開店準備

開店。焼きたて一陣が並ぶ 7 時は、常連さんがいちばん多い時間です。

14:00

翌日の準備

閉店後は翌日の粉の計量と、新作の試作。失敗作はスタッフのおやつに。

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

CSS:
.section-story-ex09-day-in-life { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex09-day-in-life').forEach((el) => el.dataset.ready = 'true');

10

Story — EX10 Epilogue Quiet CTA

story-ex10-epilogue-cta

Copy
Link

長い話を、最後まで読んでくださって
ありがとうございました。
続きは、お店でお話しさせてください。

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

CSS:
.section-story-ex10-epilogue-cta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-story-ex10-epilogue-cta').forEach((el) => el.dataset.ready = 'true');