anatomy-asset

Anatomy Asset

解説図ではなくアセット向けにした、Anatomy のフォークです。描画は同じです。実際に組み立てられるオブジェクトを、多数の小さく精密で立体的なパーツで構成し、4段階のトーンで陰影を付け、奥から手前へ描き、すべての線の終点を何かに接続します。変わるのは役割です。Anatomy の図は説明する必要がありますが、アセットはページ上で正しく見える必要があります。ブランドを伝え、構図を支え、見出しのスペースを確保し、二度見する楽しみを与えます。

そのため、ルールは二つに分かれます。

• クラフトは固定です。 ワイヤーフレームではなく立体で描きます。キットが陰影を付けます。細部は小さく精密にし、ノイズは加えません。すべての線の終点を何かに接続します。パーツ同士を貫通させません。描画順は正確に守ります。曲面には滑らかな陰影を付けます。どの作品も1×で細部まで描き込み、4×でも見応えのあるものにします。これらは Anatomy からそのまま引き継いでおり、チェック項目も同じです。
• スタイルはユーザーに合わせます。 主題、雰囲気、色、構図、オブジェクトをどれだけ写実的または遊び心のあるものにするか、テキストを入れるかどうかは、ユーザーが決めます。Anatomy では禁止されているもの（2色のアクセント、看板の文字、浮遊するパーツ、パステルカラーの背景）をユーザーが求めた場合は、それに応じ、同じクラフトで仕上げます。

このフォークには13個のサンプルが含まれており、Anatomy からはクラフトの参考用に8個を残しています。始める前に、最も近いサンプルを開いてください。

• examples/synth-hero/ はアセットの参考例です。1200 × 640 のランディングページのヒーロー画像として、右側56%にアートを配したコンパクトなシンセサイザーです。左側には見出し用のスペースがあります。ブランドカラーのノブが2つ、黒いキーは暗いニュートラルカラーで、製品写真の演出としてノブキャップがシャフトから持ち上がっています。LEDは点滅し、フェーダーはCSSのみで動きます。立体パーツは約95個、パスは880個、サイズは240 KBです。node build.mjs（ダーク）とnode build.mjs --lightを実行すると、synth-hero.svgとプレビュー用ページが生成されます。
• examples/writing-desk/ はクラフト感のあるヒーロー画像です。鳩の巣式の棚付きオーク材デスクに、真鍮、木、革、黒檀のマテリアルランプを使い、ペン受けの上に緑のペンが浮かんでいます。立体パーツは約157個です。ルール線をカードのinnerとして渡す方法を示しており、線の端がカードの輪郭に切り込みを入れません。
• examples/espresso-tile/ は640 × 480のフィーチャータイルで、遊び心のある主題を厳密に構築しています。赤いエスプレッソマシンと、関節式の腕を持つ小さなロボットバリスタが描かれています。立体パーツは約113個です。縦面用のヘルパーと、assetSvgのcssを使った「ほぼ点灯」状態のカスタム点滅を備えています。
• examples/feature-spots/ は320 × 320のスポットイラスト3点（ストップウォッチ、貸金庫、バッテリー式ランタン）を、1つのスクリプトから生成します。カメラ、スケール、パーツの語彙は共通で、weightは0.5です。パスを最小化する後処理により、それぞれ70 KB未満に収まっています。
• examples/bottling-line/ は1600 × 560のバナーです。方位角62°で斜めに走るボトリングライン、ガラスグレーのマテリアルランプを使ったボトル、紫色のキャップ、ベルト上をピッチ分だけ滑るボトルが描かれています。立体パーツは約190個で、400 KB未満です。
• examples/aero-*とexamples/energy-*は、それぞれ1つのランディングページ向けにヒーロー画像、バナー、フィーチャータイル、スポットイラスト3点を揃えた、2つの完全なブランドセットです。Aether（電動航空、ダーク、アイスブルー）とHalden（クリーンエネルギー、ライト、グリーン）を扱っています。1つのブランドを複数の配置に展開する方法、監査機能を使って旋盤加工した航空機を構築する方法、暗いページでも機体を明るく保つライトカラーの複合素材ランプ、G.prismOfを使った傾斜ソーラーパネル、ジオラマ用の地面スラブを示しています。
• クラフトの参考としてAnatomyから引き継いだもの：dial-indicator/（最小で約300行）、test-rig/（描画の品質基準）、desk-computer/（面に描かれた画面）、arcade-cabinet/（カットアウェイとカメラ配置）、raptor-engine/（丸いパーツ、パイプ、ハーネス、監査機能）、spot-plate/（形状の変形）、ripple-tank/（WebGLによる水と光）、turning-dial/（3Dモード）。パーツの作り方を参考にしてください。見せ方の参考にはしないでください。カード、読み出し表示、凡例は解説図向けです。

