コード生成オプション

生成モード

Codia はさまざまなユースケースに対応するコード生成モードを提供します：

スタンダードモード

デザインから合理的なデフォルト設定で完全なコンポーネントを生成。ほとんどのプロジェクトに最適。

コンポーネントモード

複雑なデザインを再利用可能なコンポーネントに分解。各コンポーネントは適切なインポート・エクスポートを含む独立ファイルに。

ページモード

ルーティング設定、メタタグ、レスポンシブデザインを含む完全なページレイアウトを生成。ランディングページやマーケティングサイトに最適。

Base Code と AI Code

Codia は異なるニーズに対応する 2 つのコード生成レベルを提供：

Base Code

Base Code は DSL 認識モデルを使用して高速にコードを生成。デザインとほぼ 100% の視覚的忠実度を保証し、生成速度が速い。ただし、特に複雑な Figma レイアウトではコード品質は基本的なレベル。

AI Code

AI Code はプロのエンジニアに匹敵するコードを生成。トレーニング済み LLM、スマート構造分析、ビジョン認識を活用し、手動調整がほとんど不要な高品質でプロダクション対応のコードを提供。

選び方

Base Code — スピード優先で、UI がデザインと視覚的に一致すれば十分な場合
AI Code — 本番環境で使える、保守可能なプロダクション品質のコードが必要な場合

AI 搭載機能

AI Code には従来のコード生成とは一線を画す 6 つのコア機能があります：

1. インテリジェントレイアウト認識

デザインの実際の DOM 構造を自動的に識別し、正確なレイアウトマッピングを実現。AI は絶対位置指定に頼らず、空間関係を理解し Flexbox や Grid を使用したセマンティックレイアウトを生成。

2. インテリジェント命名

各要素のコンテンツと構造を分析し、意味のある変数名やクラス名を生成。AI は NLP 技術を使用して、汎用的な識別子ではなく userNameInput や primaryButton のような名前を生成。

3. スマートレイヤー統合

開発者の意図に沿った画像スライスの最適化と、インテリジェントな自動画像圧縮。AI はどのレイヤーを単一アセットに統合すべきかを識別し、最適なファイル形式を選択。

4. スマート UI コンポーネント検出

ボタン、カード、ナビゲーション、フォームなどの一般的な UI パターンを検出し、適切な再利用可能コンポーネントを生成。複雑なレイアウトでも一般的なコンポーネントの見落としなし。

5. 自動 AutoLayout

AutoLayout と FlexLayout を自動で実装し、絶対位置指定の代わりにレスポンシブな制約ベースのレイアウトを生成。iOS（SwiftUI）やクロスプラットフォーム（Flutter）出力に特に有効。

6. 不要レイヤーの除去

コード品質に悪影響を与える冗長、非表示、または装飾目的のみのレイヤーを識別して削除。よりクリーンで軽量、パフォーマンスの良いコードを実現。

高度な機能

スマートコンポーネント検出

Codia AI は一般的な UI パターンを自動検出し、適切なコンポーネントを生成：

ナビゲーションバーとヘッダー
カードレイアウトとグリッド
バリデーション付きフォーム要素
モーダルダイアログとオーバーレイ
リストとテーブルビュー

アセット抽出

画像、アイコン、その他のアセットは自動的に：

デザインから抽出
Web 配信用に最適化
生成コード内で適切なパスで参照

アクセシビリティ

生成されたコードにはデフォルトでアクセシビリティ機能が含まれます：

セマンティック HTML 要素（nav、main、article など）
ARIA ラベルとロール
キーボードナビゲーション対応
カラーコントラスト準拠

API 連携

公開 OpenAPI 仕様は、単独のコード生成エンドポイントではなく、ビジュアル構造化とメディア変換のエンドポイントを中心に提供しています。自動化ワークフローでは、まず画像を構造化デザインデータに変換し、その結果を下流のコード生成またはデザイン取り込みパイプラインで利用してください。

bash

curl 'https://api.codia.ai/v1/open/image_to_design' \
  -X POST \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "image_url": "https://example.com/design.png"
  }'

画像からデザイン構造への変換については Visual Struct API を、すべてのエンドポイントについては API Reference を参照してください。

トラブルシューティング

よくある問題

要素の欠落 — すべてのレイヤーが表示され、非表示になっていないことを確認
階層の不正 — デザインツールでのレイヤーグループ化を確認
スタイルの差異 — カスタムフォントは手動設定が必要な場合があります