Canvaでホームページを作成する手順を画像付きで分かりやすく解説|初心者でも1日でサイト作成~公開までできる完全ガイド

※本サイト・記事にはPRが含まれています
Canvaでホームページを作成する手順を画像付きで分かりやすく解説

「ホームページを作りたいけど、HTMLもCSSもわからない」

「パッと手軽に素敵なデザインのホームページを作る方法はないの?」

 

あります!

デザイン性の高いホームページを自力で簡単に作りたいのであれば、Canvaの利用をおすすめします。

Webの知識がなくても、デザイナー・コーダーのような専門職じゃなくても、Canvaを使えばあっという間に素敵なホームページを作ることができるのです!

  • Canvaならプロ品質のデザインを誰でも簡単に!
完全無料で利用できますが、Canvaのすごさを最大限に体感するためには、Pro版(有償版)を試してみることをオススメします。無料トライアルも可能ですよ。

 

高品質なテンプレートが複数用意されているので、あとは自分好みにカスタマイズするだけでOK!

完全オリジナルのホームページを外注することなく完成させられます。

 

本記事の手順に沿って進めていけば、初心者でも1日で自分だけのホームページを公開できますよ!

ぜひ最後までご覧ください!

あわせて読みたい

Canvaホームページを作成してみよう|豊富なテンプレートを使えば専門知識・スキルがなくてもOK

ホームページを作成するなんて、デザインもコーディングも分からない初心者には無理!!

そんな気がしますよね。ですが、そんな人にこそCanvaが最適なんです。

 

Canvaは「デザイン作成ツール」なので、ホームページのデザインテンプレートもおしゃれで高品質。ホームページの美しい見た目は、訪問したユーザーの信頼感や安心感に直結します。

そして、各テンプレートは既にコーディングがなされているため、テンプレートを利用すれば、HTMLやCSSなどの専門知識・スキルがなくても大丈夫なのです!

自分でコードを書いたり読んだりする必要もありません。

 

つまり、初心者がゼロからデザインやHTML/CSSを調べてホームページを作成するよりも、Canvaを利用した方が美しく高品質なホームページができるというわけです。

 

高いお金を払ってプロに頼んだり、時間を使って自力でゼロから作成したりする前に、ぜひCanvaを試してみてください。

  • 1億点以上のイラスト・画像が使い放題
  • 他人とのシェアやSNS連携も簡単にできる
  • 背景削除やリサイズもワンクリック
無料期間に解約すれば費用はかからないので安心です

 

ホームページを作りたい場合、Canva Pro(Canvaの有料版)へ登録していただく必要がありますが、【無料トライアル】を利用すれば30日間無料で有料機能を使い放題です。有料版はいつでも解除できるため、まずはトライアル登録してみましょう。

あわせて読みたい

Canvaでホームページを作る方法を画像付きで徹底解説

ここからは、実際にCanvaでホームページを作成する手順について、ひとつひとつ画像を用いて説明していきます。

手順に沿って手を動かしていただくだけで、簡単にホームページができあがることを体感してもらえるはずです!

手順1:使いたいテンプレートを選ぶ

Canvaのホーム画面にある検索バーに【ウェブサイト】と入力します。

 

ウェブサイトのテンプレートが複数表示されますので、

左側のサイドバーで、お好みの【スタイル】や【テーマ】でフィルタをかけましょう。

Canvaのテンプレートはどれも高品質なので、フィルタで絞らないとテンプレート選びでかなり時間を使ってしまいます…!

 

フィルタで絞られた候補の中から、希望のテンプレートをクリックして選択してください。

【このテンプレートをカスタマイズする】をクリックすると、テンプレートの編集画面が表示されます。

 

手順2:文字と画像を変更

文字(文章)と画像を希望のものに変更しましょう。

画像はCanvaに元々ある素材も利用できますし、ご自身でアップロードしたものを使うこともできます。

Canvaには1億点以上の素材が準備されているので、ご自身で用意せずとも多様なニーズに応えられるはずです!

  • 1億点以上のイラスト・画像が使い放題
  • 他人とのシェアやSNS連携も簡単にできる
  • 背景削除やリサイズもワンクリック