重要なのは、たった一つのアイデアです

メッセージを伝えるのはオブジェクトです。 ロゴを板の上に描いたり、カードを積み重ねて浮かべたり、アイソメトリックなフレームにスクリーンショットを入れたりしないでください。製品が約束する価値そのものを体現する、実在する美しく作られたものを見つけ、人々が眺めたくなるほど丁寧に作り込んでください。

ブリーフ	オブジェクト
「数秒で音を作る」音楽制作アプリ	ブランドカラーのノブを備え、軸からキャップが一つ外れたコンパクトなシンセサイザー
受信トレイを整理するメールツール	投函口が埋まりつつあり、封筒が一つ空中を飛んでいる、真鍮とオーク材のレターソーター
データを決して失わないデータベース	ボルト機構とダイヤルが見える、少し開いた銀行の金庫扉。その中から柔らかな光が漏れている
決済 API	レジと電鍵を組み合わせたもの。レシート用紙がカールして伸びている
落ち着いて集中できるタイマー	小さなクルミ材のトレイに載ったキッチンタイマー、キャンドル、茶葉缶
「より速くリリースする」開発プラットフォーム	作業台に置かれた発射レール付きの模型ロケット。その横には工具箱が開いている

オブジェクトは、製品を機械として描くような直接的なものでも、製品がもたらす感覚を表す比喩でも、オブジェクトを取り囲む小さな情景でもかまいません。遊び心のあるものや、現実にはありえないものでもかまいません。ティーカップの上の灯台や、本棚でもあるサーバーラックのように、すべての部分が実物のように作られていることが条件です。プロポーションは誇張しても、作り込みの質は妥協しないでください。

うまくいかない例：

• 抽象的すぎる。 浮かぶ板や立方体、カードは何を表すのか伝わらず、何も訴求できません。
• 平坦で単調すぎる。 大きな形に数本の線を加えただけでは、立体感も発見する楽しみもありません。
• ごちゃごちゃしすぎる。 あらゆる場所に同じ強さでディテールがあると、視線を導くものがありません。主役を一つ、アクセントを一つか二つに絞り、周囲は落ち着かせてください。
• ブランドに合っていない。 居心地のよさを大切にする日記アプリなのに、クローム仕上げの工業機械を描くような、雰囲気がそぐわない絵です。

アイデア出しの方法と、その他の組み合わせ例については、references/concepts.md を参照してください。

どの作品も、細部まで作り込みます。 資産がどんなに小さくても、160 px のスポットイラストを含め、密度のある実在感を持つオブジェクトにしてください。板をいくつか並べただけのものにはしないでください。サイズに応じて変わるのは（ワークフローのステップ 1）、4×の確認でどこまで掘り下げるかです。

• 実物をよく観察する。 本物のオブジェクトと同じように作りましょう。ねじ、継ぎ目、面取り、ヒンジ、脚、ローレット、ラベルプレート、ケーブルをすべて表現します。
• 二つの見え方。 1×では印象的な一つのオブジェクトとして見えます。4×では、どの部分にも見つける価値のある本物らしさが残っています。
• 意味のあるディテールを加え、ノイズは避ける。 ディテールは、そのオブジェクトに属する部品から生まれます。それぞれが別の部品に取り付けられ、縁で終わり、途切れるのではなく自然に薄れていきます。

ワークフロー

この順序で進めます。ジオメトリを作成する前に、ブリーフ、コンセプト、部品リストを書き出してください。

