Claudeと協業して過剰装飾文字設計倶楽部をローンチした話
こんにちは、PLANTの植木です。
デザイナー歴はそこそこ長いのですが、人生で初めて「自分のプロダクト」を作って、公開しました。
過剰装飾文字設計倶楽部という、装飾過多な欧文書体をブラウザで無限に生成できるツールです。
今日はこれを作った話をします。長くなりますがお付き合いいただけるとうれしいです。
どんなものか
開くと、ランダムに書体が生まれます。
線の骨格・色・モーション・エフェクトを自分で編集できて、気に入ったらモーション付きの「見本帳ポスター」として動画やGIFに書き出せます。
そして、この書体は「動いたまま」使えます。Webサイトに埋め込めば、設定した動きのまま表示できる。静止したフォントは世の中に無数にありますが、動きごと持ち帰れるフォントはなかなか無いはず。
細かい仕様は後半で。まずは、これがどこから来たのかの話をさせてください。
過去作品を再現・アップデートするところから得た着想
「AIでデザインはどこまでできるのか」という興味がありました。まずは自分の過去作を再現するところから実証してみよう、と題材に選んだのがローダーズという自主プロジェクトです。読み込み中にくるくる回っているあれを、モーショングラフィックの作品として100個作ったものです。
100個作りながらずっと思っていたのは、ローダーは「ベジェ曲線（文字やイラストの輪郭を描く、あの曲線です）に動きのパラメータを付与する」という、単純な構造でできているということでした。単純なら機械的に生み出せるし、機械的に生み出せるものはAIで再現しやすいはず。そんな見立てで、Claudeに触れる機会が増えていきました。
で、できたのがこれです。
https://loaders-ex.studio.site/generate
円形上のベジェの形状、動きのパターン、配置をパラメータで調整できるツール。ランダムボタンを押すと、押すたびに違うローダーが生まれます。
これが面白かった。1個ずつ手で作っていたものがボタンひとつで生まれてくるし、しかも自分では選ばないような組み合わせが出てくる。でも、ランダムを毎回押すのが面倒になってきた。
そして、パラメータをいじるのでもボタンを押すのでもなく、スクロールすれば無限にローダーが生み出されるページができました。
https://loaders-ex.studio.site/loop
最高にクール。
もうひとつ。この作り方は、誰の著作物も侵害していません。あくまで基礎となるパラメータを自分で用意して、その組み合わせを出しているだけ。誰も傷つけていないのもいい。
アルファベットに転用したら、面白いんじゃないか
ローダーで動かしていたのは、結局のところベジェ曲線です。そして考えてみれば、アルファベットもベジェ曲線でできている。単純な図形とパラメータの組み合わせという要素を文字に持ち込んで生み出されたのが、過剰装飾文字設計倶楽部なのである。
ちょうどいいを設計したランダム
一覧ページは、ランダムで無限にフォントが生成されるようになっています。
ただ、機械的なランダムをそのまま使うと、極端な数値で文字として破綻したり、似たような値が連続して並んだりします。なので「程よく違うものが並ぶ」ように、値の調整を施しました。たとえば、極端に細い線は他の要素と組み合わさると破綻しやすいので、条件付きでしか出さない。逆に、全部をお行儀よくすると今度は退屈な並びになるので、2割ほどの確率で「1〜2個だけ極端な値を許す」枠をわざと混ぜてあります。
ちょうどいい、気持ちいい連続を設計する。
この気持ちよさを作るために、文字に付与できるモーションのバリエーションも考慮しながら追加していきました。
文字の造形にも苦労した
初期は、ジオメトリックな単純図形の組み合わせで文字を構成していました。ただ、機械的すぎる形状は動きを加えたときに文字らしさが損なわれるし、いくら指示をしても直らないものもある。6と9とSあたりは本当に意地悪な形をしています。
最終的には、人力でカーブを描きました。
一番大事な骨格は手で描いている。でもその骨格があるから、どれだけ造形が変化しても文字が文字のままでいられるのだと思います。
作って終わり、にしなかった
こうしてv100まで試行錯誤を重ねて作り上げたのですが、今回は作るところで止めませんでした。プロダクトとしてリリースして、PRして、誰かに買ってもらって、育てていくところまでを体験する良い機会だと思い、Claudeと壁打ちしながら全体像をプランニングしていきました。
技術仕様書や仕組み、開発中の細かい機能を追えるように独自のページを作ったり、カンバンでタスクを管理したり。表層だけやってたデザイナーでしたがプロダクト開発を経験して視野がより広くなりました。
デザイン以外は、全部初めてだった
決済、利用規約、特定商取引法、会員ページ、返金対応。全部初めてでした。
正直に書くと、ここはAIと二人三脚です。自分は判断と字のクオリティに集中して、実装や法務まわりの下調べはClaudeに手伝ってもらいました。それでも「特商法の住所表記どうする問題」みたいな、デザイナー人生で一度も出会わなかった宿題が毎週出てきます。プロダクトを世に出すってこういうことか、の連続です。
組織の中でデザイナーというロールを担っていると、まわりの別業務の人たちへのリスペクトはあっても、実際に何をどうしているのかは分かっていない部分が多かったんですよね。自分でプロダクト開発的な動きをしてみて、他業種との協業の重要性を前よりずっと強く感じるようになりました。リスペクトと言いつつ中身は分かっていなかったと反省しています。
で、売れたのか
公開して2週間ちょっとで、買ってくれた人は2人です。
2人！
でも、初めて自分の作ったものにお金を払ってもらった日のことは、たぶんずっと覚えてると思います。ありがたや…。
リリース後も、モーションの増強、フォントの骨格改良、購入後の会員画面の安全性の設計、JSONデータを扱えない人向けの操作ツールの解放と、じわじわ改善を続けています。
ここからは焦らず、作例と一緒にゆっくり育てていくつもりです。
倶楽部のこと
最後に、冒頭で後回しにした仕様の話を。
作った書体は、TTFフォントとしてダウンロードしてPCにインストールできます。カラーフォント（COLR）と、太さを無段階で動かせるバリアブルフォントの2本立て。
さらに、モーション付きフォントを使うためのJSONデータが同封されていて、Webサイトに埋め込めば設定した動きのまま表示できます。
入会は¥2,000の買い切りで、一度払えばダウンロードは無制限。商用利用もOKで、モーションフォントを好きな画像に乗せるためのツールも解放されます。よかったらぜひ。
おわりに
変な文字がぐにゃぐにゃ動いているのを眺めるだけでもけっこう面白いと思うので、ぜひ触ってみてください。
気に入った書体ができたら、シェアで見せてもらえたらうれしいです。
それから、Xの公式アカウント
https://x.com/typeedfc
面白かったら、スキで教えてください。
