このブログを閲覧していると、各記事に異なる正方形の画像があることに気づいたかもしれない。QRコードに似ているがQRコードではないキューブのパターン。記事ごとに変わる色。そして中央には常に同じ漢字：忍。
それらの画像は手動でデザインされたものではない。各記事のコンテンツ自体から生成されたものだ。
仕組み
記事を公開すると、システムは2つのデータを取得する：タイトルとコンテンツの文字数。タイトルから暗号化ハッシュ——唯一無二で再現不可能な文字列——を生成する。そのハッシュが32×32のグリッドのどのキューブを埋め、どれを空のままにするかを決定するマップになる。実際のQRコードが使うのと同じ原理だが、読み取り可能なデータはエンコードしていない。テキストのDNAを視覚的な形に変換しただけだ。
文字数が各画像のアクセントカラーを決定する：
短い記事はゴールド。中程度の長さのものはクールブルーとパープルを経由する。長いものはテラコッタ。もしいつか本当に長いものを書いたら、ミントグリーンになる。
結果として、各記事がユニークな視覚的指紋を持つ。タイトルの一語を変えるだけでパターンは完全に変わる。記事が成長したり閾値を超えて縮小すると色が変異する。テキストが生きている限り、画像も生きている。
中央の漢字
各画像の中央には漢字「忍」のある白いスペースがある。日本語でしのびと読む。沈黙の中で耐え忍ぶこと、忍耐を持って持ちこたえること、見られずに動くこと。このブログの名前の由来であり、パターンがどれほど異なっていてもすべての画像を互いに結びつける視覚的な錨だ。
なぜ普通の画像を使わないのか
各記事にストックフォトやMidjourneyで生成した画像を使うこともできた。しかしこのブログはデザインとテクノロジーの交差点について語っている。画像さえもその哲学を反映してほしかった。装飾ではなくデータを形に変換したもの。読まなくても代表する記事について何かを語るもの。
実用的な理由もある。このシステムは完全に自動だ。新しい記事を公開すると、3言語すべての画像が自動生成される。写真を探す必要もPhotoshopを開く必要もどの画像を使うか考える必要もない。コンテンツが自らをイラストレートする。
技術的な詳細
画像はPHPのGDライブラリを使用して生成される。グリッドは白い背景上の32×32キューブ。ハッシュはMD5とSHA1を連鎖させて1024セルすべてをカバーするように拡張される。ハッシュの各16進文字が、セルが黒いキューブ、アクセントカラーのキューブ、薄いグレーのキューブ、空きスペースのいずれになるかを決定する。中央の漢字はサーバーで利用可能な場合、Noto Sans CJKフォントでレンダリングされる。
画像は3つの場所で使用される：ホームページのサムネイル、各記事内のビジュアルヘッダー、そしてSNSでリンクを共有した時のOpen Graph画像。同じ画像。3つの異なるコンテキスト。
開発者やデザイナーで自分のプロジェクトに似たものを実装したい場合は、連絡してほしい。思ったよりシンプルで、結果としてどんなブログやコンテンツプラットフォームにもユニークなアイデンティティを与えてくれる。