Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English

業務レイアウトの書庫

見つけたレイアウトを、寸法ごと渡す。

版面・余白・カラム・書体・役割つきの配色・外すと崩れる点。1 枚ごとに再現用の仕様を持っているので、気に入った構成は見て終わりにならず、そのまま AI に渡して自分の資料として組み直せます。

索引を開く 仕様の例を 1 枚見る

四半期ロードマップ — 4 期を等幅の帯で 四半期ロードマップ — 4 期を等幅の帯で 時系列 · スライド 16:9 · 低 1 枚企画書の表紙 — 件名を中央に据える 1 枚企画書の表紙 — 件名を中央に据える 中央寄せ · A4 縦 · 低
100 版 — HTML そのものを同梱した 1 枚 100 生成できる型 — データを渡すと文書が出る 2 言語 — 日英で引ける。題名は必ず両方ある /ai/designs.json /llms.txt

入口はこの索引です

用途と骨格で絞る。図版 / 骨格 / 表 の 3 表示。

8 件 価格・料金の提示 索引でぜんぶ見る

一式

一式 — 並べて 1 冊になる

表紙から付録の扉まで、読む順に置いてある。索引の 1 枚ずつとは別の単位。

空気感と補助 40–44 — 読み心地を整える演出5 枚画像と奥行き 30–34 — 面を切る、裏返す、飛び込む演出5 枚出てくる動き 01–08 — 画面に入ったときの演出8 枚文字の演出 45–60 — 一画から粒子まで、文字そのものを動かす16 枚スクロールに連動する動き 09–16 — 進めた分だけ進む演出8 枚LP の構成 35–39 — 区画のつなぎ方を決める演出5 枚固定・送り・ナビ 17–24 — 画面を留める、送る、現在地を示す8 枚文字の動き 25–29 — 文字そのものを動かす演出5 枚システム開発案件の資料一式 — RFP から切替まで16 枚

画像を集めるのとの違い

1 枚が、作り直せるだけの情報を持っています

図版は版の HTML から描いたものなので、絵と数字が食い違いません。並んでいるのは絵ではなく、寸法です。

版面と余白

版面の寸法、四辺の余白、カラム数と間隔。どこを強めているかも一緒に。

書体のはしご

見出し・本文・注記といった役割ごとに、サイズ・ウェイト・行送り・字送り。

役割つきの配色

ground / surface / ink / muted / accent / rule。どの色が地で、どれが差し色かが分かる形で。

外すと崩れる点

「強調は 1 列だけ」のような、守らないと成立しない制約を言葉で。

棚の中身は 2 種類

見る版と、作れる型が、同じ棚に並びます

完成した 1 枚。コードごと置いてある

絵の代わりに版そのものの HTML を配信しているので、どの倍率で開いても字は潰れません。書体は使う文字だけを取って同梱してあり、開くのに外部へ取りに行きません。

データを渡すと、文書が出てくる

左の図版は絵ではなく、サンプルデータを流して生成した結果です。入力の形が決まっているので、自分の数字を入れればそのまま使える 1 枚になります。

渡し方

ページを読ませなくても、AI が組み直せます

1 件につき JSON がひとつ。構造化した仕様と、そのまま投げられる生成プロンプトが、どちらも同じ値から出ています。ページに書いてあることと食い違いません。

/ai/designs/break-even-inhouse-outsourcing.json /ai/designs.json /llms.txt

月600件で内製と外注が逆転 — 1件単価だけで決めない 月600件で内製と外注が逆転 — 1件単価だけで決めない この 1 枚が、下の JSON になります 
{
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "axis",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 82,
      "right": 120,
      "bottom": 82,
      "left": 120
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.01em"
    },
    "subtitle": {
      "size": 22,
      "weight": 400
    },
    "axisTitle": {
      "size": 20,
      "weight": 500
    },
    "axisTick": {
      "size": 20,
      "weight": 400,
      "numeric": "tabular"
    },
    "seriesLabel": {
      "size": 22,
      "weight": 700
    },
    "lineEnd": {
      "size": 20,
      "weight": 500,
      "numeric": "tabular"
    },
    "crossingLabel": {
      "size": 22,
      "weight": 500
    },
    "crossingValue": {
      "size": 30,
      "weight": 700,
      "numeric": "tabular"
    },
    "panelTitle": {
      "size": 24,
      "weight": 700
    },
    "panelValue": {
      "size": 42,
      "weight": 700,
      "numeric": "tabular"
    },
    "panelCopy": {
      "size": 20,
      "weight": 400
    },
    "regionValue": {
      "size": 22,
      "weight": 700
    },
    "regionCopy": {
      "size": 20,
      "weight": 400
    },
    "assumption": {
      "size": 20,
      "weight": 400
    },
    "conclusion": {
      "size": 26,
      "weight": 500
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": [
      "#2F6FB5",
      "#A85A2E"
    ]
  },
  "rules": [
    "縦軸は固定費と従量費を合算した月間総額にする。1件単価だけを比較すると、固定費がある案の有利不利が隠れる",
    "交点が等費用になる。交点より左と右でどちらの案が低いかを、同じ尺度で示す",
    "計算の前提と含めていない費用を明記する。品質差・立ち上げ・移行費用があれば交点は変わる",
    "架空の単価を用いた試算であり、実際の委託判断を推奨するものではない"
  ]
}

まず 1 枚、開いてみてください

用途と骨格の 2 軸で絞れます。

索引を開く