canvas-design を使ってみた ― 静止した水のOGを作る

このスキルは何か

canvas-design は、静的なビジュアルアート（.png/.pdf）を2段階で作るスキル。まず「視覚哲学」を文章で定義し、次にそれを1枚のデザインとして表現する。algorithmic-art と双子の関係で、あちらが“コードで動く”、こちらが“静止した1枚”。狙う美学がはっきりしていて、SKILL.md は「架空の学術図版」のように作れと説く——密に反復するマーク、臨床的で最小限のタイポグラフィ、限定パレット、美術館品質の作り込み。フォントも多数同梱されている。

実際にやった手順

Step 1：視覚哲学を書いた

algorithmic-art と同じく、いきなり描かずまず文章で美学を定義する。今回は "Quiet Refraction（静かな屈折）" という movement を立てた。「静けさを、忍耐づよく観察し、測り、図版に起こす」という美学——穏やかな水面を“研究対象”として扱う。

体験メモ：このスキルも哲学文に「職人性を繰り返し強調せよ」と指示する（algorithmic-art と同じ作法）。さらに「哲学は用途を書かず、汎用的に保て」とも言う。実際、用途（OG）を哲学から切り離して書くと、出力の自由度が上がって、結果的に良い構図に転がった。

Step 2：静的キャンバスとして描いた

SKILL.md が示す「架空の学術図版」の美学に従って、静止した水の“観察プレート”として構成した。中央に一滴の波紋が広がる同心円（外側ほど間隔が開く＝波の減衰）、第二の滴、放射状の計測目盛、底部のルーラー、そして臨床的なモノスペースのラベル（PLATE IV / STILLWATER STUDIES / n = 1.333 / FIG.01 — RIPPLE DECAY）。配色は寒色のみ（淡い紙地＋ティール／スレートの細線＋一点だけ淡いアクア）。

Step 3：「概念の核」を忍ばせた

SKILL.md には「主題を、宣言せず、作品に静かに織り込め」という独特の工程がある。今回の核は「水の静けさ・透明感（＝清涼感）」。それをラベルや構図に溶かし込み、知っている人だけが“水の研究図だ”と感じ、他の人は“美しい抽象プレート”として見る、という設計にした。

Step 4：仕上げの第2パス（精緻化）

SKILL.md の最後は変わっていて、「ユーザーは既に『まだ完璧でない、美術館級にせよ』と言っている体で、要素を足さず、既にあるものをより精緻に」と要求する。これに従い、リングと底ルーラーの余白を確保し、重なっていた屈折率ラベルを整理した。足し算でなく引き算で詰める指示は、frontend-design の抑制とも一致していて効いた。

使ってみて効いたこと

• 美学が明確：「架空の学術図版」という具体的な美学の指定があるので、ゼロから迷わずに“品のある1枚”に寄せられた。
• 同梱フォントの質：Italiana（繊細なディスプレイ）・Jura・GeistMono など完成度の高いフォントが同梱され、タイポだけで格が出た。
• 哲学→表現の分離：先に言葉で美学を固めると、描画が速く・ブレない（algorithmic-art と同じ手応え）。
• 動と静の対：algorithmic-art の Caustica（動く水）と、 canvas-design の Quiet Refraction（静止した水）が、同じ「清涼感」の表裏として並んだ。スキル2つを使い分けると、1つのテーマを多面的に表現できる。
• 実用に着地：清涼感ページのOG試作として仕上がった。文字だけの自動生成OGより、世界観のあるサムネになる。

ハマった・判断したこと

• 同梱フォントはラテンのみ：日本語「清涼感」 は同梱フォントに無く、システムの日本語フォント（Noto Serif CJK JP）を併用した。日本語タイトルを入れるOGでは、ここを別途用意する必要がある。
• 静止画にはコピペコードが付かない：ui-memo の通常demoは「実物＋コピペ可能コード」が価値。canvas-design の出力は1枚絵なので、その文脈では“読むコンテンツ”ではなく“見せる素材”として使うのが正しい（OG・ヒーロー・サムネ向き）。
• 全ページ自動には不向き：1枚ずつ手作りなので、Satori の動的OGのように全ページ自動生成はできない。世界観の強い数ページだけ手作りの良質OGに差し替える、という使い分けが現実的。

ui-memo での使いどころ

• 世界観ページのOG／ヒーロー：清涼感・海・木漏れ日のような“空気感”のあるページのOGを、文字主体から「1枚絵＋タイトル」に格上げできる。今回の清涼感OGはその試作。
• 記事・SNSのアイキャッチ：Zennや告知の見栄えを底上げ。
• 動(p5)×静(canvas)のセット運用：同じテーマで「動くデモ」と「静の1枚」を揃えると、ページの世界観が強くなる。

まとめ

canvas-design は「まず哲学、次に1枚絵」という順序と、「架空の学術図版」という明確な美学、そして“要素を足さず精緻にする”仕上げが要のスキルだった。algorithmic-art が“動く水”なら、canvas-design は“静止した水”——同じ清涼感を、動と静の両面から作れた。コピペコードを生むスキルではないぶん、見せる素材の質を一段上げる種類の道具だと感じた。

よくある質問