宇宙をテーマにした洗練されたMarpプレゼンテーションテーマ「Cosmic Voyage」

image0 image1

このテーマの特徴

テーマの特徴:

全体的なスタイル:

  • モダンで洗練された宇宙をテーマにしたデザイン
  • ダークブルーとライトブルーのグラデーションとホワイトのテキストのコントラストが鮮やか

セクション:

  • スライドの本文部分を表示するエリア
  • ダークブルーとライトブルーのグラデーションの背景で、宇宙空間の雰囲気を演出しています
  • セクション内のテキストは24ptの大きなフォントサイズで、可読性を高めています

タイトルスライド:

  • スライドタイトルを強調した特別なセクション
  • より濃いグラデーションの背景で、他のセクションと区別できます
  • 背景には星のような模様が重ねられ、宇宙空間をより強く表現しています
  • フォントサイズは36ptで、さらに目立たせています

このテーマを利用する

CSS

/* @theme cosmic_voyage */
@import default;

section {
  display: flex;
  flex-direction: column;
  font-size: 24pt;
  padding: 20px;
}

header {
  width: 100%;
  background: linear-gradient(to right, #2193b0, #6dd5ed);
  color: #ffffff;
  font-size: 28pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

footer {
  width: 100%;
  position: fixed;
  padding: 20px;
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  color: #ffffff;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

section.title {
  background: linear-gradient(to right, #2b5876, #4e4376);
  color: #ffffff;
  padding: 40px;
  text-align: center;
  font-size: 36pt;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='%23000000'/%3E%3Cpath d='M5 0h90v90H5z' fill='%234e4376' opacity='0.2'/%3E%3Cpath d='M25 0h50v100h-50z' fill='%232980b9' opacity='0.2'/%3E%3Cpath d='M50 0h50v100h-50z' fill='%232196f3' opacity='0.2'/%3E%3Cpath d='M75 0h25v100h-25z' fill='%236dd5ed' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23pattern)'%3E%3C/rect%3E%3C/svg%3E");
}

Marpのサンプル

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

# チャートとグラフのデザインのイメージ

---
## 全体的な目標
- データを明確かつ簡潔に視覚化する
- 視聴者に洞察を与え、決定を下すのを助ける

---
## 配色の指示
- 明るくメリハリのある色を使用する
- 色の使用でデータのカテゴリーを差別化する
- 背景はコントラストのある色または白で、データが目立つようにする

---
## グラフのタイプ
- 柱状グラフ、折れ線グラフ、円グラフなど、さまざまなグラフの種類を使用する
- 目的に最も適したタイプを選択する

---
## フォントの指示
- 明瞭で読みやすいフォントを使用する
- 見出しに太字または大きなサイズを使用する
- ラベルに中くらいのサイズを使用する
- 視覚的に邪魔にならない、中立的な色を使用する

---
## レイアウトの指示
- 情報を階層的に整理する
- グラフをページにバランスよく配置する
- 十分な余白を使用して、雑然とした印象を避ける

---
## その他の考慮事項
- アニメーションやインタラクションを使用して、データの探索をより魅力的にする
- 視聴者がデータの背景と意味を理解できるように、コンテキストを追加する
- デザインがさまざまなデバイスで見栄えがするように最適化する