illustration-one-line

イラスト：ワンライン

ゆるく、躍動感のあるスタイルです。動作の途中にある人物を、長く自由に流れる黒い線一本で描き、その下に色のパッチをずらして重ねます。まるで二版目の色が見当違いに刷られたような表現です。インテリアのシーンでは重くなりすぎるような、明るいプロダクトの場面（ローンチ、スプリント、フロー、お祝い）に適しています。 黒いオープンラインに網点のトーンを使い、色を使わない場合は illustration-halftone-line を使用します。かわいい小動物を、揺らぎのあるブラシの輪郭で描く場合は illustration-ink-sketch を使用します。太いブラシの輪郭、ベタ塗りの黒い形、ミント色のインク一色を使う場合は illustration-two-colour-brush を使用します。

14 種類のスタイルで作成された、デザインとコーディングに関するオリジナルカード42枚のセットから抽出しました。examples/ にある3枚のカードが、このスタイルで公開されているカードです。

見た目を一文で表すと

連続した黒い線一本で人物全体を描き、その背後にフラットなコーラル、ペリウィンクル、白のパッチを配置し、意図的に2～6 px ずらして版ズレさせます。

パレット

3つの例（1x レンダリング）から測定した値：紙色がピクセルの87～89％、インクが約2％、白のパッチが約3％、ペリウィンクルが2.3～3.7％、コーラルが0.8～2.8％です。

役割	Hex	使用箇所
紙色	#ece7da	画面全体に広がる背景の長方形。正方形で、rx は使用しません
インク	#1d1b1a	一本の線、すべての小物の線、コードのグリフ、スピード線、目、ベタ塗りのドット
コーラル	#f2846e	顔や手のパッチ、トップスのストライプ、太陽、小物ごとに一つのアクセントパッチ、コードのダッシュ
ペリウィンクル	#8790f4	ズボン、髪、画面や小物、地面のパッチ、コードのダッシュ
白	#ffffff	トップスや袖、靴、カップ、雲、地面のパッチ

• マスクでは <mask> 内でのみ #fff と #000 を使用し、画面には表示されません。
• 使用禁止：その他の色、グラデーション、不透明度、パッチの輪郭線、グレー、2色目のインク、直径1.9 px を超える黒い塗りつぶし。
• コーラルは肌色と小さなアクセントに使い、ズボンやトップス全体の塗りつぶしには使いません。ペリウィンクルを肌に使うことはありません。

線と塗り

• インクのグループは一つです：<g id="xx-ink" fill="none" stroke="#1d1b1a" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">。すべてのインクパスがこのスタイルを継承します。
• 幅480での線幅：人物の線と小物は2.3、長いモーションパスや時計の針は2.0～2.1、コードのグリフ（</>）は1.8、コーラルのストライプ線は1.9、コードの色付きダッシュは2.3です。
• 人物は、滑らかな三次曲線セグメントと小数点以下1桁の座標からなる単一のパス（id="xx-figure"）です。目、裾や袖口、小物に限り、短い線を別にしてもかまいません。小物もそれぞれ、自由に流れる一本の線で描きます。
• 滑らかさはスプラインで表現します。各ルート点は [x, y] または [x, y, k]（テンション k 付き）です（1 は滑らか、0.4～0.6 は肘、膝、襟の柔らかな角、0 はグリフの鋭い角）。
• 色は線で囲みません。パッチは独立した閉じた形として先に <g id="xx-patches"> に描き、次にストライプとダッシュを <g id="xx-accents"> に描き、その上にインクを重ねます。
• 版ズレ：色を付ける形から各パッチを2～6 px ずらし（T(pts, dx, dy)）、縁を揺らします（wobble。手や顔は振幅0.8～1.5、手足は1.4～2.4、大きな領域は2.2～3）。パッチごとに異なる整数シードを使います。片側ではパッチを短くし、反対側でははみ出させます。
• ストライプ：トップスの身体の曲線に沿って、コーラルの線を3～5本引き、輪郭の2～4 px 手前で止めます。線幅は1.9です。袖には短いストライプを1～2本入れます。
• マスク：腕がノートパソコンの手前にある場合、手がバトンを握る場合、ジャグリングしている物体の後ろをモーションパスが通る場合など、線が何かの背後を通るときは、前面の形のシルエットを黒で塗った <mask> を使って線を抜きます。2～10 px の黒いストロークを追加して隙間を作ります。C.mask() がこれを生成します。

