初心者必見！Canvaでホームページにおしゃれなデザインを簡単埋め込み｜誰でもできるステップガイド

ホームページにおしゃれなデザインを簡単に埋め込める方法を探していませんか？

「Canva の HTML を書き出したい」と考える方もいますが、Canva のヘルプで確かめられる範囲では、デザインを HTML ファイルとして書き出す機能は案内されていません。ホームページに入れる方法は、埋め込みコードを貼る、画像として書き出す、Canva のウェブサイトとして公開する、の3つです。

この記事では、Canva のヘルプで確かめた手順（2026年11月1日に確認）にそって、デザインをホームページに載せる方法を解説します。

また、ホームページリニューアルの成功ノウハウが詰まったお役立ち資料もぜひダウンロードください。 ダウンロードはこちらから

【簡単】Canvaを使ってデザインをホームページに埋め込む方法

Canva のデザインをホームページに載せる流れは、デザインの作成、埋め込みコードの取得（または画像の書き出し）、ホームページへの貼り付け、表示の確認の順です。

ここでは、初心者の方でも進められるよう、各ステップを順に説明します。

まずはデザイン作成

Canva にログインして、新しいデザインを作成します。テンプレートや素材を選んで、デザインを作りましょう。

Web サイトや SNS 向けのテンプレートもあり、用途に合わせて選べます。無料で使える素材やフォントと、有料プランの素材が混在しているため、使う素材がどちらかは、編集画面で確認してください。

有料の素材を含むデザインは、購入していない素材に透かしが入った状態で表示されます（Canva ヘルプの案内）。公開前に、透かしが残っていないかを確認しましょう。

デザインのエクスポート方法

画像として載せる場合は、デザインをダウンロードして、画像ファイルを用意します。

Canva では、デザインを複数の形式でダウンロードできます。選べる形式やプランごとの制限は、ダウンロードの画面で確認してください。ホームページに載せるときは、表示がきれいで、容量が大きすぎないものを選びます。

画像として載せた場合は、Canva 側でデザインを直しても、ホームページの画像は自動では変わりません。直したら、画像を書き出して入れ替える必要があります。

埋め込みコードを取得する方法

デザインを画像にせず、Canva のデザインそのものを表示させたい場合は、埋め込みを使います。

Canva ヘルプによる手順は、次のとおりです。

• デザインを開き、エディターの上のメニューバーから[共有]を選びます。
• [すべて表示]を選び、[埋め込み]を選びます。
• 埋め込むデザインは公開状態になります。確認の画面で[埋め込み]を選びます。
• HTML コード、またはスマート埋め込みリンクのうち、サイトが対応している方をコピーします。
• コードまたはリンクを、ホームページに貼り付けます。

HTML のコードを受け付けないサービスには、スマート埋め込みリンクを使います。Canva ヘルプでは、WordPress.com・Medium・oEmbed に対応しているサイトで使えるとされています。

ホームページに埋め込みコードを追加する

HTML コードの場合は、ホームページの HTML の、表示したい場所に貼り付けます。

WordPress では、「カスタムHTML」ブロックを追加して、その中にコードを貼ります。ブロックの名前は、テーマやエディタで異なる場合があります。

貼り付けたら、サイズが合っているかを確認し、必要に応じて、囲む枠の幅などを調整します。

デザインが正しく表示されているか確認

最後に、埋め込んだデザインが正しく表示されているかを確認します。

パソコンとスマートフォンの両方で、表示の乱れがないか、読み込みに時間がかからないかをチェックしましょう。

埋め込みを取りやめたい場合は、Canva で[共有]から[埋め込み]を選び、[埋め込みリンクを削除]をクリックします。このとき、ホームページ側のコードやリンクも、必ず削除してください。残っていると、表示が壊れます。

ホームページにCanvaのデザインを埋め込む際の注意点

埋め込みには、公開の範囲と、見た目、表示速度についての注意があります。

ここでは、特に気をつける点を説明します。

サイズ選び

埋め込んだデザインが、ページの枠に合っていないと、はみ出したり、余白が不自然になったりします。

ホームページのレイアウトに合わせた幅を決めて、スマートフォンでの見え方も実機で確かめましょう。

フォーマット選び

画像として載せる場合は、書き出す形式で見え方と容量が変わります。

一般に、写真のような色の多い画像は JPG、ロゴなど透明な背景が必要な画像は PNG が使われます。形式ごとの違いは、Canva のダウンロード画面の説明を確認してください。

埋め込みの場合は、形式を選ぶ必要はありません。ただし、埋め込んだデザインは公開されるため、載せてよい内容かを、先に確認します。

表示速度

埋め込みも画像も、ページの読み込みに影響します。

画像を載せる場合は、必要以上に大きなサイズで書き出さず、圧縮してから載せます。埋め込みの場合は、1ページに置く数を絞り、ページの下の方に置くことで、負担を抑えられます。

Canvaでホームページデザインを始める前に知っておきたいこと

デザインを載せる以外に、Canva で Web サイトそのものを作って公開することもできます。ここでは、そのときに知っておきたいことを説明します。

Canvaでホームページをデザインする魅力とは？