無料期間に解約すれば費用はかからないので安心です

 

画像を変更する場合

テンプレートの画像を変更する場合、

①画像をクリックして選択されている状態(紫色の枠)で、

②希望の画像をドラッグする

これだけでOKです。

 

新しい画像に瞬時に上書きされます。

 

自分で撮った画像を使いたい場合は、左側メニューから【アップロード】を選択し、画像または動画をアップロードしてください。

 

アップロードが完了したら、あとは同じようにドラッグするだけで設定できます。

文字を変更する場合

文字を変更する場合は、文字をクリックした後、希望の文字を入力するだけです。文字数が多いと枠に収まらないので、サイズや文字数を調整してみてください。

文字と画像を削除する場合

テンプレートの削除したい文字や画像をクリックして選択すると、ゴミ箱マークが表示されます。

 

ゴミ箱マークをクリックして、【画像を削除】を選択すると削除完了です。

 

文字も画像と同じ方法で削除できるので試してみてください。

手順3:ボタンの追加

ボタンを工夫することで、特定のアクションを起こす確率を上げることができます。特定のアクションとは、「予約する」「購入する」「資料請求する」などを指します。

専門用語では、CTA(Click to Action)と呼びます。行動を促すためのボタン、ということですね。

 

テンプレートにあるボタンを変更して、ユーザーのクリックを促しましょう。

 

まずは左側のメニューから【素材】をクリックし、検索窓に【ボタン】と入力します。

 

気に入ったボタンをドラッグするだけでボタンの配置は完了です。

 

左側のメニューから【文章】を選択し、【予約する】と入力します。

 

次にボタンをクリックした時に遷移するページの設定をします。

 

ボタンが選択されている状態で、右上【リンク】をクリックしてください。予約ページのURLを入力すれば、ボタンのリンクは完了です!

手順4:お問い合わせフォームをリンク

残念ながら、Canvaのテンプレートにはお問い合わせフォームが実装されていません

無料の外部サイトをリンクして、お問い合わせにも対応可能なウェブサイトを作りましょう。

 

ここでは「formrun(フォームラン)」というサイトを使用します。

 

まずは、【3:ボタンの追加】項目の手順と同じように、ボタンと文字(お問い合わせ)を入力します。

 

次に、「formrun(フォームラン)」で作ったお問い合わせフォームのURLをリンク先に指定します。

 

お問い合わせボタンが選択されている状態で、右上【リンク】をクリックして、「formrun(フォームラン)」で作ったお問い合わせフォームのURLを入力すれば完成です!

手順5:YouTubeや各種SNSの埋め込み 

CanvaではYouTubeや各種SNSとの連携も簡単にできます。

 

左側のメニューから【アプリ】をクリックして、YouTubeやInstagramなどを選択して連携します。

 

例えば、YouTubeを選択すると、連携したい動画を検索できる画面が表示されます。

 

また、Instagramを選択した場合、連携するアカウントを指定するよう促されます。

アカウントを指定することで連携することができます!

 

使いたい用途に合わせてYouTubeやSNSと連携してみてください。

手順6:プレビューして公開

公開前の注意事項が2点あります。

 

  1. ファイル名を変更
  2. プレビュー確認

 

ファイル名は、上部中央をクリックすると変更できます。ウェブサイトの名前として使用されるので、慎重に名前を決めましょう。

 

名前が設定できたら必ず公開前に、右上【プレビュー】をクリックして全体的なデザインのチェックをしてくださいね。

Canvaで作ったウェブサイトの「ドメイン」はどうなる?|無料(Canvaのサブドメイン)と独自ドメインを選択可能

ウェブサイトを公開する際に、ドメインを選択する必要があります。

ドメインとは、ウェブサイトの住所のことです。有名なものに、「.com」「.jp」などがあります。

 

 

Canvaでは、以下の3つの選択肢があります。

 

  • 無料ドメイン
  • 新しいドメインを購入する
  • 既存のドメインを使用する

 

Canvaのサブドメインを利用すれば、無料でドメインが利用できます

