提案資料テーマ (Slidev)

なぜ Slidev 化したか

Flarely は提案資料の枚数が多い。受託の見積もりから法人研修、社内向け説明まで、すべて 1 枚 1 枚 PowerPoint で作っていたら時間がいくらあっても足りない。

しかも、提案資料が ブランドの世界観から外れた瞬間に、サイトで作った印象が薄まる。サイトと提案資料を分断したくなかったので、Markdown ベースの Slidev に共通テーマを作る方針にした。

repos/slidev-theme-flarely/ で初版を実装
cover.vue / section.vue / default.vue / end.vue の 4 レイアウト
example.md に 7 枚のデモを用意して、見た目をその場で検証できる状態に

Cover レイアウト

参考にしたのは IXYAS のカンパニーデックの cover。cream #F7F4EE 背景 + wordmark + タイトルを主軸に、左下に Last Modified、右下に CSS の radial-gradient で warm orange のオーロラブロブを置いた。

Slidev cover layout

シェーダで動かす案も検討したが、PDF export 時に再現性が落ちる懸念から、CSS の radial-gradient + 画像 1 枚に統合する形に落ち着いた。@paper-design/shaders（PolyForm Shield ライセンス・商用 OK）も試したが、WebGL grain-gradient → CSS → SVG feTurbulence → 画像、と段階的に降りる構成にした。components/GrainGradient.vue は将来再利用するかもしれないので未使用残置。

Section レイアウト

章扉として使う Section は フルブリードの orange 画像 1 枚（1920×1080 / 3.9MB） にした。

Slidev section layout

火種のテクスチャ + 砂目（grain）を画像側に焼き込み
白タイトル + ラベル（“Why” / “What” / “How” 等の章メタ）
文字組みは Futura Bold + 余白多め

CSS で再現するより、画像 1 枚に焼き込んだ方が章扉としての存在感が出る。「ここで章が変わる」と読み手に感じさせるのは、視覚的な強度がすべて。

試行錯誤の階段

実装の途中で残した実験ログ:

@paper-design/shaders で WebGL grain-gradient — 動きはきれいだが PDF export で破綻
CSS radial-gradient — Cover にはちょうど良い軽さ
SVG feTurbulence ノイズ — Section の砂目には強度不足
画像 1 枚に焼き込む — Section の最終解。再現性 100%

「動かしたいか、刷り込みたいか」で技術選択が分かれる、というのが学び。Cover は動かしたい（=CSS）、Section は刷り込みたい（=画像）。

サイトとの接続

Slidev テーマで使うフォントは Futura + Noto Sans JP、カラーは graphite + warm orange + cream。サイトと完全に同じトークンで組んでいる。提案資料を開いた瞬間に「これは Flarely だ」と分かる状態を作るのが目的。

副産物として、Flamey マスコットをそのまま章扉や本文中の挿絵に置けるので、Slidev → サイト → 名刺の間でビジュアル要素が完全に再利用できる構造になった。ブランドシステムを 1 個作っておくと、その後の制作物が全部速くなる、という今回の主題がここでもそのまま効いている。