こんにちは！デザインシステムとフロントエンドの境界線を溶かし、エンジニアとデザイナーが同じ言語で対話できる世界へようこそ。
今回は、オープンソースの次世代デザインツール「Penpot」と、Webの表現力を限界まで引き出す「SVGアニメーション＋CSSプロパティ連携」について、現場の最前線から熱量をもってお届けします。
「デザインカンプをただ再現するだけのコーディングはもう終わりしたい」
「デザイナーが意図したモーションを、エンジニアが寸分違わずコードに落とし込みたい」
そんな悩みを抱えているなら、この記事はあなたのためのものです。これをマスターすれば、デザインから実装までのワークフローが劇的に変わり、毎日の作業が驚くほどスムーズになりますよ。
—
1. なぜ「Penpot」なのか？ そしてSVGアニメーションの真価
これまで、多くのチームがFigmaなどのクローズドなツールを使ってきました。しかし、コード（SVG/CSS）の構造を意識したデザインを作るうえで、完全オープンスタンダード（SVGネイティブ）で作られているPenpotの優位性は圧倒的です。
Penpotが持つ、エンジニア・デザイナー共通のメリット
- SVGファーストな思想: Penpot上の描画は、そのままクリーンなSVGコードに直結しています。内部のパス構造（`
`や` `タグ）が予測しやすいため、アニメーションのフックが極めて容易です。 - CSS Grid / Flexboxのネイティブ実装: デザイナーが「なんとなく」配置するのではなく、モダンWebのレイアウト概念そのままでコンポーネントを組み立てられます。
このPenpotで作ったSVGをフロントエンド側（HTML/CSS/JS）でどう料理するか。それが今回の核心です。
—
2. 準備：Penpotで「アニメーションしやすいSVG」を作る作法
まずはPenpotをセットアップし、アニメーションの土台となるSVGベクターを作っていきましょう。PenpotはWebブラウザからすぐに無料で使い始められます（[penpot.app](https://penpot.app/)）。
ステップ1: レイヤー構造を「コードファースト」で整理する
SVGアニメーションを成功させる最大のコツは、「デザイン段階でのレイヤー名とグループ化」です。
1. Penpotでアートボードを作成し、アイコンやローダー、あるいはUIのパーツをベクターツールで描きます。
2. アニメーションさせたいパーツ（例: アイコンの線、背景の円、プログレスバーのトラックなど）ごとにグループ化（`Ctrl + G` または `Cmd + G`）します。
3. レイヤー名を必ずセマンティックな英数字に変更してください（例：「`path-background`」「`icon-arrow`」など）。
- ※Penpotでつけたレイヤー名は、SVGエクスポート時にそのまま `id` や `class` 属性に反映されます。ここが手抜きのないエンジニアリングの第一歩です！
ステップ2: SVGのエクスポート
1. 対象のコンポーネントまたはフレームを選択します。
2. 右サイドバーの下部にある「Export」パネルから、フォーマットに 「SVG」 を選択し、エクスポートします。
—
3. HelloWorld：動くSVGの最小構成を作る
エクスポートしたSVGを、実際のWebフロントエンド（HTML/CSS）で動かしてみましょう。今回はモダンなCSSプロパティ連携の基本として、SVGの線を流れるように描画する（パスアニメーション）を実装します。
1. HTML側にSVGをインラインで埋め込む
SVGアニメーションをCSSで制御する場合、``タグで読み込むのではなく、HTML内にSVGコードを直接（インラインで）記述するのが鉄則です。これにより、CSSから内部のパスを自由自在に操れるようになります。
2. CSSでSVGのプロパティをハックする
ここからが魔法の時間です。SVG特有のCSSプロパティである `stroke-dasharray` と `stroke-dashoffset` を使って、線が自ら描かれていくようなアニメーションを実装します。
/ style.css /
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #0f172a; / 落ち着いたダークモード /
}
.stage {
width: 200px;
height: 200px;
}
/ Penpotのレイヤー構造と連動したCSSセレクタ /
target-path {
/ パスの全体長をダッシュの長さに指定（※実際のパス長に合わせて数値を調整） /
stroke-dasharray: 300;
/ 最初はオフセットを全体長と同じにして、線を完全に隠す /
stroke-dashoffset: 300;
/ アニメーションの設定：2秒かけて滑らかに描画する /
animation: drawPath 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
/ パスが描かれる動きを定義するキーフレーム /
@keyframes drawPath {
0% {
stroke-dashoffset: 300; / 線が隠れた状態 /
}
100% {
stroke-dashoffset: 0; / 線が完全に描かれた状態 /
}
}
このコードをブラウザで開いてみてください。Penpotで描いた美しいベクター線が、まるで生き物のように滑らかに描画・消去を繰り返すはずです。これが、デザインとコードが完全にシンクロした瞬間です！
—
4. 実務で使える！CSSカスタムプロパティ（変数）との華麗な連携
基礎ができたら、次は実務で即戦力となる「CSSカスタムプロパティ（CSS変数）」を活用した高度な連携テクニックです。
デザインシステムのトークン（色やサイズ）をPenpotとCSSの間で共有すれば、デザイン変更が即座にアニメーションへ反映される堅牢なシステムが構築できます。
CSS変数を経由した動的コントロール
例えば、JavaScriptからアニメーションのスピードや色を動的に変更したい場合、SVGの直書き属性ではなくCSS変数経由でプロパティを制御します。
:root {
/ デザインシステムのトークンと連動する変数 /
–path-color: #ec4899;
–animation-duration: 1.5s;
}
target-path {
stroke: var(–path-color);
animation-duration: var(–animation-duration);
}
このように設計しておけば、デザイナーがPenpot上でカラーパレットを変更し、エンジニアがデザイントークン（CSS変数）を更新するだけで、アプリ全体のアニメーションのトーン＆マナーを一括で変更できるようになります。メンテナンス性が劇的に向上しますね。
—
5. まとめと次のステップ
今回は、PenpotのSVG構造を意識したデザイン作成から、インラインSVGとCSSプロパティを駆使した次世代のインタラクティブ・アニメーション実装までを解説しました。
- レイヤー名をセマンティックに整理する（コードを見据えたデザイン）
- インラインでSVGを埋め込む（CSSからの自由な制御）
- `stroke-dasharray` や CSS変数 を活用する（モダンな表現と保守性）
このワークフローをチームに導入すれば、「デザイナーの意図が伝わらない」「実装コストが高すぎる」といったコミュニケーションの壁を軽々と超えていけます。
ぜひ、今日の業務からPenpotを開いて、自分だけの美しいSVGアニメーションのプロトタイプを作ってみてください。あなたのプロダクトに、最高に心地よい「命」が吹き込まれるはずです。それでは、次回の開発ハックでお会いしましょう！