コードによる生成デザイン：PHPでビジュアルアイデンティティシステムを構築した方法

このブログで見るすべての画像はコードで生成された。Midjourneyではない。DALL-Eではない。Photoshopでピクセルを動かすデザイナーでもない。各投稿にはコンテンツ自体から生まれるユニークな画像がある。コンテンツが変わると変わり、コンテンツが同じなら同じままの視覚的な指紋のようなものだ。

PHPとGDライブラリで構築した。生成アートフレームワークなし。外部ライブラリなし。数学、色、そしてコードに翻訳されたデザインの判断だけだ。

AI画像を使わずにこれを構築した理由

正直な答えは、本当に自分のものが欲しかったということだ。Midjourneyの画像は印象的だが本質的にジェネリックだ。同じプロンプトを持つ誰もが似たようなものを生成する。ブログのビジュアルアイデンティティを、公開するコンテンツと同じくらいユニークにしたかった。

決定論的な一貫性も欲しかった。誰かが記事を共有し、別の人が1ヶ月後に開いた時、画像はまったく同じでなければならない。生成AIではそれは不可能だ。決定論的アルゴリズムなら可能だ。

アルゴリズム：コンテンツハッシュからユニークな画像へ

システムはこう動く。投稿タイトルを取り、MD5ハッシュを生成する。そのハッシュは各タイトルに固有の32文字の16進数文字列だ。次にそれらの文字のグループを色にマッピングし、着色されたセルのグリッドを構築し、対称的に拡張してバランスの取れたパターンを作り、PNGとしてレンダリングする。

同じタイトルは常に同じハッシュを生成する。同じハッシュは常に同じ色を生成する。同じ色は常に同じ画像を生成する。純粋な決定論。

カラーマッピング：hex文字をまとまりのあるパレットに変換

デザインの観点から最も難しい部分だった。最初の試みは視覚的ノイズのようなパレットを生み出した。互いに関係のないランダムな色、見ていて痛い残酷なコントラスト。

解決策は色空間を制限することだった。各文字を任意の色にマッピングする代わりに、調和的なファミリー内に留まる色相範囲を定義した。一つの文字がベースの色相を決め、別の文字が彩度を調整し、別の文字が明度を調整する。結果として機能する組み合わせに数学的に制限されているため、意図的に感じるパレットが生まれる。

グリッド生成と対称性

グリッドは小さく始まる。各セルがハッシュから色を取る5x5セルのグリッド。しかし5x5グリッドは単純すぎるのでシステムが拡張する。左半分を取り右にミラーリングして水平対称を作る。それだけでランダムなものがデザインされたように見えるものに変わる。

対称性がすべてを機能させるトリックだ。人間の脳はパターンを探し、対称性は私たちが認識する最も基本的なパターンだ。それなしでは画像はレンダリングエラーのように見えた。それがあると抽象的なアイコンのように見える。

PHP GDでのレンダリング

PHP GDは生成アートのための洗練されたツールではない。基本的だ。画像を作り、四角形を塗り、PNGとして保存する。しかしその単純さは利点だった。複雑なライブラリを学ぶ必要がなかった。ピクセル、色、座標について考えるだけでよかった。

投稿が作成されるか、タイトルが更新されるたびに、システムは自動的に画像を再生成する。管理パネルにそのためのボタンはない。ただ起こる。

自分のプロジェクトにこのシステムを適応する方法

コンセプトは見た目より単純だ。3つのものが必要だ：タイトルやIDのような決定論的入力、その入力を数値に変換するハッシュ関数、そしてその数値を視覚的なものに変換するレンダラー。

PHPを使う必要はない。JavaScriptでCanvasを使ってブラウザで同じことができるし、PythonでPillowを使うこともできるし、SVGを直接生成すればより軽量でスケーラブルになる。

重要なのは技術ではない。コンテンツが自身のビジュアルアイデンティティを定義するという考え方だ。すべての画像にデザイナーは必要ない。ジェネリックなものを発明するAIも必要ない。各コンテンツが自分自身を表現するシステムを構築できる。

それがコードによる生成デザインだ。システムで考えることを知っている人なら誰でも構築できる。