以下のように、canvaのドメインの派生版のようなURLを使うことができ、●●●部分を自分の好きな文字列に設定できます

https://●●●.my.canva.site

通常、ドメインを使用する場合はお金がかかるのですが、Canvaのサブドメインを使用する場合は無料で済みます。

 

もし、新しいドメインが欲しい場合は、ドメイン代を支払えば使用可能です。また、すでに作ってあるドメインを使用することもできます。状況に合わせてお好みのものを選択して、ウェブサイトを公開してください。

 

現時点で新しいドメインや既存ドメインがない方は、Canvaの無料トライアルで始めるのをおすすめします。

  • 1億点以上のイラスト・画像が使い放題
  • 他人とのシェアやSNS連携も簡単にできる
  • 背景削除やリサイズもワンクリック
無料期間に解約すれば費用はかからないので安心です

 

あわせて読みたい

まとめ

Canvaプロのウェブサイトテンプレートを使用すれば、初心者でも簡単にウェブサイトが作れることが分かりました。

 

高品質なテンプレートがあるので、ウェブサイト全体のデザインもまとまっていて素敵ですよね。

 

WordPressやWixなどよりも操作が簡単で分かりやすいので、無料でウェブサイトを作ってみたい方はぜひチャレンジしてみてくださいね!

 

  • Canvaならプロ品質のデザインを誰でも簡単に!
完全無料で利用できますが、Canvaのすごさを最大限に体感するためには、Pro版(有償版)を試してみることをオススメします。無料トライアルも可能ですよ。

 

  • 1億点以上のイラスト・画像が使い放題
  • 他人とのシェアやSNS連携も簡単にできる
  • 背景削除やリサイズもワンクリック
無料期間に解約すれば費用はかからないので安心です

 

あわせて読みたい
当サイトは第三者配信の広告サービス(Googleアドセンス、A8.net、もしもアフィリエイト、Linksahre、バリューコマース、afb、レントラックス、Amazonアソシエイト、楽天アフィリエイト、Adobe アフィリエイト、Wix アフィリエイト、Coursera Affiliate Program)を利用し、紹介料などの収益を得ています。収益はサイト閲覧体験の改善費用やより有益な情報提供のための取材費用に使用されます。
  • この記事を書いた人

dice

Adobe製品のお得な買い方、スキルアップのためのオンライン学習プラットフォーム情報、デジタルマーケティングの基礎知識など、大人の学びに役立つ情報を発信していきます。コストパフォーマンス高いスキルアップ・リスキリングのお供に。

人気記事

デジハリでAdobeCCを安く購入する方法 1

デザインや動画編集などのクリエイティブな作業に必要不可欠なAdobe Creative Cloud (以下、AdobeCCと略します)を契約すると、IllustratorやPhotoshopなど複数の ...

Courseraの認定証・修了証明書に意味はある?転職・就活に役立つ?メリットやオススメ講座を解説 2

世界最高峰の企業や大学が講座を提供していることで知られている「Coursera(コーセラ)」。 専門講座やプロフェッショナル認定を受講すると、就職・転職に効力を発揮する修了証明書や認定証を取得すること ...

複数のノートパソコンがデスクの上にある 3

リモートワークが一般的になってきて、会社以外の場所で仕事を行うことが増えた人も多いのではないでしょうか。 会社や自宅のパソコンで契約しているAdobeのライセンスを、その他のデバイス(パソコンやタブレ ...

AdobeXDのスタータープランは無くなった?誤報です!正攻法でダウンロードする方法を解説 4

Adobe XD の無料版が使えなくなる? そんな噂を聞きつけて慌てて検索している方に朗報です。Adobe XD はまだまだ無料で使い続けられます! とはいえ、従来のように無料で使い続けることができな ...

コーセラ(Coursera)とは?特徴や料金、登録方法までわかりやすく解説 修正 5

世界の有名大学の教員による授業や有名企業のスタッフによる講座をオンラインで受講できるサービスとして、社会人や大学生に注目されているMOOCs(ムークス)。   その中でも圧倒的規模を誇る、教育プラット ...

-Canva, Webデザイン
-