Material Design 3 & Product UIs

Google Product Component Catalog

Googleのコアデザインシステム（Material You）と、Forms, Docs, Slides, YouTube, Sites, Blogger等の主要プロダクト専用UIコンポーネントを統合したカタログサイトです。

Explore Forms & Docs View YouTube & Media UIs

Core Foundations: Colors & Typography

Googleブランドパレットおよびマテリアルタイポグラフィ。

Product Color Ecosystem

Docs Blue #4285f4

Forms Purple #673ab4

Slides Yellow #fbbc04

YouTube Red #ff0000

Sites Cyan #00acc1

Blogger Orange #f57c00

<div class="grid grid-cols-6 gap-4">
  <div class="bg-[#4285f4] text-white p-4 rounded-xl">Docs Blue</div>
  <div class="bg-[#673ab4] text-white p-4 rounded-xl">Forms Purple</div>
  <div class="bg-[#ff0000] text-white p-4 rounded-xl">YouTube Red</div>
</div>

Buttons & Floating Action Buttons

リップル効果を備えたMaterial 3ボタン要素。

Interactive Button Variants

<button class="bg-[#1a73e8] text-white font-medium px-6 py-2.5 rounded-full shadow-sm">
  Filled Button
</button>

Google Forms UI Components

紫色のアクセントヘッダー、質問カード、ラジオボタン選択肢を備えたフォームUI。

Forms Survey Card Layout

イベント参加アンケート

Google Design System 2026 ワークショップへのご参加ありがとうございます。

* 必須

1. 最も興味のあるプロダクトUIは何ですか？ *

Google Docs / Slides YouTube プレイヤー＆フィードUI Google Forms フォームジェネレーター

フォームをクリア

<div class="bg-white rounded-xl border-t-8 border-[#673ab4] shadow-md p-6 space-y-4">
  <h3 class="text-2xl font-bold">Google Form Header</h3>
  <div class="space-y-3">
    <label class="flex items-center space-x-3">
      <input type="radio" name="q1" class="text-[#673ab4]">
      <span>Option 1</span>
    </label>
  </div>
</div>

Google Docs UI Components

上部ツールバー、ルーラー、A4ペーパー風エディタキャンバス。

Docs Editor & Toolbar Layout

プロジェクト仕様書 2026

Google Design Systemの次世代バージョンとして、マテリアル3（Material You）の動的カラーシステムとプロダクト一貫性を強化します。このエディタキャンバスは、実際のGoogle Docsのレイアウトとタイポグラフィの垂直リズムを正確に模倣しています。

アクセシビリティ標準の全面準拠
レスポンシブコンポーネントグリッドの自動適応
全プロダクト共通UIトークンの統合

<!-- Docs Editor Paper -->
<div class="bg-white text-gray-900 shadow-xl p-12 min-h-[450px] max-w-[650px]">
  <h1 class="text-3xl font-bold border-b pb-2">Project Spec</h1>
  <p class="text-sm text-gray-700">Google Docs simulation content...</p>
</div>

Google Slides UI Components

スライド一覧サムネイルサイドバーとプレゼンテーション編集キャンバス。

Slides Editor Layout

Title Slide

Components

Google Slides Presentation

click to add subtitle or presentation notes

Layout: Title Slide Theme: Material You

<!-- Google Slides Canvas -->
<div class="flex gap-4">
  <div class="w-48 bg-white rounded-lg p-3">Thumbnails</div>
  <div class="flex-1 bg-white shadow-xl rounded-lg p-8">Main Slide</div>
</div>

YouTube UI Components

動画サムネイルカード、チャンネルアバター、視聴回数・タイムスタンプ表示。

YouTube Video Card Grid

14:20

Google I/O 2026 基調講演：Material Design最新動向と新AI機能

Google Developers

12万回視聴 • 2日前

08:45

Material 3 デザイントークン設計のベストプラクティス

UX Research Japan

4.5万回視聴 • 1週間前

22:10

シングルファイルWebアプリケーション構築マスタークラス

Web Platform Daily

8.9万回視聴 • 3週間前

<!-- YouTube Video Card -->
<div class="space-y-3">
  <div class="relative rounded-2xl overflow-hidden aspect-video">
    <img src="thumbnail.jpg" class="w-full h-full object-cover">
  </div>
  <div class="flex space-x-3">
    <div class="w-10 h-10 rounded-full bg-red-600"></div>
    <h4 class="font-semibold text-sm">Video Title</h4>
  </div>
</div>

Google Sites (G-site) UI Components

セクションブロックエディタ、ヒーローセクション、グリッドレイアウト。

Sites Hero & Grid Blocks

Google Sites プロジェクトポートフォリオ

チームの成果物をノーコードで美しく公開するGoogle Sites専用のブロックレイアウト。

セクションブロックレイアウト

テキストと画像を直感的に配置できるマテリアルグリッドコンポーネント。

シームレスな共有と埋め込み

Google Workspaceドキュメントやカレンダーを直接インライン表示。

<!-- Sites Hero Section -->
<div class="bg-gradient-to-r from-cyan-700 to-blue-800 rounded-2xl p-10 text-white text-center">
  <h1 class="text-3xl font-extrabold">Sites Title</h1>
</div>

Blogger UI Components

ブログ記事カード、投稿日・ラベル、ミニブログフィードレイアウト。

Blogger Feed & Article Cards

Design System • 2026年6月12日

Google BloggerにおけるモダンUIとタイポグラフィの刷新について

BloggerのフィードレイアウトがMaterial Youデザイン原則に完全準拠しました。カード形式のタイムラインと高速なローディングを体験してください。

続きを読む → コメント (4)

<!-- Blogger Post Card -->
<article class="bg-white border rounded-2xl p-6 space-y-3">
  <span class="text-xs text-orange-600 font-semibold">Category • Date</span>
  <h3 class="text-xl font-bold">Post Title</h3>
  <p class="text-sm text-gray-600">Post excerpt text...</p>
</article>