Figmaでどれだけ緻密なデザインカンプを作っても、それをコーディング（またはElementorなどで再現）する際には、以下のような細かい数値の引き写し作業が発生します。
- プライマリカラーのカラーコード（例:
#2a9d8f）のコピー＆ペースト - ボタンの角丸の値（例:
8px）の入力 - フォントサイズやシャドウの設定値の手動調整
「この引き写し作業、コピペミスも起きるし、そもそも時間がもったいなくない？」
// MANUAL COPY & PASTE //
デザインの要素（ルール）を、人間にもコンピュータにも読みやすい「JSON」というテキストデータに一本化して管理することで、コピペミスを根絶し、一瞬でパラメータをデザインシステムにインポートできるようになります。
「JSON（JavaScript Object Notation）」という言葉を聞くと難しそうに感じますが、中身はただの「整理された箇条書き」です。 お弁当作りに例えると、その仕組みがとてもスッキリ理解できます。
🍱 ビジュアルデザイン（デザインカンプ）
完成した美しいお弁当の「写真」。中身に何が入っているか、彩りはどうかは目で見ればわかりますが、作る人によってサイズや分量にズレが生じやすい情報です。
📄 レシピカード（JSONデータ）
「おにぎり: 2個、鮭: 1切れ、たまご焼き: 2個、角丸: 10px」とシンプルに箇条書きされたテキスト。このデータがあれば、調理担当（ブラウザやシステム）は誰でも寸分違わず同じお弁当を瞬時に作ることができます。
デザインの指示書（カンプ）をこの「レシピカード（JSON）」に翻訳してあげることで、ElementorやCSSといった実装環境に、数値を瞬時に正確に流し込めるようになります。
左側のスライダーやカラーピッカーを操作して、デザイン（カンプ）を変更してみてください。 右側にリアルタイムで「レシピカード（JSON）」が自動生成され、上部のボタンプレビューが同期して変化します。
// BUTTON PREVIEW
DESIGN CONTROLS
💡 講義での学びポイント: このJSONデータは、システムで読み込むと一瞬でボタンのデザインを反映できます。 パラメータを手で一つずつElementorやWordPressに入力するのではなく、「デザインカンプをデータとして書き出す」という視点を持つことが、爆速コーディングへの第一歩です。
「03」で作成・コピーしたレシピカード（JSON）を、下の入力エリアに貼り付けてみてください。 または、入力エリア内の文字や数値を直接いじってみるのも大歓迎です！
貼り付けたら、「デザインを流し込む」ボタンを押してみましょう。システムが一瞬でJSONデータを解析（インポート）し、下部にあるWebカードのボタンデザインを瞬時に作り替えます！
// HOW IT WORKS: JSON to Elementor //
おおよそ配置済みで完了！）
// REAL-TIME RENDERED COMPONENT
特別招待プログラム実施中
このキャンペーンはJSONインポートによって一瞬でデザイン調整されています。
⚠️ エラーを起こしてみよう: JSONデータから、カンマ（,）をあえて1つ消したり、ダブルクォーテーション（"）を外してボタンを押してみてください。
システムが「レシピを読み取れません！」とエラーを出します。JSONは非常に便利な反面、機械が正しく読めるように厳密なルールで書く必要があるというプログラミングの基本もここで学べます。
右のサイドパネルから「デザインカンプ（画像）」をダウンロードして、以下のステップで実際に手を動かしてみましょう！
① ClaudeにJSONを作ってもらおう
ダウンロードした画像をClaudeに読み込ませて、「このデザインをElementorで実装するためのJSONを生成して」とお願いしてみましょう。ボタンの色・角丸・余白・影など、Elementorで設定できる値をJSONとして書き出してもらうのがポイントです。（※プロンプトは事前に用意したものをコピペでOKです）
② 独自システムへインポートしてみよう
出力されたJSONをコピーし、先ほどの「04」の入力欄（もしくは本番環境のシステム）に貼り付けて実行してみましょう。瞬時にデザインが反映される魔法を体験してください。
③ Elementor上でテンプレート保存しよう
綺麗に配置されたセクションを、今後いつでも使い回せるように「テンプレート」として保存（またはグローバルウィジェット化）する手順をやってみましょう。これで資産化完了です！
META
TAGS
「デザインカンプは絵ではなく、ルール（データ）の集合体である。」
💡 宿題・修正メモ
講義を受ける友人2名が「なるほど！」と直感的に理解できるよう、手ざわりの良いシミュレーターを中心に進行予定。