グラフィックデザイン
ボロノイ シェーダー デザイン
不規則な色付きセルがWebGL2キャンバス上をゆっくり漂い、淡く光る境界線、なめらかなポインター歪み、特大の固定タイポグラフィが重なります。
ボロノイアートの活用シーン
- インタラクティブなWebGL背景局所的なポインターの動きに反応する、キャンバス全面のビジュアルフィールドです。
- ジェネラティブアートの習作色、動き、空間分割から構成されるシェーダー主導のコンポジションです。
- 実験的なランディングページ変化し続けるグラフィックの上にタイポグラフィを重ねた、雰囲気のあるオープニング画面です。
セルネットワークのハイライト
- キャンバス全面のネットワークボロノイセルがオーバーレイの背後でビューポート全体を埋めます。
- パレットで色分けしたセル青、緑、紫、ティール、茶の領域がフィールドを分けています。
- 光る境界線淡い境界線によって、隣り合うセルが見分けやすくなります。
- カーソルの影響ポインターの動きは、局所的に押し出すインタラクションとして表現されます。
ボロノイフィールドの3つの瞬間
1 / 3
キャンバス全面のボロノイフィールド
ボロノイ シェーダー デザインは、アニメーションするWebGLキャンバス1枚を中心に据えた、OpenDesign公式のグラフィック例です。見出しは「VORONOI CELLS」、補足文は「drifting feature points, palette-keyed cells, glowing boundaries」と記され、操作する前から視覚的な前提を伝えます。
この構成ではアートワークを枠付きのパネルに収めず、キャンバスそのものをページの面として使っています。大きな不規則セルはビューポートの外まで広がるため、端でもフィールドが連続して見えます。その代わり、アートワークが雰囲気とスケールを担う一方で、補助的なコンテンツや一般的なナビゲーションのための余白はほとんどありません。
見える構造
淡い共有境界線が色の異なる多角形の領域を区切り、隣接関係とスケールを読み取れるようにします。
読み順
上部のラベルがプレビューを示し、左下の特大見出しが主題を示し、右下の案内がインタラクションへ導きます。
このデザインが適する場面
このデザインは、情報の密度よりも視覚的な発見が重視される場面に向いています。たとえば実験的なランディングページの冒頭、ジェネラティブアートの習作、WebGLのデモなどです。「WEBGL PREVIEW」という表記は作品がビジュアルプレビューであることを示し、「REAL-TIME · GPU」はインターフェース上でレンダリング手法を示しています。
ソースには静的マークアップ上でキャンバス1枚しかなく、明示的な操作用コントロールもないため、最も適した使い方は操作の多いツールではなく、焦点を絞ったビジュアルの瞬間です。メニュー、指標、コンテンツセクションを加えるなら新たな情報設計が必要になり、意図的に大きく見せたアートワークと競合するおそれがあります。
オープニング画面
ページに即座のグラフィック的な存在感と短いステートメントが必要なとき、最初のビジュアルフィールドとして使います。
インタラクションの習作
ポインターの案内を手がかりに、アニメーションするフィールドでの局所的な座標歪みを探ります。セルを物理的なオブジェクトのように扱うことはしません。
ビジュアルの参照
パレットと境界線の処理は、シェーダーベースの背景を考える際の参考として使い、本番でのパフォーマンスの証拠とは見なさないでください。
動くジオメトリの上のタイポグラフィ
タイポグラフィは意図的に大きく、左下に据えられています。「VORONOI」が主役の行を占め、その下に「CELLS」が続き、さらに下に小さめの説明文が置かれます。このスケールにより、複雑なフィールドの上でも主題が読み取れますが、同時に文字の背後で十分なコントラストを保つ必要があります。
フラグメントシェーダーは、経過時間とともに漂う特徴点の3×3近傍を調べます。最も近い点が各セルのパレットを決め、最近点と2番目に近い点との距離の差が共有境界線を強調します。ガウス重み付きのポインターワープはサンプリング座標を変えるもので、物理メッシュを動かしたり、セル同士の衝突をシミュレートしたりするものではありません。
見出しのスケール
特大の2行タイトルは、背後のセルジオメトリが変化しても主題を識別しやすく保ちます。
端のラベル
小さな大文字のラベルが、メインタイトルと競合することなく、プレビューの文脈とレンダリングの概念を示します。
オーバーレイの配置
左上の「OPENDESIGN · WEBGL PREVIEW」ラベルと右上の「REAL-TIME · GPU」ラベルが、キャンバスの周囲に広い枠を作ります。右下の「MOVE THE CURSOR ↗」という案内は、左下の大きなタイトルとバランスを取り、一般的なボタン操作の流れを加えずにインタラクションを示します。
見える動きと機能の境界
3つのキャプチャは別々の画面ではなく、キャンバス全面の1つの構成を異なる瞬間で捉えたものです。ソースでは、特徴点の連続的なドリフトと局所的なポインター歪みが実装されています。正規化したポインター座標は両方とも、シェーダーに影響する前にフレームごとにターゲットとの差分に0.06を掛けた分だけターゲットへ近づくようイージングされます。右下のカーソルバッジは静的な案内であり、ボタンではなく、クリック、ドラッグ、設定パネルは必要ありません。
この根拠からは、外部サービスとの接続、保存データ、計測されたパフォーマンス、本番環境へのデプロイは確認できません。また、描かれたレンダリングに関する主張があらゆるデバイスに当てはまることも確認できません。この作品は、シェーダーのジオメトリ、色、オーバーレイのタイポグラフィ、局所的な入力の関係が見どころとなる、デザインと実装の例として読んでください。
観察と挙動を分けて捉える
見えている多角形のフィールド、淡い境界線、色の領域、オーバーレイの文字はデザイン上の判断として記録し、カーソルへの反応とアニメーションは、サービス機能ではなくローカルで確認できる挙動として扱います。
トレードオフを保つ
構成を応用する際もキャンバスを視覚的に支配的に保ちつつ、セルの縁や色のフィールドが下で動いても、タイトルと補足文が読めるかを確かめてください。
OpenDesignでボロノイ シェーダー デザインを作る方法
キャンバスとオーバーレイを設定する
ビューポート全面のWebGLキャンバスを1つ作成し、左上に小さなプレビューラベル、右上にレンダリングラベル、左下付近に補足文付きの大きな2行タイトルを配置します。
セルシステムを形づくる
不規則な多角形の領域、淡い共有境界線、青・緑・紫・ティール・茶を含むパレットを軸に、ボロノイフィールドを調整します。最も複雑なジオメトリの上でもタイトルが読めることを確認します。
局所的なポインターの動きを加える
正規化したポインター座標の両方をターゲットに向けてイージングし、距離で重み付けしたワープでサンプリングされるフィールドに影響を与えます。右下の案内は静的なままにし、効果はセルの物理挙動ではなく局所的な歪みとして説明します。外部サービス、保存された状態、計測したパフォーマンスの主張は加えないでください。
推奨プロンプトキャンバス全面のWebGLボロノイセル デザインを作成してください。漂う特徴点、パレットから色を割り当てた青・緑・紫・ティール・茶のセル、淡く光る境界線を使います。左上に「OPENDESIGN · WEBGL PREVIEW」ラベル、右上に「REAL-TIME · GPU」ラベル、左下に大きな「VORONOI CELLS」見出し、漂う特徴点とカーソル主導の動きについての補足文、右下に「MOVE THE CURSOR」の案内を配置します。ポインターの影響は局所的なものに限り、バックエンドサービス、保存データ、パフォーマンス指標、追加のコントロールは作らないでください。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。
AIワークフローのエディトリアルポスターデザイン
AIワークフローのエディトリアルポスターデザインは、番号付きの章、具体的なプロンプト例、クリーム色と錆色のタイポグラフィを使い、6つのワークフローに関する主張を視覚的に紹介します。
グラフィックデザイン
AIワークフローのソーシャルカルーセルデザイン
縦長の7枚のカードで、特大サイズの中国語見出し、番号付きの習慣、変化するカラーフィールド、締めくくりのステートメントを用いて、AI編集ワークフローを説明します。
グラフィックデザイン
Aurora Fieldシェーダーデザイン
自動アニメーションする青緑色のノイズフィールドがWebGLヒーローに雰囲気を与え、固定された見出しと小さなローカルフレームレートバッジがシーンを引き締めます。
グラフィックデザイン
Aurora Veilシェーダーデザイン
Aurora Veilは、レイヤー化された光、星、カーソルの動きを、空気感のあるWebGLヒーローへと変換するインタラクティブなシェーダーコンポジションです。
グラフィックデザイン