Figmaで描いたデザインをp5.jsで動かす：インタラクティブなWeb表現の実践ガイド
ツール依存からの脱却と新たな表現の追求
デジタルアートやUI/UXデザインに携わる方々にとって、Figma、Photoshop、Illustratorといったデザインツールは日々の制作に欠かせない存在でしょう。これらのツールは静的なビジュアルやプロトタイプの作成において優れた能力を発揮しますが、より複雑で動的な表現、あるいはユーザーの操作に直接反応するインタラクティブな体験を自力で作り出したいと感じる場面もあるかもしれません。ツールの機能に依存せず、自身のアイデアをコードで直接形にすることで、創造性の幅を大きく広げることが可能です。
この記事では、Figmaで培ったデザインスキルをプログラミングへと拡張し、p5.jsというクリエイティブコーディングのライブラリを用いて、インタラクティブなWeb表現を生み出すための実践的な手法をご紹介します。Figmaのデザインアセットをp5.jsで動的に制御する方法を学ぶことで、既存のスキルセットを活かしつつ、さらにステップアップできるような知識と実践的なアプローチを提供します。
Figmaとp5.jsの連携の第一歩：アセットの準備と読み込み
Figmaで作成したデザインをp5.jsで利用するには、まずデザイン要素を画像ファイル（PNG, JPG）やベクターファイル（SVG）としてエクスポートする必要があります。どちらの形式を選択するかは、デザインの性質や表現したいインタラクションによって使い分けることが重要です。
1. Figmaからのアセットエクスポート
- PNG/JPG: 複雑なテクスチャや写真要素を含む場合、または固定サイズで表示したい場合に適しています。
- SVG: 図形、アイコン、イラストなど、拡大縮小しても品質が劣化しないベクター要素に適しています。p5.jsで読み込んだ後、そのパス情報を解析して色や形を動的に変更するなどの高度な操作も可能です。
エクスポートする際は、不要なレイヤーやグループを整理し、ファイルサイズを最適化することで、Web上でのパフォーマンス向上に繋がります。
2. p5.jsプロジェクトでのアセット読み込み
エクスポートしたアセットは、p5.jsプロジェクトのassetsなどのディレクトリに配置します。p5.jsで画像を読み込む際は、preload()関数を使用することが一般的です。これにより、スクリプトの実行前に画像が完全にロードされ、setup()やdraw()関数で安全に利用できるようになります。
// p5.jsでの画像アセット読み込みの基本例
let logoImage; // Figmaからエクスポートしたロゴ画像を格納する変数
function preload() {
// 画像ファイルを読み込み、logoImage変数に格納します。
// 'assets/logo.png'はプロジェクト内の画像ファイルへのパスを指します。
logoImage = loadImage('assets/logo.png');
}
function setup() {
// キャンバスを幅800px、高さ600pxで作成します。
createCanvas(800, 600);
// 画像の描画位置を画像の中央を基準にする設定です。
// これにより、image()関数のX, Y座標が画像の中央を指すようになります。
imageMode(CENTER);
}
function draw() {
// 毎フレーム、背景を薄い灰色で塗りつぶします。
background(220);
// logoImageをキャンバスの中央に描画します。
// width/2とheight/2はキャンバスの中央座標です。
// logoImage.width * 0.5とlogoImage.height * 0.5で、元の半分のサイズで描画しています。
image(logoImage, width / 2, height / 2, logoImage.width * 0.5, logoImage.height * 0.5);
}
Figmaのコンポーネント思考とp5.jsのオブジェクト指向
Figmaでデザインする際、ボタンやカード、アイコンなど、繰り返し使用する要素を「コンポーネント」として定義し、再利用性を高めることは非常に効率的です。この「コンポーネント思考」は、プログラミングにおける「オブジェクト指向プログラミング（OOP）」の概念と深く結びついています。
OOPでは、「クラス」を設計図として定義し、そこから「インスタンス」という具体的なオブジェクトを作成します。これにより、デザインコンポーネントのように、見た目や振る舞いが共通する複数の要素を効率的に管理し、プログラムの構造を整理できます。
クラスとインスタンスによるインタラクティブなUI要素の作成
Figmaで作成したボタンのデザインを例に、p5.jsでクラスを使ってインタラクティブなボタンを実装する方法を見てみましょう。
// p5.jsでのインタラクティブボタンのクラス定義例
class InteractiveButton {
constructor(x, y, w, h, img) {
this.x = x; // ボタンの中央X座標
this.y = y; // ボタンの中央Y座標
this.width = w; // ボタンの幅
this.height = h; // ボタンの高さ
this.image = img; // ボタンに使用する画像アセット
this.isHovered = false; // マウスがホバーしているかどうかのフラグ
this.scaleFactor = 1.0; // ボタンの現在の拡大率
this.targetScale = 1.0; // 目標とする拡大率
this.animationSpeed = 0.1; // アニメーションの速度（0-1の範囲で、1に近いほど速い）
}
// ボタンを描画するメソッド
display() {
push(); // 現在の描画設定を保存
translate(this.x, this.y); // ボタンの中央に座標系を移動
scale(this.scaleFactor); // ボタンの拡大率を適用
if (this.isHovered) {
tint(200, 200, 255); // ホバー時に薄い青色を重ねて表示
}
image(this.image, 0, 0, this.width, this.height); // 画像を描画（移動・拡大の中心が画像中央になるように）
noTint(); // tint設定をリセット
pop(); // 描画設定を元の状態に戻す
// 現在のスケールを目標スケールに徐々に近づけます (lerpは線形補間関数)
this.scaleFactor = lerp(this.scaleFactor, this.targetScale, this.animationSpeed);
}
// マウスカーソルがボタンの領域内にあるかをチェックするメソッド
checkHover(mx, my) {
// マウス座標がボタンの境界内にあるかを判定
this.isHovered = (mx > this.x - this.width / 2 && mx < this.x + this.width / 2 &&
my > this.y - this.height / 2 && my < this.y + this.height / 2);
return this.isHovered;
}
// マウスが押された時の処理
mousePressed() {
if (this.isHovered) {
this.targetScale = 0.9; // クリック時に少し縮むように目標スケールを設定
}
}
// マウスが離された時の処理
mouseReleased() {
this.targetScale = 1.0; // リリース時に元のサイズに戻るように目標スケールを設定
}
}
let buttonDesignImage; // Figmaからエクスポートしたボタン画像を格納する変数
let myInteractiveButton; // InteractiveButtonクラスのインスタンス
function preload() {
buttonDesignImage = loadImage('assets/button.png'); // Figmaからエクスポートしたボタン画像ファイルを読み込み
}
function setup() {
createCanvas(800, 600);
imageMode(CENTER); // 画像の描画基準を中央に設定
// InteractiveButtonのインスタンスを作成
// (中央X, 中央Y, 幅, 高さ, 使用する画像)
myInteractiveButton = new InteractiveButton(width / 2, height / 2, 200, 80, buttonDesignImage);
}
function draw() {
background(220);
myInteractiveButton.display(); // ボタンを描画
}
// マウスが動いた時に呼び出されるp5.jsのイベント関数
function mouseMoved() {
myInteractiveButton.checkHover(mouseX, mouseY); // マウスホバーをチェック
}
// マウスが押された時に呼び出されるp5.jsのイベント関数
function mousePressed() {
myInteractiveButton.mousePressed(); // ボタンのクリック処理を呼び出し
}
// マウスが離された時に呼び出されるp5.jsのイベント関数
function mouseReleased() {
myInteractiveButton.mouseReleased(); // ボタンのリリー処理を呼び出し
}
この例では、InteractiveButtonクラスがFigmaでデザインしたボタンの画像を受け取り、マウスイベントに基づいてホバー時の色の変化やクリック時のアニメーションを制御します。lerp関数（線形補間）を使うことで、After Effectsのような滑らかなアニメーション効果を実装しています。
インタラクションとアニメーションの実装
コードベースで表現する最大の利点は、デザインツールの固定されたタイムラインやエフェクトに縛られず、あらゆるインタラクションやアニメーションを自在に設計できる点にあります。
- マウスイベント:
mouseMoved(),mousePressed(),mouseReleased()といったp5.jsの組み込み関数を利用することで、ユーザーの入力にリアルタイムで反応する要素を作成できます。 - キーボードイベント:
keyPressed(),keyReleased()で、キー入力に応じたインタラクションを実装できます。 - 時間ベースのアニメーション:
frameCountやmillis()を使って時間の経過に基づいた動きを生成したり、先ほどのlerpのようなイージング関数を組み合わせることで、自然で洗練されたアニメーションを実現できます。After Effectsでのキーフレーム設定のように、動きの緩急を自由にプログラミングで記述することが可能です。 - 簡単な物理演算: 速度、加速度、摩擦といった物理的な概念をコードで表現することで、よりリアルな動きや重力のようなシミュレーションを作品に取り入れることができます。
表現の可能性とデザインプロセスへの応用
Figmaとp5.jsの連携は、単なるデザインの再現に留まらない、より豊かな表現の可能性を秘めています。
- ジェネラティブデザイン: コードのアルゴリズムによって、無限に変化するパターンや形状を生成し、Figmaで作成した要素と組み合わせることで、予測不能で魅力的なビジュアルを生み出すことができます。
- データビジュアライゼーション: 外部のデータを取り込み、そのデータに基づいてFigmaのデザイン要素を動的に変化させることで、インタラクティブな情報表現を実現します。
- インタラクティブなプロトタイピング: Figmaの静的なプロトタイプでは表現しきれない、微細なインタラクションや複雑なユーザーフローをp5.jsで実装し、よりリアルなユーザー体験を検証することが可能です。
- クリエイティブコーディングの学習: デザイン思考のプロセスとプログラミングを組み合わせることで、問題解決能力と表現力を同時に高めることができます。
デザインプロセスにおいてプログラミング的思考を取り入れることは、論理的な問題解決能力を養い、最終的なアウトプットの質を飛躍的に向上させます。
結論
Figmaで作成したデザインをp5.jsで動的に扱う手法を学ぶことで、デジタルアートやUI/UXデザインにおける表現の幅は大きく広がります。既存のツールでは実現が難しかった、より複雑で動的なインタラクションやアニメーションを、自身のコードで直接コントロールできるようになります。
ツールに依存せず、自らのアイデアをプログラミングで具現化する能力は、これからのクリエイティブな活動において強力な武器となるでしょう。このガイドが、皆さんがFigmaとp5.jsを組み合わせ、より自由で革新的なWeb表現を追求するための一助となれば幸いです。継続的な学習と実践を通じて、デザインとプログラミングの境界を越える新しいアートの形を創造してください。