サンプルイベント 2026-05-13
2026-05-13 · このポートフォリオ

AstroとMDXで作るスライドシステム

MDX × View Transitions API

なぜMDXか#

  • Marpの課題: 外部画像パスの管理が煩雑。HTMLに出力すると画像を別途配置する必要がある
  • MDXの利点: サイトのデザインシステム（CSS変数・フォント）と完全に統合できる
  • Astroらしさ: コンポーネント駆動・ゼロJS・コンテンツコレクション管理

アーキテクチャ#

スライド記述

  • MDX（Markdown + JSX）
  • Astroコンポーネント
  • src/content/talks/ で管理

ビューア

  • View Transitions API
  • ← → キーボードナビ
  • ?slide=N URLディープリンク

View Transitions API#

document.startViewTransition(() => {
  showNextSlide();
});

ブラウザネイティブのAPIでスライド切り替えをアニメーション。方向（前進・後退）に応じてアニメーションを切り替えます。

スライドの書き方#

import Slide from '../../components/slides/Slide.astro';
import SlideTitle from '../../components/slides/SlideTitle.astro';


<Slide>
  <SlideTitle title="タイトル" subtitle="サブタイトル" />
</Slide>


<Slide>


## 通常スライド


- MDXで自由に記述できます


</Slide>
02

レイアウトコンポーネント

MDX に貼るだけで使える定型レイアウト

Columns — 汎用マルチカラム#

Before

  • Marpで運用
  • 画像パス事故

During

  • 自前ビルダーを試作
  • View Transitions検証

After

  • MDXに統一
  • サイトCSSを共有

Columns — 比率指定もできる#

メイン側の説明をここに書きます。ratio プロパティに CSS grid の grid-template-columns 値をそのまま渡せるので、2fr 1fr でも 1fr 2fr 1fr でも自由に組めます。

補足

  • cols だけなら均等
  • ratio 指定で非対称
スライドのスクリーンショット
ImageSlide — 一枚見せ用のフルブリードレイアウト

ImageWithText — 画像 + テキスト#

エディタのスクリーンショット

ペースト 1 発で完了

  • Cmd+Option+V で画像保存
  • public/talks/<slug>/ に自動配置
  • ![](/talks/...) が挿入

side="left" | "right" で左右入れ替え可能。

Simplicity is prerequisite for reliability.

— Edsger W. Dijkstra

Just MDX.

タイポグラフィの細かい話#

  • 箇条書きは ▸ マーカー（プライマリ色）
  • ネストすると – に切り替わる
    • こんな感じで
    • 視覚的にも階層が分かりやすい
  • 斜体 は accent-2 で強調、太字 は通常色のまま
  • マーカー や リンク も整備済み
  • Cmd + K のようなキー表記も

ブロッククォートはこの細い左ボーダー付き。Quote コンポーネントとは別物で、軽い引用に。

hr は薄い区切り線として使えます。

fin.

Thank you

← → キーまたはボタンで操作できます