IT・Web用語集

【実例あり】Canvaでホームページを無料で作る方法を紹介!

2022-11-11

【実例あり】Canvaでホームページを無料で作る方法を紹介!

SNS投稿用の画像やバナー、名刺といった画像編集が誰でも簡単にできるCanva

Canvaは、年々新機能が追加され、ビジネスでの活用の幅もより便利なものとなりました。

そんなCanvaに「Canva Webサイト」という、ホームページ作成機能が追加されたことをご存知でしょうか?

今回の記事では、誰でも簡単に(しかも無料で!)できる、Canvaを使ったホームページの作り方を紹介します。

また、今回はCanvaで実際に作成したホームページも紹介しています。

ホームページ作りに興味はあるけど、専門知識がなくて足踏みしている、という方はぜひ参考にしてみてください!

今回の記事でわかること

  • Canva Webサイトとは?
  • ホームページの作成と公開手順
  • 本当に無料で公開までできるのか?

▼実際にCanvaで作ったホームページは、以下のリンクから見ることができます。

無料で作ったホームページを見る

Canva Webサイトとは?

Canvaのホームページとは?
画像引用:canva

Canvaは、バナーや名刺を誰でも簡単に作成できる「画像編集ツール」として世界中の人たちに利用されているサービスです。

近年では、プレゼン資料の作成や動画編集なども可能になり、ビジネスでの利用もより便利になりました。

Canvaの特徴

  • かんたん、見たまま編集
  • テンプレートを利用するためデザインの知識が不要
  • 画像などの素材は商用利用OK

かつては、デザインのプロしかできないと思われていた画像の編集が、Canvaの出現により誰でも可能になりました。

また、プロがデザインしたテンプレートを利用することで、おしゃれな制作物を簡単に作成することができます。

そんなCanvaに、ホームページ作成機能が追加されました!

Canva Webサイトでは、Canvaの特徴を活かし、誰でも簡単にホームページを作成することができます。

▼ホームページを作成する手順はたったの3ステップ。

作成から公開までの流れ

※クリックすると各操作方法の項目へジャンプすることができます。

それではさっそくテンプレートを選ぶところから、ホームページ公開までの手順を紹介します。

テンプレートの選び方

ホームページを作成・公開する手順

まずは、Canvaにログインしてホーム画面を開きましょう!

▼Canvaのアカウント登録がまだの方は、以下の記事を参考にし、アカウント登録から行なってください。

▼まずは、Canvaのホーム画面を開きます。

Canvaを使って無料でホームページを作成する方法
画像引用:Canva

次にページ上部メニューの

テンプレート>ビジネス>Webサイト

の順にクリックします。

もしくは

ホーム画面の検索窓に「ウェブサイト」と入力することで、テンプレート一覧を表示させることができます。

Canvaを使って無料でホームページを作成する方法
画像引用:Canva

検索窓でテンプレートを検索するか、メニューからテンプレートの一覧を表示させることで、700点以上のテンプレート一覧を表示させることができます。

Canvaを使って無料でホームページを作成する方法
画像引用:Canva

▼一覧の中から任意のテンプレートを選んでクリックします。

Canvaを使って無料でホームページを作成する方法
画像引用:Canva

今回の記事では、「小売店ウェブサイト」というカテゴリの中の「ベージュとグレー オーガニック 暖かい ファッション 小売 ウェブサイト」というテンプレートを選択しました。

▼テンプレートを選択すると、Canvaではお馴染みの編集画面が表示されます。

Canvaを使って無料でホームページを作成する方法

これでテンプレート選びは完了です。

すぐにホームページの編集ができる状態になりました。

部分的に別のテンプレートを挿入することもできます。
(後ほど紹介します!)

ホームページの編集方法

Canvaホームページの編集方法
画像引用:Canva

Canvaの編集方法は、「見たまま編集」でとにかく簡単です。

編集したい箇所をクリックし、好みに応じでデザインを編集していくことが可能です。

今回の記事では「ビジネスで実際に利用できるホームページ」を目標に編集してきます!

背景色を変える

背景色を変える

背景色を変えることで、ホームページのイメージをお大きく変えることができます。

自社のイメージカラーに合わせて背景色を変えることで、自社イメージにピッタリと合うホームページを構築していくことができます。

