SNS投稿用の画像やバナー、名刺といった画像編集が誰でも簡単にできるCanva。
Canvaは、年々新機能が追加され、ビジネスでの活用の幅もより便利なものとなりました。
そんなCanvaに「Canva Webサイト」という、ホームページ作成機能が追加されたことをご存知でしょうか？
今回の記事では、誰でも簡単に（しかも無料で！）できる、Canvaを使ったホームページの作り方を紹介します。
また、今回はCanvaで実際に作成したホームページも紹介しています。
ホームページ作りに興味はあるけど、専門知識がなくて足踏みしている、という方はぜひ参考にしてみてください！
今回の記事でわかること
- Canva Webサイトとは？
- ホームページの作成と公開手順
- 本当に無料で公開までできるのか？
▼実際にCanvaで作ったホームページは、以下のリンクから見ることができます。
もくじ
Canva Webサイトとは？
Canvaは、バナーや名刺を誰でも簡単に作成できる「画像編集ツール」として世界中の人たちに利用されているサービスです。
近年では、プレゼン資料の作成や動画編集なども可能になり、ビジネスでの利用もより便利になりました。
Canvaの特徴
- かんたん、見たまま編集
- テンプレートを利用するためデザインの知識が不要
- 画像などの素材は商用利用OK
かつては、デザインのプロしかできないと思われていた画像の編集が、Canvaの出現により誰でも可能になりました。
また、プロがデザインしたテンプレートを利用することで、おしゃれな制作物を簡単に作成することができます。
そんなCanvaに、ホームページ作成機能が追加されました！
Canva Webサイトでは、Canvaの特徴を活かし、誰でも簡単にホームページを作成することができます。
▼ホームページを作成する手順はたったの３ステップ。
作成から公開までの流れ
※クリックすると各操作方法の項目へジャンプすることができます。
それではさっそくテンプレートを選ぶところから、ホームページ公開までの手順を紹介します。
テンプレートの選び方
まずは、Canvaにログインしてホーム画面を開きましょう！
▼Canvaのアカウント登録がまだの方は、以下の記事を参考にし、アカウント登録から行なってください。
▼まずは、Canvaのホーム画面を開きます。
次にページ上部メニューの
テンプレート＞ビジネス＞Webサイト
の順にクリックします。
もしくは
▼ホーム画面の検索窓に「ウェブサイト」と入力することで、テンプレート一覧を表示させることができます。
検索窓でテンプレートを検索するか、メニューからテンプレートの一覧を表示させることで、700点以上のテンプレート一覧を表示させることができます。
▼一覧の中から任意のテンプレートを選んでクリックします。
今回の記事では、「小売店ウェブサイト」というカテゴリの中の「ベージュとグレー オーガニック 暖かい ファッション 小売 ウェブサイト」というテンプレートを選択しました。
▼テンプレートを選択すると、Canvaではお馴染みの編集画面が表示されます。
これでテンプレート選びは完了です。
すぐにホームページの編集ができる状態になりました。
部分的に別のテンプレートを挿入することもできます。
（後ほど紹介します！）
ホームページの編集方法
Canvaの編集方法は、「見たまま編集」でとにかく簡単です。
編集したい箇所をクリックし、好みに応じでデザインを編集していくことが可能です。
今回紹介している操作について
※クリックすると確認したい項目へジャンプすることができます。
今回の記事では「サービスを紹介したシンプルなホームページ」を目標に編集してきます！
背景色を変える
背景色を変えることで、ホームページのイメージを大きく変えることができます。
自社のイメージカラーに合わせて背景色を変えることで、自社イメージにピッタリと合うホームページを構築していくことができます。
背景色を変更する操作は、
- 背景色を編集したいページをクリック。
- 左上の四角をクリック。
- 左側にカラーパレットが出現するので任意の色を選ぶ。
Shiftを押しながらクリックすると複数ページの選択もできます。
▼ちなみに、左上の「＋」をクリックすれば、自分好みの色に変更することもできます。
文字の編集
▼文言の差し替えを行いたい場合は、差し替えたい箇所をクリックし、さらにダブルクリックをすることで文字の編集ができるようになります。
ページの上部に、文字装飾メニューが表示されるので、フォントの種類変更、サイズ変更、文字色の変更といった文字の調整も簡単にできます。
Canvaを使ったことがある人は問題なく操作できるはず！
画像の設置と編集
テンプレートに設置された画像は、簡単に差し替えることができます。
選んだテンプレートに掲載されている画像を削除し、Canva内の画像や自分でアップロードした画像を設置することで、画像の差し替えを行います。
canvaの素材を設置する場合は
- 左の「素材」をクリック。
- 探したい画像をキーワードで検索。
▼左側に表示された任意の画像をクリックすると、そのままページ上に反映されます。
▼ちなみに自分で準備した画像を掲載したい場合は、「アップロード」から行います。
- 左の「アップロード」をクリック。
- 「画像または動画をアップロード」をクリック。
- 利用中の端末から任意の画像を選択します。
画像を選択し、サイズを変更したり表示位置を調整することも可能です。
画像の編集も、Canvaの画像編集と同じ操作で行うことができます。
リンクの設定方法
ページ内の指定した箇所へジャンプさせたり、クリック時に外部ページへ遷移できるリンクボタンやリンクバナーなどの設定も可能です。
この章ではリンクボタンの設定方法を通して、リンクの設定について紹介します。
リンクの設定方法は
- リンクを設定したいボタンや文字をクリックして選択
- 右上の「チェーン」のようなマークをクリック
- チェーンマークの下に白い枠が出現するので、そこにURLを入力
Canvaで作ったバナー画像にリンクを設定することもできます！
ちなみに、キャプチャのリンクボタンは、図形で角が丸い長方形を設置し、文字を入力して作成しました。
別のテンプレートの一部を挿入
「希望のレイアウトが、選んだテンプレートの中にない！」
そんな時は、図形や画像を一から配置して、自分の思い描いていたレイアウトに近づけていくのも可能ですが、かなり大変です…。
なんと、別のテンプレートから気に入ったページだけ引っ張ってくることができます！
別のテンプレートを選択する手順は
- 左メニューの「テンプレート」をクリック。
- 気に入ったレイアウトがあるテンプレートをクリック。
テンプレートの上でマウスオーバーすると、自動で2ページ目以降がスクロール表示されます。
▼選んだテンプレートの気に入ったページをクリックしてみましょう。
これで選んだページのみ追加することができました。
テンプレートの良いとこどりができます！
メニューの設定
プレビュー画面でページを表示してみると、いつの間にかページの右上にメニューが出現しています。
▼しかし、何も編集しない最初の状態だと、メニューの文言がホームページの内容に沿っていないかもしれません。
メニューの文言とページ内リンクの設定を行うことが出来ます！
▼まずは編集画面の下部にある「山」のようなマークをクリック。
▼すると、ページの下部に全ページのサムネイルが左からページ順に表示されます。
▼メニューのリンクを設定したいページの右上にマウスを置き、「・・・」ボタンから設定を行います。
- メニューの「・・・」ボタンが現れたらクリック。
- 右上（一番上）に文字を入力する項目が表示されるので、任意の文言を入力する。
これでメニューの文言修正とページ内リンクの設定が出来ました！
▼さらに、メニューからページ内リンクで飛ばしたい箇所で同様の操作を行うことで、ページの内容に沿ったメニューを表示することができます。
▼スマホ表示のメニューも自動で作成してくれます。
スマホ表示
現段階では、メニューのカスタマイズ（文字サイズの調整やカラーの変更）はできないようです。
しかし、自動でメニューを生成してくれるので楽ちんです！
メールフォームと連携させる
Canvaで作成したホームページに、おい問合わせフォームを埋め込むことはできません。
その代わり、Googleフォームなどと連携させることができます！
お問い合わせフォームを作るためのツールはたくさんありますが、今回はGoogleフォームを使います。
▼お問い合わせフォームをホームページへ掲載する際は、以下の手順で行います。
お問い合わせフォームの掲載手順
- Googleフォームを作成
- ホームページにリンクボタンかバナーを設置
- リンクボタンにGoogleフォームへのリンクを設定する
Googleフォームの設置は、自分のGoogleアカウントにログインし、フォームの管理画面から行います。
続いては、リンクボタンの設置です。
▼リンクボタンは、「素材」から、「長方形」を選択し、作成しました。
ボタンのようなイラストやアイコンを使うのもありです！
読みやすい太めの文字で「お問合せフォーム」といった文言を記載します。
ボタンの色を濃いめの色にすることで、リンクボタンらしく見えます。
続いて、Googleフォームへリンクの設定を行います。
▼Googleフォームへのリンク設定は、以下の手順で行います。
- 四角枠で作成したリンクボタンをクリックし、
- 右上のチェーンのような「リンクマーク」をクリック。
- リンクボタンにGoogleフォームのURLを入力する。
- 「完了」をクリック。
これでリンクボタンとGoogleフォームを連携させることができました。
リンクボタンでなくても、Canvaで作ったバナー画像を掲載しても良さそうです！
ホームページの表示を確認する
ある程度ホームページを編集したら、実際の画面表示も確認してみましょう。
編集画面右上の「プレビュー」というボタンをクリックします。
▼実際の画面表示を確認することができます。
パソコン画面での表示を確認したら、スマホ画面での表示も確認しておきましょう。
▼スマホ画面での表示を確認する際は、スマホのアイコンをクリックします。
ホームページの編集が完了し、プレビューでの表示確認が完了したら、続いては公開作業に入ります。
「プレビュー」はあくまで「パソコン・スマホ画面ではこんな感じで表示されますよ」という確認用の表示画面です。
ホームページを公開後、実際にパソコンやスマホで見た際に、レイアウトや文字のサイズなどが「プレビュー画面とは若干違う」ということが生じます。
ホームページの公開手順
公開作業もとても簡単です。
▼ホームページの公開作業は、以下のような流れで行います。
公開までの流れ
※クリックすると各操作方法の項目へジャンプすることができます。
公開設定を行う
まずは、編集画面右上に表示されている「Webサイトを公開」をクリックします。
すると、画面右側に「ウェブで公開」という設定画面が表示されます。
▼今回は無料のプラン内で公開するため、「無料のドメイン」を選択し、その他の設定は触らずに「続行」をクリックします。
サブドメインを選択
▼続いて「サブドメインを選択」という設定画面が表示されたら、任意のアルファベットを入力し、「続行」をクリック。
入力するアルファベットは、自分のホームページに関連する単語を入力することがおすすめです。
ちなみに、サブドメインは後で「設定」から変更することができます。
ドメイン・サブドメインとは？
ドメインとは、インターネット上での「ホームページの住所」のようなもの。
URL末尾の「.com」や「.jp」などの前に設定されるアルファベットの羅列を指します。
Canvaで無料公開するページの場合、URLは、https://●●●.my.canva.site/となり、ドメインは「my.canva.site」の部分になります。
今回、筆者は無料でホームページ公開を行なったためCanvaのドメインを借りて、https://torabi.my.canva.site/というURLで公開しました。
この場合、「torabi」の部分がカスタム可能な「サブドメイン」と呼ばれる箇所になります。
つまり、「サブドメインで公開する」ということは、「my.canva.site」という「Canva所有のドメインの一角を借りて公開する」ということです。
ちなみに、無料プランのCanva Freeでは、自分で契約した独自ドメインで公開することはできません。
有料のCanva Pro以上のプランより、独自ドメインで公開することが可能です。
自分で契約した独自ドメインでの公開をお考えの方は、以下のページを参考にしてください▼
CanvaのWebサイトの公開
独自のドメインを接続したウェブサイトの公開
Webサイトを公開するためのドメインの購入
＼ Canva Pro無料トライアルはこちら ／
設定の確認を行う
ドメインの設定が完了したら、「設定の確認」という設定画面が表示されます。
▼ここでは、ホームページのに関する情報などを設定していきます。
ホームページの設定について
- タイトル、ファビコンを設定する。
- 説明文を入力する。
- 「許可」に関しては必要に応じチェックを入れる。
- 「発行」をクリックする。
①のタイトルと②の説明文は、SEOにも関わる重要な箇所なので、ちゃんと設定しておきましょう！
ファビコンの設定について
ファビコンとは、ホームページを開いた際にタブに表示されるアイコンのことです。
ファビコンは、ホームページのオリジナリティを表現するような場所でもあるので、自分のホームページに合った画像を設定すると良いでしょう。
▼ファビコンは「設定の確認」を開いた際に、タイトルの編集を行う箇所から設定できます。
▼任意のファビコン用の画像を設定します。
ファビコンの設定など、設定が完了したらいよいよ公開です！
▼一番下の「発行」をクリックすると、「デザインを準備中」というポップアップが表示されます。
何も触らず、待機しましょう。
▼以下のように「Webサイトが公開されました」というポップが表示されたら公開完了です！
公開したホームページを確認する
公開したホームページは、一通り目を通すことをおすすめします。
実際に公開されたページで表示がおかしくなっていないか（レイアウト崩れを起こしていないか）などを確認しましょう。
編集画面と実際に公開されたページでは、微妙にレイアウトが違うことがあるためです。
▼「Webサイトを表示」という紫色のボタンをクリックすると、ホームページを表示することができます。
▼ちなみに、筆者のページも無事に公開することができたので、Canvaでのホームページ制作を検討中の方は、ぜひ参考にしてみてください。
▼公開直後に、編集を再開する場合は、画面右上に表示されている「デザインを編集」をクリックします。
ホームページの再編集が完了したら、公開中のページへ反映させる必要があります。
先ほどの公開作業と同じ手順で「Webサイトを公開」から反映作業を行いましょう。
実際に公開してみた感想
今回、Canvaでホームページを作成から公開するにあたり、「便利だと思った点」と「注意が必要だと思った点」についてまとめてみました。
普段「コーディング」と呼ばれる方法でホームページ編集を行なっているプロの目線から紹介します！
Canvaのホームページ作成機能に興味がある方は、ぜひ参考にしてみてください。
とにかく操作が簡単！
また、本来なら細かい設定が必要な箇所も自動で生成・設定してくれる！
もう少し詳しく説明すると↓
- とにかく簡単（操作感はCanvaで画像編集をする感じ）
- 公開作業も簡単な設定とボタンクリックの操作のみ
- グローバルメニューが自動生成
- 「ある程度」スマホ対応してくれる
実際に、Canva Webサイトを使ってみた結果、「とにかく簡単！」というのが１番の感想です。
しかし、簡単であるがゆえにデメリットが発生してしまうのも事実…。
特にスマホ表示に関しては、編集時に少し注意が必要のようです。
▼Canva Webサイトでの注意点は以下の通り。
簡単がゆえに、微調整や細かい設定が難しい。
微調整や細かい設定が難しいと感じた箇所がいくつかあったのですが、今回特に感じた「スマホ表示時」の注意点に関してまとめてみました。
解決策もちゃんとあるのでご安心ください！
筆者が作成したページで、テンプレートを利用せず、一から作った箇所がありました。
白枠を設置し、その中に文字を掲載したのですが、スマホ表示時にレイアウト崩れを起こしてしまいました…。
PC表示
上記のように、パソコン表示だと正常に表示されているように見える画面でも、スマホ表示では「枠から文字がはみ出てしまう」といったレイアウト崩れが発生してしまいました。
スマホ表示
しかし、Canvaのホームページ作成機能が「スマホ表示には対応していない」というわけではありません。
プレビュー画面左上の「モバイルでサイズを変更」という項目にチェックが入っていれば、スマホ画面での表示を自動設定してくれます。
テンプレートをそのまま使うことで、レイアウト崩れを防ぐことができます。
レイアウト崩れが心配な方は、使用しているテンプレートの「画像や文字を入れ替えるだけ」にしておくことがおすすめです。
ちなみに今回は、白枠の上下の余白を広げることで、レイアウト崩れは解消しました！
本当に無料で公開までできるの？
Canvaの公式ページでも「無料で簡単にホームページを作成できます」という案内がされているホームページ作成機能。
そうはいっても「途中で追加料金が発生したりしないの？」と思ってしまう人もいるのではないでしょうか？
実際に機能を使ってみて、分かったことを紹介します。
本当に追加料金は無し。無料で公開までできた！
今回、筆者が作成したページでは、テンプレートや素材なども全て無料のものを使用したため、編集から公開まで「0円」で行うことができました。
ホームページ内に使用しているイラストと画像はCanva以外の無料素材も使用していますが、Canva内の無料素材で十分事足りそうです。
▼無料で公開まで行うためには、注意点もあります。
・有料テンプレート・有料素材も存在するため、全てが無料というわけではない。
・独自ドメインでの公開など、無料の範囲内でできないこともある。
「このテンプレート使いたい！」と思い、選択しようと思ったら、有料のテンプレートで使えなかった…ということも多々ありました。
また、イラスト・写真に関しては「使いたい！」と思った、ほとんどの素材が有料でした。
そのため、外部サービスで取得した無料素材をアップロードして使用する必要がありました。
無料の画像を探し、Canvaへアップロードという手順を何度も行なったため、手間と時間がかかってしまったように感じます…。
Canva内の素材を全て使えるようになると作業が楽そうです。
また、独自ドメインでの公開ができないなど、やはり無料の範囲内では制限がかかってしまう場面もあります。
ちなみに、Canvaの有料プランである「Canva Pro」は、年払いで12,000円。
１ヶ月の利用料金は、1,000円です。（※年払いの場合）
今回筆者が、全て無料の範囲内でホームページを作成し、感じたことは、
「少し時間がかかった」
「やはり制限がある」
ということです。
「作業時間を短縮したい」「制限なしでのホームページ運用をしたい」ということを考えると、「Canva Proへ課金してもよさそう」と思いました。
気になった方は、Canva Pro の無料トライアルを試してみてください！
＼ 無料トライアルはこちら ／
まとめ：本当に「無料」で簡単
今回の記事では、最近追加された「Canva Webサイト」について紹介しました。
「見たまま操作」で簡単におしゃれな制作物を作成できるCanvaなら、ホームページも簡単に作成できることがわかりました。
ホームページを実際に作成・編集する際には、注意点もいくつかあるようです。
しかし、専門知識がなくてもホームページを作ることができるため、Canvaでの制作作業が好きな方には、ぜひ使ってみてほしい機能です。
また、無料で公開までできることも実証済みです！
本格的にホームページ作成に取り組みたい方には、Canva Pro でテンプレートと素材を使い倒すことがおすすめです！
＼ 無料トライアルはこちら ／
しかし、無料プランのままでも、Canvaでのホームページ作成は楽しい！ということも実証済みです。
ホームページ作成に興味がある方は、ぜひCanvaを使ったホームページ作成にチャレンジしてみてください。