ホーム / ブログ / デザイン

4つのイラストスタイル、そして実装されるのはどれか

2026年8月29日 · 読了 約6分 · Dimesum Engineering

Dimesumは4つの候補スタイルをすべて描いたうえで1つを選び、決め手は美しさではなく、絵の中のすべての色がトークンになれるかどうかでした。

4つのイラストスタイル。テーマを切り替えられたのは、そのうち1つでした。Dimesumは、たった1つの機械的なテストでブランドのアートディレクションを選びました。絵の中のすべての色をトークンに置き換えられるか。3つの候補はこれを満たせず、最も美しいものが最も大きくつまずきました。

4つの原型は docs/design/brand/ART-STYLES.md にまとまっており、創業者が集めた参考資料ごとに1つずつ対応します。議論する代わりに4つすべてを描きました。Dimesumが持つ3つのモチーフを、それぞれの原型の筆致とパレットで一度ずつ描き起こしたものです。make ui-art-styles が4x3のコンタクトシートを書き出します。

プロダクトのアートでは、生成できることが美しさに勝る

プロダクトのアートは何度も生成し直され、マーケティングのアートは一度だけ描かれます。Dimesumは18のカラーパレットを提供しており、同じ餃子がリスト行の24pxでもオンボーディング画面の200pxでも成立しなければなりません。新しいパレットのたびにイラストレーターを必要とするスタイルは、どちらの役目も果たせません。

だから基準は生成できることです。フラットな塗りの上に均一な丸端のストロークを乗せた形は、1つの形につきちょうど2色を持ち、そのどちらもトークンで名付けられています。トークンの値を変えれば、プロダクト内のすべての絵が一度にテーマを切り替え、描き直しも2つ目のアセットも要りません。

4つの原型のうち3つは、それぞれ別の理由で破綻する

「キャスト」は温かみのある絵画調です。質感のある編み込みの蒸籠、琥珀色の背景、そして箸立てをよじ登る手足の生えた餃子。4つの中で最も愛嬌があります。それでも実装はできません。描き込まれたハイライトは、2つのストップと中心位置を持つグラデーションであって、差し替えられる16進数の色ではなく、陰影は24pxでぼやけて崩れます。

「ポスター」はフラットな幾何学調で、編み込みのマットの上にオリーブとゴールドを載せています。アウトラインはまったく持たず、形は色だけで分かれています。美しいものの、構造的には致命的です。テーマを変えると塗りが動き、境界も一緒に連れ去られるからです。顔はおおよそ本体の幅の8%の位置にあるため、Dimesumが使う24pxから48pxのサイズでは、のっぺりと見えてしまいます。

「スプレッド」はモダンなエディトリアル調で、私たちの筆致に最も近いものです。フラットな塗りの上に細く均一な濃いアウトラインを重ね、ディテールは陰影ではなく小さく繰り返すマークで表します。違いはモチーフであって、ストロークではありません。これはテーブル全体を上から描いており、テーブルにはリスト行に置ける単位がありません。Dimesumに必要なのはシーンのスタイルではなく、キャラクターのスタイルです。

「ステッカー」はクリーンなかわいい系ベクターで、私たちが実装するのはこれです。均一な細いアウトライン、フラットな塗り、点の目、大きなコーラル色のチーク、陰影なし。その中のすべての色がトークンなので、18のパレットすべてが手間なくテーマを当てられ、24pxでも200pxでも成立し、2pxの丸いストロークで描いた24pxのLucideアイコンと同じ筆致です。

決め手となる問い、色はトークンになれるか？

色に名前を付けられるのはフラットな塗りのおかげであり、名前を付けられることが18のパレットを手間なく実現します。「ステッカー」の餃子は、1つの塗りトークンと1つのストロークトークンです。チークはフラットなパステルではなく不透明度0.42の rust-600 なので、自前の色を名付ける代わりに、配色が持つ温かい色相を借ります。蒸籠は各テーマの gold-600 から混ぜた1つの階調のはしごで、明るい縁はそのゴールドに紙を22%足したもの、底は墨を38%足したもので、どの配色でも同じです。

見送った2つのスタイルは、いずれもその編集に耐えません。「キャスト」のハイライトはグラデーションのストップに焼き込まれているため、本体のテーマを変えても、その上にクリーム色の塊が残ります。「ポスター」には絵をまとめる線がないため、2つの塗りが互いに近づいた途端、その間の境界は存在しなくなります。

並べて比較して初めて気づいた3つの修正

絵は単体では必ず良く見えます。以下の修正はすべて同じやり方で見つけました。候補をPNGに書き出し、参考資料を同じピクセルサイズに切り抜き、両方を1枚の画像に貼り合わせるのです。

口は幅20uで描かれており、参考資料の隣に置いた途端にスマイリーに見えました。これを28uの目の間隔の3分の1にあたる10uまで下げると、キャラクターは餃子に戻りました。目の円盤も同時に小さくし、r5 から縦が横より長い3.4uの楕円にしました。

IoUで参考資料のマスクにフィッティングしたアウトラインは0.880のスコアを出し、最良の手描きの試みの0.781を上回りました。フィッティングしたものは、とげとげした王冠のように見えました。面積の重なりは滑らかさを見られないため、スコアの高い方がより悪い絵でした。実装するのは、制作した曲線を持つ計測された比率です。参考資料の1.039に対してアスペクト比1.041、すべてのセグメントが三次曲線で、どこにも角がありません。

ひだの結び目は輪郭を破らなければなりません。最初の餃子は上部に3本の細いストロークを描いた滑らかなドームで、レビューは一言で返ってきました。髪の毛、と。途切れない曲線の上に描いた線は髪の毛にしか見えません。形のどこにも、皮が寄せ集められたことを示すものがないからです。ふくらみが分かれるのは高さの上部8%だけです。それより深く切り込むとうさぎの耳になり、これは気づかれるまでに2回実装されてしまいました。

見送った3つから受け継いだもの

スタイルを見送ることは、それを削除することではありません。「キャスト」は演出の勘所を残します。小道具、こぼれ、オブジェクトと関わるキャラクターは、イラストレーターが関与しテーマを切り替えないところで使います。「スプレッド」はサイト向けの赤い背景の思い切りと、キャラクター以外のオブジェクトに顔を与える許しを残します。「ポスター」は1つの構図につき4色という規律を残します。

スタディそのものは決して実装されません。ui/dumplings/styles/ は refs/ と同じ位置づけで、出典ではなく引用であり、プロダクトの層はそれをインポートできません。ジェネレーターはドキュメント自身の見出しから原型のリストを解析するため、ART-STYLES.md に5つ目の原型を追加すると次のビルドでシートに現れ、描けない見出しはビルドを失敗させます。