---
title: "Canva Codeで生成したLP案をレビュー用URLにして共有する方法"
description: "Canva CodeでLP案を作ったがレビュー共有方法がわからないWebデザイナーやマーケター向け。公開前のHTML確認手順・適切な認証設定・フィードバック収集のコツを具体的なステップで解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/canva-code-lp-draft-review-url"
markdown: "https://giga-site.com/articles/canva-code-lp-draft-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Canva Codeで生成したLP案をレビュー用URLにして共有する方法

Canva Codeで生成したLP案はHTMLとCSSがまとまった状態で出力されますが、そのままクライアントや上司に届けるための手段は別途用意する必要があります。ギガサイト便を使えばHTMLをアップロードするだけで認証付きのレビューURLをすぐに発行でき、デザインのフィードバックを素早く集めてLP制作を前に進められます。

> Source HTML: https://giga-site.com/articles/canva-code-lp-draft-review-url
> Article index: https://giga-site.com/articles/index.md

## 何が共有しづらいのか

Canva CodeはHTMLとCSSを出力しますが、Canva上のデザイン資産（画像・フォント）への参照がURLで埋め込まれているため、Canvaの外でそのHTMLを開くと画像やフォントが正しく表示されないことがあります。受け取ったクライアントが崩れた状態でレビューを開始してしまうと、デザインの評価以前に「表示がおかしい」という問い合わせが先に来ます。

Canvaのデザイン共有リンクはCanvaアカウントを持っていないと閲覧できない設定になっているケースがあります。クライアントや社内の全関係者がCanvaアカウントを持っているとは限らず、ツールに依存しないURLで共有できる方法が求められます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## URL化する前の確認点

Canva CodeのHTMLエクスポートで画像がCanvaのCDN URLで指定されている場合、URLの有効期限や公開設定によっては時間が経つと画像が表示されなくなります。エクスポート後すぐにブラウザで開いて全画像が表示されるか確認し、問題があれば画像をダウンロードしてzipに同梱してから相対パスで参照するよう修正します。

Canva CodeのHTMLにGoogleフォントのimport文が含まれている場合、インターネット接続があればフォントは正常に読み込まれます。ただしフォントの読み込みに時間がかかるとレビュアーが最初にフォールバックフォントで見てしまい、デザインの印象が変わります。font-displayをswapに設定するか、preloadリンクを追加してフォント読み込みを早めます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 認証と期限の決め方

社内の承認フローにLP案を回す場合は、会社ドメイン認証が最適です。マーケティング・デザイン・経営層の各部門に同じURLを送るだけで全員がアクセスでき、部門ごとにURL管理をする手間が省けます。LP案のキャンペーン内容が社外秘の場合は社員全体公開にせず、承認フローに関与する担当者だけに限定します。

クライアントへのLP提案では、パスワードと2週間程度の期限を設定します。クライアントの確認スピードに合わせて期限を調整し、フィードバックが来ないまま期限切れになりそうな場合は期限を延長してリマインドを送ります。最終承認後は旧URLを無効化して本番URLと混在しないようにします。

- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない

## 共有後のフィードバック回収

LP案のレビューで有効な質問は「このページを見て、まず何をしようと思うか」「ヘッダーのキャッチコピーで対象ターゲットが自分だと感じるか」「CTAボタンまでのスクロール量は適切か」の3点です。デザインの審美的な感想より行動意図に関する答えが、LP改善に直接活かせます。

Canvaでデザインを修正した後、新しいHTMLをエクスポートして同じURLに上書きアップロードすると、クライアントはブックマークしたURLで常に最新版を確認できます。修正サイクルが終わったら最終版を別名で保存して承認記録を残すと、後からどのバージョンが承認されたかを確認できます。

- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける

## よくある質問

### Canva CodeのHTML出力にはCanva独自のクラス名が多く含まれますが、後からCSSを編集してカスタマイズしても問題ありませんか？

HTMLとCSSは標準仕様で出力されているため自由に編集できます。ただしCanvaのエディターで再エクスポートすると手動修正が上書きされます。最終調整は本番に向けた別のHTMLファイルで行い、レビュー用とは分けて管理します。

### Canva CodeのLPにGoogleタグマネージャーのスニペットを追加した状態でレビューURLを発行しても問題ありませんか？

GTMスニペットが含まれていると、レビュアーのアクセスが実際のGA4やGTMのデータに計上される場合があります。レビュー用URLではGTMスニペットを削除するか、GTMのプレビューモードでのみ発火する設定にしてからアップロードすることを推奨します。

### Canva CodeのLP案を日本語と英語の2言語で作った場合、それぞれ別URLで共有するのがよいですか？

言語ごとに別HTMLをアップロードして別URLを発行する方法が確実です。1つのURLに両方の言語を含めることも技術的には可能ですが、レビュアーが目的の言語バージョンに迷わずアクセスできるよう、URLごとに言語を明記する案内を添えます。

## 関連記事

- [Canva Codeで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/canva-code-admin-mock-review-url/index.md)
- [Canva Codeで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/canva-code-slide-html-review-url/index.md)
- [Canva Codeで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/canva-code-form-page-review-url/index.md)
- [Canva Codeで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/canva-code-internal-tool-prototype-review-url/index.md)
- [Claude Codeで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-code-lp-draft-review-url/index.md)
- [Firebase Studioで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/firebase-studio-lp-draft-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Canva Codeで生成したLP案をレビュー用URLにして共有する方法",
  "description": "Canva CodeでLP案を作ったがレビュー共有方法がわからないWebデザイナーやマーケター向け。公開前のHTML確認手順・適切な認証設定・フィードバック収集のコツを具体的なステップで解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/canva-code-lp-draft-review-url",
  "url": "https://giga-site.com/articles/canva-code-lp-draft-review-url",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Canva CodeのHTML出力にはCanva独自のクラス名が多く含まれますが、後からCSSを編集してカスタマイズしても問題ありませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLとCSSは標準仕様で出力されているため自由に編集できます。ただしCanvaのエディターで再エクスポートすると手動修正が上書きされます。最終調整は本番に向けた別のHTMLファイルで行い、レビュー用とは分けて管理します。"
      }
    },
    {
      "@type": "Question",
      "name": "Canva CodeのLPにGoogleタグマネージャーのスニペットを追加した状態でレビューURLを発行しても問題ありませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GTMスニペットが含まれていると、レビュアーのアクセスが実際のGA4やGTMのデータに計上される場合があります。レビュー用URLではGTMスニペットを削除するか、GTMのプレビューモードでのみ発火する設定にしてからアップロードすることを推奨します。"
      }
    },
    {
      "@type": "Question",
      "name": "Canva CodeのLP案を日本語と英語の2言語で作った場合、それぞれ別URLで共有するのがよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "言語ごとに別HTMLをアップロードして別URLを発行する方法が確実です。1つのURLに両方の言語を含めることも技術的には可能ですが、レビュアーが目的の言語バージョンに迷わずアクセスできるよう、URLごとに言語を明記する案内を添えます。"
      }
    }
  ]
}
```