オーロラボレアリスが輝くプレゼンテーションテーマ

image0 image1

このテーマの特徴

テーマの特徴:

  • 背景: 全体的に暗い背景色(#212121)を使用し、他の要素を引き立てています。

  • タイトルセクション:

    • 背景にオーロラボレアリスをイメージしたグラデーション(#52ee84、#a9ffc5、#212121)
    • 中央揃えで、縦方向のスペースを空けて魅せるレイアウト
    • 大きな見出し(48pt)とサブタイトル(24pt)
    • テキストに影で視覚的なインパクトを与えています。
  • ボタン:

    • 明るい青色(#015190)の背景
    • 白のテキスト
    • 丸みを帯びた角
    • ホバー時に緑色(#52ee84)に変化
  • その他:

    • テキスト選択時に緑色のハイライト (#52ee84) が表示されます。

このテーマを利用する

CSS

/* @theme aurora_borealis */
@import default;

section{
  background-color: #212121;
  color: white;
  padding: 20px;
  font-size: 18pt;
}

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

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

section.title{
  background-color: #52ee84;
  color: white;
  padding: 60px 40px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 50 C 50 0 50 100 100 50' fill='%23212121' /%3E%3Cpath d='M20 10 C 28 18 37 25 50 30 C 63 35 72 40 80 50 C 88 60 92 70 100 80 C 100 90 90 95 70 100 C 40 90 20 60 20 10' fill='%23a9ffc5' /%3E%3Cpath d='M65 12 C 78 25 85 40 85 50 C 85 60 78 75 65 88 C 52 100 20 90 20 60 C 20 40 38 15 65 12' fill='%2352ee84' /%3E%3C/g%3E%3C/svg%3E");
}

section.title h1{
  font-size: 48pt;
  font-weight: bold;
}

section.title p{
  font-size: 24pt;
  font-weight: normal;
}

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

.button:hover{
  background-color: #52ee84;
  color: white;
}

::selection {
  background-color: #52ee84;
  color: #212121;
}

::-moz-selection {
  background-color: #52ee84;
  color: #212121;
}

Marpのサンプル

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

# スタートアップ向けの革新的なスライドテンプレート

---
# 見出し

- **革新的な** テクノロジーを使用して、業界に革命を起こしましょう。
- **先進的な** アイデアで、競争から一歩先へ。

---
# サブ見出し

**ダイナミックで動きのある** プレゼンテーションで、オーディエンスを引き付けましょう。
**楽観的で希望に満ちた** ビジョンで、未来を形作りましょう。

---
# スタートアップ向けの魅力的なスライド

**信頼性** のある情報を提供するブルーのアクセントを使用。
**成長** と **新鮮さ** を表現するグリーンを使用。
**楽観** と **創造性** を象徴するオレンジを使用。

---
# プロフェッショナルなスライドのヒント

**サンセリフ体** のフォントを使用して、モダンで読みやすいプレゼンテーションを作成しましょう。
**ボールド** と **ライト** のフォントの組み合わせを使用して、強調とコントラストを追加しましょう。

---
# インパクトのあるビジュアル

**スタートアップのオフィス** や **チーム** の写真を活用して、ストーリーを語らせましょう。
**テクノロジー** や **イノベーション** に関連する抽象的な画像を使用して、視覚的な興味を喚起しましょう。
**チャート** や **グラフ** を使用して、成長や進捗状況を明確に示しましょう。

---
# グラフィック要素の活用

**幾何学的な形状** を使用して、動きと構図を作成しましょう。
**グラデーション** を使用して、奥行きと視覚的興味を作成しましょう。
**テクスチャ** を使用して、暖かみと次元を追加しましょう。

---
# アイコニックなデザイン

**スタートアップに関連するアイコン** を使用して、視覚的なインパクトを作成しましょう。
**アイコンに明るい色** を使用して、目立たせましょう。

---
# 明確なレイアウト

**大見出し** と **簡潔な文章** を使用して、明確で読みやすいプレゼンテーションを作成しましょう。
**画像** と **グラフィック** を使用して、テキストを補完し、興味を喚起しましょう。
**白** と **黒** の色ブロックを使用して、セクションを視覚的に区別しましょう。

---
# 追加のヒント

**ヘッダー** にスタートアップの **ロゴ** または **スローガン** を含めましょう。
**スライド** に **コールトゥアクションボタン** を追加して、エンゲージメントを促進しましょう。
**高品質の画像** を使用して、プロフェッショナルで洗練された印象を与えましょう。
**テンプレート全体** で **一貫したブランドアイデンティティ** を維持しましょう。

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

質問やコメントがあれば、お気軽にお問い合わせください。