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

業務レイアウトの書庫

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

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

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

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

入口はこの索引です

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

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

一式

一式 — 並べて 1 冊になる

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

会社紹介・採用の 7 枚 — 理念から選考の流れまで、会社説明会 1 回ぶん 7 枚 事業計画・資金調達の 10 枚 — 表紙から調達額まで、シリーズ A のピッチ 1 回ぶん 10 枚 研究・技術発表の 9 枚 — 表紙から文献まで、研究会の発表 1 回ぶんとポスター 9 枚 決算・経営報告の 8 枚 — 表紙からトピックスまで、四半期の決算説明 1 回ぶん 8 枚 空気感と補助 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 枚 基本の 10 枚 — どの資料にも出る枚を、社内説明会 1 回ぶんで通す 10 枚 システム開発案件の資料一式 — RFP から切替まで 16 枚 研修・講義の 6 枚 — 目標から付箋のふりかえりまで、社内研修 90 分 6 枚

画像を集めるのとの違い

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

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

版面と余白

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

書体のはしご

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

役割つきの配色

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

外すと崩れる点

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

棚の中身は 4 種類

見る版、作れる型、図を作る型、動きが、同じ棚に並びます

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

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

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

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

検証ずみの図を、入力ごと渡す

draw.io で開ける図と、それを出した意味の入力、入力を書くためのスキーマが揃っています。図を直して使うことも、スキーマに沿って新しい入力を書くこともできます。

スクロールの動きを、動くまま置いてある

1 ファイルで完結するデモと、AI に頼むときの名前、外すと崩れる点。枠の中をスクロールすれば、その場で動きを確かめられます。

渡し方

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

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

/ai/designs/revenue-flow-actors.json /ai/designs.json /llms.txt

収益の流れ — 誰から誰へ、お金と価値が動くかを 2 種類の線で 収益の流れ — 誰から誰へ、お金と価値が動くかを 2 種類の線で この 1 枚が、下の JSON になります 
{
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "network",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 112,
      "right": 160,
      "bottom": 96,
      "left": 160
    }
  },
  "type": {
    "kicker": {
      "size": 22,
      "weight": 700,
      "tracking": "0.2em"
    },
    "title": {
      "size": 56,
      "weight": 900,
      "leading": 1.3
    },
    "nRole": {
      "size": 20,
      "weight": 700,
      "tracking": "0.12em"
    },
    "nName": {
      "size": 34,
      "weight": 900,
      "leading": 1.35
    },
    "nNote": {
      "size": 21,
      "weight": 400,
      "leading": 1.6
    },
    "flow": {
      "size": 24,
      "weight": 700,
      "leading": 1.4
    },
    "flowNote": {
      "size": 20,
      "weight": 400,
      "leading": 1.4
    },
    "key": {
      "size": 20,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#F6F5F1",
    "surface": "#FFFFFF",
    "ink": "#15171C",
    "muted": "#686C75",
    "accent": "#9A6512",
    "rule": "#DDDAD2"
  },
  "rules": [
    "お金と価値を線の種類で分ける。同じ線だと、どちらがどちらへ払うのか読めない",
    "自社の箱だけ太い枠にし、中央に置く",
    "線ごとに金額か効き目を書く。矢印だけでは、仕組みは分かっても規模が分からない",
    "登場する者は 3 つまで。4 つ目が要るなら、別の 1 枚に分ける"
  ]
}

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

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

索引を開く