PrezenX デザインサンプル集

🎨 概要

このディレクトリには、PrezenXのPhase 5（HTML生成）で利用可能な22種類のデザインスタイルのサンプルHTMLファイルが含まれています。

各Phase 5 CLAUDE.mdファイル（phase5-html-*.md）では標準的にFluent Designを採用していますが、プレゼンテーションの目的・聴衆・ブランドに合わせて、これらのデザインサンプルを参考に異なるデザインスタイルを適用することができます。

📁 デザインサンプル一覧

🏢 モダン・ビジネス系

デザイン ファイル 適用場面 特徴
Fluent Design fluent-design-presentation.html 汎用・ビジネス Microsoft標準、洗練された質感
Material Design material-design-presentation.html モダンビジネス Google標準、カード型レイアウト
Flat Design flat-design-presentation.html シンプルプレゼン フラット、清潔感、読みやすさ
Minimalist Design minimalist-design-presentation.html 高級ブランド 余白重視、上品、集中力向上

💻 テック・モダン系

デザイン ファイル 適用場面 特徴
Dark Mode dark-mode-presentation.html 技術発表・開発者 目に優しい、集中しやすい
Glassmorphism glassmorphism-presentation.html 最新技術紹介 透明感、モダン、未来的
Neumorphism neumorphism-presentation.html UI/UXデザイン ソフトシャドウ、立体感
Brutalism brutalism-presentation.html 創造性重視 大胆、インパクト、記憶に残る

🎓 学術・専門系

デザイン ファイル 適用場面 特徴
Chalkboard chalkboard-presentation.html 教育・学術発表 黒板風、親しみやすい、教育的
Human Interface human-interface-design-presentation.html HCI・認知科学 Apple標準、直感的操作
Isometric isometric-presentation.html エンジニアリング 立体図解、技術説明

🌿 クリエイティブ・アート系

デザイン ファイル 適用場面 特徴
Organic Design organic-design-presentation.html 環境・自然関連 曲線美、自然色、調和感
Wabi-Sabi wabi-sabi-presentation.html 和風・伝統文化 日本美学、静寂、深み
Kinetic Typography kinetic-typography-presentation.html 動的表現 アニメーション、躍動感
Monoline monoline-presentation.html シンプルイラスト 一本線、親しみやすい

🕰️ レトロ・ヴィンテージ系

デザイン ファイル 適用場面 特徴
Art Deco art-deco-presentation.html 高級ブランド 幾何学模様、ゴールド、豪華
Bauhaus bauhaus-presentation.html デザイン史・建築 機能美、幾何学、モダニズム
Memphis memphis-presentation.html 80年代風 ポップ、カラフル、楽しい
Retro Design retro-design-presentation.html ノスタルジック ヴィンテージ、温かみ

🌍 文化・特色系

デザイン ファイル 適用場面 特徴
Afrofuturism afrofuturism-presentation.html 多様性・未来 アフリカ文化×未来、カラフル
Skeuomorphism skeuomorphism-presentation.html リアル質感重視 物理的質感、立体感、直感性
Kitsch kitsch-presentation.html エンタメ・カジュアル ポップ、親しみやすい、楽しい

🛠️ 使用方法

1. デザイン選択の指針

プレゼンテーションの目的・聴衆・コンテキストに応じて最適なデザインを選択：

🏢 ビジネス提案    → Fluent Design / Material Design
💻 技術発表        → Dark Mode / Glassmorphism  
🎓 学術発表        → Chalkboard / Minimalist
🎨 創作発表        → Organic Design / Memphis
🌍 国際プレゼン    → Human Interface / Flat Design
🕰️ 歴史・文化      → Art Deco / Bauhaus / Wabi-Sabi

2. Phase 5での適用方法

Phase 5 CLAUDE.mdファイルでHTMLを生成する際、デザインサンプルを参考に指定：

Claude Codeさん、今回は **Glassmorphism デザイン** を採用してください。
design_samples/glassmorphism-presentation.html を参考に、
透明感のあるモダンなデザインでHTMLを生成してください。

3. カスタマイズ例

複数デザインの組み合わせも可能：

基本は **Material Design** をベースに、
**Dark Mode** の配色と **Kinetic Typography** のアニメーション効果を
組み合わせたデザインでお願いします。

🎯 デザイン選択マトリックス

聴衆別推奨デザイン

聴衆 第1選択 第2選択 第3選択
経営層・役員 Minimalist Fluent Material
エンジニア Dark Mode Glassmorphism Brutalism
デザイナー Memphis Organic Neumorphism
研究者・学者 Chalkboard Human Interface Minimalist
学生・教育 Chalkboard Flat Design Monoline
国際聴衆 Material Human Interface Flat
一般消費者 Fluent Kitsch Memphis