キャラクター

• 比率：動作中の人物は高さ190～240 px（カードの高さの53～67%）です。頭の高さは41～48 pxで、全体の約1:5です。手足はチューブ状にします。腕は肩で幅18～21 px、手首に向かって8.6～9.5 pxに細くし、脚は腰で27～28 px、足首で12～13.5 pxにします。
• 頭：進行方向を向いた横顔で、高さ41～48 pxです。どちらの向きにも描けます。喉元からFACE_R（顎、唇、鼻、眉は滑らかな角）へ進み、頭頂部と髪を通って、頭蓋骨の後ろ側を丸く描き、うなじへ下ります。逆向きの場合はrev(FACE_R)を使います。EAR_RのC字ループは省略可能です。8xで形が伝わらない場合は省略してください。耳と平らな生え際を組み合わせたテストでは、頭がヘルメットのように見えました。目は短いまぶたの閉じた弧（EYE_R）として別に描き、口の線は描きません（横顔自体で笑顔を表現できます）。コーラル色の顔パッチで顔の前半分を覆い、横顔側へ1～2 pxずらして、頭の後ろ側は紙の地色のまま残します。
• 髪：髪の輪郭の後ろにビンテージ色のパッチを配置します（ポニーテール、お団子のループ、短い髪）。または、トロコイド状のループ（curls()、r 3～3.5、4～5ループ）で巻き毛を描き、パッチは使いません。
• 胴体：胴体だけの輪郭線はありません。背中の輪郭、腕の両側、お腹は、すべてルートの一部です。胸を白いトップスのパッチで覆い、−4, −3ずらします。腕の中心線を使ってblob()で作成した白い袖のパッチも配置します。
• 手足：それぞれをtube(centreline, widths)で作り、片側を下り、手または靴の周りを回って、反対側を上ります。肘や膝の点に0.4～0.6のテンションを設定して、くっきりと曲げます。物を握る手首は肩から45～60 px離します。肩から48 px離れたハンドルを握らせたところ、テスト用の腕が鶏の翼のように曲がりました（前腕15 px、上腕33 px）。
• 手や靴との接合部：8xで、手足の片側が配置した形状と接する位置を確認します。形状の最初の点が手足の縁より後ろにあると、線が折り返します。その点を削除する（shape.slice(1)）か、形状を3～4 pxずらしてください。
• 小道具（ロケット、スツール、椅子など）にまたがったり、腰掛けたりする場合：手前側の脚だけを小道具の前に描き、人物自身のルートをシルエットとして使うマスクで、小道具の線を隠します（C.mask('m-rider', [[route, 5]])）。その場合、かかとなど、同じ位置からルートを開始して終了します。
• 手：小さく、ゆるやかなループ状にします。長さは19～27 px（ローカル形状を× 1.1～1.3）で、後ろにコーラル色のパッチを2～3 pxずらして配置します。ツールキットの形状は、HAND.mitten（振る手、親指のくぼみ）、HAND.fist（ハンドルを握る、丸い形と指関節のこぶ）、HAND.tray（何かを載せる開いた手のひら）、HAND.open（受け止める、親指を外へ曲げる）、spreadHand()（手を振る、4本の指をそれぞれループ状にし、親指を加える）、CLAMP（横から見た、縁を握る拳）です。単なる楕円は使わないでください。
• 手の向き：references/craft.mdの表を使って、左右（LEFTまたはRIGHT）、手のひら側か手の甲側か（PALMまたはBACK）、指の向きを決めてから、形状を反転します（place(..., flip)）。親指のふくらみがその側に来るようにしてください。各形状の上にあるcommentsではなく、scripts/oneline.mjs内のコメントに親指がどちら側にあるかが記されています。
• 足：SHOEのループを使い、長さは30～35 px（× 1.25～1.3）にします。白いパッチを3～4 pxずらして配置します。片方の靴には、小さなかかとのループを加えてもかまいません。
• ループ：人物1人につき、ウエストバンド、かかと、膝、お団子、ポニーテールの先などに、半径3～5の筆記体風ループを2～4個配置します（loopAt()、cornerLoop()）。多すぎると走り書きに見えます。脚の途中にあるループは、描き間違いのように見えます。
• ポーズ：大きく斜めに動きをつけ、じっと立たせないでください。2つの物の間を跳び越える、体を11°前に傾けて全力疾走する、片足でバランスをとりながらジャグリングする、といったポーズにします。ルートを描く前に、腰を中心に点を回転させ（rot()）、上半身を傾けます。

