{ "id": "app-shell-single-tone", "schemaVersion": 2, "title": { "ja": "アプリの外殻 — 1 トーンで組む", "en": "Application Shell in One Tone" }, "summary": { "ja": "案内と作業領域を面と罫 1 本だけで分ける。現在地は罫で示し、文字の色も太さも変えない", "en": "Navigation and work area separated by one panel and one hairline; the current page marked by a rule alone" }, "capturedAt": "2026-09-05", "categories": [ "web-app" ], "tags": [ "minimal", "typography" ], "useCases": [ "app-shell" ], "format": "web", "density": "high", "layout": { "kind": "2-column", "canvas": { "w": 1440, "h": 900 }, "margin": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "emphasis": { "row": 2, "via": [ "rule" ] } }, "type": { "product": { "size": 17, "weight": 700, "tracking": "0.01em" }, "section": { "size": 11, "weight": 500, "tracking": "0.14em", "transform": "upper" }, "item": { "size": 14, "weight": 500 }, "meta": { "size": 13, "weight": 400 }, "heading": { "size": 22, "weight": 700, "tracking": "0.01em" }, "column": { "size": 12, "weight": 500, "tracking": "0.08em", "transform": "upper" }, "num": { "size": 14, "weight": 500, "numeric": "tabular" } }, "colors": { "ground": "#FCFCFD", "surface": "#F1F2F6", "ink": "#15161C", "muted": "#6B6E7B", "accent": "#5B4BE8", "rule": "#DEE0E7", "series": [] }, "rules": [ { "ja": "側柱の幅は 248px で固定し、作業領域だけを伸ばす。等分の 2 段にすると、案内が作業領域と同じ重さになる", "en": "Fix the rail at 248px and let only the work area stretch — two equal columns give navigation the same weight as the work" }, { "ja": "側柱を ink で塗らない。面（surface）と罫 1 本で分ける。濃く塗った瞬間、外殻が中身より前に出る", "en": "Never fill the rail with ink — one panel and one hairline. A dark rail puts the shell in front of its contents" }, { "ja": "現在地は罫 1 本だけ。文字の色も太さも変えない。全項目に同じ幅の透明な罫を持たせ、選択で字がずれないようにする", "en": "Mark the current item with a rule and nothing else; give every item the same transparent rule so selection does not shift the text" }, { "ja": "密度は行送りではなく行数で作る。行は 48px と詰めていないまま 16 行入るよう、上下の領域の高さを版面から逆算する（92 + 40 + 48×16 = 900）", "en": "Get density from row count, not tight leading: 48px rows are roomy, and sixteen fit because the bands above are sized back from the canvas" }, { "ja": "表に縦罫を引かない。列で視線が止まると、1 件を横に読めなくなる", "en": "No vertical rules in the table — they stop the eye at each column and the row stops reading as one record" }, { "ja": "外殻に版面の余白を持たせない。余白は内側の各領域が持つ。外周に余白を敷くと画面がカードに見える", "en": "The shell carries no page margin; each region carries its own. An outer margin makes the screen read as a card" } ], "cover": "https://design-vault.pages.dev/_astro/cover.BCArv9eu.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "comparison-table-single-fill" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "web", "density": "high", "layout": { "kind": "2-column", "canvas": { "w": 1440, "h": 900 }, "margin": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "emphasis": { "row": 2, "via": [ "rule" ] } }, "type": { "product": { "size": 17, "weight": 700, "tracking": "0.01em" }, "section": { "size": 11, "weight": 500, "tracking": "0.14em", "transform": "upper" }, "item": { "size": 14, "weight": 500 }, "meta": { "size": 13, "weight": 400 }, "heading": { "size": 22, "weight": 700, "tracking": "0.01em" }, "column": { "size": 12, "weight": 500, "tracking": "0.08em", "transform": "upper" }, "num": { "size": 14, "weight": 500, "numeric": "tabular" } }, "colors": { "ground": "#FCFCFD", "surface": "#F1F2F6", "ink": "#15161C", "muted": "#6B6E7B", "accent": "#5B4BE8", "rule": "#DEE0E7" }, "rules": [ "Fix the rail at 248px and let only the work area stretch — two equal columns give navigation the same weight as the work", "Never fill the rail with ink — one panel and one hairline. A dark rail puts the shell in front of its contents", "Mark the current item with a rule and nothing else; give every item the same transparent rule so selection does not shift the text", "Get density from row count, not tight leading: 48px rows are roomy, and sixteen fit because the bands above are sized back from the canvas", "No vertical rules in the table — they stop the eye at each column and the row stops reading as one record", "The shell carries no page margin; each region carries its own. An outer margin makes the screen read as a card" ] }, "prompt": { "ja": "以下の仕様でページを 1 枚作ってください。\n\n- 版面 1440 × 900\n- 余白 上 0 右 0 下 0 左 0\n\n## 強調\n2 行目のみ。手段は 罫 だけ。ほかは変えない\n\n## 文字（版面 1440px に対する px）\nproduct 17px / 700 / 字間 0.01em\nsection 11px / 500 / 字間 0.14em / 大文字\nitem 14px / 500\nmeta 13px / 400\nheading 22px / 700 / 字間 0.01em\ncolumn 12px / 500 / 字間 0.08em / 大文字\nnum 14px / 500 / 等幅数字\n\n## 配色\n地 #FCFCFD / 面 #F1F2F6 / 文字 #15161C / 補助 #6B6E7B / 強調 #5B4BE8 / 罫 #DEE0E7\n\n## 外すと崩れる点\n- 側柱の幅は 248px で固定し、作業領域だけを伸ばす。等分の 2 段にすると、案内が作業領域と同じ重さになる\n- 側柱を ink で塗らない。面（surface）と罫 1 本で分ける。濃く塗った瞬間、外殻が中身より前に出る\n- 現在地は罫 1 本だけ。文字の色も太さも変えない。全項目に同じ幅の透明な罫を持たせ、選択で字がずれないようにする\n- 密度は行送りではなく行数で作る。行は 48px と詰めていないまま 16 行入るよう、上下の領域の高さを版面から逆算する（92 + 40 + 48×16 = 900）\n- 表に縦罫を引かない。列で視線が止まると、1 件を横に読めなくなる\n- 外殻に版面の余白を持たせない。余白は内側の各領域が持つ。外周に余白を敷くと画面がカードに見える\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/app-shell-single-tone/pattern.html", "en": "Produce one page to the following specification.\n\n- Canvas 1440 × 900\n- Margin top 0 right 0 bottom 0 left 0\n\n## Emphasis\nrow 2 only, by rule and nothing else\n\n## Type (px against a 1440px canvas)\nproduct 17px / 700 / tracking 0.01em\nsection 11px / 500 / tracking 0.14em / uppercase\nitem 14px / 500\nmeta 13px / 400\nheading 22px / 700 / tracking 0.01em\ncolumn 12px / 500 / tracking 0.08em / uppercase\nnum 14px / 500 / tabular numerals\n\n## Colour\nGround #FCFCFD / Surface #F1F2F6 / Ink #15161C / Muted #6B6E7B / Accent #5B4BE8 / Rule #DEE0E7\n\n## Constraints — dropping these breaks it\n- Fix the rail at 248px and let only the work area stretch — two equal columns give navigation the same weight as the work\n- Never fill the rail with ink — one panel and one hairline. A dark rail puts the shell in front of its contents\n- Mark the current item with a rule and nothing else; give every item the same transparent rule so selection does not shift the text\n- Get density from row count, not tight leading: 48px rows are roomy, and sixteen fit because the bands above are sized back from the canvas\n- No vertical rules in the table — they stop the eye at each column and the row stops reading as one record\n- The shell carries no page margin; each region carries its own. An outer margin makes the screen read as a card\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/app-shell-single-tone/pattern.html." }, "code": { "html": "\n\nアプリの外殻 — 1 トーンで組む\n\n\n\n\n
\n
\n \n\n
\n
\n

請求書

\n

未確定 96 件

\n

2026 年 8 月度

\n
\n
\n
請求番号
取引先
請求額
\n
発行日
支払期日
状態
\n
\n
\n
INV-4821
株式会社アオヤマ商会
1,284,000
08-01
08-31
確定
\n
INV-4822
ミナト製作所
318,500
08-01
08-31
確定
\n
INV-4823
合同会社ヒカリ設計事務所
96,000
08-02
09-01
送付済
\n
INV-4824
株式会社トウカイ物流
2,470,800
08-02
09-01
送付済
\n
INV-4825
サクラダ工業株式会社
744,200
08-03
09-02
確定
\n
INV-4826
ノガミ電機
58,300
08-05
09-04
下書き
\n
INV-4827
株式会社シラハマ食品
1,006,400
08-05
09-04
確定
\n
INV-4828
イズミ商事株式会社
432,000
08-06
09-05
送付済
\n
INV-4829
株式会社カワベ精密
3,912,600
08-08
09-07
確定
\n
INV-4830
オオモリ印刷
127,900
08-09
09-08
下書き
\n
INV-4831
株式会社フジシロ建設
5,680,000
08-12
09-11
送付済
\n
INV-4832
タチバナ運輸株式会社
889,700
08-13
09-12
確定
\n
INV-4833
株式会社ウメザワ薬品
241,350
08-15
09-14
下書き
\n
INV-4834
ホシノ機材リース
1,573,000
08-16
09-15
確定
\n
INV-4835
株式会社ナルセ化成
672,400
08-17
09-16
送付済
\n
INV-4836
クラモト精機株式会社
2,058,900
08-19
09-18
確定
\n
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/app-shell-single-tone/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/app-shell-single-tone/font.css", "https://design-vault.pages.dev/designs/app-shell-single-tone/font-0.woff2", "https://design-vault.pages.dev/designs/app-shell-single-tone/font-1.woff2", "https://design-vault.pages.dev/designs/app-shell-single-tone/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/app-shell-single-tone", "en": "https://design-vault.pages.dev/en/designs/app-shell-single-tone" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 側柱の幅 248px は `layout` に記録できない。`layout.columns` は本数と間隔しか持たず、\n 等分の列を意味する契約なので、この版は `columns` を名乗らない（`data-col` を付けない）。\n 代わりに幅を `rules` の 1 行目に置いてある —— そちらは生成プロンプトにも JSON にも載る\n- 「現在地を罫だけで示す」は、選択項目の文字を濃くする一般的なやり方より弱く見える。\n 弱いままで足りるのは、項目が 6 つしかなく、罫が版面の左端に立つため\n- 金額の列だけ 500 に上げ、等幅数字にする。桁が縦に揃うと、行数が増えても表が崩れない\n\n### Apply to\n\n- 一覧と詳細を往復する管理画面、社内向けコンソール\n- 案内の項目数が 10 以下で、作業領域に表が入る画面" }