青い線の、つくり方。

「インクの盤上」という、青いボールペン画でできた立体チェス盤のブラウザ作品を作ってください。

これは自由に駒を並べて一枚の絵をつくる「自由に並べるスケッチ盤」です。チェスの対局ルールは実装しません。

【見た目】
暖かいクリーム色のスケッチ用紙に、ネイビーの細い線。盤と駒は、艶のある3D素材ではなく、ボールペンで何度もなぞった絵に見えるようにします。線幅と濃さをわずかに揺らし、丸い面には輪郭に沿う線、暗い面には斜線と交差する線を重ねてください。紙の繊維と粒子も計算で描き、外部画像は使いません。
キングの十字、クイーンの冠、ルークの城壁、ビショップの切り込み、ナイトの馬の横顔、ポーンの丸い頭を、それぞれ見分けられる立体の形にします。白の駒は紙の余白を残し、青の駒は線を密に重ねます。盤の隅には小さな手描きの印を添えます。

【操作】
「選ぶ・動かす」と「駒を置く」を明確に切り替えます。駒の種類と白／青を選び、空いたマスをタップして配置します。駒をタップして選び、空いたマスをタップすると移動。別の駒をタップすれば選び直し、選んだ駒は消せます。マスの重複は防ぎ、理由を短く伝えます。配置、移動、削除、構図変更には元に戻す／やり直すを用意します。
最初から美しい8駒の構図、六種類を眺める6駒の構図、32駒の初期配置、空の盤を用意してください。斜め／真上の視点、左右の回転、インクの濃さ、線の重なりを操作できます。ドラッグは使わず、375pxのスマートフォンでもタップで確実に扱えるようにします。キーボード操作とマスを指定する代替操作も付けてください。

【描画と保存】
ブラウザ標準のWebGLを使い、手前の面だけが見えるように深度テストを行います。どの視点でも駒と盤が画面から切れないよう、実際の大きさに合わせて収めてください。アイドル時に描画を回し続けず、操作時だけ更新します。ページを離れたら予約描画を解除してください。
PNG保存は、その瞬間のCanvasを別のCanvasへ同期的にコピーしてから画像化します。保存中に操作しても内容が混ざらないようにし、古いダウンロードURLを解放します。

【仕上げ】
日本語の操作は短く、スマートフォンでも12px以上で読みやすく。明朝の見出しと余白で、静かな文具の小冊子のようにしてください。追加ライブラリ、外部CDN、外部フォント、生成API、画像素材は使わず、コードと形を独自に作ります。
HTML、CSS、JavaScriptの自己完結したフォルダに、作品、作り方ページ、コピーできるこのプロンプト、README、PROCESS、操作状態とカメラのテストを保存してください。実ブラウザで表示、タッチ、キーボード、PNGの実ファイル、コピーの全文一致、戻る操作を確認して仕上げます。

この作品の素材と道具

HTML・CSS・JavaScriptと、ブラウザ標準のWebGL／Canvas 2Dで制作しています。駒の形、線、紙の粒子、小さな印はオリジナルの計算描画。画像生成API、外部の画像・フォント・ライブラリは使っていません。

発想の入口は、2026年10月3日の朝のAI紹介で取り上げられたボールペン風チェスです。参考作品のコードや画像を複製せず、自由に絵を組み立てる体験として制作しました。作成経路と検証範囲は同梱のPROCESSに記録しています。