装飾と小道具

• コンテキストに合わせた小道具を1～3個。それぞれ、揺れる線を1本と、少しずらしたパッチを1つ組み合わせます。中かっこ { }、</> が描かれたノートパソコン、ストップウォッチ、コーヒーカップ、虫、読み込みリングのように描いた太陽などです。小道具を動きに結び付けます。波線をストップウォッチにつなげたり、1本のループする軌跡でジャグリング中の物体を通り抜けさせたりします。
• 動き：人物の後ろに平行な速度線を3本（長さ26～52 px、間隔13～16 px）描くか、ループを1つ含む波線の軌跡を描きます。
• 地面：地面の面は描きません。足を踏みしめている場合は、接地した足の下にループのある短い波線（幅90～110 px、足裏の下1 px）を、白またはペリウィンクルのパッチと組み合わせて描くか、何も描きません。人物が宙に浮いている場合は何も描きません。
• コード：画面やバトンに、インクの太さ1.8 pxで </> の字形を描きます。「code」は、コーラルとペリウィンクルの波線状の破線を列にして表現します（squig()、2.3 px）。
• 描かないもの：テキスト、UIパネル、きらめき、紙吹雪、輪郭線のあるボックス、地平線、影。

構図

• カード：最初に <rect id="xx-paper" x="0" y="0" width="480" height="360" fill="#ece7da"/> を配置します。次に <defs>（マスク）、パッチ、アクセント、インクの順に配置します。
• 描画全体の幅は約245～377 px、高さは240～284 pxとし、中央に配置します。すべての端に30～40 pxの余白を確保します（上端は36 px以上）。
• 人物がカードの主役です。高さは190～240 pxとし、進行方向の前方に後方より広い余白ができるように配置します。小道具は、人物が向かう先、または通り過ぎる空いたスペースに配置します。
• 密度：まばらにします。ピクセルの86～89%を紙の色にし、パッチを約12～17個、インクのパスを合計15～40本にします。
• 大きな小道具（ロケット、ボード）には、その60～75%を覆うパッチを4～6 pxずらして配置します。小道具全体を覆うパッチは、白一色の形に見え、人物よりも目立ってしまいます。大きな小道具の隣に置く人物は、高さを190 px以上にします。小さく見える場合は、腰を基準に上半身を拡大します。
• ローカル座標系で描画し、1つの関数でカード上にマッピングします。makeCard('sd-', { map: pts => … }) は、すべての線、パッチ、アクセント、マスク、ドットに適用されます（中心を基準に1.05～1.1倍に拡大し、さらに平行移動します）。反対向きにするには、マップ内で x を反転します（map: pts => mirrorX(pts, 240)）。</> の字形や文字は C.raw.line(...) で描画します。マップを適用せずに描画されるため、反転しません。

テクニック