Canvaを使って無料でホームページを作成する方法

背景色を変更する操作は、

  1. 背景色を編集したいページをクリック。
  2. 左上の四角をクリック。
  3. 左側にカラーパレットが出現するので任意の色を選ぶ。

Shiftを押しながらクリックすると複数ページの選択もできます。

▼ちなみに、左上の「+」をクリックすれば、自分好みの色に変更することもできます。

Canvaを使って無料でホームページを作成する方法

文字の編集

文字の編集

▼文言の差し替えを行いたい場合は、差し替えたい箇所をクリックし、さらにダブルクリックをすることで文字の編集ができるようになります。

Canvaを使って無料でホームページを作成する方法

ページの上部に、文字装飾メニューが表示されるので、フォントの種類変更、サイズ変更、文字色の変更といった文字の調整も簡単にできます。

Canvaを使ったことがある人は問題なく操作できるはず!

画像の設置と編集

画像の設置と編集

テンプレートに設置された画像は、簡単に差し替えることができます。

選んだテンプレートに掲載されている画像を削除し、Canva内の画像や自分でアップロードした画像を設置することで、画像の差し替えを行います。

Canvaを使って無料でホームページを作成する方法

canvaの素材を設置する場合は

  1. 左の「素材」をクリック。
  2. 探したい画像をキーワードで検索。

▼左側に表示された任意の画像をクリックすると、そのままページ上に反映されます。

Canvaを使って無料でホームページを作成する方法

▼ちなみに自分で準備した画像を掲載したい場合は、「アップロード」から行います。

Canvaを使って無料でホームページを作成する方法
  1. 左の「アップロード」をクリック。
  2. 「画像または動画をアップロード」をクリック。
  3. 利用中の端末から任意の画像を選択します。

画像を選択し、サイズを変更したり表示位置を調整することも可能です。

画像の編集も、Canvaの画像編集と同じ操作で行うことができます。

ページ内の指定した箇所へジャンプさせたり、クリック時に外部ページへ遷移できるリンクボタンやリンクバナーなどの設定も可能です。

この章ではリンクボタンの設定方法を通して、リンクの設定について紹介します。

Canvaを使って無料でホームページを作成する方法

リンクの設定方法は

  1. リンクを設定したいボタンや文字をクリックして選択
  2. 右上の「チェーン」のようなマークをクリック
  3. チェーンマークの下に白い枠が出現するので、そこにURLを入力

Canvaで作ったバナー画像にリンクを設定することもできます!

ちなみに、キャプチャのリンクボタンは、図形で角が丸い長方形を設置し、文字を入力して作成しました。

別のテンプレートの一部を挿入

「希望のレイアウトが、選んだテンプレートの中にない!」

そんな時は、図形や画像を一から配置して、自分の思い描いていたレイアウトに近づけていくのも可能ですが、かなり大変です…。

なんと、別のテンプレートから気に入ったページだけ引っ張ってくることができます!

Canvaを使って無料でホームページを作成する方法

別のテンプレートを選択する手順は

  1. 左メニューの「テンプレート」をクリック。
  2. 気に入ったレイアウトがあるテンプレートをクリック。

テンプレートの上でマウスオーバーすると、自動で2ページ目以降がスクロール表示されます。

Canvaを使って無料でホームページを作成する方法

▼選んだテンプレートの気に入ったページをクリックしてみましょう。

Canvaを使って無料でホームページを作成する方法

これで選んだページのみ追加することができました。

テンプレートの良いとこどりができます!

メニューの設定

プレビュー画面でページを表示してみると、いつの間にかページの右上にメニューが出現しています。

▼しかし、何も編集しない最初の状態だと、メニューの文言がホームページの内容に沿っていないかもしれません。

Canvaを使って無料でホームページを作成する方法

メニューの文言とページ内リンクの設定を行うことが出来ます!

▼まずは編集画面の下部にある「山」のようなマークをクリック。

Canvaを使って無料でホームページを作成する方法

▼すると、ページの下部に全ページのサムネイルが左からページ順に表示されます。

Canvaを使って無料でホームページを作成する方法

▼メニューのリンクを設定したいページの右上にマウスを置き、「・・・」ボタンから設定を行います。

