illustration-halftone-line

イラスト：ハーフトーンの線画

編集記事風のモノクロスタイルです。温かみのある紙に黒インクだけを使い、人物は自信に満ちた、少し揺らぎのある線で描きます。線は閉じず、少し手前で止めます。灰色はすべて、印刷されたようなドットで表現します。コラボレーション、レビュー、通勤、集中する時間など、落ち着いた人間味のあるプロダクトの場面に適しています。

使い分け：ずれた色のパッチを伴う一本の連続した線には illustration-one-line を、太い筆の輪郭線と二色目のフラットなインクには illustration-two-colour-brush を、細いインディゴの内側の線と控えめな色のアクセントには illustration-line-interior を使います。少しでも色を使う要件がある場合、このスキルは適していません。

14種類のスタイルで制作した42枚のオリジナルなデザイン・コーディングカードから抽出しました。examples/ にある3枚のカードが、このスタイルでリリースされたカードです。

ひとことで表すと

温かみのある紙に黒い線と黒いドットだけを使います。それ以外は何も加えません。灰色はすべて、濃さに応じてサイズを変えた揺らぎのあるハーフトーンドットで表現し、周囲の線は閉じずに残します。

パレット

役割	Hex	用途
紙	#f4f1ea	カード全体を覆う長方形、および背後を隠す必要があるすべての形の塗り
インク	#111111（#111 と記述）	すべての線、すべてのハーフトーンドット、すべての黒い塗りつぶし

• 使う色は2色だけです。例外はありません。灰色、不透明度、グラデーション、色のアクセントは使いません。灰色はドットだけで表現します。
• 紙色の線（stroke="#f4f1ea"、1.2–1.5）は、黒く塗りつぶした形の内側に描き、髪のハイライト、葉脈、ズボンのしわ、バッグの縫い目を表現します。
• カードの大半は紙の余白です。インクが占める面積（線、ドット、黒い塗りつぶしの合計）は、カード全体の12–14%です。

線と塗り

幅480の場合の値です。アートグループには stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" を指定し、個々のパーツでは上書きします。

要素	幅
人物、手の外側の輪郭、家具、靴の輪郭	2.0（1.9–2.1）
画面の内枠、窓ガラス、植物、小道具	1.6–1.7
指と親指のしわ、折り目、袖口、裾、フードの縫い目	1.3–1.6
キーボードのキー、爪の短い線、紙の小道具にある文字の線	1.1–1.3
くねった線、波かっこ、放射状の短い線	2.0–2.3

• 開いた輪郭。 輪郭は塗りのストロークではなく、独立した開いたパスにします。オブジェクトごとに4–14単位の隙間を1–3か所設け、主に角や線同士が接する箇所に配置します。線は、交差するはずの線から2–6単位手前で止めます。リリース済みの列車の窓の例：M366 74 H410 C420 74 428 82 428 92 V138 M426 160 C424 168 418 174 410 174 H318 M300 174 H166 …（1つの枠に2か所の隙間があります）。
• 紙色の塗りは背後を隠すために使い、輪郭線にはしません。 背後のものと重なる各形は、stroke="none" を指定した紙色で塗り、ドットと開いた輪郭より先に描画します。
• 手描きの揺らぎ。 フィルターはアートグループ全体に1つだけ適用し、ほかでは使いません。低周波のゆがみを2.3、細かなエッジの粗さを0.8にします。scripts/halftone.mjs がこれを書き出します（<filter id="xx-wob">）。カードごとに独自の --seed を指定します。
• 色調はドットで表現します。 ピッチ2.58の揺らぎのあるグリッドを使い、ドットの面積を色調に比例させます。服、クッション、明るい小道具、床の外側の陰影には flat 0.19（明るい色調、ドット半径 r ≈ 0.6）を使います。髪の塊、影のある側、遠い側の手足、床の陰影の中心には flat 0.36–0.38（中間の色調、r ≈ 0.85）を使います。段階的な色調（lin、rad）は、丸みのある形を0.08から0.36の範囲で陰影付けします。
• 黒のベタ塗りは、カードごとに3–5か所の大きな形に使います。髪、植物の葉、バッグ、黒いTシャツやズボン、ノートパソコンやモニターの暗い縁、靴底、チェックマークが対象です。

キャラクター