1. ツールキット。 scripts/oneline.mjs（依存関係なし、シード値指定可能）には、曲線の計算とカードの組み立てが含まれています。smooth、tube、blob、wobble、place、T、rev、rot、lowest、curls、squig、loopAt、cornerLoop、arc、ローカル形状（HAND.*、spreadHand()、CLAMP、SHOE、FACE_R、EYE_R、EAR_R）、および line、accent、patch、mask、dot（すべてマッピング済み）、raw.*（同じもの、マッピングなし）、dots（デバッグ用）、svg(debug, ariaLabel)を備えた makeCard(prefix, { map }) です。パッチと線は同じ ID 名前空間を共有するため、パッチには色にちなんだ名前を付けてください（porthole-peri、shoe-white など）。テスト用カードでは porthole ID が2つあり、リントに失敗しました。スキルフォルダーから node scripts/oneline.mjs --demo /abs/work/demo.svg を実行し（スキルフォルダーではなく、作業フォルダーに書き込んでください）、レンダリングしてください。ミトンを付けた腕、地面のくねくね線に立つ靴を履いた脚、横顔の頭部、パッチ、ストライプ、コード状の破線が描画されます。

2. 手足の経路。 R 側を下り、手の周りを回って、L 側を上ります。

import { makeCard, tube, blob, place, rev, T, ang, HAND, PERI, WHITE, CORAL } from '/abs/path/to/illustration-one-line/scripts/oneline.mjs';
const C = makeCard('sd-');
const arm = [[150, 120], [170, 132], [190, 146, 0.5], [212, 136], [232, 124]];   // shoulder, elbow (k 0.5), wrist
const W = [18, 16, 13.5, 11, 9], a = tube(arm, W);
const hand = place(HAND.mitten, arm[4], ang(arm[3], arm[4]), 1.2);           // +y wrist corner first
C.line('arm', [...a.R, ...hand, ...rev(a.L)]);                               // in a figure, splice this into the one route
C.patch('sleeve', T(blob(arm.slice(0, 3), W.slice(0, 3), 1.05), 3, -3), WHITE, 1.4, 4);
C.patch('hand', T(place([[0, -5], [12, -5], [17, 0], [12, 7], [2, 6]], arm[4], ang(arm[3], arm[4]), 1.2), 2, -3), CORAL, 0.8, 5);

ローカル形状は、+y 側の手首の角から始まり、先端を回って、−y 側の角まで続きます。手足の L 側を下る場合は、rev(shape) を使うか、flip = true を指定してください。

3. くり抜きマスク。 const m = C.mask('m-arm', [[armSilhouettePts, 2]]); C.line('laptop', lapPts, m); を使うと、腕の下に隠れるノートパソコンの線が非表示になります。複数のオブジェクトの間を通る経路では、各オブジェクトのシルエットをストローク幅 9〜10 で渡すと、経路がオブジェクトの手前で途切れ、隙間ができます。

4. 踏み出した足を地面に接地させる。 const sole = lowest(route); の後、T(pts, sole[0], sole[1] + 1.1) を使って sole[1] + 1.1 の位置にくねくね線を描きます。立たせる足は、上に浮かせず、線の上に置いてください。

5. 全身の経路順序（右を向いた状態で作成された、examples/hackathon-sprint.svg の短距離走者）。輪郭はそれぞれ一度だけたどります。 後ろ側の地面のくねくね線 → 後ろ側の靴の上部 → 後ろ脚の前面を上る → 股間 → 前脚の下側 → 前側の靴 → すねの前面 → 膝 → 腹部へ続く太ももの上部 → 奥側の腕の下側 → 拳 → 奥側の腕の上部 → 肩 → 短い首 → FACE_R → 頭頂部 → ポニーテール → 後頭部 → 耳 → うなじ → 手前側の腕の上部 → ミトン → 手前側の腕の下側 → 脇の下 → 背中 → ウエストバンドのループ → 臀部 → 後ろ脚の背面 → かかとのループ → 靴底 → つま先 → 前側の地面のくねくね線。 座っている乗り手の場合は、かかと → ふくらはぎ → 太ももの下側 → 臀部 → 背中 → 上げた腕 → 手 → うなじ → 頭蓋骨 → お団子のループ → rev(FACE_R) → 喉 → 手前側の腕 → 拳 → 腹部 → 太ももの上部 → すね → 靴 → かかとに戻る、の順にたどります。