業界別推奨デザイン

業界 推奨デザイン 理由
IT・テック Dark Mode, Glassmorphism 開発者文化、最新技術イメージ
金融・コンサル Minimalist, Fluent 信頼性、プロフェッショナル
教育・研究 Chalkboard, Human Interface 学術性、親しみやすさ
クリエイティブ Memphis, Organic, Kinetic 創造性、表現力、インパクト
製造・エンジニア Isometric, Bauhaus 技術性、機能美、精密性
ヘルスケア Organic, Minimalist 安心感、清潔感、人間性
環境・サステナビリティ Organic, Wabi-Sabi 自然調和、持続可能性

📊 デザイン効果測定

印象・効果分析

デザイン 信頼性 革新性 親しみやすさ インパクト 読みやすさ
Fluent ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐⭐
Material ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐⭐
Dark Mode ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
Minimalist ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Memphis ⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐
Glassmorphism ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐
Chalkboard ⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐
Brutalism ⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐

🔧 技術的考慮事項

デザイン実装の注意点

パフォーマンス影響

🟢 軽量デザイン: Flat, Minimalist, Chalkboard
🟡 中程度デザイン: Fluent, Material, Human Interface  
🔴 重量デザイン: Glassmorphism, Kinetic Typography, Memphis

ブラウザ互換性

🌐 高互換性: Flat, Material, Minimalist
🌐 中互換性: Fluent, Dark Mode, Organic
🌐 注意必要: Glassmorphism, Neumorphism, Kinetic Typography

カスタマイズガイドライン

色彩調整

各デザインサンプルの:rootセクションを参考に、ブランドカラーに調整：

:root {
    --primary-color: #YOUR_BRAND_COLOR;
    --secondary-color: #YOUR_ACCENT_COLOR;
    --text-color: #YOUR_TEXT_COLOR;
}

フォント変更

企業フォント・ブランドフォントへの変更：

:root {
    --font-primary: 'Your Brand Font', 'Fallback Font', sans-serif;
}

📚 参考資料

デザイン理論・背景

  • Fluent Design: Microsoft Design Language
  • Material Design: Google Design Guidelines
  • Human Interface: Apple Design Principles
  • Bauhaus: Bauhaus Design Movement
  • Art Deco: Art Deco Design History
  • Wabi-Sabi: Japanese Aesthetic Philosophy

実装技術

  • CSS3: Advanced Styling, Animations, Gradients
  • reveal.js: Presentation Framework
  • Mermaid: Diagram Generation
  • MathJax: Mathematical Expressions
  • Chart.js: Data Visualization

🎯 ベストプラクティス

デザイン選択の成功法則

  1. 聴衆分析: 聴衆の期待・慣習・文化的背景を考慮
  2. コンテンツ適合: 内容の性質・複雑さに応じたデザイン選択
  3. ブランド一貫性: 企業・個人ブランドとの整合性確保
  4. テクニカル制約: 配信環境・デバイスへの対応確認
  5. テスト実施: 事前のデザイン効果・ユーザビリティ検証

組み合わせデザインの活用

効果的な組み合わせ例:

🏢 Executive Presentation:
   Minimalist + Fluent + 企業ブランドカラー

💻 Developer Conference:  
   Dark Mode + Glassmorphism + Kinetic Typography

🎓 Academic Conference:
   Chalkboard + Human Interface + Traditional Typography

🌍 International Business:
   Material + Flat + Universal Icons

🚀 今後の展望

追加予定デザイン

  • Cyberpunk: 近未来テクノロジー向け
  • Nordic: スカンジナビアミニマリズム
  • Vaporwave: レトロフューチャー
  • Corporate: 企業カスタマイズ対応

AI支援機能

  • 自動デザイン選択: コンテンツ分析による最適デザイン提案
  • ブランド適応: ロゴ・カラーからの自動デザイン生成
  • A/Bテスト: 複数デザイン版の効果測定支援

🎨 使用開始

PrezenXでデザインサンプルを活用するには：

  1. プレゼンテーション分析: 目的・聴衆・コンテキストを明確化
  2. デザイン選択: 上記マトリックスを参考に最適デザインを決定
  3. Phase 5実行: 選択したデザインを指定してHTML生成
  4. カスタマイズ: 必要に応じてブランド色・フォントを調整

🎯 あなたのプレゼンテーションに最適なデザインで、聴衆の心を掴みましょう！

🤖 Generated with Claude Code