このテーマの特徴
テーマの特徴:
背景: 全体的に暗い背景色（#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 --> # スタートアップ向けの革新的なスライドテンプレート --- # 見出し - **革新的な** テクノロジーを使用して、業界に革命を起こしましょう。 - **先進的な** アイデアで、競争から一歩先へ。 --- # サブ見出し **ダイナミックで動きのある** プレゼンテーションで、オーディエンスを引き付けましょう。 **楽観的で希望に満ちた** ビジョンで、未来を形作りましょう。 --- # スタートアップ向けの魅力的なスライド **信頼性** のある情報を提供するブルーのアクセントを使用。 **成長** と **新鮮さ** を表現するグリーンを使用。 **楽観** と **創造性** を象徴するオレンジを使用。 --- # プロフェッショナルなスライドのヒント **サンセリフ体** のフォントを使用して、モダンで読みやすいプレゼンテーションを作成しましょう。 **ボールド** と **ライト** のフォントの組み合わせを使用して、強調とコントラストを追加しましょう。 --- # インパクトのあるビジュアル **スタートアップのオフィス** や **チーム** の写真を活用して、ストーリーを語らせましょう。 **テクノロジー** や **イノベーション** に関連する抽象的な画像を使用して、視覚的な興味を喚起しましょう。 **チャート** や **グラフ** を使用して、成長や進捗状況を明確に示しましょう。 --- # グラフィック要素の活用 **幾何学的な形状** を使用して、動きと構図を作成しましょう。 **グラデーション** を使用して、奥行きと視覚的興味を作成しましょう。 **テクスチャ** を使用して、暖かみと次元を追加しましょう。 --- # アイコニックなデザイン **スタートアップに関連するアイコン** を使用して、視覚的なインパクトを作成しましょう。 **アイコンに明るい色** を使用して、目立たせましょう。 --- # 明確なレイアウト **大見出し** と **簡潔な文章** を使用して、明確で読みやすいプレゼンテーションを作成しましょう。 **画像** と **グラフィック** を使用して、テキストを補完し、興味を喚起しましょう。 **白** と **黒** の色ブロックを使用して、セクションを視覚的に区別しましょう。 --- # 追加のヒント **ヘッダー** にスタートアップの **ロゴ** または **スローガン** を含めましょう。 **スライド** に **コールトゥアクションボタン** を追加して、エンゲージメントを促進しましょう。 **高品質の画像** を使用して、プロフェッショナルで洗練された印象を与えましょう。 **テンプレート全体** で **一貫したブランドアイデンティティ** を維持しましょう。 --- # ありがとうございました！ 質問やコメントがあれば、お気軽にお問い合わせください。
