Material Design プレゼンテーション

Google風デザインのHTML/CSSプレゼンテーション

作成日: 2025年3月15日

Material Designの基本原則

2

マテリアルは比喩

紙と同様の質感と物理的特性を持つ表面と、その表面に表示されるコンテンツが基本です。

大胆、意図的、美的

印刷デザインの基本(タイポグラフィ、グリッド、スペース、色、画像)がユーザー体験を導きます。

動きが意味を与える

ユーザーの行動に対するフィードバックとして、自然で意味のあるアニメーションを提供します。

柔軟性

基本デザイン言語を維持しながら、ブランドの個性を表現できる柔軟なシステムです。

エレベーションと影

3

マテリアルの深度

Material Designでは、影の大きさと強さで要素のエレベーション(高さ)を表現します。

dp 1

dp 3

dp 6

dp 12

dp 24

光源は常に画面の上から照射され、一貫した影を作り出します。

コンポーネントの階層

各UIコンポーネントは特定のエレベーションを持ちます:

  • カード: 1dp(静止時)、8dp(選択時)
  • アプリバー: 4dp
  • フローティングアクションボタン: 6dp
  • ナビゲーションドロワー: 16dp
  • ダイアログ: 24dp
+

カラーシステム

4

表現力豊かな色彩体系

Material Designでは体系的な色彩設計で視覚的一貫性を確保します。

プライマリーカラー

ブランドを表すメインカラーとその派生色

セカンダリーカラー

アクセントとして使用し、主要なアクションを強調

サーフェスとエラー

背景色とエラー表示用の特殊カラー

まとめ

5

Material Designの実装ポイント

  • 物理的な紙の性質を模倣した表面とレイヤー
  • 一貫したシャドウシステムで深度と階層を表現
  • 意味のある自然なアニメーションで体験を向上
  • 体系的なカラーシステムでブランドアイデンティティを確立
  • レスポンシブデザインを考慮した8dpベースのグリッドシステム

HTML/CSSでのMaterial Design実装には、Googleの公式ドキュメントと提供されているコンポーネントライブラリを活用することをお勧めします。