検索…

カタログ統計

CATALOG › Data & Flow › Timeline / Step

タイムライン

プロセス、沿革、ステップガイド。時間軸の表現。

Patterns

Data & Flow

Group

isValid=0

Verified

CSS

Animation

Timeline — Horizontal Arrow Flow

timeline-horizontal-flow

Copy

Link

プロセス

🔍

調査

現状把握とユーザー調査

→

✏️

設計

情報設計と画面設計

→

🛠️

実装

スプリントで開発

→

🚀

公開

本番環境にリリース

パターン名: Timeline — Horizontal Arrow Flow
概要: Horizontal 4-step process flow with arrows between stages.
使用目的: Timeline / Step領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40px / 40px / 40px、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-horizontal-flow"} /-->

CSS:
.section-timeline-horizontal-flow { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-horizontal-flow').forEach((el) => el.dataset.ready = 'true');

Timeline — Launch Countdown

timeline-launch-countdown

Copy

Link

LAUNCH PLAN

公開前カウントダウン

T-30

設計確定

サイト構造、ワイヤー、必要コンテンツを確定します。

T-14

実装完了

主要ページを構築し、CMS 入稿ルールを整えます。

T-7

検証

表示、フォーム、計測タグ、SEO 設定を確認します。

T-0

公開

DNS、キャッシュ、公開後監視まで一気通貫で進めます。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-launch-countdown"} /-->

CSS:
.section-timeline-launch-countdown { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-launch-countdown').forEach((el) => el.dataset.ready = 'true');

Timeline — Sprint Kanban Lanes

timeline-sprint-kanban

Copy

Link

SPRINT BOARD

制作スプリントの進行状況

Backlog

導入事例ページの原稿整理

FAQ の追加質問を確定

Doing

トップページの CTA 改善

料金表のスマホ表示調整

Done

フォーム送信テスト完了

画像 alt と見出し階層を整理

パターン名: Timeline — Sprint Kanban Lanes
概要: Three kanban-style lanes showing backlog, in-progress and completed work.
使用目的: Timeline / Step領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, group, heading, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-sprint-kanban"} /-->

CSS:
.section-timeline-sprint-kanban { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-sprint-kanban').forEach((el) => el.dataset.ready = 'true');

Timeline — Vertical Numbered Steps

timeline-vertical-steps

Copy

Link

ご利用までの流れ

お問い合わせ

フォームよりご相談内容をお送りください。1 営業日以内にご返信いたします。

ヒアリング

オンライン MTG で 30 分。課題と理想を整理し、進め方を一緒に決めます。

ご提案・お見積り

スコープと納期を含めた具体的なプランを 3 営業日以内にご提示します。

プロジェクト開始

専任チームをアサインしてキックオフ。週次ミーティングで進捗共有しながら進めます。

パターン名: Timeline — Vertical Numbered Steps
概要: Vertical step list with numbered circles and short descriptions per stage.
使用目的: Timeline / Step領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, heading, group, group, group, paragraph, group, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-vertical-steps"} /-->

CSS:
.section-timeline-vertical-steps { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-vertical-steps').forEach((el) => el.dataset.ready = 'true');

Timeline — Year History (Dark)

timeline-year-history

Copy

Link

OUR HISTORY

これまでの歩み

2018

創業

渋谷区のシェアオフィスから 3 名でスタート。

2021

シリーズ A 調達

3.5 億円を調達し、エンタープライズ機能を強化。

2024

海外展開

シンガポールに法人を設立、APAC へ事業拡大。

2026

AI 機能を全面統合

本日、生成 AI を含む大型アップデートを公開。

パターン名: Timeline — Year History (Dark)
概要: Dark vertical year-by-year history list, suited for company about pages.
使用目的: Timeline / Step領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, group, group, paragraph, group, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-year-history"} /-->

CSS:
.section-timeline-year-history { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-year-history').forEach((el) => el.dataset.ready = 'true');

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

Timeline — EX01 Vertical History

timeline-step-ex01-vertical-history

Copy

Link

あゆみ

2008

自宅の一室で創業。最初のお客さまは近所の喫茶店でした。

2016

スタッフ 5 名に。法人のお客さまとの取引が始まりました。

2026 — 現在

2 店舗目を開設。変わらず「目の届く規模」を大切にしています。

パターン名: Timeline — EX01 Vertical History
概要: Company history as left-bordered year rows.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex01-vertical-history"} /-->

CSS:
.section-timeline-step-ex01-vertical-history { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex01-vertical-history').forEach((el) => el.dataset.ready = 'true');

Timeline — EX02 Horizontal Four Steps

timeline-step-ex02-horizontal-4

Copy

Link

お届けまでの流れ

STEP 1

ご注文

STEP 2

焙煎・製造

STEP 3

当日発送

STEP 4

最短翌日お届け

パターン名: Timeline — EX02 Horizontal Four Steps
概要: Four numbered steps in a horizontal flow.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex02-horizontal-4"} /-->

CSS:
.section-timeline-step-ex02-horizontal-4 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex02-horizontal-4').forEach((el) => el.dataset.ready = 'true');

Timeline — EX03 A Day Schedule

timeline-step-ex03-day-schedule

Copy

Link

通園日の一日

9:00

登園・自由あそび

11:30

給食(自園調理・アレルギー個別対応)

13:00

おひるね・静かな時間

16:00

おやつ・順次降園(延長 19:00 まで)

パターン名: Timeline — EX03 A Day Schedule
概要: A typical day timeline with time labels.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex03-day-schedule"} /-->

CSS:
.section-timeline-step-ex03-day-schedule { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex03-day-schedule').forEach((el) => el.dataset.ready = 'true');

Timeline — EX04 Hiring Flow

timeline-step-ex04-recruit-flow

Copy

Link

選考の流れ

応募から内定まで、最短 2 週間です。

書類応募

フォームから 3 分で完了。履歴書は後日で OK。

カジュアル面談

オンライン 30 分。服装自由、質問歓迎です。

職場見学・内定

半日の見学で相性を確認してから決めてください。

パターン名: Timeline — EX04 Hiring Flow
概要: Recruiting selection flow in three numbered cards with durations.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex04-recruit-flow"} /-->

CSS:
.section-timeline-step-ex04-recruit-flow { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex04-recruit-flow').forEach((el) => el.dataset.ready = 'true');

Timeline — EX05 Quarter Roadmap

timeline-step-ex05-roadmap

Copy

Link

ROADMAP 2026

新工房の稼働開始

完了

オンラインストアリニューアル

進行中

海外発送対応・英語ページ公開

予定

パターン名: Timeline — EX05 Quarter Roadmap
概要: Quarterly roadmap rows with status chips.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex05-roadmap"} /-->

CSS:
.section-timeline-step-ex05-roadmap { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex05-roadmap').forEach((el) => el.dataset.ready = 'true');

Timeline — EX06 Onboarding Three Steps

timeline-step-ex06-onboarding-3

Copy

Link

体験予約

→

無料体験(60分)

→

入会・初回レッスン

パターン名: Timeline — EX06 Onboarding Three Steps
概要: Three onboarding steps with arrows between titles.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex06-onboarding-3"} /-->

CSS:
.section-timeline-step-ex06-onboarding-3 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex06-onboarding-3').forEach((el) => el.dataset.ready = 'true');

Timeline — EX07 Four Seasons Zen

timeline-step-ex07-zen-seasons

Copy

Link

畑のいちねん

春

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

夏

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

秋

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

冬

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

パターン名: Timeline — EX07 Four Seasons Zen
概要: Year of the craft told through four seasons.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex07-zen-seasons"} /-->

CSS:
.section-timeline-step-ex07-zen-seasons { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex07-zen-seasons').forEach((el) => el.dataset.ready = 'true');

Timeline — EX08 Order Flow with Photo

timeline-step-ex08-order-flow-photo

Copy

Link

オーダーの流れ

1. ご相談・採寸(来店またはオンライン)
2. 素材選び・お見積り
3. 製作(約 4 週間・途中経過を写真でお知らせ)
4. 仮合わせ・微調整
5. お渡し・一年点検つき

パターン名: Timeline — EX08 Order Flow with Photo
概要: Order flow steps beside a workshop photo.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex08-order-flow-photo"} /-->

CSS:
.section-timeline-step-ex08-order-flow-photo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex08-order-flow-photo').forEach((el) => el.dataset.ready = 'true');

Timeline — EX09 Project Weeks

timeline-step-ex09-renovation

Copy

Link

工事スケジュールの目安

第 1 週・解体・下地確認

3 日

第 2 週・配管・電気工事

4 日

第 3 週・仕上げ・完了検査

5 日

パターン名: Timeline — EX09 Project Weeks
概要: Construction schedule by week with duration labels.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex09-renovation"} /-->

CSS:
.section-timeline-step-ex09-renovation { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex09-renovation').forEach((el) => el.dataset.ready = 'true');

Timeline — EX10 Aftercare Milestones

timeline-step-ex10-aftercare

Copy

Link

納品後も、そばにいます

翌日

使い始めの確認連絡。
気になる点をその場で調整。

1 ヶ月後

なじみ具合を点検。
増し締めと微調整は無料。

1 年後

定期メンテナンスのご案内。
その後も末永くどうぞ。

パターン名: Timeline — EX10 Aftercare Milestones
概要: Post-purchase care milestones: next day, one month, one year.
使用目的: Timeline領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/timeline-step-ex10-aftercare"} /-->

CSS:
.section-timeline-step-ex10-aftercare { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-timeline-step-ex10-aftercare').forEach((el) => el.dataset.ready = 'true');

タイムライン · Timeline / Step · Blanc Nail

タイムライン

プロセス

調査

設計

実装

公開

公開前カウントダウン

設計確定

実装完了

検証

公開

制作スプリントの進行状況

Backlog

Doing

Done

ご利用までの流れ

お問い合わせ

ヒアリング

ご提案 ・ お見積り

プロジェクト開始

これまでの歩み

創業

シリーズ A 調達

海外展開

AI 機能を全面統合

あゆみ

お届けまでの流れ

通園日の一日

選考の流れ

書類応募

カジュアル面談

職場見学 ・ 内定

ROADMAP 2026

畑のいちねん

オーダーの流れ

工事スケジュールの目安

納品後も、そばにいます

ご提案・お見積り

職場見学・内定