Canvaを使って無料でホームページを作成する方法
  1. メニューの「・・・」ボタンが現れたらクリック。
  2. 右上(一番上)に文字を入力する項目が表示されるので、任意の文言を入力する。
Canvaを使って無料でホームページを作成する方法
画像引用:Canva

これでメニューの文言修正とページ内リンクの設定が出来ました!

▼さらに、メニューからページ内リンクで飛ばしたい箇所で同様の操作を行うことで、ページの内容に沿ったメニューを表示することができます。

Canvaを使って無料でホームページを作成する方法

▼スマホ表示のメニューも自動で作成してくれます。

スマホ表示

Canvaでメニューを設定する方法

現段階では、メニューのカスタマイズ(文字サイズの調整やカラーの変更)はできないようです。

しかし、自動でメニューを生成してくれるので楽ちんです!

メールフォームと連携させる

メールフォームの設定

Canvaで作成したホームページに、おい問合わせフォームを埋め込むことはできません。

その代わり、Googleフォームなどと連携させることができます!

Canvaでお問合せフォームを設置する方法

お問い合わせフォームを作るためのツールはたくさんありますが、今回はGoogleフォームを使います。

▼お問い合わせフォームをホームページへ掲載する際は、以下の手順で行います。

お問い合わせフォームの掲載手順

  • Googleフォームを作成
  • ホームページにリンクボタンかバナーを設置
  • リンクボタンにGoogleフォームへのリンクを設定する

Googleフォームの設置は、自分のGoogleアカウントにログインし、フォームの管理画面から行います。

Canvaでお問合せフォームを設置する方法
画像引用:Googleフォーム

続いては、リンクボタンの設置です。

▼リンクボタンは、「素材」から、「長方形」を選択し、作成しました。

ボタンのようなイラストやアイコンを使うのもありです!

読みやすい太めの文字で「お問合せフォーム」といった文言を記載します。

ボタンの色を濃いめの色にすることで、リンクボタンらしく見えます。

続いて、Googleフォームへリンクの設定を行います。

▼Googleフォームへのリンク設定は、以下の手順で行います。

Canvaでお問合せフォームを設置する方法
  1. 四角枠で作成したリンクボタンをクリックし、
  2. 右上のチェーンのような「リンクマーク」をクリック。
  3. リンクボタンにGoogleフォームのURLを入力する。
  4. 「完了」をクリック。

これでリンクボタンとGoogleフォームを連携させることができました。

リンクボタンでなくても、Canvaで作ったバナー画像を掲載しても良さそうです!

ホームページの表示を確認する

Canvaを使って無料でホームページを作成・プレビューで確認する方法

ある程度ホームページを編集したら、実際の画面表示も確認してみましょう。

編集画面右上の「プレビュー」というボタンをクリックします。

▼実際の画面表示を確認することができます。

Canvaを使って無料でホームページを作成・プレビューで確認する方法

パソコン画面での表示を確認したら、スマホ画面での表示も確認しておきましょう。

▼スマホ画面での表示を確認する際は、スマホのアイコンをクリックします。

Canvaを使って無料でホームページを作成・プレビューで確認する方法

ホームページの編集が完了し、プレビューでの表示確認が完了したら、続いては公開作業に入ります。

「プレビュー」はあくまで「パソコン・スマホ画面ではこんな感じで表示されますよ」という確認用の表示画面です。
ホームページを公開後、実際にパソコンやスマホで見た際に、レイアウトや文字のサイズなどが「プレビュー画面とは若干違う」ということが生じます。

ホームページの公開手順

公開作業もとても簡単です。

まずは、編集画面右上に表示されている「Webサイトを公開」をクリックします。

▼ホームページの公開作業は、以下のような流れで行います。

公開までの流れ

※クリックすると各操作方法の項目へジャンプすることができます。

公開設定を行う

Canvaを使って無料でホームページを公開する手順

「Webサイトを公開」をクリックすると、画面右側に「ウェブで公開」という設定画面が表示されます。

▼今回は無料のプラン内で公開するため、「無料のドメイン」を選択し、その他の設定は触らずに「続行」をクリックします。

サブドメインを選択

▼続いて「サブドメインを選択」という設定画面が表示されたら、任意のアルファベットを入力し、「続行」をクリック

Canvaを使って無料でホームページを公開する手順

入力するアルファベットは、自分のホームページに関連する単語を入力することがおすすめです。

