はじめに
Magic Coder は、デザインカンプ（CANVAS）と原稿から、AI が成果物の契約に合う HTML/CSS を納品するサービスです。ここではサービス画面の使い方を説明します。ほかのシステムから使うときは API の使い方 をご覧ください。
依頼から納品まで
- 媒体を選ぶ：「コーディングを依頼」で、作るものの媒体（バナー・名刺・チラシ・スライド・HTML メール・ランディングページなど）を選びます。
- CANVAS を渡す：デザインカンプの画像（PNG・JPEG・WebP）を、ページ・面の数だけ選びます。ファイル名の順に並べます。ランディングページは PC の CANVAS と、あれば SP の CANVAS です。
- 原稿を書く：原稿は、原稿の契約（manuscript/v1）の JSON です。媒体ごとの記入例が入っているので、値をすべて書き換えます。
content.itemsに載せる項目（文字・リンク・画像など）を、structureに面・ページ・セクションの構成と、そこに載せる項目を書きます。契約に合わない原稿は依頼できません。AI は原稿にない文字を足さず、CANVAS の中の文字より原稿を優先します。フォーム・QR コード・添付ファイルはまだ作れません。 - 待つ：AI が CANVAS を再現する HTML/CSS を書き、成果物の契約で検査し、違反があれば直し方を添えて書き直させます。数分から数十分かかります。
- 受け取る：管理画面の納品の一覧から、ページの表示を確かめ、プロジェクトフォルダの ZIP をダウンロードします。
納品されるもの
成果物の契約 magic://schemas/project/v2 のプロジェクトフォルダの ZIP です。ページごとの index.html と CSS、ページに載せた文字を CMS の値として持つ contents/、CANVAS から切り出した画像素材の assets/ が入ります。Magic Editor などの Magic のツールでそのまま開けます。
管理画面でできること
- 一覧：依頼した納品と、その状態（生成待ち・生成中・完了・失敗）を見ます。生成中は自動で更新されます。
- 表示：ページの表示、検査の結果、CANVAS と原稿を確かめ、ZIP をダウンロードします。検査に通らなかったときも、最後に書いたものと違反の一覧を見られます。
- 編集・描き直し：タイトルを変えたり、原稿を直して描き直したりできます。描き直すと新しい版になります。
- 削除：納品と、その CANVAS・納品物を消します。
- プロジェクトの検査：手元のプロジェクトフォルダの ZIP を、成果物の契約で検査できます。
対応する媒体
| 種類 | 媒体 |
|---|---|
| ウェブサイト | ランディングページ |
| HTMLメール | HTMLメール |
| 名刺 | 名刺、名刺（縦） |
| チラシ | チラシ、チラシ（A4横）、チラシ（A3縦）、チラシ（A3横）、チラシ（B5縦）、チラシ（B5横） |
| 書籍 | 書籍表紙 |
| スライド | スライド、スライド（4:3） |
| バナー | バナー、バナー（336×280）、バナー（160×600）、バナー（300×600）、バナー（728×90）、バナー（970×90）、バナー（970×250）、バナー（300×50）、バナー（320×50）、バナー（320×100）、バナー（1200×628）、バナー（1200×1200）、バナー（900×1600）、YouTubeサムネイル、X投稿画像、Xプロフィール画像、Xヘッダー、LINE配信用画像、Instagramストーリーズ画像、Instagram投稿、note記事の見出し画像、OGP画像 |
| Instagram投稿（複数枚） | Instagramカルーセル |
複数ページの Web サイトは、ページ構成の設計が要るため対象外です。
アカウント
アカウントは招待制です。事務局が発行した招待 URL からパスワードを決めてログインします。API のトークンは「API クライアント」で発行し、発行したアカウントの納品を扱えます。