ひとつの言葉に、
光の表情を。

遊び方は、三つだけ。

1. 好きな言葉を入れ、コットン紙・シャンパン箔・宵の黒箔から選びます。
2. 浮き出すか、くぼませるかを選び、押しの深さを整えます。
3. 紙の上をなぞって光を動かし、好きな瞬間をPNGで持ち帰ります。

42文字まで入力でき、改行は3段まで。長い行は紙の幅に合わせて折り返します。光はスライダでも動かせます。紙をキーボードで選んだ状態では、矢印キーで光を移動、Shift＋矢印で大きく移動、Homeで最初の光へ戻せます。

文字に「高さ」を持たせる。

まず、入力した文字を白黒の画像として描きます。文字のふちを少しずつぼかして、丸みのある高さの地図を作ります。隣り合う点の高さを比べると、その場所がどちらへ傾いているかが分かります。その傾きと光の向きから、明るいふちと暗いふちを描き分けています。

箔には、光と一緒に動く反射の帯と細かなむらを加えました。紙の繊維や額縁、太陽の小さな印もコードで描いています。質感を楽しむためのデジタル表現で、実際の印刷物や光学現象を厳密に再現するものではありません。

そのまま使える制作プロンプト

道具：Codex（Astra ultra指定）／Canvas 2D

「ひかりのエンボス工房」という、触れるブラウザ作品を作って。好きな短文を紙の浮彫りと箔押しにし、指で光を動かすと文字の凹凸と箔の反射がはっきり変わるように。コットン紙・シャンパン箔・黒箔、浮き出す／くぼませる、深さ、光の位置、リセット、今見ている光のままPNG保存を付けて。最初は「光を、ひと押し。」を美しく組版し、静かな日本語UIと贅沢な余白にして。日本語・英数字・長文・スマホに対応し、画像素材や有料APIを使わずCanvas 2Dで独自に描画して。参考例のコードや素材はコピーせず、PROCESS.mdに頼み方・道具・素材の出どころ・再制作手順を残して。

道具と素材

HTML・CSS・JavaScriptとブラウザ標準のCanvas 2Dで作りました。画像素材や外部フォントを読み込まず、お使いの端末の明朝体を使います。端末によって字形は少し変わります。作品の入力と画像作成は端末内で処理し、作品から外部への送信は行いません。

発想のきっかけは、Claude公式のお気に入り作品紹介にあるエンボスの作例。実装・紙の質感・箔の表現・画面構成は、この工房用に作成しました。

詳しい制作記録と検証範囲 · ローカルで動かす手順