ちなみに、サブドメインは後で「設定」から変更することができます。

ドメイン・サブドメインとは?

ドメインとは、インターネット上での「ホームページの住所」のようなもの。
URL末尾の「.com」や「.jp」などの前に設定されるアルファベットの羅列を指します。
Canvaで無料公開するページの場合、URLは、https://●●●.my.canva.site/となり、ドメインは「my.canva」の部分になります。
今回、筆者は無料でホームページ公開を行なったためCanvaのドメインを借りて、https://torabi.my.canva.site/というURLで公開しました。
この場合、「torabi」の部分がサブドメインと呼ばれる箇所になります。

つまり、「サブドメインで公開する」ということは、「my.canva」という「Canva所有のドメインの一角を借りて公開する」ということです。

ちなみに、無料プランのCanva Freeでは、自分で契約した独自ドメインで公開することはできません。

有料のCanva Pro以上のプランより、独自ドメインで公開することが可能です。
自分で契約した独自ドメインでの公開をお考えの方は、以下のページを参考にしてください▼
CanvaのWebサイトの公開
独自のドメインを接続したウェブサイトの公開
Webサイトを公開するためのドメインの購入

\ Canva Pro無料トライアルはこちら /

設定の確認を行う

ドメインの設定が完了したら、「設定の確認」という設定画面が表示されます。

▼ホームページのタイトルと説明を入力し、「許可」の箇所はチェックを入れず、「続行」をクリックします。

Canvaを使って無料でホームページを公開する手順

▼「続行」をクリックすると、「デザインを準備中」というポップアップが表示されます。

Canvaを使って無料でホームページを公開する手順
画像引用:Canva

何も触らず、待機しましょう。

▼以下のように「Webサイトが公開されました」というポップが表示されたら公開完了です!

Canvaを使って無料でホームページを公開する手順
画像引用:Canva

公開したホームページを確認する

公開したホームページは、一通り目を通すことをおすすめします。

実際に公開されたページで表示がおかしくなっていないか(レイアウト崩れを起こしていないか)などを確認しましょう。

編集画面と実際に公開されたページでは、微妙にレイアウトが違うことがあるためです。

「Webサイトを表示」という紫色のボタンをクリックすると、ホームページを表示することができます。

Canvaを使って無料でホームページを公開する手順
画像引用:Canva

▼ちなみに、筆者のページも無事に公開することができたので、Canvaでのホームページ制作を検討中の方は、ぜひ参考にしてみてください。

Canvaを使って無料でホームページを公開する手順

Canvaで作ったホームページを見る

▼公開直後に、編集を再開する場合は、画面右上に表示されている「デザインを編集」をクリックします。

Canvaを使って無料でホームページを公開する手順

ホームページの再編集が完了したら、公開中のページへ反映させる必要があります。

先ほどの公開作業と同じ手順で「Webサイトを公開」から反映作業を行いましょう。

実際に公開してみた感想

実際に公開してみた感想

今回、Canvaでホームページを作成から公開するにあたり、「便利だと思った点」「注意が必要だと思った点」についてまとめてみました。

普段「コーディング」と呼ばれる方法でホームページ編集を行なっているプロの目線から紹介します!

Canvaのホームページ作成機能に興味がある方は、ぜひ参考にしてみてください。

とにかく操作が簡単!
また、本来なら細かい設定が必要な箇所も自動で生成・設定してくれる!

もう少し詳しく説明すると↓

  • とにかく簡単(操作感はCanvaで画像編集をする感じ)
  • 公開作業も簡単な設定とボタンクリックの操作のみ
  • グローバルメニューが自動生成
  • 「ある程度」スマホ対応してくれる

実際に、Canva Webサイトを使ってみた結果、「とにかく簡単!」というのが1番の感想です。

しかし、簡単であるがゆえにデメリットが発生してしまうのも事実…。

特にスマホ表示に関しては、編集時に少し注意が必要のようです。

Canva Webサイトでの注意点は以下の通り。

簡単がゆえに、微調整や細かい設定が難しい。

微調整や細かい設定が難しいと感じた箇所がいくつかあったのですが、今回特に感じた「スマホ表示時」の注意点に関してまとめてみました。

解決策もちゃんとあるのでご安心ください!

