このテーマの特徴

Serenity Slidesテーマは、以下の特徴を備えています。

柔らかな色合い: 全体的に淡いグレー (#F3F2F2) を背景色に使用し、テキストはダークグレー (#232323) で視認性を確保。
洗練されたヘッダーとフッター: ヘッダーは青のグラデーション (#0099FF → #005AFF) で、フッターはフッター（#005AFF → #0099FF）もグラデーションを使用しており、全体に統一感と高級感を与えています。
読みやすいフォント: フォントは「Open Sans」を使用しており、見やすく読みやすいのが特徴です。
大型のタイトルスライド: タイトルスライドは背景色を青 (#0099FF) にし、タイトルを大きく（48pt）表示します。背景にはグラデーションと波形の模様が施されており、目を引くデザインになっています。

このテーマを利用する

CSS

/* @theme serenity_slides */
@import default;

section{
  background-color: #F3F2F2;
  color: #232323;
  font-family: 'Open Sans', sans-serif;
  font-size: 24pt;
  line-height: 1.6em;
}

header{
  width: 100%;
  height: 80px;
  background: linear-gradient(to right, #0099FF, #005AFF);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0px 2px 4px #0000001A;
}

footer{
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 50px;
  background: linear-gradient(to right, #005AFF, #0099FF);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 0 20px;
  box-shadow: 0px -2px 4px #0000001A;
}

section.title{
  background-color: #0099FF;
  color: white;
  padding: 50px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48pt;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1600 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wave' patternUnits='userSpaceOnUse' width='1600' height='800'%3E%3Cpath d='M0 0 L0 800 Q572 602 1200 537 Q1600 500 1600 500 L1600 0 L0 0 Z' fill='%2396e0ff' %3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wave)' %3E%3C/rect%3E%3C/svg%3E");
  background-size: 100% 100%;
}

Marpのサンプル

---
marp: true
theme: serenity_slides
header: " "
footer: " "
---
<!--
_class: title
-->

## マーケティングカテゴリーのスライドテンプレート

---
## 色
- プライマリー: ブルー（安定性と信頼性を示唆）
- セカンダリ: グリーン（成長と繁栄を象徴）、オレンジ（行動喚起）

---
## フォント
- 見出し: Sans-serif（明瞭で読みやすい）
- 本文: Serif（権威と伝統を示唆）

---
## レイアウト
- 明確で階層化された構造
- 視覚的な興味
- 十分な空白

---
## その他の特徴
- カスタマイズ可能なセクション
- インタラクティブ機能
- ブランドの一貫性

---
## セクションを作成

- セクションは_class_属性で指定します
- 例: `_class: custom-section`

---
## カスタムセクションの例

<!--
_class: custom-section
-->

### カスタムセクション

---
## ありがとうございました!

<!--
_class: title
-->

## マーケティングカテゴリーのスライドテンプレート