Canvaサイトを独自ドメインに接続してみた
(DNSレコードの設定と連携)

Canvaには、ウェブサイトをデザインし、そのまま作成する機能があります。
この機能を使うと、簡単にポートフォリオページが作ることができます。

ただし、そのまま公開すると、URLが「example.canva.site」のようになっていて、少し味気ない。
せっかくなら、自分で取得したドメイン「example.com」でアクセスできるようにしたいものです。

.com Canvaサイトを独自ドメインに接続 デフォルト example.canva.site カスタム化 example.com プロフェッショナルな印象 ブランド統一 覚えやすいURL 信頼性向上

そんなわけで、今回はムームードメインで取得した独自ドメインをCanvaに接続してみました。

関連記事

1. CanvaはWebホスティングサービスもしている

Canvaは、画像やスライドショーだけでなく、サイトも作成できるデザインツールです。
これは、簡易Webホスティングサービスを提供しているわけです。

Canvaホスティングの仕組み ユーザー DNSサーバー ドメイン→IP変換 Cloudflare 高速配信・保護 Canva Let’s Encrypt SSL証明書自動発行 1 ユーザーがドメイン入力 2 DNSがIPアドレス解決 3 CloudflareでCDN配信 4 Canvaがコンテンツ提供 5 SSL証明書で暗号化通信

ポートフォリオやランディングページを作成する機能を持っていて、 example.canva.siteで公開できます。
ウェブサイトには、canva.siteのサブドメインとしてアクセスでき、CDNのCloudflareを使用して配信されます。
さらに、DNSサーバーの設定をすれば、自分の所有する独自ドメインを接続することもでき、セキュリティ証明書はLet’s Encryptで自動発行されます。

もちろん、レンタルサーバーのような本格的なWebホスティングサービスとは異なり、サーバーやデータベースなどを管理する自由度は少ないです。

2. Canvaで「独自ドメインを接続」してみる

Canvaサイトで独自のドメインを使いたい場合、有償でCanvaでドメイン取得を依頼するほうがスムーズです。
しかし、他社で従来から取得してあるドメインを利用したい場合も多いでしょう。
そういうケースで、DNSサーバーの設定が必要になります。

設定手順(5ステップ) 1 Canvaでドメイン入力 2 DNS情報を確認 3 DNSサーバーで設定 4 反映待ち 数時間〜1日 5 接続完了 SSL自動適用 注意 ムームー: @=空白

具体的には、自分の契約しているドメインサービスで、Canvaと連携するためのDNSレコードを登録しておく必要があるわけです。
このようにすれば、example.comにアクセスしたユーザーに、Canvaサイトのコンテンツを表示させることができるようなります。

2.1. ドメイン名を入力する

まず、Canvaのサイト編集画面で「Webサイトを公開」から、「カスタムドメインを使用」を選択します。

独自ドメインを活用」画面でドメイン名を入力しました。
すると、Canvaが自動で接続方法を案内してくれました。

画面には「ドメインを手動で接続する」という選択肢がありました。
これを選ぶと、DNSレコードを自分で設定するよう指示されます。

2.2. Canvaから指示されたDNS情報を確認する

Canvaが表示した内容はこんな感じでした。

