← LP再現プロジェクトに戻る
Pattern 3 · Canva Magic Layers

Canva Magic Layers でフラット画像を編集レイヤーに分解

Canva の Magic Layers（2026年3月パブリックベータ）で、 フラットな画像 / AI 出力をテキスト・オブジェクト・背景の編集可能なマルチレイヤーに自動変換。 Pattern 2 で JSX を書いてやっていた「文字レイヤー除去 + 枠分解」工程を Canva UI 一発で代替できる可能性のあるルート。

未検証 Canva プレミアムAI機能 対象: Meluva LP 全7アートボード 公式: canva.com/magic-layers
⚠️

このパターンは未検証です

まだ実装・検証は行われていません。下記の検証手順に沿って進めることを想定しています。 検証が完了したらこのバナーを更新し、プレビューURL・所感・比較数値を追記する運用です。

Magic Layers とは（公式情報まとめ）

Canva 独自の Design Model を使い、フラットな画像（PNG / JPG）や AI 生成画像を読み取って、 テキスト・オブジェクト・背景の編集可能なマルチレイヤーとして Canva エディタに復元する機能。 "tracing fragments"（断片のトレース）ではなく、デザイン全体を読み取って構造化する。2026年3月から US/UK/CA/AU でパブリックベータ開始（プレミアムAI機能、月次AI使用量にカウント）。

📥 入力
  • PNG / JPG ファイルのみ対応
  • グラフィックデザイン・イラスト・スタイル化された画像が best fit
  • フォトリアリスティック画像はクリーン分離が難しい（公式注意書き）
⚙️ 自動分離されるもの
  • テキスト → live editable text box として復元
  • オブジェクト → 個別エレメントとして識別 / 移動・リサイズ可能
  • 背景 → 前景の裏でクリーンに保持
📤 出力
  • Canva デザイン（編集可能）として保存
  • エクスポートは PNG / JPG / PDF / MP4 等 Canva 標準
  • HTML / CSS の出力は不可（Canva の "公開URL" 機能で iframe 埋め込みは可）

このパターンの位置づけ（Pattern 2 との対比）

Pattern 2 では イラレ + JSX を書いて「文字を消した背景画像」「枠を消した背景画像」を作り、HTML/CSS で再構築した。 Pattern 3 はこの工程を Canva UI 一発で代替できる可能性がある。ただし最終アウトプットが Canva デザインに閉じるため、 Cloudflare Pages のような独立した HTML/CSS LP として運用したい場合は Pattern 2 のほうが適合する。

✅ 期待されるメリット
  • Pattern 2 の JSX/Python パイプライン構築が 不要
  • Canva UI で非エンジニアが直接編集可能（OMY スタッフ向き）
  • Meluva LP のような イラスト系・スタイル化されたデザインは Magic Layers の best fit ゾーン
  • テンプレート化して別案件にも横展開しやすい
⚠️ 懸念事項
  • HTML/CSS の直接出力ができない → Cloudflare Pages 公開には iframe 埋め込み or 画像エクスポート経由
  • 日本語フォント再現（Adobe Fonts の din-2014 / futura-pt 等は Canva 標準にない → 代替必要）
  • 商品パッケージ写真など フォトリアリスティック領域での分離精度
  • 月次AI使用量制限（プラン依存）
  • OMY 側 Canva プレミアム契約の手配

検証手順（Step by Step）

1
準備：Magic Layers が使える Canva プレミアムプラン手配
Magic Layers は Canva のプレミアムAI機能で、月次AI使用量にカウントされる。プラン別の使用回数を確認（Pro / Teams / Enterprise）。 日本でのGA状況も初回確認（2026年3月時点で US/UK/CA/AU パブリックベータ → 日本リージョンの提供有無を要チェック）。 OMY 側の既存契約があれば優先利用、なければ Humbulls 側で検証。
2
入力準備：Meluva LP の各アートボード PNG を用意
Pattern 2 で書き出し済みの with-text 画像（750×N、PNG 化）をそのまま投入できる。 元LP cosmecollege.com の縦長キャプチャでも可。 Magic Layers は PNG / JPG のみ対応。アートボード単位（全7枚）で個別に処理する想定。
3
Magic Layers 実行：テキスト・オブジェクト・背景を自動分離
Canva にアップロード → Magic Layers をトリガー → 自動で編集可能なマルチレイヤーデザインに変換される。 Pattern 2 で JSX を書いて手作業でやっていた「文字レイヤー除去 + 枠分解 + extract.json 座標再構築」が、ここで一気に置き換わる。 分離精度の評価がこの検証の核：medical 系・水滴・ボトル写真がどこまで分離されるか実測。
4
編集：Canva 上でフォント / 色 / テキスト / 配置を調整
分離されたテキストレイヤーで日本語コピーを書き換え。 Adobe Fonts の din-2014 / futura-pt / minion-pro は Canva 標準にないため、代替フォント（Noto Sans JP / Serif JP は Canva にもあり）を選定。 ブランドキットでカラーパレット（rgb(53,91,112) / rgb(128,164,187)）を登録して固定。
5
出力：3 経路を実測比較
(A) Canva の "Webサイトとして公開" 機能で URL 化 → ポータル側に iframe 埋め込み
(B) アートボード単位で PNG エクスポート → 単純連結 LP として Cloudflare Pages にデプロイ
(C) Canva 編集 URL を OMY 共有（編集権限付き） — 編集運用テスト用
それぞれの解像度・速度・編集容易性を比較記録。
6
編集体験テスト（OMY スタッフ役）
非エンジニアに「タイトル文言を変えてください」とお願いし、 5分以内に Canva 上で書き換え → 公開URL更新 まで完結できるか測定。 Pattern 2（HTML overlay の文言修正）と編集工数を直接比較。
7
プレビュー公開 + ポータル更新
検証結果のプレビューを preview/lp-recreation/pattern-3/output/ に配置（PNG/iframe HTML）→ このページの「未検証」バナーを「検証済み」に更新 + Pattern 2 との比較数値を追記。

検証完了基準（Done の定義）

📚 関連リンク・参考情報