完成品だけでなく、
そこへ至る判断も残す。

01 / DESIGN DNA

言語化されたデザインの遺伝子

実直さ、技術的信頼、手仕事の温度、静かな現代性を、色・文字・形・余白・動き・避ける表現へ分解しました。

{
    "version": "dna-v2",
    "atmosphere": [
        "実直で誠実",
        "技術的に信頼できる",
        "手仕事の温度",
        "静かな現代性",
        "整頓された修理工房"
    ],
    "design_keywords": [
        "精密",
        "堅牢",
        "修復",
        "工具的機能美",
        "可読性",
        "クラフト",
        "2026モダン"
    ],
    "brand_concept": {
        "essence": "壊れたウェブを、熟練の手と確かな技術で丁寧に直すデジタル修理工房。",
        "voice": "簡潔で具体的。専門性を示しながらも難解さや誇張を避け、診断・作業・結果を率直に伝える。",
        "mood": "作業台のように落ち着き、清潔で、頼れる。無機質すぎず、職人の気配がわずかに残る。",
        "surprise_element": "修理票、検査印、測定目盛り、部品ラベルを抽象化したディテールを、要所だけに現代的な情報設計として組み込む。"
    },
    "axes": {
        "color": {
            "primary": "#203A43",
            "accent": "#D66A2C",
            "background": "#F3F0E8",
            "background_alt": "#E4E1D8",
            "text": "#182023",
            "text_muted": "#687174"
        },
        "typography": {
            "heading": "端正でやや幅の狭い日本語ゴシック。中〜太ウェイトで、見出しは短く工具ラベルのように明快にする。",
            "body": "可読性の高い日本語サンセリフ。標準ウェイトと十分な行間を使い、技術情報には等幅書体を限定的に併用する。"
        },
        "shape": "基本は直線的な矩形と小さな角丸。罫線、切り欠き、タブ、ラベル形状を使い、過度に丸いカードやカプセル形状は避ける。",
        "texture_motif": "薄い方眼、測定目盛り、紙ラベル、鉛筆の点検記号、金属作業台の微細な粒子感を低コントラストで抽象化する。",
        "layout_geometry": "堅牢なグリッドを基盤に、診断票や作業指示書を思わせる明確な列構成を採用。主要情報は左揃えで、工程・症状・対応・結果の関係を構造的に見せる。",
        "surface_treatment": "温かいオフホワイトの紙面感と、濃色の工具・金属を思わせる面を組み合わせる。境界は影より細い罫線と色面差で示し、光沢やガラス感は使わない。",
        "visual_rhythm": "大きな情報ブロックと細かな技術注記を交互に配置。番号、区切り線、短い見出しを反復し、点検工程のような規則正しいテンポを作る。",
        "emphasis_contrast": "濃紺緑と生成りの高い可読性を軸に、修理・警告・主要操作だけを錆橙で強調。サイズ、太さ、余白を優先し、装飾的な発光には頼らない。",
        "decoration_strategy": "装飾は機能由来に限定する。検査印、工具輪郭、配線図、修理番号、チェックマークなどを小さく使い、各要素に情報上の役割を持たせる。",
        "spacing_density": "全体は中密度。セクション間には十分な作業余白を設け、詳細情報はコンパクトに整理する。広すぎる余白やカードの乱立ではなく、連続した文書的構成を優先する。",
        "motion": "短く控えめで機械的に正確。状態変化はフェード、線の進行、チェック完了などで示し、弾む動き、過剰なスクロール演出、常時アニメーションは避ける。",
        "navigation_signal": "現在地、工程番号、戻り先を明示する。太い選択線、タブ、見出し番号、簡潔なパンくずを用い、アイコンだけに依存しない。"
    },
    "avoid": [
        "青紫グラデーションを中心とした典型的なSaaS表現",
        "ガラスモーフィズム、ネオン発光、過剰なドロップシャドウ",
        "大きく丸いカード、カプセル型要素、浮遊パネルの乱用",
        "抽象的な3Dオブジェクトや意味のない未来的イラスト",
        "派手なダッシュボード風UIとメトリクスの過剰演出",
        "職人感を演出しすぎる古臭いヴィンテージ装飾",
        "汚れ、傷、錆テクスチャの強調による不潔感",
        "専門用語だけで信頼を装うコピーや誇大表現"
    ]
}

02 / DESIGN CANVAS

世界観を一枚の視覚基準へ

CANVASはStylerの所有物ではありません。Design interview＋DNAから上流で生成し、Stylerはdigest-boundな視覚参照として消費しました。

主な参照要素：修理票、点検グリッド、測定目盛り、作業台、検査印。SaaS風グラデーションやガラス表現は明示的に排除しています。

03 / DECORATIVE ASSETS

CANVASから必要素材を計画し、選択生成

04 / WIREFRAME

固定ワイヤーフレームASTで情報設計を確認

9セクション、1フォーム、14リンク。画像はImage leafとして保持し、固定CSSをStylerへ持ち込まないHandoff HTMLを別成果物として生成しました。

ワイヤーフレームCSSはこの工程で終了し、以降のStyle工程へ混入していません。

05 / REVERSIBLE STYLING LOOP

工程をまたぎ、構造へ戻って改善

費用は2026-08-31時点の公式標準単価による推定です。gpt-image-2入力はモダリティ別token内訳が返らないため幅で表示。Laravel Cloud・Cloudflare・ストレージ等のインフラ費用は含みません。