6. パッチのレシピ（オフセット T(dx, dy)、ゆがみの振幅は各例のジェネレーターによる）。トップス：胸の輪郭、（−4, −3）、振幅 2.4〜2.6。袖：blob(arm.slice(0, 3), W, 0.95–1.05)、（±2〜3, −3）、振幅 1.4〜1.6。ズボン：blob(leg, W, 1.0)、（5, 3）、振幅 2.2〜2.4。顔：頭部ローカル座標の [[6,-12],[16,-8],[22,2],[19,13],[9,15],[5,2]]、（2, −1）、振幅 1.1〜1.5。髪：（−3, −2）、振幅 1.2〜1.6。手：手の形状を使った5〜6点のブロブ、（2〜3, ±2〜3）、振幅 0.8〜1.2。靴：[[-6,-2],[10,-3],[22,3],[22,10],[4,11],[-7,8]] を靴独自の place() に渡し、（3〜4, 2〜3）、振幅 1.2。小道具：（3〜5, ±3）、振幅 1〜1.8。シード値はすべて異なるものにします。

失敗しやすい点

• Hackathon Sprint は評価が 6.5 でした。 審査員から、頭の形、地面についた後ろ足、ハッカソンらしさを示す弱い手がかりが指摘されました。カードでは、ポニーテールに比べて頭蓋骨が小さく、地面についたループ状の靴は塊のように見え、</> のバトンとストップウォッチからは「ハッカソン」だと伝わりません。このカードの頭や後ろ足をまねせず、題材がひと目でわかる小道具を持たせてください。
• 手がミトンのような塊になる。 最初の Flow State では、手が楕円形でした。親指のふくらみや、分かれた指のある形を使い、その背後にコーラル色のパッチを置いてください。
• 膝のループはミスに見える。 最初の Flow State では、脚の途中にループがあり、線も交差していました。ループは端（かかと、ウエストバンド、髪）に置き、脚は股関節から足首に向かって細くし、膝はすっきりと曲げてください。
• 色が線にぴったり重なる。 すると普通のベタ塗りになり、印刷ズレのような見た目が失われます。各パッチを 2～6 px ずらし、片側にははみ出させ、反対側には届かないようにしてください。
• パッチがシミに見える。 wobble の amp が 3 を超えているか、体の部位と関係のない塊になっています。amp は 0.8～3 に保ち、各部位にパッチを 1 つだけ使ってください。
• 普通の線画になってしまう。 線が細かく分かれすぎています（胴体の輪郭、指一本ずつ、顔の線など）。人物は 1 本のパスで描き、目、裾、小道具だけを別にしてください。
• 物体の背後で線が交差する。 パスが腕や持っている物の下を通り、両方の線が見えています。隠れる部分をマスクしてください。
• 線幅のばらつき。 どこかに 1.4 px や 3 px の線があると、セット全体の統一感が崩れます。インクには 2.3、グリフには 1.8、ストライプには 1.9 を使ってください。
• 足が浮いて見える。 地面についている足が、下の波線から浮いています。lowest() で足裏の位置を測り、波線をその 1.1 px 下に配置してください。
• ID の重複。 パッチと線に同じ名前が付いています。すべてのパッチの ID に色のサフィックスを付けてください。
• 関節にフックができ、腕が鶏の翼のようになる。 「Characters」を参照してください。どちらもセルフテストカードで確認され、8 倍ズームでしか見えませんでした。

例

• examples/flow-state.svg：「Flow State」。片腕を後ろに大きく振り（spreadHand 風の開いた手）、もう片方の腕でノート PC を抱え込むジャンプ（CLAMP、マスクあり）。curls() のカールした髪、ヘッドホン、白いパッチ付きの 1 本線で描いた 2 つのコードブレース、コードのダッシュ、ローディングリングとしての太陽、スピード線、トレイルの波線。
• examples/hackathon-sprint.svg：「Hackathon Sprint」。左向きのスプリントです。人物は右向きで作成し、G で反転させ、カードの座標系に </> を描きます。バトンを握る fist（マスクあり）、振る mitten、ポニーテール、ウエストバンドのループ、波線に結び付いたストップウォッチ、スピード線。最も弱いカードです。「失敗しやすい点」を参照してください。
• examples/juggling-tasks.svg：「Juggling Tasks」。片足でバランスを取り、ノート PC の下に tray の手を添え、離したばかりの open の手を使っています。ループする動きのパスがカップとバグの間を通ります（stroke 9～10 でマスク）。短い地面の波線にペリウィンクル色のパッチ、髪のお団子のループ。

