検索…

カタログ統計

CATALOG › Content › Logos

ロゴ / 提携

クライアントロゴ、提携先、メディア掲載。社会的証明の強化。

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

Logos — As Seen On (Press)

logos-as-seen-on

Copy

Link

— AS SEEN ON —

Forbes

TechCrunch

WIRED

NIKKEI

BBC

パターン名: Logos — As Seen On (Press)
概要: Horizontal press/media mention row with greyed wordmarks.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, paragraph, columns, column, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-as-seen-on"} /-->

CSS:
.section-logos-as-seen-on { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-as-seen-on').forEach((el) => el.dataset.ready = 'true');

Logos — Client Cards with Industry

logos-client-cards

Copy

Link

ご利用企業様

◆ ACME

製造業・ 500 名

△ Nova

SaaS ・ 80 名

● OrbitX

EC ・ 120 名

■ FORGE

金融・ 300 名

パターン名: Logos — Client Cards with Industry
概要: 4 client cards with logo glyph, name, industry + headcount meta.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, heading, columns, column, group, paragraph, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-client-cards"} /-->

CSS:
.section-logos-client-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-client-cards').forEach((el) => el.dataset.ready = 'true');

Logos — Dark Single Row

logos-dark-inline

Copy

Link

TRUSTED BY

◆ ACME

Brava

CIRRUS

▲ EVERLY

◇ glyph

★ JADE

パターン名: Logos — Dark Single Row
概要: Single row of 6 brand wordmarks on dark background.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, columns, column, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-dark-inline"} /-->

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

JS:
document.querySelectorAll('.section-logos-dark-inline').forEach((el) => el.dataset.ready = 'true');

Logos — 5×2 Grayscale Grid

logos-grayscale-grid

Copy

Link

業界をリードする 3,000+ 社にご利用いただいています

◆ ACME

Brava

CIRRUS

delta.

▲ EVERLY

FIGMENT

◇ glyph

HELIX

iris/

★ JADE

パターン名: Logos — 5×2 Grayscale Grid
概要: Two rows of 5 grayscale brand wordmarks for trust building.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, columns, column, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-grayscale-grid"} /-->

CSS:
.section-logos-grayscale-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-grayscale-grid').forEach((el) => el.dataset.ready = 'true');

Logos — EX01 Text Logo Row

logos-ex01-text-row

Copy

Link

お取引先(順不同・一部)

◆ YAMATO WORKS

● aoba foods

▲ KITAYAMA

■ 双葉電業

◇ MARU & CO.

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex01-text-row"} /-->

CSS:
.section-logos-ex01-text-row { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex01-text-row').forEach((el) => el.dataset.ready = 'true');

Logos — EX02 Press Mentions

logos-ex02-press

Copy

Link

メディア掲載

2026.05

月刊「暮らしの道具」

特集「長く使う台所」にて紹介

2026.02

ローカルTV「ゆうがたプラス」

工房の様子が放送されました

2025.11

Web メディア「てしごと図鑑」

代表インタビューが掲載

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex02-press"} /-->

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

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

Logos — EX03 Dark Partner Strip

logos-ex03-dark-strip

Copy

Link

PARTNERS

HOSHI DESIGN

三日月製作所

PORT logistics

ひかり印刷

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex03-dark-strip"} /-->

CSS:
.section-logos-ex03-dark-strip { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex03-dark-strip').forEach((el) => el.dataset.ready = 'true');

Logos — EX04 Certification Badges

logos-ex04-cert-badges

Copy

Link

許認可・資格

📜

建設業許可

県知事許可(般-00)第00000号

🪪

一級技能士在籍

国家資格保有者 4 名

🛡️

賠償責任保険加入

最大 1 億円まで補償

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex04-cert-badges"} /-->

CSS:
.section-logos-ex04-cert-badges { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex04-cert-badges').forEach((el) => el.dataset.ready = 'true');

Logos — EX05 Suppliers Zen List

logos-ex05-suppliers-zen

Copy

Link

仕入れ先の皆さま

宇治・山本園(茶葉) ── 丹波・ささやま農園(小豆)
能登・揚げ浜製塩(塩) ── 北海道・美瑛ファーム(小麦)

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex05-suppliers-zen"} /-->

CSS:
.section-logos-ex05-suppliers-zen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex05-suppliers-zen').forEach((el) => el.dataset.ready = 'true');

Logos — EX06 Client Cards Grid

logos-ex06-client-cards

Copy

Link

◆ AOI CLINIC

医療

● 結とうふ店

食品

▲ SORA HOTEL

宿泊

■ 港町水産

卸売

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex06-client-cards"} /-->

CSS:
.section-logos-ex06-client-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex06-client-cards').forEach((el) => el.dataset.ready = 'true');

Logos — EX07 Client Count Band

logos-ex07-count-band

Copy

Link

県内 240 を超える事業者さまとお取引

飲食店・宿泊施設・医療機関・教育機関・製造業ほか

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex07-count-band"} /-->

CSS:
.section-logos-ex07-count-band { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex07-count-band').forEach((el) => el.dataset.ready = 'true');

Logos — EX08 Award List Rows

logos-ex08-awards

Copy

Link

受賞歴

2025

🏅 全国菓子博覧会金賞

2023

🥈 県観光みやげコンクール優秀賞

2021

🏆 地域ブランド大賞特別賞

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex08-awards"} /-->

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

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

Logos — EX09 Two Row Logo Grid

logos-ex09-two-row-grid

Copy

Link

TSUKI COFFEE

はなれ旅館

GREEN BASE

まちの本屋

NIJI BREWING

ゆずの里農園

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex09-two-row-grid"} /-->

CSS:
.section-logos-ex09-two-row-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex09-two-row-grid').forEach((el) => el.dataset.ready = 'true');

Logos — EX10 Collaboration Banner

logos-ex10-collab-banner

Copy

Link

SPECIAL COLLABORATION

月光珈琲

あんこ屋すず

限定コラボ「珈琲どら焼き」 6/15 発売

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-ex10-collab-banner"} /-->

CSS:
.section-logos-ex10-collab-banner { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-ex10-collab-banner').forEach((el) => el.dataset.ready = 'true');

ロゴ / 提携 · Logos · Blanc Nail

ロゴ / 提携

ご利用企業様

メディア掲載

許認可 ・ 資格

県内 240 を超える事業者さまとお取引

受賞歴

許認可・資格