• ゴムのようにしなやかで、手足が長い体形です。髪を含む頭の高さは40–44 px、立ち姿は230–250 px（頭身は5.5–6頭分、カードの高さの65–70％）です。座り姿では、頭頂部がカード上端から約70 pxの位置になります。
• 頭部は横顔、またはそれに近い角度にします。それぞれをローカル座標系<g transform="translate(cx cy) rotate(a)">内で作ります。紙のような顔の形に尖った鼻のくさび形を付け、眉から鼻、あごを通って顎のラインへ続く開いた輪郭を描き、後頭部は髪の下に隠します。付属の批評家の頭部の顔形状は次のとおりです。M-16 18 C-26 0 -20 -24 4 -26 C20 -26 23 -10 22 -1 L31 9 Q29 11.5 23 12 C24 18 23 24 17 28 C11 32 0 31 -8 24 Z。${H.head(x, y, rot, dir, hair, { back, eye, smile })}でこの頭部を正確に描画します。右向きはdir 1、左向きは−1です。ローカル座標での顔の範囲はおよそ−26…31 × −26…32なので、(x, y)は顔のほぼ中央です。左向きの顔では、rotを負の値にすると下向きになります。
• 顔の描き込み：目は半径r 1.8–1.9の点（または落ち着いた表情なら閉じた目の弧）、眉は短い弧で太さ1.6–1.7、微笑みは小さな弧で太さ1.7–1.8、耳は内側にカールを付けた太さ1.6のC字形、丸眼鏡は横顔用のレンズを輪郭線で1つ描き、耳までつるを伸ばします（H.hair.glasses()）。頬の赤み、瞳、まつ毛は描きません。
• 髪：黒ベタの塊に太さ1.3の紙色のハイライト線を1本入れるか、ドットの塊（0.38に、太さ1.3の毛束線を2本加えた輪郭線）にします。お団子は黒い円、ポニーテールは黒い涙形、ニット帽はドット模様にリブ編みの紙色の帯を付けます。付属カードで使われているプリセットは、頭部の座標系内で次のとおりです。H.hair.curly(t)（前髪にカールのあるドット模様の髪。「flat 0.3」は灰色に見えます）、H.hair.bun()、H.hair.ponytail()、H.hair.long（.backを頭部のbackオプションに、.frontを髪に渡します）、H.hair.glasses()。髪には途切れのあるシルエットが必要です（お団子、しっぽ、カール、または前髪の切れ込みなど）。滑らかな帽子状の形に直線的な生え際を付けると、ヘルメットのように見えます。
• 首は紙色の四角形に、太さ1.5の線を1〜2本加えます。肩は傾斜させ、胴体は箱形ではなく柔らかな袋状にします。
• 服装：手前側の袖と胴体には薄いドット、影側と奥側の手足には中間の濃さのドットを付けるか、紙色のしわ線を入れた黒ベタの服にします。リブ編みの裾と袖口は、太さ1.3の短い線を並べて表現します。${H.limb([[x,y] shoulder, elbow, wrist], [halfWidths], tone)}で、両端が開いた、トーン付きの形状の三重構造として袖またはズボンの脚を作ります（トーンは'flat 0.19'、肌の露出部分は''、黒ベタの服は'black'）。黒い脚が2本ある場合は、その間に太さ1.4の紙色のしわ線を引きます。
• 手は大きく表情豊かにし、手首から指先までの長さは頭の高さの約0.8にします。構造と左右の向きについてはreferences/craft.mdを参照してください。このスタイルでは指と親指をそれぞれ紙色で塗りつぶした形として描きます。外側の輪郭線は太さ2.0で一部を開け、しわと爪の短い線は1.2–1.6、指の間には小さな隙間を設け、手首には袖口の線を引きます。scripts/halftone.mjsの${H.hand(x, y, rot, sc, thumb)}は、付属カードで使われている、タイピング中または休めている手を描画します。手首は(x, y)に置き、指はローカル座標の+x方向に伸ばして、表面に沿って+y方向へ曲げます。人差し指は−y側、thumbがtrueの場合は親指をその隣に描きます。指を左向きにする場合は、左右反転します。<g transform="translate(x y) scale(-1 1)">${H.hand(0, 0, rot, sc, false)}</g>。指差しや物を握る手は、同じ描き方で手描きします（手の甲、人差し指を伸ばし、曲げた指を太さ1.3のしわを付けて輪のように重ね、親指は独立した形にします）。
• 足：紙色のアッパー、黒いソール、太さ1.3–1.6の短い靴ひも線を付けたシンプルなスニーカーにします（${H.shoe(x, y, dir, sc)}、sc ≈ 0.6、(x, y) = かかとの底、足首はx + 8·dir、y − 14に配置）。床の線に接地させます。両足のかかとは少なくとも26離します。つま先より大きく重なった靴は、1足の二重靴に見えます。
• うまくいくポーズ：片方の膝を曲げ、片腕を背後についてテーブルに身を乗り出す。上げた太ももにノートパソコンを載せ、仕切りにもたれて座る。スツールに腰掛け、遠い側の脚を折りたたんでタイピングする。片手にあごを載せ、もう片方の手で腰のあたりにカップを持つ、重心を片側に寄せた立ち姿。小さなテーブルを挟んで2人が座り、説明する側が身を乗り出して指差す。両腕を下げて直立させるポーズは避けます。完成した胴体を傾けるには、胴体、首、頭をrotate(−8 hipX hipY)で囲み、腕の肩の位置を合わせて引き直します。

