印象的な背景のMarpテーマ

このテーマの特徴

このMarpテーマは、次のような特徴があります。

• 印象的なヘッダー: 明るい青色のグラデーションのヘッダーで、テキストは白で大きく表示されます。ヘッダーには8pxの赤いボーダーがあります。

• 目立つタイトルセクション: タイトルセクションには、赤と黒の地図風のグラフィックの背景を使用しています。タイトルは白で、非常に大きく太字で表示されます。

• 固定フッター: フッターはヘッダーと同様に青色のグラデーションで、テキストは白で太字です。フッターには8pxの赤いボーダーがあります。

• コントラストの効いたテキスト: テキストの色は白や黒で、背景色と対照的に表示されます。

• アクセントカラーの赤: このテーマのアクセントカラーは赤色で、ボーダー、ボタン、ハイライトに使用されています。

• 読みやすいフォント: テキストには、読みやすいフォントサイズとフォントファミリが使用されています。

全体として、このMarpテーマは、印象的で目を引くプレゼンテーションを作成するのに適しており、特に地理や旅行関連のトピックに適しています。

このテーマを利用する

CSS

/* @theme world_travel_atlas */
@import default;

section{
  background-color: #f5f5f5;
  color: #1e1e1e;
  padding: 40px;
  font-size: 24pt;
  text-align: justify;
}

header{
  width: 100%;
  background: linear-gradient(to right, #002446, #003666);
  color: white;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  font-size: 36pt;
  font-weight: bold;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  border-bottom: 8px solid #c72f2f;
}

footer{
  width: 100%;
  position: fixed;
  padding: 20px;
  background: linear-gradient(to right, #003666, #002446);
  color: white;
  bottom: 0px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  border-top: 8px solid #c72f2f;
}

section.title{
  background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23c72f2f' d='M-3 -2L103 101L-3 101L-3 -2Z'/%3E%3Cpath fill='%23bd282e' d='M83 39L99 101L-3 101L17 39L83 39Z'/%3E%3Cpath fill='%23b32124' d='M83 39L103 90L99 101L17 39L83 39Z'/%3E%3Cpath fill='%23a91a1a' d='M79 41L95 78L83 39L17 39L79 41Z'/%3E%3Cpath fill='%239e1310' d='M67 54L95 78L79 41L23 41L67 54Z'/%3E%3Cpath fill='%23940c0b' d='M67 54L83 89L95 78L23 41L67 54Z'/%3E%3Cpath fill='%238a0506' d='M59 60L83 89L67 54L28 54L59 60Z'/%3E%3Cpath fill='%237f0002' d='M59 60L70 83L83 89L28 54L59 60Z'/%3E%3Cpath fill='%23750000' d='M51 68L70 83L59 60L32 60L51 68Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 40px;
  text-align: center;
  font-size: 48pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

section.title h1{
  font-size: 64pt;
  font-weight: bold;
  margin: 0;
}

.button{
  background-color: #c72f2f;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

.button:hover{
  background-color: #ffffff;
  color: #c72f2f;
}

::selection {
  background-color: #c72f2f;
  color: #ffffff;
}

::-moz-selection {
  background-color: #c72f2f;
  color: #ffffff;
}

Marpのサンプル

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

# マーケティング

---
## 全体的なトーンと雰囲気
- 明るく、モダン、魅力的
- 楽観的、前向き、やる気を起こさせる

---
## 配色
- 基本カラー: 緑、オレンジ、グレー
- 補完カラー: 白、黒

---
## タイポグラフィ
- フォント: Sans-serif フォント (Roboto、Helvetica、Open Sans など)
- サイズ: 見出しは大きく太字、本文は読みやすいサイズ
- 色: 黒または濃いグレー

---
## レイアウト
- シンプルでクリーン、余白を多く取る
- 視覚的な階層を使用し、重要な情報を目立たせる
- 画像と図表を効果的に使用して、情報を伝達する

---
## 画像
- マーケティングのコンセプトや戦略を視覚的に表現する
- 人、データ、グラフなど、関連性の高い画像を使用する
- 鮮やかで高品質な画像を使用する

---
## 図表
- データを要約し、傾向と洞察を示す
- 棒グラフ、折れ線グラフ、円グラフなどを効果的に使用する
- 視覚的に魅力的でわかりやすい図表を作成する

---
## 追加の要素
- アイコン: マーケティングの概念を表す
- コールアクトボタン: 行動を促す
- テキストボックス: 重要な情報を強調する