1. サイズを決めます。 ほかの作業に着手する前にサイズを明示します。
   • スポット：小さなオブジェクトを1つ。25〜50パーツで、正方形またはそれに近い形です。機能一覧、空の状態、アイコンセット向けです。確認せずに制作します。
   • アセット：主役となるオブジェクトを1つ。50〜120パーツで、構図があり、アンビエントモーションを加える場合もあります。確認せずに制作します。時間がかかる場合は、その旨を伝えます。
   • シーン：ジオラマ、統一感を保つ必要があるスポット一式、または WebGL や 3D モードを使うもの。120 パーツ以上です。見積もりを伝え、核となる要素を残したアセット版を提案し、ユーザーが選んだ場合にのみシーンを制作します。
   • 最初の1時間以内に動作するプレビュー画面を用意し、そこから作り込みます。
2. まず要件をまとめます。 依頼から判断するか、推測できないことだけを質問して、製品またはページの内容、アセットが伝えるべき感情や約束を1つ、配置先のページの色、ブランドカラー、配置場所（ヒーロー右、ヒーロー中央、機能タイル、スポット、バナー、OG カード、スライド）、納品サイズを確認します。これらが何も示されておらず、簡単な依頼であれば、妥当なデフォルトを選び、選んだ内容を伝えます。
3. コンセプトを考えます。 オブジェクトのアイデアを3〜5個、文字どおりのもの、比喩的なもの、シーンのものを織り交ぜて、それぞれ1行で書きます。どれを選ぶかとその理由を伝え、ユーザーの選択、または自分の選択に沿って進めます。次に、オブジェクトの内容と視線が向かう位置を1文で説明します。参照画像をそのままコピーせず、オブジェクトではなく仕上げ方を参考にします。
4. パーツ一覧を作ります。 パーツをグループ分けして記載します。ベース（プレート、脚、トレイ、布）、構造（ケース、フレーム、頬板、支柱）、機構（そのオブジェクトらしさを生むもの）、コントロール（ノブ、キー、ラッチ）、そして主題となる部分、つまりアクセントや見せ場を担うパーツです。スポットは25パーツ以上、アセットは50パーツ以上にします。references/craft.md に、パーツの用語と作り方があります。
5. 構図を決めます。 キャンバスと、その中でアートを配置する場所（references/composition.md）を決めます。アートの領域、見出し用のセーフゾーン、カメラを設定します。kit/asset.mjs の fitInto(points, region, { pad, azimuth }) で収めます。最も興味深い面が見る人を向くように方位角を調整します（シンセでは、長い正面とキーを見せるために 60° にします）。
6. ジオメトリは一度だけ構築します。 キットを使い、Anatomy と同じ方法で構築します。slabOf、cylinder、extrude、planOutline、topTicks、knurl、coil、radialTicks を使います。どの軸にも対応する丸いパーツは kit/lathe.mjs、パイプとケーブルは kit/tube.mjs から使います。
7. 奥から手前へ、下から上へ描画します。 繰り返しパーツは depthOf で並べ替えます。別のパーツを囲むものは分割します。アセットにパイプ、ケーブル、丸いパーツを使ったら、A.recorder で形状を記録し、A.settle でキーを整え、最後に A.auditOrExit を実行します（Anatomy のステップ7をそのまま使用します）。
8. 色を付けます。 主にモノクロで、ページの色になじませ、ブランドのアクセントには範囲を限定したトークンセット（references/brand.md）を使います。例：assetSvg({ paper, accents: { brand: "#ff5a1f" } }) と、アクセントを付けるパーツを囲む <g class="ac-brand">。デフォルトではアクセントの色系統を1つにし、ユーザーが希望した場合に増やします。
9. 動きを加えます。 すべてのアセットに動きを付けます。CSS のみで実装し、<img> 内で動作するようにします。基本となる動きはオブジェクトが機能している様子です（ローターは amRotor で回転、コンベアは amLoop で動作、針は amSwing で振れ、キーは amPress で演奏、インクは amDraw で文字を書き、それ以外は amFlip を使います）。さらに、小さな動きを加えます。パーツを浮かせる（amFloat）、漂わせる（amSlide）、呼吸するように動かす（amPulse）、点滅させる（amBlink）、その場で回転させる（amSpin）などです。amSpin はローター、プロペラ、ファン、タービンブレードに使い、これらは必ず回転させます。動くものは最大2〜3個にし、ゆっくり、位相をずらして動かします。描画順序が変わる動きは避け、モーション軽減設定でも動作するようにします。ポインター、スクロール、キーボードに応じたインタラクションは、ユーザーから依頼があった場合にのみ実装し、その際は Anatomy の references/motion.md に従います。
10. 納品します。 assetSvg で単体の .svg を書き出し、previewHtml でページの背景色とセーフゾーンを確認できるプレビューページを書き出します。形式については references/export.md にあります。SVG、2× PNG、React へのインライン埋め込み、セット。
11. 批評家の目で検証します。 プレビューページで、Anatomy のチェックを実行します。
    • xmllint --noout asset.svg が何も出力しないことを確認します。有効な XML ではない SVG は <img> 内で何も表示されません。
    • 納品する各テーマで node scripts/capture.mjs asset.html --out shots/asset.png を実行します。スマートフォンで表示する場合は、幅 390 px でも実行します。コンソールにエラーがないことを確認します。アートがセーフゾーンに入るとプレビューでエラーが記録されます（ゾーンを表示するには ?safe を付けて開きます）。
    • node scripts/lines.mjs asset.html --out shots/lines.png を実行し、line ends: 0 と出力されることを確認します。
    • パイプ、ケーブル、丸いパーツがある場合は、node build.mjs --audit の最後に audit passed と表示されることを確認します。
    • すべての接合部とアクセントを付けたパーツを、各テーマで 4× のクローズアップ（--zoom）で確認します。
    • 動きがある場合は、複数の --times で撮影し、--reduced でも1枚撮影します。
    • PNG をシンセの隣に置いて確認します。ひと目で、本物らしく丁寧に作られたオブジェクトに見えますか？ 意図した場所に視線が向かいますか？ 色、雰囲気、見出しのスペースも含めて、ページになじんでいますか？ 4× に拡大しても見応えがありますか？ すべてに「はい」と答えられるまで調整します。チェックリスト：references/verify.md と、references/export.md のアセットチェック。

