このテーマの特徴
テーマの特徴:
- ダークで宇宙をイメージした背景: 背景は黒で、セクションタイトルには星雲のようなグラデーションを使用しています。
- 洗練されたホワイトテキスト: すべてのテキストは白で、背景に対して高くコントラストしています。
- 大きなタイトル: スライドのタイトルは大きく、目立ちます。
- 中央揃え: 重要なテキストは中央揃えで、読みやすさを向上させています。
このテーマを利用する
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 --> ## 終わり ありがとうございました。