Vibe Codingによるジェネレーティブアートの試み #PERSOL CAREER Advent Calendar2025

技術 デザイナー プロダクト統括部 アドベントカレンダー vibe Coding Developer＆Designer Advent Calendar 2025

 

パーソルキャリアでデザイナーをしている比企です。

2025年の個人の取り組みとして、Vibe Coding（バイブコーディング）によるジェネレーティブアートを試作しました。AIとの新しい共創体験をシェアします。

ジェネレーティブアートは、「幾何学や比例、物理法則などの 数理的秩序を起点としてルールやアルゴリズムを設計し、変動や偶発性を内包した生成プロセスを通じて作品を生み出す表現」です。

近年では、生成手法の一つとしてVibe Codingがあります。
Vibe Codingは、完成形ではなく生成条件を与える点においてジェネレーティブアートの思想と共通しています。
また、Vibe Codingは、生成の起点をコードではなく自然言語に置くアプローチです。そのため、コードを書くスキルがなくても、言葉によってイメージを指定し、即興的に視覚化することができます。

まずは、今回この記事のため制作したワークを共有します。
このワークがどんな工程で生まれたのか、そこに至る「Vibes※」のゆらぎや選択の積み重ねも含めて「制作ノート」として書き起こしています。

※この記事での「Vibes（バイブス）」 は、ワークを形づくる雰囲気や方向性、感覚的なイメージを指します。

制作ノート

使用ツール

ツールはGemini Canvasを使用。
Vibe Codingができるツールであれば代替可能です。

制作プロセス

基本的にプロンプトを入力→生成を繰り返すだけの工程ですが、
あえて詳細化すると以下のとおりです。

  1.  Set the Vibe：「Vibes」の言語化

  2.  Generate：生成

  3.  Check the Vibe：感じをみる

  4.  Tune：チューニング 

  5.  Iterate：2-4のイテレーション

  6.  Hold the Vibe（WIP）：完成

  7.  Artist Statement & Process：制作趣意・生成プロセス

制作時に留意すること

生成過程における変化や揺らぎを前提とします

  • 初期のイメージに固執しない
  • 「Vibes」を指針にする
  • 偶発的な表現を採用する


実際に制作していく

1. Set the Vibe：「Vibes」の言語化

アドベントカレンダーなのでクリスマスをテーマに制作していきたいと思います。
「Vibes」をプロンプトにします。リズムのあるタイポグラフィのアニメーションがイメージです。あとでイテレーションの工程がはいるのでラフに進めます

prompt：
「Merry Christmasのアルファベットが縦一列になって競争している。 足が速いもの遅いもの、飛んでいる、止まっている、踊っているさまざまな動き 生き物のようなうごき。」

2. Generate：生成

3. Check the Vibe：感じをみる

最初に生成された結果は、頭の中にあったイメージと比べると、
少し稚拙に感じられることが多いですが、気にせず進めましょう。

4. Tune：チューニング

「Vibes」に寄せていきます。修正したい点のプロンプトを入力し、再度生成します

prompt：
「画面いっぱい。残像はない、ベースラインに黒い線 もっと微妙なうごき、整列している」 

 

5. Iterate：2-4のイテレーション

イテレーション（生成→感じをみる→チューニング）を繰り返します

prompt：
「まだ残っている軌跡を削除してそれぞれのアルファベットはラインで繋がっている」

prompt：「カラフルにしないでモノクロのまま。背景白、文字は黒です」

prompt：「インクが滲み出たようなフォントにして」

prompt：「いいえ。もっとオールド」

prompt：「これをパターンにして画面全体にしたい」

prompt：「やめる。もとにもどして。3Dにして。ドラッグでカメラワーク」

prompt：「ラインを細く。最初のカメラ位置をもっと手前から始めて」...

 

イテレーションを重ねながら、生成結果を少しずつ調整していきました。
動きや配置、全体のリズムを見直し、「Vibes」に沿った表現が安定してきた段階で完成としています。

6. Hold the Vibe（WIP）：完成

※ドラッグ操作でカメラを回転させ、スクロールでズーム操作が可能です

7. Artist Statement & Process：制作趣意・生成プロセス

この工程は必須ではないですが、AIの解釈を知ることは次の制作にとても役立ちます。ここでは、プロンプトを通じて

  • 制作の意図（コンセプト）

  • 生成プロセス（使用ライブラリなど）

を言語化しています。
生成結果とあわせて記録することを目的としています。

prompt：「このジェネレーティブアートを説明してください。
制作意図（コンセプト）と生成プロセス（使用ライブラリなど）を教えてください」


以下、生成結果です

7-1. 制作意図（コンセプト）

このジェネレーティブアート「Xmas Stream」は、ミニマルなビジュアルを通じて、クリスマスまでの時間の流れをタイポグラフィで瞑想的な視覚体験を提供しています。

  • デジタル・ストリームの視覚化: 絶えず流れ、リセットされる情報のストリーム（流れ）を、3D空間を奥から手前に移動する文字と線で表現しています。これは、情報化社会におけるデータの流れや、クリスマスまでの時間の経過を抽象的に示唆しています。

  • ミニマリズムとコントラスト: 背景を白、ラインと文字を黒に統一することで、要素間のコントラストを際立たせ、視覚的なノイズを最小限に抑えています。これにより、鑑賞者は動きと構造そのものに集中できます。

  • インタラクティビティ: カメラ操作（ドラッグ）とアニメーションの状態変化（クリック）を可能にすることで、鑑賞者がワークに「介入」し、異なる視点や速度でデジタルな流れを体験できるようにしています。特に「Shape Mode」では、ストリームが渦を巻くクラスターへと変化し、情報の収束を表現します。

  • 速度の安定化: 意図的にアニメーションの速度をデルタタイムで制御することで、環境に依存せず、一定のリズムと「ゆっくりとした」視覚体験を保証しています。

7-2. 使用している主要ライブラリ

このワークは、3Dグラフィックスを作成するために、WebGLの上に構築された主要なJavaScriptライブラリと補助ライブラリを使用しています。

  • Three.js
    3Dグラフィックスを扱うためのメインライブラリです。
    シーン、カメラ、ライト、ジオメトリ、マテリアルなど、3D世界全体の構築と管理に使用しています。
    本作では、文字（THREE.Sprite）や線（THREE.Line）の描画に利用しています。

  • OrbitControls.js
    Three.js の補助ライブラリです。
    マウスやタッチ操作によるカメラの回転（オービット）、ズーム、パンを簡単に実装できます。
    これにより、鑑賞者が3D空間を自由に操作できるようになります。

  • Google Font: Cutive Mono
    テキスト（アルファベット）描画用のフォントとして使用しています。
    ミニマルで少し技術的な雰囲気を出すために選択しました。

 

2025年に制作したワーク

このプロセスを経て、2025年に制作したその他のワークを、
それぞれ異なる表現の作例として紹介します。

おわりに

Vibe Codingでジェネレーティブアートをつくることは、鉛筆でドローイングをするような気軽さがあります。頭に浮かんだイメージをそのまま試し、うまくいかなくても消して描き直せる、AI時代の新しい落書きのような感覚です。
特別なスキルがなくても、子どもから大人までこのプロセスに参加できる点も、とても魅力だと感じています。このアドベントカレンダーをきっかけに、試してもらえたらうれしいです。

比企 Hiki

クライアントプロダクトデザイン部
デザイン第2グループ マネジャー

パーソルキャリアでUIUXデザイナーをしています

※2025年12月現在の情報です。