筆者が作成したページで、テンプレートを利用せず、一から作った箇所がありました。

白枠を設置し、その中に文字を掲載したのですが、スマホ表示時にレイアウト崩れを起こしてしまいました…。

PC表示

Canvaを使った無料ホームページ制作・スマホ対応

上記のように、パソコン表示だと正常に表示されているように見える画面でも、スマホ表示では「枠から文字がはみ出てしまう」といったレイアウト崩れが発生してしまいました。

スマホ表示

しかし、Canvaのホームページ作成機能が「スマホ表示には対応していない」というわけではありません。

プレビュー画面左上の「モバイルでサイズを変更」という項目にチェックが入っていれば、スマホ画面での表示を自動設定してくれます。

Canvaを使った無料ホームページ制作・スマホ対応

テンプレートをそのまま使うことで、レイアウト崩れを防ぐことができます。

レイアウト崩れが心配な方は、使用しているテンプレートの「画像や文字を入れ替えるだけ」にしておくことがおすすめです。

ちなみに今回は、白枠の上下の余白を広げることで、レイアウト崩れは解消しました!

本当に無料で公開までできるの?

本当に無料で公開までできるの?

Canvaの公式ページでも「無料で簡単にホームページを作成できます」という案内がされているホームページ作成機能。

そうはいっても「途中で追加料金が発生したりしないの?」と思ってしまう人もいるのではないでしょうか?

実際に機能を使ってみて、分かったことを紹介します。

本当に追加料金は無し。無料で公開までできた!

今回、筆者が作成したページでは、テンプレートや素材なども全て無料のものを使用したため、編集から公開まで「0円」で行うことができました。

ホームページ内に使用しているイラストと画像はCanva以外の無料素材も使用していますが、Canva内の無料素材で十分事足りそうです。

▼無料で公開まで行うためには、注意点もあります。

・有料テンプレート・有料素材も存在するため、全てが無料というわけではない。
・独自ドメインでの公開など、無料の範囲内でできないこともある。

「このテンプレート使いたい!」と思い、選択しようと思ったら、有料のテンプレートで使えなかった…ということも多々ありました。

また、イラスト・写真に関しては「使いたい!」と思った、ほとんどの素材が有料でした。

Canvaを使って無料でホームページを作成・Canva Pro
画像引用:Canva

そのため、外部サービスで取得した無料素材をアップロードして使用する必要がありました。

無料の画像を探し、Canvaへアップロードという手順を何度も行なったため、手間と時間がかかってしまったように感じます…。

Canva内の素材を全て使えるようになると作業が楽そうです。

また、独自ドメインでの公開ができないなど、やはり無料の範囲内では制限がかかってしまう場面もあります。

ちなみに、Canvaの有料プランであるCanva Proは、年払いで12,000円

Canvaの料金プラン
画像引用:Canva

1ヶ月の利用料金は、1,000円です。(※年払いの場合)

今回筆者が、全て無料の範囲内でホームページを作成し、感じたことは、

「少し時間がかかった」
「やはり制限がある」

ということです。

「作業時間を短縮したい」「制限なしでのホームページ運用をしたい」ということを考えると、「Canva Proへ課金してもよさそう」と思いました。

気になった方は、Canva Pro の無料トライアルを試してみてください!

\ 無料トライアルはこちら /

まとめ:本当に「無料」で簡単

まとめ:本当に「無料」で簡単だった

今回の記事では、最近追加された「Canva Webサイト」について紹介しました。

「見たまま操作」で簡単におしゃれな制作物を作成できるCanvaなら、ホームページも簡単に作成できることがわかりました。

ホームページを実際に作成・編集する際には、注意点もいくつかあるようです。

しかし、専門知識がなくてもホームページを作ることができるため、Canvaでの制作作業が好きな方には、ぜひ使ってみてほしい機能です。

また、無料で公開までできることも実証済みです!

本格的にホームページ作成に取り組みたい方には、Canva Pro でテンプレートと素材を使い倒すことがおすすめです!

\ 無料トライアルはこちら /

しかし、無料プランのままでも、Canvaでのホームページ作成は楽しい!ということも実証済みです。

ホームページ作成に興味がある方は、ぜひCanvaを使ったホームページ作成にチャレンジしてみてください。

-IT・Web用語集