作品 · Web / ブランド / Claude Code · 2026

TAIKIHANAOKA

単なる作品集ではなく、さまざまな研究の記録として作成した自身のサイト

概要

自分のサイトを、作品集ではなく研究の記録として作成した。寸法を測る記号のロード画面が実際の読み込みを数え、数え終えるとサイトが展開される。ファーストビューでは、幾何学的につくった自作書体のロゴがアニメーションとともに現れる。中央では、数式で描画したガラスの薔薇が咲く。ここにはデザインの作品だけでなく、自分自身のものづくりの記録が積み上がるようにした。

背景

作品集というより研究所に近い雰囲気にすることで、人柄が伝わるサイトにしたいと考えた。特に、コードでデザインを生成しているという特性を示すために、数式や幾何学模様など、数値にもとづく図形を多く使った。

方法

名前は円と四角だけでつくった7文字の自作書体で組んでいる。ロード画面の数字はライブラリの読み込みや初回描画といった実際の出来事から取り、動きは全部ひとつの計算式から出す。中央の薔薇は花弁の起伏を数値で持つ曲面で、蕾から満開へ数値を動かすと開花になる。作品(Works)には形として残ったものを、記録(Log)には研究の過程を置いて、情報を二つに分けた。

結果

完成まで辿り着かず、埋もれていた実験も、面白みのあるコンテンツとして供養できるようになった。

名前が左から順に確定していく。未確定のセルには作図円が敷かれている
Fig. 01 — 名前が左から順に確定していく。未確定のセルには作図円が敷かれている
縦画面 — 名前を 4×3 のマスに組む
Fig. 02 — 縦画面 — 名前を 4×3 のマスに組む
ロード画面 77% — 実際に止まった瞬間
Fig. 03 — ロード画面 77% — 実際に止まった瞬間
7文字は3系統でできている — 矩形だけ(T・I・H)、円弧(A・N・K)、真円(O)
Fig. 04 — 7文字は3系統でできている — 矩形だけ(T・I・H)、円弧(A・N・K)、真円(O)
中央の薔薇。これも数式でできている
Fig. 05 — 中央の薔薇。これも数式でできている