色と空気を整え、
世界観をつなぐ。
デザイノグラフィー Designography: Aesthetic Design System
生成AIを使うと手軽に綺麗な画像を作れる反面、出力するたびに色合いやタッチがバラバラになり、見た目の統一感を保つのが難しくなりがちです。 Kamosの「デザイノグラフィー（Designography）」は、色彩パレット、フォント、余白、そして水彩のような質感などを整理したデザインシステムです。 あらかじめ約200種類のトーンプリセットを用意しているほか、ブラウザ上の「Tone Builder」で好みのカスタムトーンを自由に追加できます。 Suite（Web）、Edge（PC）、Phone（スマホ）のどの環境でも同じトーンを呼び出せるため、いつでも統一感のあるデザインを作ることができます。
デザイノグラフィーを支える3つの特長
AIによる制作でもブレのない美しい世界観を生み出し、自由に拡張するための仕組みです。
200種類以上のトーン
バウハウス、アール・デコ、水彩画、90年代風、ミニマルモダンなど、約200種類のデザインプリセットを用意。目的に合ったトーンを選ぶだけで、統一感のある世界観をすぐに立ち上げられます。
Tone Builderで自由に追加
プリセットだけでなく、ブラウザ上のツール「Tone Builder」を使って自分好みのカスタムトーンを自由に作成可能。メインカラーやアクセントカラーの指定、お気に入りの参考画像の登録により、オリジナルの世界観を簡単に追加・保存できます。
Bridgeを介した全環境統合
「Kamos Bridge」を経由して、Webアプリ（Suite）、デスクトップ（Edge）、スマホ（Phone）のすべてで同じトーン定義を共有。どの端末からでもブレのない一貫したデザインを形にできます。
スキーマで定義される6つの要素
デザイノグラフィーは、ただの色の集まりではありません。色彩、文字組、余白、角丸、陰影、そしてAI生成への指示までをひとつのJSON構造として定義しています。
Designography Core Definition
色彩パレット設計
主色（Primary）、背景を包むヴェール色（Secondary）、文字（Neutrals）、強調（Accents/Vitamin）、カードや入力欄（Surfaces）、枠線（Borders）を階層的に指定。
タイポグラフィ規約
欧文（english）と和文（japanese）のフォントペアリング、h1〜captionのサイズ比率（rem）、行送り（line_height）、文字の骨格（character）を定義。
造形・角丸・陰影
ボタンやカードの角丸（corner_radius_px: R0〜R8）と、階層の浮遊感を表現するドロップシャドウ（low / medium / high / focus）の深度を定義。
動きと余韻の設計
インタラクション時の遷移時間（short: 0.2s / medium: 0.3s）と、有機的な弾性を生むベジェ曲線（organic_bounce等）を規定。
参考画像アセット（Visual RAG）
言語化が難しい画風や空気感（水彩の滲み、ペン画の筆致、光の陰影など）を、最大5枚の参照画像として直接AIへ学習・注入。
AI生成ディレクティブ
Geminiなどの生成パイプラインに対し、余白の持たせ方、素材感の重ね方、キーカラーの配分比率などを指示する文脈プロンプト。
{
"id": "kamos_designography",
"version": "1.0.0",
"palette": {
"primary": { "hex": "#10B981", "hover": "#059669" },
"secondary": { "hex": "#F0E6FA", "usage": "background veil" },
"neutrals": { "text_default": "#333333", "text_subtle": "#6B7280" },
"accents": { "blue": "#3B82F6", "purple": "#8B5CF6", "amber": "#F59E0B" }
},
"typography": {
"families": { "english": "Josefin Sans", "japanese": "Noto Sans JP" },
"sizes_rem": { "h1": 2.5, "body": 1.0 }
},
"shape_and_elevation": {
"corner_radius_px": { "small": 4, "medium": 6, "large": 8 },
"shadows": { "low": "0 1px 3px rgba(0,0,0,0.08)" }
},
"reference_images": [ "watercolor_sample_01.png", "handcraft_sample_02.png" ],
"gemini_prompt_addendum": "Render with translucent panes, generous white space, and softly rounded R8 shells..."
}Tone Builderで自分好みのトーンを追加
既存の約200種類のプリセットに加え、自分だけのオリジナルパレットをブラウザ上で視覚的に作成・管理できます。
パレットカラーの視覚的調整
Primary、Secondary、そしてAccentカラー（最大3色）をカラーピッカーで指定。リアルタイムで色の組み合わせやコントラストを確かめながら調整できます。
参考画像のアップロード
目指したい画風やブランドの世界観を示す写真・イラスト（最大5枚）をアップロード。AIがその空気感やタッチを参照元として読み込みます。
クラウド保存と即時同期
作成したトーンはクラウド（Firestore）に保存され、Suite、Edge、Phoneのすべての環境から★マーク付きのトーンとして即座に選べるようになります。