こんにちは！プロダクトデザイナー、そしてエンジニアの皆さん。
日々のUIデザインやモックアップ制作、お疲れ様です。「デザインした通りのリッチな視覚効果が、フロントエンドの実装時に再現できない…」「デザイナーとエンジニアの間で、シャドウのボケ足やブレンドモードの解釈がズレて修正の往復が発生する…」そんなもどかしい経験はありませんか？
今回は、オープンソースの次世代デザインツール「Penpot」が持つ、Web表現の可能性を極限まで引き出す「SVGフィルターとブレンドモード」の深層に迫ります。
これをマスターすれば、デザインとコードの境界線が消え去り、毎日の作業やエンジニアとのハンドオフ（引き渡し）が劇的にスムーズになりますよ。さあ、一緒にWebの表現力を極限まで高める旅に出発しましょう！
—
1. なぜ「Penpot」なのか？ — デザイナーとエンジニアを繋ぐ共通言語
世の中にデザインツールは数あれど、なぜ私たちが今、Penpotに注目するべきなのでしょうか？
その答えは明確です。Penpotは最初から「Webのネイティブな概念（SVG、CSS Flexbox/Grid）」をベースに設計されているからです。他のツールが「描画された絵」を書き出すのに対し、Penpotは「Webブラウザが理解できる構造」そのものをキャンバス上で構築します。
特に今回解説する「SVGフィルター」と「ブレンドモード」は、最終的にブラウザのSVG/CSSエンジンがそのままレンダリングするものです。つまり、Penpotで作った視覚効果は、そのままプロダクションコードの品質に直結するのです。
—
2. 準備：Penpotのセットアップと最初のキャンバス作成
まずはPenpotに触れながら、モダンな視覚効果を受け止めるための「土台」を作りましょう。
セットアップのステップ
1. アカウントの作成: [Penpotの公式サイト](https://penpot.app/)にアクセスし、無料のアカウントを作成します（セルフホスト版を利用している場合はご自身のサーバーにアクセスしてください）。
2. ワークスペースの起動: 「New Project」から新しいプロジェクトを作成し、ボード（Board）を一枚配置します。今回はデスクトップサイズ（例: 1440 x 900）を選びましょう。
最初の「Hello World」：カードコンポーネントの配置
視覚効果の効果を最も実感しやすい「カードUI」をサクッと作ります。
1. シェイプの作成: ツールバーから矩形ツール（`R`キー）を選び、キャンバス中央に `400 x 300px` のカード（背景色：白 `#FFFFFF`）を配置します。
2. レイアウトの調整: 角丸（Border Radius）を `16px` に設定し、クリーンな近代的なカードのベースを作ります。
これで準備は完了です。いよいよ、Penpotの真骨頂である高度な視覚効果の世界へ飛び込みましょう！
—
3. SVGフィルターを極める：重厚感と奥行きのコントロール
従来のビットマップ的なシャドウやブラーとは異なり、PenpotのSVGフィルターは無限にスケーラブルで、細密なパラメーター調整が可能です。
ドロップシャドウの高度なチューニング
ただの「黒いぼかし」を置いていませんか？ 優れたUIのシャドウには「環境光」と「直射光」の概念が存在します。
1. 先ほど作ったカードを選択し、右サイドバーの 「Filters（フィルター）」 セクションを開きます。
2. Drop Shadow を追加し、以下のパラメータを叩き込んでみてください。
- Color: 深いネイビーや紫みがかった黒（例: `#0F172A` の不透明度 `15%`）
- X / Y: `0px` / `20px` （下方向に大きく落とす）
- Blur: `25px` （柔らかく拡散させる）
- Spread: `-4px` （少し内側に引き締め、シャドウが広がりすぎないようにする）
> 💡 プロの知見:
> `Spread`（スプレッド）の概念を使いこなすことが、チープなデザインから脱却する最大の近道です。シャドウを広げるだけでなく、マイナス方向に収縮させることで、エッジの効いた立体感を生み出せます。
ガラスモーフィズム（Glassmorphism）の作成
背景を美しくぼかす「Backdrop Blur」とSVGフィルターを組み合わせれば、流行のすりガラス風UIも一撃です。
1. カードの上に、さらに小さめの長方形を重ねます。
2. 塗りを白（`#FFFFFF`）にし、不透明度を `40%` に落とします。
3. フィルターから 「Background Blur」 を追加し、Blur値を `16px` に設定します。
背後にカラフルな図形を置いてみてください。見事に背後がすっきりとボケて、リッチな質感が生まれるのが確認できるはずです。
—
4. ブレンドモード（Blend Mode）で色彩の化学反応を起こす
PhotoshopやIllustratorでおなじみのブレンドモードが、PenpotではWeb標準の `mix-blend-mode` として完璧に同期します。
重ね合わせが生むマジック
1. キャンバスに鮮やかなグラデーションの円（Circle）を配置します。
2. その上に、モノクロのノイズテクスチャや、ダークトーンのシェイプを重ねます。
3. 重ねたレイヤーの 「Blend Mode」 を `Overlay`（オーバーレイ）や `Multiply`（乗算）、あるいは `Screen`（スクリーン）に切り替えてみてください。
色が単に重なるのではなく、下層の色彩と混ざり合い、奥行きと独特の質感を備えたマテリアルに変化します。
—
5. デザイナーとエンジニアの架け橋：実装イメージの共有
Penpotでどれほど美しいSVGフィルターやブレンドモードを作り上げても、それがエンジニアに正確に伝わらなければ意味がありません。ここで、冒頭のまとめの真意が生きてきます。
> PenpotのSVGフィルターやブレンドモードは、そのままCSSの `filter` プロパティや `mix-blend-mode` と完全に同義です。そのため、プロパティの数値をそのままコードに移植でき、デザイナーとエンジニアの間で「実装したら見栄えが違う」という永遠の課題を根底から解決できます。
エンジニアへ渡す際のコードのイメージ
Penpotで調整したシャドウとブレンドモードは、開発者モード（Inspect）で以下のようなCSSスニペットとして即座に取得できます。
.card-element {
/ PenpotのSVGフィルター設定からダイレクトに導出される値 /
box-shadow: 0 20px 25px -4px rgba(15, 23, 42, 0.15);
/ ブレンドモードの適用 /
mix-blend-mode: overlay;
/ 背景のぼかし効果 /
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
この統一感があるおかげで、「このボケ足、CSSだとどう書けばいいですか？」というコミュニケーションコストがゼロになります。デザインの意図が、一言一句違わずにコードへコンパイルされていく快感を、ぜひチームで体験してください。
—
おわりに
PenpotのSVGフィルターとブレンドモードの組み合わせは、単なる「お化粧」にとどまりません。それは、Webという媒体の表現力を極限まで高め、デザインと実装の垣根を溶かすための強力な武器です。
これをマスターすれば、毎日の作業が劇的に楽になりますし、何より「自分の描いた理想の画面が、そのまま寸分の狂いもなく動く」というデザイナー・エンジニア双方にとって最高のクリエイティブ環境が手に入ります。
さあ、今日のプロダクト作りから、さっそくこの手法を取り入れてみてください。あなたのデザインするプロダクトが、より一層輝くことを確信しています！