外部メディア · External Insights · Blanc Nail
検索…
カタログ 統計
CATALOG › UI Components › External Insights
外部メディア
メディア掲載、外部記事引用、認証マーク表示。
4
Patterns
UI Components
Group
isValid=0
Verified
CSS
Animation
01
Insights — Podcast Episode Card
insights-podcast
🎙️
🎧 PODCAST — EP. 42
デザインシステムの未来を語る
▶ 38 分 ・ 2026.04.18 配信
- パターン名: Insights — Podcast Episode Card
- 概要: Podcast episode callout card with large icon tile and episode meta.
- 使用目的: External Insights領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 120px、推奨コンテンツ幅 720px、主要ブロック group, columns, column, group, paragraph, column, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: External Insightsをミニマルに見せる余白重視版 / External Insightsをリッチに見せるカバー/カード強調版 / External Insightsをコーポレート向けに整える情報密度高め版 / External Insightsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/insights-podcast"} /-->
CSS:
.section-insights-podcast { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-insights-podcast').forEach((el) => el.dataset.ready = 'true');
02
Insights — Press Mentions Strip
insights-press-logos
AS FEATURED IN
主要メディアで紹介されました
2026.04 ・ 経済紙
日経 ・ FORBES
2026.03 ・ tech
TechCrunch
2026.02 ・ business
Bloomberg
2026.01 ・ design
Designboom
- パターン名: Insights — Press Mentions Strip
- 概要: Press / media mentions strip with date and outlet name in 4 columns.
- 使用目的: External Insights領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, paragraph, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: External Insightsをミニマルに見せる余白重視版 / External Insightsをリッチに見せるカバー/カード強調版 / External Insightsをコーポレート向けに整える情報密度高め版 / External Insightsをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/insights-press-logos"} /-->
CSS:
.section-insights-press-logos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-insights-press-logos').forEach((el) => el.dataset.ready = 'true');
03
Insights — Press Quote Card
insights-quote-card
“
「業界に新風を吹き込む、最も野心的なスタートアップの一つ。日本発のプロダクトとして、グローバルに通用する稀有な事例だ」
— FORBES JAPAN ・ 2026 年 4 月号
- パターン名: Insights — Press Quote Card
- 概要: Editorial-style press quote card with attribution to publication.
- 使用目的: External Insights領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, group, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: External Insightsをリッチに見せるカバー/カード強調版 / External Insightsをコーポレート向けに整える情報密度高め版 / External Insightsをカジュアルに見せるアイコン/ラベル強調版 / External Insightsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/insights-quote-card"} /-->
CSS:
.section-insights-quote-card { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-insights-quote-card').forEach((el) => el.dataset.ready = 'true');
04
Insights — YouTube Video Card
insights-youtube
▶
CSS Grid を使いこなす 10 のコツ
▶ 14,200 回視聴 ・ 12 分
- パターン名: Insights — YouTube Video Card
- 概要: Dark YouTube-style video thumbnail card with large play button.
- 使用目的: External Insights領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, group, group, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: External Insightsをリッチに見せるカバー/カード強調版 / External Insightsをコーポレート向けに整える情報密度高め版 / External Insightsをカジュアルに見せるアイコン/ラベル強調版 / External Insightsをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/insights-youtube"} /-->
CSS:
.section-insights-youtube { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-insights-youtube').forEach((el) => el.dataset.ready = 'true');