Canva は、テンプレートと素材を使って、デザインの専門知識がなくても、見栄えのよいデザインを作りやすいツールです。

Canva のヘルプによれば、デザインを開いて[公開]を選ぶと、そのまま Web サイトとして公開できます。無料のドメイン（.canva.site）、新しく取得するドメイン、持っているドメインの接続から選べます（2026年11月1日に確認）。

初心者でも使いやすい理由を徹底解説

編集画面で、テンプレートや画像、フォントを配置していけるため、初めてでも作りやすいのが特徴です。

ただし、Canva ヘルプによれば、無料プランで公開したサイトには「Designed with Canva」の表示が付きます。この表示は、無料プランでは外せず、Canva Pro にすると外せるとされています。

また、プレゼンテーションなど Web サイト以外のデザインは、[共有]の[すべて表示]から[Website]を選んで、Web サイトとして公開できます。

Canvaでおしゃれなホームページを作るメリット

Canva を使うメリットは、手軽にデザインを作れること、素材が豊富なことです。

ここでは、それぞれを説明します。

コストを抑えつつ手軽にプロのようなデザインができる！

Canva には無料で使える範囲があり、有料プランに入らなくても、デザインを作って、公開まで進められます。

専門のデザイナーに依頼する場合と比べて、費用を抑えやすい一方で、無料プランの制限（公開時の表示や、使える素材）は、事前に確認してください。

豊富な素材とフォントが利用可能

Canva には、画像・イラスト・アイコン・フォントが用意されています。

有料プランに入ると、有料の素材やフォントも使えるようになります。無料の範囲で足りるかは、使いたい素材を検索して確かめましょう。

初心者向け！Canvaでおしゃれなホームページを作るコツ

デザインに迷ったら、次のポイントを意識すると、まとまりやすくなります。

ここでは、色使い、フォント、レイアウト、画像、一貫性の5つを説明します。

色使いの基本を理解する

色は、デザインの印象を大きく左右します。メインの色・アクセントの色・ベースの色の3つを決めて、使う色を増やしすぎないようにします。

文字と背景の色の差が小さいと読みにくくなるため、スマートフォンの画面でも読めるかを確認しましょう。

フォント選びのポイント

フォントは、デザインの雰囲気を左右します。

本文には読みやすいシンプルなフォントを、見出しには目を引くフォントを使い、種類は2つ程度に絞るとまとまります。

シンプルなレイアウトを心掛ける

情報を詰め込みすぎず、適度な余白を取ると、必要な情報が見つけやすくなります。

テンプレートのレイアウトをもとに、重要な情報が目立つように並べましょう。

視覚的に引きつける画像やイラストの選び方

画像は、デザインの雰囲気を決める要素です。テーマが合った画像を選び、解像度が低いものは避けます。

画像が大きすぎると、ページの読み込みが遅くなるため、載せる前にサイズを確認してください。

一貫性のあるデザインを作る

色・フォント・レイアウトに統一感があると、信頼感のあるデザインになります。

Canva には、ブランドの色やフォントをまとめて管理する機能（ブランドキット）があります。使えるプランは、Canva の料金ページで確認してください。

CanvaとWordPressを組み合わせるには？

WordPress に Canva のデザインを載せる方法は、画像として載せる方法と、埋め込みを使う方法があります。

ここでは、それぞれの手順を説明します。

デザインのエクスポート

画像として載せる場合は、Canva でデザインをダウンロードします。

用途に応じて、形式と大きさを選んでください。

画像形式でのエクスポート

画像形式では、JPG や PNG が使えます。

ダウンロード画面で、選べる形式を確認し、ホームページで表示する大きさに合わせて書き出します。

高解像度のものが必要な場合

大きく表示したい画像や、印刷にも使いたい画像では、高い解像度が必要になることがあります。

ただし、ファイルが大きくなるため、WordPress に載せる前に圧縮して、ページの読み込みに影響が出ないかを確認します。

Canvaの埋め込み機能を使う

デザインそのものを表示したい場合は、Canva の埋め込みを使います。

埋め込みコードの取得

Canva で[共有]、[すべて表示]、[埋め込み]の順に選び、確認の画面で[埋め込み]を選んで、HTML コードをコピーします。

HTMLブロックに貼り付け

WordPress の編集画面で、「カスタムHTML」ブロックを追加して、コピーした HTML コードを貼り付けます。

WordPress.com を使っている場合は、HTML ではなく、スマート埋め込みリンクを貼る方法が使えます（Canva ヘルプの案内）。

Canvaでおしゃれなホームページを簡単に作ろう！

Canva を活用すると、デザインの専門知識がなくても、見栄えのよいデザインを作れます。

ここでは、作ったデザインを活かす次のステップを解説します。

今日からできるデザインテクニック

まず、テンプレートをもとに、色とフォントを絞って、余白を取ります。

画像やイラストは、数を絞って使うと、伝えたいことが目立ちます。

自分のデザインを最大限に活かすための次のステップ

デザインが完成したら、ホームページに載せて、パソコンとスマートフォンの両方で表示を確認します。

表示速度を保つため、画像は圧縮し、埋め込みは数を絞ります。