装飾と小道具

• カードごとに落書きを2～4個、上3分の1の空いた紙面に浮かべます。3つのループがある巻き毛状の曲線（2.3）、頭の上に放射状の短線を3本描いた思考や驚きの表現（1.8～2.0）、中括弧 { }（2.0）、黒く塗りつぶしたチェックマーク、黒い点が3つ入った吹き出し（半径3.2）、線が入った書類または画像カードなどです。
• 小道具は、紙色で塗りつぶした線画にします。脚が開いた机やテーブル、スツール、ベンチ、製図台、モニターやノートパソコン（一辺を黒く塗りつぶす）、</> を表示した画面、テキスト行とカーソル（1.3～1.7）、マグカップやテイクアウト用カップ（点描の本体または黒い帯）、黒く塗りつぶした葉と紙色の葉脈がある植物、黒いトートバッグなどです。
• 床：一本の線でつなげて描いてはいけません。立っているものの下にだけ、短い線（1.9～2.0）を引き、すべての足、脚、台座の下に点描の影を置きます。薄い楕円（0.19、ry 5.6）に、幅の58％の暗い芯（0.36、ry 3.4）を重ねます。${H.pool(cx, cy, rx)} が両方を描画します。
• 禁止事項：色、灰色の塗りつぶし、閉じた四角形での輪郭の多用、ドロップシャドウ、きらめき、ハッチング（トーンは線ではなく点で表現）、</> とコードの字形以外のテキスト。

構図

• <defs> より前に紙面の矩形を置きます：<rect id="xx-paper" width="480" height="360" fill="#f4f1ea"/>。正方形にし、rx は指定しません。
• インクのバウンディングボックスはカード幅の78～82％、高さの73～80％にします。余白は37～55 px（2倍サイズのレンダリングでは75～110 px）です。
• <g id="xx-frame" transform="translate(dx dy)"> の中に原寸で描画し、中央に寄せるため少しずらします（出荷済みカードでは±4）。または、最初のカードのように大きく描画してフレームを0.86倍に縮小します。縮小後も線幅は2.0を保ちます。
• 1人または2人の人物が、1つの家具または1台のデバイスを使っている構図にします。焦点は、その物に触れている手です。落書きは上部の空いた紙面に置き、人物に重ねてはいけません。
• 黒く塗りつぶした部分はバランスよく配置します。黒い塊を3～5個に分散させ、カードの片側だけが灰色の点描にならないようにします。
• 床は y 305～322 に配置します。立っているものはすべて、影を介して床に接するようにします。

テクニック

1. ソースを作成してコンパイルします。 card.src.svg を作成します。id のプレフィックスには @P@ を使い、<defs> 内には `` を置き、トーンには <stip> タグを使い、式は ${…} で記述します。その後、次のコマンドを実行します： node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41 このコマンドは、揺らぎフィルター、各点描に対するクリップパス、ドットを生成し、プレフィックスのない id があると失敗します。node scripts/halftone.mjs demo /tmp/halftone-demo.svg はトーン見本を出力します（スキルフォルダーの外であれば、どこに置いてもかまいません）。各 ${…} は JavaScript です（入れ子の波括弧やオブジェクト引数も使用できます）。組み込みヘルパーは H.pool、H.E、H.shoe、H.hand、H.limb、H.head、H.hair.* です。独自のヘルパー（再利用する指差しの手など）は、ソースの先頭にある <gen>…</gen> ブロックに記述します。

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360">
   <rect id="@P@paper" width="480" height="360" fill="#f4f1ea"/>
   <defs></defs>
   <g id="@P@frame" transform="translate(0 0)">
   <g id="@P@art" filter="url(#@P@wob)" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
     ${H.pool(120, 307, 24)}
     <path d="M40 307.6 H150" stroke-width="2"/>
     …
   </g></g></svg>
   