セットアップ

キットは Anatomy のもの（kit/）に、1 つのモジュールを加えたものです。

ファイル	用途
kit/asset.mjs	アセットレイヤーです。assetSvg（単体で配置できるアセット：スタイルをインライン化してスコープを限定し、ページの色に合わせたグラウンドトークン、アクセント、アンビエントモーション、有効な XML を使用）、previewHtml（チェックを実行するページ。セーフゾーンのチェック付き）、fitInto（横長キャンバスの 1 つの領域に収まるように配置）、groundTokens と accentTokens/accentCss（パレット）、amFloat、amSlide、amPulse、amBlink、amSpin と planeMatrix、topPlane、bladesPath（CSS のみのモーション）を提供します。
kit/iso-kit.mjs、kit/iso-kit.ts、kit/iso.css	コアです。カメラ、ソリッド、パーツライブラリ、SVG 文字列、ISO_CSS を提供します。
kit/lathe.mjs、kit/tube.mjs、kit/audit.mjs	丸いパーツ、パイプとケーブル、およびそれらを検証する監査機能です。
kit/gl.mjs、kit/turn*.mjs、kit/react/	アセットで必要な場合に使用する WebGL レイヤー、3D モード、React コンポーネントです。
scripts/capture.mjs、scripts/drive.mjs、scripts/lines.mjs	スクリーンショット、スクリプト化されたシーケンス、線端のチェックです。プレビューページのステージは自動的に検出されます。

ビルドスクリプトは examples/synth-hero/build.mjs のようになります。kit/iso-kit.mjs と kit/asset.mjs をインポートし、solidSvg、lineSvg、dotsSvg で文字列を組み立て、assetSvg でラップして、.svg と previewHtml(...) を出力します。React または Next.js のサイトでは、ユーザーがインタラクションを求めない限り、.svg を <img> または unoptimized を指定した next/image として配信してください。インタラクションが必要な場合は、Anatomy の references/react.md に従ってください。

作成ルール（簡易版）

アセットに関する変更点を含めた、Anatomy のルールです。詳しい考え方と手順は references/craft.md をご覧ください。カード、表示値、凡例に関する記述は、解説用のものとして読み替えてください。

