このテーマの特徴

テーマの特徴:

ダークで宇宙をイメージした背景: 背景は黒で、セクションタイトルには星雲のようなグラデーションを使用しています。
洗練されたホワイトテキスト: すべてのテキストは白で、背景に対して高くコントラストしています。
大きなタイトル: スライドのタイトルは大きく、目立ちます。
中央揃え: 重要なテキストは中央揃えで、読みやすさを向上させています。

このテーマを利用する

CSS

/* @theme starlight_galaxy */
@import default;

section {
  display: flex;
  flex-direction: column;
  font-size: 24pt;
  background: #000000;
  color: #ffffff;
  padding: 48px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px 48px;
  background: #050407;
  color: #ffffff;
  box-shadow: 0 2px 4px #00000050;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 24px 48px;
  background: #050407;
  color: #ffffff;
  position: fixed;
  bottom: 0;
}

section.title {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"%3E%3Cstop offset="0" style="stop-color:rgba(255, 255, 255, 1)"/%3E%3Cstop offset="1" style="stop-color:rgba(200, 200, 200, 1)"/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x="0" y="0" width="100" height="100" fill="url(%23grad)"/%3E%3C/svg%3E');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 96px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

section.title h1 {
  font-size: 48pt;
  margin: 0;
}

section.info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

section.info > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

section.info h2 {
  font-size: 30pt;
  margin: 0;
}

section.info p {
  font-size: 24pt;
}

.separator {
  width: 100%;
  height: 1px;
  background: #ffffff;
  margin: 32px 0;
}

.center {
  text-align: center;
}

Marpのサンプル

---
marp: true
theme: starlight_galaxy
header: " "
footer: " "
---

<!--
_class: title
-->

# テクノロジーカテゴリのスライドテンプレートデザインビジョン

---
<!--
_class: info
-->

## スライドデザインに関するガイダンス

**全体的なコンセプト:**

* 未来志向で革新的なデザイン
* テクノロジーの力と進歩を強調する
* クリアで読みやすいレイアウト

**色:**

* 主色: ブルー、グレー、ホワイト
* アクセントカラー: グリーン、オレンジ

**フォント:**

* ヘッダー: 太字の sans-serif フォント
* ボディ: 明瞭で読みやすい serif フォント

**画像:**

* 未来的なテクノロジーのコンセプトアート
* 回路基板やコードのクローズアップ
* ロボットや人工知能の ilustrasi

**グラフィック要素:**

* 幾何学的な図形
* 流動的な線と曲線
* データポイントやグラフの視覚化

**レイアウト:**

* 明確で簡潔な階層構造
* 情報を効果的に伝えるために、視覚的なキューを使用
* イメージとテキストのバランスのとれた配置

---

**具体的なデザインのアイデア:**

* スライドの背景として、ブルーのグラデーションと白い多角形を使用する。
* ヘッダーを太字のサンセリフフォントで白く表示し、背景と対照的にする。
* 本文テキストは、読みやすいグレーのセリフフォントを使用する。
* アクセントカラーのグリーンとオレンジを、重要なポイントやデータポイントを強調するために使用する。
* 未来的なテクノロジーのコンセプトアートの画像を、視覚的な興味と革新の感覚を伝えるために含める。
* 線と曲線を巧みに使用して、スライドにダイナミズムと流れを与える。
* 情報を視覚的に表示するために、チャート、グラフ、データポイントなどの視覚化を組み込む。


---
<!--
_class: end
-->

## 終わり

ありがとうございました。