2. トーン付きシェイプの3要素。 同じ d を3回使います。紙色の塗りつぶし、ドット、開いた輪郭です。

   <path d="M98 190 C94 214 … Z" fill="#f4f1ea" stroke="none"/>
   <stip d="M98 190 C94 214 … Z" t="flat 0.19"/>
   <path d="M98 190 C94 214 90 236 88 252 C86 268 82 284 79 299 M96 300 C98 284 102 268 104 254"/>
   

   シェイプの一部に、より小さな <stip … t="flat 0.36"/> を重ねると、その部分を影側として表現できます。最初に出荷されたカードでは、代わりに60単位のドットタイルを使っていました（明るい部分は fill="url(#@P@dl)"、中間部分は url(#@P@dm)）。ソースがタイルを参照すると、コンパイラーがタイルを追加します。階調を付けられ、輪郭もくっきり保てる <stip> を推奨します。トーンの指定方法：flat t、lin x1 y1 t1 x2 y2 t2、rad cx cy r t0 t1、noise a scale（乗算）。<stip> のパスで使えるのは M L H V C S Q T Z で、円弧は使えません。楕円には ${H.E(cx, cy, rx, ry)} を使います。
3. 紙色のディテールを加えた黒塗り。 <path d="…hair…" fill="#111"/> の後に、ハイライトまたは折り目を1つ加えるため <path d="…" stroke="#f4f1ea" stroke-width="1.3"/> を置きます。
4. 落書きの曲線（2.3、3つのループ）：<path d="M60 268 C53 259 60 248 67 253 C74 258 65 265 63 256 C61 245 74 236 81 243 C88 250 75 257 75 246 C75 233 91 224 96 234" stroke-width="2.3"/>。

失敗しやすいポイント

• ドットが粗すぎます。 Train Ride のスコアが 7 にとどまったのは、ズボンのトーンが 0.52 で、ドットが潰れて塊になっていたためです。ドットで表現する領域は 0.38 以下の明るさにしてください。それより暗い部分は黒ベタになります。
• 立ち姿が硬く、手がミトン状です。 Design Critique は、直立した人物と塊状の手でスコアが 6 でした。立っている人物にはコントラポストを取り入れ、それぞれの手に動作を与えてください。指は一本ずつ、輪郭線のある形として描きます。
• 参考画像セットの模倣。 Design Critique の最初のレイアウトは、スタイルの研究に使った参考画像に似すぎているとして、2 人の審査員に却下されました。家具と独自のリアルな動作を中心に各シーンを構成し、参考画像のレイアウトを流用しないでください（references/craft.md の Originality）。
• 親指の向きが逆です。 提出した 3 枚のカードすべてで、左右の向きを修正する必要がありました。手ごとに、左手か右手か、手のひらか手の甲か、指の向きを書き出してから、親指の確認を行ってください（references/craft.md）。
• 閉じた均一な輪郭線。 太さが均一で完全に閉じた輪郭線は、クリップアートのように見えます。オブジェクトごとに 1～3 か所の隙間を空け、役割に応じて 2.0／1.6／1.3 と太さを変えてください。
• ドットではなく灰色の塗りつぶしに見えます。 ドットの間隔が狭すぎる（ピッチが 2.2 未満、または r が 0.4 未満）と、1x では平坦な灰色に見えます。ピッチは 2.58 にしてください。
• 不要な灰色。 #888、opacity、またはぼかした影があると、インク 2 色のルールに反します。--palette を指定して lint を実行すると色を検出できます。
• 足や家具が浮いて見えます。 すべての足、脚、台座に床の線を引き、その下にドットの影を付けてください。
• ヘルメットのような髪。 セルフテストでは、滑らかな髪のキャップを直線的な生え際と組み合わせた 2 つの髪型が、1x でビーニーやヘルメットのように見えました。お団子、ポニーテール、カール、または前髪の切り込みを使うと、どちらも解消できます。H.hair のプリセットを使用してください。
• 靴がつながって見えます。 足を 14 離して配置したところ、重なって一つの長い靴に見えました。人物のかかとは最低でも 26 離し、奥側の足を後ろに引いてください。
• 人物に重なる落書き。 頭や手に重なる波線や短い線は、描き間違いのように見えます。落書きの周囲には紙の余白を 10 px 確保してください。

例

• pair-programming.svg：「Pair Programming」。ドット柄のビーニーをかぶった男性が机のモニターに向かってタイピングし、黒いポニーテールの女性が身を乗り出して、鉛筆でコードの一行を指しています。黒い葉の植物、スツール、マグカップ、波括弧、チェックマーク、波線の落書きがあります。60 単位のドットタイル、0.86 のフレーム倍率、タイピングする手、鉛筆を持つ手を示しています。
• train-ride.svg：「Train Ride」。黒いお団子ヘアの女性が地下鉄のベンチに座り、持ち上げた太ももの上にノートパソコンを置いて、両手でタイピングしています。通り過ぎる風景が見える車窓、吊り革、床に置かれた黒いトートバッグ、吹き出しと波線の落書きがあります。座ったポーズ、段階的な点描、そして（ズボンの）暗すぎたトーンを示しています。
• design-critique.svg：「Design Critique」。黒い T シャツの男性が製図台に身を乗り出し、印刷物上のボタンに丸を付けています。ドット柄のセーターと黒いズボンの女性は、片手をあごに当てて立ち、腰のあたりにテイクアウトカップを持っています。前かがみのポーズ、せん断変形したテーブルの天板、あごに手を当てる握り方、黒ベタの衣服を示しています。

ワークフロー

このスキルのフォルダーからコマンドを実行します。

1. 概要を決める。 主題と、それを表す一つの動作を挙げます（「メンターが学生のノートパソコンでバグを説明している」）。
2. ポーズと主役のオブジェクトを選ぶ。 人物は1人または2人、家具またはデバイスは1つにします。各手について、LEFTかRIGHTか、手のひらか手の甲か、指の向き、触れているものを書き留めます。
3. 下描きする。 card.src.svgで、各人物を棒人間の骨格（線の太さ2.0）と家具の輪郭で大まかに描きます。コンパイルしてレンダリングし、細部を描き込む前に、人物の高さ、床のy座標、余白を確認します。
4. 描く。 奥から手前へ、床のドット面とストローク、家具、奥側の人物のパーツ、手前側の人物のパーツ、最後に手、その後に落書きの順で描きます。色調を付ける形にはすべて、紙色の塗りつぶし → <stip> → 開いた輪郭線を適用します。
5. コンパイルする： node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41。
6. レンダリングする： node scripts/render.mjs card.svg card.png。
7. サンプルと並べてシートを作る： node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg。線の太さ、ドットのサイズ、紙の色、何も描かれていない紙の量は同じですか？
8. 拡大して確認する。 すべての手、顔、足、接触箇所を確認します：node scripts/render.mjs card.svg hand.png --zoom 180,170,60,50 --scale 8。親指の確認：使い捨てのソースコピーで、親指の紙色の塗りつぶしを#ff0000に、人差し指の塗りつぶしを#0000ffに設定し、コンパイルして拡大し、確認してから削除します。H.handでは、人差し指は手のひらの後にある最初の指のパスです。
9. references/craft.mdの5つの基準に照らして厳しく批評し、コンパイル済みSVGではなくソースを修正して、5～9を繰り返します。4回のラウンドを想定してください。
10. Lintを実行する： node scripts/lint.mjs card.svg --prefix oh- --palette style.json。WARNがあれば迷い込んだ色です。削除してください。

確認

• 紙の矩形#f4f1eaが最初の要素で、全面を塗り、rxはありません。
• 使用されているのは#111と#f4f1eaのみです。1つの揺らぎフィルター以外に、不透明度、グラデーション、ぼかしはありません。
• 揺らぎフィルターはアート全体のグループだけに適用されています。
• 主線は2.0、補助線は1.6～1.7、しわ線は1.3～1.6で、1.1未満の線はありません。
• すべてのオブジェクトの輪郭には意図的な切れ目が少なくとも1つあり、線は接合部で手前まで描かれています。
• ドットの濃度は0.19または0.36～0.38です（0.08～0.38の範囲で段階的に調整）。0.4より濃いドットはありません。
• 黒ベタは3～5か所で、カード全体に散らばっています。
• 頭部は横顔で、くさび形の鼻、点の目、小さな笑顔があります。髪のシルエットには切れ目があります。人物の身長は頭5.5～6個分です。
• 各人物のかかとの間隔は少なくとも26で、足は床のストロークに接しています。
• 各手には輪郭線で分けられた指、正しい側にある親指、腕につながった手首と袖口があります。
• すべての足と台座に床のストロークと2段階のドット面があります。途切れない床線はありません。
• 何も描かれていない紙の部分に、人物から離して落書きが2～4個あります。
• インクの範囲は幅78～82%、高さ73～80%です。余白は37～55 px（2倍レンダリングでは75～110 px）で、カードの大部分は何も描かれていない紙です。
• キャプションなしでも、1倍表示で主題が伝わります。
• scripts/lint.mjsが--prefixと--palette style.jsonを指定して正常に通ります。