• ワイヤーフレームではなく、ソリッドを使います。 すべてのパーツはページの色で塗りつぶし、順番に描画します。透けて見えるエッジや、隠れた線を破線で描く表現は使いません。
• 陰影はキットに任せます。 extrude は 4 つの側面のトーンと、より明るい上面を返します。flat を使うのは、厚さが 1 単位未満のインレイだけです。
• トーンに階層を設けます。 ベースと脚部は lo、構造は mid、主題は hi、パーツ 1 つには lit を使います。アクセントを使っても階層は変えません。アクセントのパーツにも、そのパーツ固有のランプに基づくトーン、シェード、線を使用します。
• 色は意図して選び、ノイズにしません。 デフォルトはグレーとし、主題と、その色を反映した 1～2 箇所にブランドアクセントを使います。すべての色はトークン（references/brand.md）を使い、塗りつぶしに 16 進数を直接指定しません。ユーザーが求めた場合は色を増やせます。その場合、それぞれに独自のランプを設け、すべてのランプで明度をそろえます。
• 細部は小さく正確にし、ノイズにしません。 面取りは 0.4～1.6、溝は端から 3～5 の位置に彫り込み、ネジはリング付きの 0.4～0.55 の点で表現します。ノブにはローレットを付け、目盛りは帯または目盛り弧を基点に配置します。
• 線は何かに接続します。 すべての線の終点は、面、別の線、または点に接続します。指針はハブの点から始め、ローレットは継ぎ目で終わらせます。
• パイプやケーブルを何かに貫通させません。 交差はすべて正しい奥行き順に配置し、監査で検証します。
• 曲面は階段状にせず、滑らかに陰影を付けます。 テクスチャは実際のエッジで終わらせるか、フェードさせます。
• テキストはユーザーの判断に任せます。 デフォルトでは描画にテキストを入れません。ページには見出しがあります。ユーザーがオブジェクト上の文字（プレート上のブランド名やディスプレイの数字など）を求めた場合、それはオブジェクトの一部として、面の平面に配置し、ウィンドウに合わせて収め、クリップします（craft.md のセクション 10）。
• 立体感を持たせます。 実際の厚みを付け、物を別の物の上に載せ、ベースの下や持ち上げた部分の下に柔らかなハローを加えます。
• 構図を整えます。 アートはキャンバス全体ではなく、割り当てられた領域を満たすようにし、セーフゾーンには入らず、表示されるサイズで読み取れるようにします（references/composition.md）。
• 線幅はキャンバスに合わせます。 幅 600 の図には 0.6 px が適しています。幅 1200 のヒーロー画像には weight: 0.8～1、160 px のスポット画像には 0.5 が適しています。

WebGL と 3D

Anatomy とまったく同じように機能し、コストも同じなので、アセットは Scene になります。シェーダーは、線では描けないもの（炎、水、ランプの光、グロー、蒸気）にだけ使い、ライトテーマは紙向けにデザインしたままにしてください。また、シェーダーにはスクリプトを含むページが必要であり、単体の .svg として配布できないことに注意してください。まず references/webgl.md と references/3d.md を読んでください。

リファレンス

必要に応じて、以下を読んでください。

• references/concepts.md：概要からオブジェクトへ — アイデア創出の手法、文字どおり・比喩・シーンの違い、ムードと仕上げ、その他のマッピング。
• references/composition.md：キャンバスと配置（右または中央のヒーロー、フィーチャータイル、スポット、バナー、OGカード、スライド）、セーフゾーン、ヒーロー用カメラ、統一感のあるセット、線の太さ、スマートフォン向けサイズ。
• references/brand.md：パレット — 任意のページカラーでグレーを落ち着かせる方法、アクセントの段階（body と ink）、ダークニュートラル、複数のアクセント、ライトとダーク。
• references/export.md：配布 — .svg、プレビューページ、<img> とインラインの使い分け、PNG、サイズの予算、環境に応じたモーション、アセットのチェック。
• references/craft.md：見た目の詳細 — パーツの用語、トーン、描画の順序、丸いパーツとパイプ、画面や表面上の要素、アンチパターン。
• references/kit.md：シグネチャーと例を含む API。
• references/verify.md：capture.mjs、drive.mjs、線のチェック、監査、クローズアップ。
• references/motion.md：ポインターやスクロールに反応させたいアセットのインタラクティブなモーション。
• references/webgl.md、references/3d.md、references/react.md：シェーダー、3D モード、React。Anatomy から変更はありません。
• references/walkthrough.md：Anatomy のテストリグの設計手順 — アセットにも同じ規律を適用します。