118品の料理イラストをどう描く？共通部品で作るSVGの制作記録

「何食べたい」の画面を見比べると、オムライスと定食では料理の形が違っても、皿の線や色にまとまりがあります。118品をすべて別々の絵として管理しているのでしょうか。現行のイラスト実装を開くと、器や付け合わせを組み合わせる構成になっていました。今回は提案ロジックではなく、この絵の作り方を読み解きます。

一枚の皿を、何度も使う

Plateは楕円を重ねた皿の部品です。縁、底の影、内側の輪郭を共通にし、その上へ料理を載せます。Bowlは茶碗・丼の形と汁の色を受け持ちます。SetMealは皿に小さなご飯と汁物を添える構成です。 Rice、Lettuce、Tomato、Leafなども独立した部品です。位置や大きさ、角度を引数で変えられるものは、一つの形を複数の料理へ配置できます。共通化するのは完成した料理全体だけでなく、何度も登場する形です。

オムライスは、何を重ねるとそれらしくなる？

OmuriceArtでは共通のPlateの上に、レタスとトマトを置き、卵の大きな輪郭、明るい線、赤いソースを重ねています。皿は共通でも、卵のシルエットとソースの形が料理を見分ける手がかりになります。 色はCという共通の配色表から選びます。線の色、皿、米、緑、赤などをそろえることで、部品が増えても画面全体の色調を保ちやすくなります。写真のような質感の再現より、小さな選択肢でも何の料理か分かる形を重視した構成です。

118品と絵の対応に、抜けがないか

料理一覧のIDとDISH_ARTのキーを取り出して比較しました。件数が同じだけでなく、差分がないことを確認しています。ただし、この確認は118品の絵がすべて見分けやすいことまで保証しません。構図や小さい画面での識別は、別途見た目を確かめる必要があります。 未知の料理IDには空の皿を返す処理もあります。画面の破損を避ける保険ですが、登録漏れを放置してよいという意味ではありません。

料理名は、絵だけに任せない

SVGの共通枠はviewBox="0 0 240 180"です。同じ座標の範囲へ部品を置き、表示サイズに合わせて伸縮させます。料理名がそばにある通常の表示ではSVGを装飾として扱い、同じ名前を重ねて読ませない設定です。単独の画像として使う場合には、料理名のラベルを付ける分岐もあります。 新しい料理を追加するなら、まず既存の器が使えるか、何の形を変えれば区別できるか、IDの対応がそろうかを確認します。最後は料理名と一緒に小さな画面で見ます。部品の再利用は、描く量を減らすだけでなく、確認する場所を整理するためにも役立ちます。

確認日：2026年9月22日。作例・検証用データを使用しています。対象アプリの入力条件、計算・保存処理、画面が変わった場合は再確認が必要です。