◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Expression › Illustration

イラスト / 手描き装飾

落書き風ブロブ、マーカー下線、吹き出し。親しみのあるあしらい。

10

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

01

Illust — EX01 Doodle Blob Hero

illust-ex01-doodle-hero

Copy
Link

えがくって、
たのしい!

3 歳から大人まで。まちの小さなお絵かき教室です。

🖍️🎨✏️

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

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

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

02

Illust — EX02 Emoji Blob Features

illust-ex02-emoji-blobs

Copy
Link

🧺

集荷は玄関先で

アプリから 2 タップ。
不在でも置き配バッグで OK。

🫧

無添加せっけん仕上げ

肌の弱いお子さまの服も
安心して任せられます。

🚲

翌日夕方にお届け

町内は自転車便。
たたみ方の指定もできます。

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

CSS:
.section-illust-ex02-emoji-blobs { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex02-emoji-blobs').forEach((el) => el.dataset.ready = 'true');

03

Illust — EX03 Dashed Note Checklist

illust-ex03-dashed-checklist

Copy
Link

📝 当日のもちもの

✅ 動きやすい服(よごれても OK な服)
✅ タオルと水筒
✅ ぼうし(畑は日かげがありません)
✅ 軍手(貸し出しもあります)
⬜ 長ぐつは雨の翌日だけ必要です

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

CSS:
.section-illust-ex03-dashed-checklist { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex03-dashed-checklist').forEach((el) => el.dataset.ready = 'true');

04

Illust — EX04 Speech Bubble Q&A

illust-ex04-speech-qa

Copy
Link

🙋

ピアノ未経験の大人でも、ほんとうに弾けるようになりますか?

なります! 生徒の 6 割は大人スタート。3 ヶ月で 1 曲、が合言葉です。

👩‍🏫

🙋

楽器を持っていなくても大丈夫ですか?

教室のピアノを無料でお使いいただけます。練習室の開放もあります。

👩‍🏫

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

CSS:
.section-illust-ex04-speech-qa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex04-speech-qa').forEach((el) => el.dataset.ready = 'true');

05

Illust — EX05 Wavy Underline Steps

illust-ex05-wavy-steps

Copy
Link

📮

1. 申し込む

フォームから 1 分。
お試し便は送料無料です。

📦

2. 受け取る

旬の野菜 7 〜 9 品。
レシピカードつき。

🍳

3. たべる

届いたその日が食べごろ。
感想をぜひ教えてください。

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

CSS:
.section-illust-ex05-wavy-steps { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex05-wavy-steps').forEach((el) => el.dataset.ready = 'true');

06

Illust — EX06 Pop Announcement Band

illust-ex06-pop-announce

Copy
Link

🎪

7/20(月) 開園 10 周年まつり、
ぜんぶ無料で あそべます!

🎈

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

CSS:
.section-illust-ex06-pop-announce { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex06-pop-announce').forEach((el) => el.dataset.ready = 'true');

07

Illust — EX07 Marker Highlight Menu

illust-ex07-marker-menu

Copy
Link

🍞 きょうのパン

山型食パン(一斤)

¥420

クロワッサン

¥280

あんバターサンド(金曜限定)

¥390

本日のフォカッチャ

¥350

売り切れごめん ・ 焼き上がりは Instagram でお知らせ

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

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

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

08

Illust — EX08 Mascot Greeting

illust-ex08-mascot-intro

Copy
Link

🦔

はじめまして、ハリィです!

図書館の読書イベント案内係。毎月のおすすめ本と、よみきかせ会の日程をお届けします。

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

CSS:
.section-illust-ex08-mascot-intro { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex08-mascot-intro').forEach((el) => el.dataset.ready = 'true');

09

Illust — EX09 Dashed Coupon Card

illust-ex09-coupon

Copy
Link

✂️

WEB 限定クーポン

初回カット 20% OFF

ご予約時に「ホームページを見た」とお伝えください。
有効期限 ・ 2026 年 8 月末まで ・ 他券併用不可

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

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

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

10

Illust — EX10 Playful Dot Divider

illust-ex10-dot-divider

Copy
Link

🔴🟡🔵

つぎは、こども向けクラスのおはなし

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

CSS:
.section-illust-ex10-dot-divider { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-illust-ex10-dot-divider').forEach((el) => el.dataset.ready = 'true');