ワークフロー

このスキルのフォルダーからすべてのコマンドを実行します。カードのパスは絶対パスでも構いません。

1. 概要。 主題と、それを示す1つの動作を決めます。文字を使わずに主題が伝わる小道具を1〜3個選びます。
2. ポーズ。 数値で骨格をスケッチします。腰、肩、頭の中心、各手足の中心線（それぞれ4〜5点）と幅を指定します。向きと傾きを決めます。IDのプレフィックス（sd-）を選びます。
3. ジェネレーターを作成。 card.mjs を作成し、絶対パスで scripts/oneline.mjs をインポートします。チューブを作り、手と靴を配置して、人物のルートを1つだけ作成します。自由端（手、足、または地面のくねくね線）から始め、すべての手足を回って、別の自由端で終わります。作業中は C.svg(true) で番号付きのルート点を確認します。
4. 手を紙に描く。 それぞれの手について、向きを示す文字列、手のひらか手の甲か、指の方向を記し、次に親指の側を記します（references/craft.md）。形と反転の有無を選びます。
5. 色。 パッチ（オフセット、ゆらぎ、異なるシード）、ストライプ、マスクを追加します。
6. レンダリング： node scripts/render.mjs card.svg card.png。
7. シート： node scripts/render.mjs --sheet sheet.png examples/flow-state.svg examples/hackathon-sprint.svg examples/juggling-tasks.svg card.svg。「同じ手、同じセットか？」を確認します。線の太さ、ゆるさ、パッチのオフセット、密度、紙の占める割合を見ます。
8. 拡大。 手、頭、足、手足が手や靴につながる箇所のすべての関節、交差部分を確認します。node scripts/render.mjs card.svg z.png --zoom x,y,w,h --scale 8。references/craft.md の親指の確認も行います。手は1つのルートの中にあるため、別の色にはできません。代わりに、使い捨てのコピーに赤い円（r 2.2）を親指の先、青い円を人差し指の先に置き、両方とも同じ place() 呼び出しで配置してから、コピーを削除します。
9. 批評。 references/craft.md の5つの基準と確認リストに沿って評価します。修正し、再レンダリングして、シートも作り直します。4回以上の反復は普通です。
10. リント： node scripts/lint.mjs card.svg --prefix sd- --palette style.json。

確認

• 紙の長方形は #ece7da で全面を覆い、rx はありません。使われているのは紙、インク、コーラル、ペリウィンクル、白のみです。
• 人物は1つの <path> です。それ以外は、目、裾、小道具、スピード線、くねくね線のみです。
• すべてのインク線は2.3（グリフは1.8、長い動作線は2.0〜2.1）です。ストライプはコーラルで1.9、線端と線の結合部は丸くします。
• パッチの輪郭が元の輪郭と一致していません。各パッチは2〜6 pxずらしてゆらぎを加え、同じシードを使うものはありません。
• 顔のパッチはコーラルで、顔の前面だけを覆い、目は閉じたまぶたの弧です。
• 手には親指のふくらみか独立した指があり、コーラルのパッチがあり、親指は正しい側にあります（親指の確認済み）。
• 端のループは2〜4個（髪、かかと、ウエストバンド、膝は多くても1か所）です。手足の途中にループはありません。
• 腕や物体の後ろを通る線はマスクされています。8倍表示で意図しない交差はありません。
• ポーズは斜めの動作です。地面についている足は、くねくね線に1 px重なるか、人物が明らかに宙に浮いています。
• すべての端に30〜40 pxの余白があります。紙はサンプルと同じくらい大きな割合を占めています（87〜89%）。パッチは12〜17個です。大きな小道具のパッチは、その小道具の60〜75%だけを覆います。
• 文字がなくても、動作と小道具から主題が1倍表示で伝わります。
• パッチのIDには色のサフィックスが付いています。lint.mjs --palette style.json を実行しても、ERRORやWARNは出ません。