DNS設定の仕組み 名前/ホスト レコード 値/指定先 @ A 103.169.142.0 www A 103.169.142.0 @ TXT canva-domain-verify=… A IPアドレス指定 example.com → IP T 所有者確認 ドメイン認証用
名前/ホストレコード値/指定先
@Aレコード103.169.142.0
wwwAレコード103.169.142.0
@TXTレコードCanvaが指定する確認用コード
(例:canva-domain-verify=〜

このIPアドレスは、Canvaで用意されているサーバーのもので、サイト固有のものではありません(複数のサイトで共用している)。

つまり、ルートドメイン(example.com)とwwwのホスト(www.example.com)の両方をCanvaのIPアドレスに向け、さらにTXTレコードでドメイン所有者の確認をする、という仕組みです1

ちなみに、サブドメインの場合は、「名前/ホスト」の部分が変わりますが、あとは基本的には同じです。

3. ドメインサーバーでDNSレコードを設定する

この情報を、自分の取得したドメインのDNSサーバーに追加します。
たとえば、ムームードメインでは「カスタムDNS設定」で操作します。

ちなみに、ここで少し戸惑ったのが、Canvaの指示にある「@」の扱いです。

ムームードメインで「@」をそのまま登録しようとすると「入力項目に誤りがあります」と表示されました。このようなケースでは、ホスト名を空白にして登録します。

実はこれ、ルートドメインを指す場合には、空白、@の2通りの記法があるからです23

DNS設定の「空白=@」のような独自ルールは、サービスによって微妙に違うので注意が必要ですね。
ムームードメインの場合は空白入力でOKですが、他社では「@」をそのまま書く場合もあります。

3.1. 【補足】cPanelでのDNSレコードの設定例

ちなみにmixhostのcPanelでは、「ゾーンエディタ」で、DNSレコードを設定します。

canva-test.chiilabo.jpの登録例
canva-test.chiilabo.jpの登録例

設定を追加して「OK」を押すと、ドメイン側でDNS変更が反映されます。

3.2. DNSレコードを追加したらCanvaに同期依頼をする

DNSサーバーでDNSレコードを設定できたら、Canva側の操作を進めます。

続けて、サイト公開画面では、サブパスを空白にしてから「公開」ボタンを押しました。

サブパスは、すでにあるサイト内にページを追加したいときに使います。
あとは、Canva側でドメイン情報の確認が完了したら、サイトが公開されることになります。

4. 「このサイトは安全に接続できません(SSLエラー)」

すぐにブラウザでURLを開いてみました。
すると、Canva側の準備が完了していないのて、こんなエラーが表示されました。

「ERR_SSL_VERSION_OR_CIPHER_MISMATCH」

4. 「このサイトは安全に接続できません(SSLエラー)」

これはSSL(https通信)の証明書がまだ有効になっていないことを意味しています。
Canvaではドメイン接続が完了すると、自動的にSSL証明書(Let’s Encrypt)が発行されます。
ただし反映には少し時間がかかります45

SSL証明書の反映を待つ間に不安になりがちですが、数時間〜1日置いてから再確認すると自然に解決していることが多いです。

4.1. 30分ほどで「ドメインが確認された」

しばらく待つと、約30分ほどでCanvaから登録完了のメールが届きました。

4.1. 30分ほどで「ドメインが確認された」

すると、問題なくCanvaで作ったサイトが自分のドメインで表示されました。

4.1. 30分ほどで「ドメインが確認された」

SSLも自動的に適用され、ブラウザのアドレスバーに鍵アイコンが出ています。
設定完了です。

4.2. 「Webドメイン」の設定を確認する

Canvaのアカウントの「設定」には「Webドメイン」という項目があります。
そこでも、登録情報を確認できます。

サイト登録が完了すると、「Webサイトリンク」

4.3. 【補足】非公開だと「Not found(404)」と表示される

ちなみに、「Not found(404)」というエラーと表示された場合は、Canvaサイトの設定が「非公開」になっているはずです。

このエラーメッセージは、Canvaが表示しています。

公開、非公開はCanvaのアカウント設定にある「Webドメイン」からも変更できます。

4.3. 【補足】非公開だと「Not found(404)」と表示される

「Webサイトリンク」のメニューボタンを押すと、公開状態の変更や編集ができます。

Canvaのどのプロジェクトをサイトとして公開しているかわからなくなっても、この「Webサイトリンク」で特定できます。

4.4. 【補足】「Error 1003:Direct IP access not allowed」

ちなみに、指定されたIPアドレス(103.169.142.0)に直接アクセスすると、別のエラーが表示されました。

4.4. 【補足】「Error 1003:Direct IP access not allowed」

このメッセージは、Cloudflare(Canvaが利用しているCDNサービス)のもの。
「IPアドレスに直接アクセスしようとして拒否された」という意味です。

ちゃんと、正規URLからアクセスしないとダメなんですね。

5. まとめ:シンプルだけど「待つ」ことも大事

今回の手順をまとめるとこうなります。

  1. Canvaで「独自ドメインを接続」→手動設定を選ぶ
  2. Canvaが表示するAレコードとTXTレコードをメモ
  3. ムームードメインでカスタムDNS設定を追加(空白=@)
  4. 反映を待ってCanvaで「接続を確認」
  5. 数時間後、自動でSSLが適用されて完了

DNSレコードの仕組みがポイントです。
ただ、DNSの反映には時間がかかるので、焦らずじっくり待つのが大事です。

  1. 実際にCanvaのヘルプ内で、「Aレコード(@およびwww)をIPアドレス 103.169.142.0 に設定する」例が確認できます。 – Use your own domains to publish websites – Canva Help Center
  2. ムームードメインのヘルプでも「サブドメインを空白のままにしてルートドメインのレコードを設定できる」と明記されています。 – ムームーDNSカスタム設定 – ヘルプセンター
  3. ムームードメインでは空白入力がルートドメインとして機能しますが、他のサービスでは「@」や「(ホスト名なし)」「@と入力」など記述が異なる場合があります。 – ムームーDNSの設定方法 – ヘルプセンター
  4. Canvaの外部ガイドでは、独自ドメイン接続時にTXT/Aレコードの設定後24時間以内に反映され、SSL証明書の発行も含まれる旨が記載されています。 – How to Point a Domain to Canva – Hostinger Help Center
  5. DNS変更後の世界的な伝播(プロパゲーション)について、「通常1時間程、ただし最大で48時間程度かかる場合がある」と解説されている資料があります。 – What is DNS A Record and how to add it to DNS – EasyDMARC Blog