【初心者向け】Canvaを使ったホームページの作り方を簡単解説!

CanvaはWebデザインの知識がなくても
簡単にクオリティの高いデザインが作れるツールです。

ソフトのインストールが不要な上に、
無料で使うことが可能です。

Web制作の知識がなくても
Canvaのホームページ作成機能で
簡単にポートフォリオ型のホームページを作ることが出来ます。

今回は1ページ式のシンプルなホームページを
一緒に手を動かしながら作っていきましょう。

新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、

Canvaを使ったデザインをマスターしたい方
Canvaを使ったお仕事をしたい方
Canvaで収益化をしたい方に向けて

世界で26番目、日本初のオンラインデザインツールCanva公認アンバサダー(Canva Expertのmikimikiが教えるCanva Webデザイン講座をご用意しています。

今後さらに重要度が増してくる、オンラインデザインツールCanvaを使った新しいクリエイティブな働き方を目指したい方はCanva講座をチェックしてみてください。

\ Canva Global公認日本初Canva Expertが教える/

本記事の信頼性(日本初のCanva Expert)

私mikimikiは日本初、世界で26番目のCanva Global公認のアンバサダー(Canva Expert)として活動しています。

Canva Expertはトライアル段階のベータ版やリリース前の機能の情報にいち早くアクセスすることができるので、最新のCanva情報を皆さんにどこよりも早く、正確にお届けすることが可能です。

またCanvaの最新情報は登録者9万人以上のYouTubeチャンネル「mikimiki webスクール」で発信していますので、そちらもチェックしてみください。

Canvaは無料でスタートすることが出来ますがCanva Proだとデザインの幅が広がります。ホームページを作る際もCanva Proの方が圧倒的に便利です。

Canva Proは、通常30日間無料でトライアルすることが出来ますがこちらのリンクから登録すると45日間無料でお試しが可能です。
(Canvaに登録済みでもOK)

>>>Canva Proの45日間無料クーポンはこちらをチェック

1.レッスンスタート

ホーム画面 → テンプレート →ビジネス →ホームページの手順で
様々な形のテンプレートが出てきます。

今回は「グレー ホームファニチャーと装飾 オンラインストア ウェブサイト」
というテンプレートを選びます。

「このテンプレートをカスタマイズ」をクリックして
編集画面でページを編集するだけなので
かなり簡単にWebサイトを作ることが出来ます。

2.文字の編集

まずは文字を変更していきましょう。

「古谷の家具」と「手作り家具と装飾」が
セットになっている状態です。

この状態でクリックすると文字を編集出来ます。

文字同士がグループになっているため
くっついていて見辛いかもしれません。

そのような場合は
右クリック → グループ解除することで
見やすくなる上に
文字をそれぞれ編集することが出来ます。

「古谷の家具」の部分に
自分のショップ名を入れてみましょう。

英語で編集すると全部が大文字になってしまう場合は、
テキスト → 本文を追加をクリックすることで
文字を小文字で入力し直せます。

色を変更したい場合は
文字を選択した状態でAをクリックします。

Canva Proだと自分の好きな色をあらかじめ登録出来るので
色を統一したい場合に便利です。

フォントを変更したい場合は
「フォント」のプルダウンから選択します。

これで1ページ目の完成です。

3.写真の編集

2ページ目の写真を変更してみましょう。

写真 → 検索で様々な写真が出てきます。

王冠マークがついている写真は
Canva Proユーザー限定の写真となります。

写真を編集画面にドラッグするだけで
簡単に変更出来ます。

次はメッセージ文の編集です。

右クリック → グループ解除をクリックしてから
あいさつ文を入れましょう。

ラインなど掴みにくい部分は
上下左右のカーソルを押すと
簡単に移動出来ます。

文字が小さくて見辛い場合は
編集画面の下部にあるスライダーを動かしてみましょう。

文字が詰まっている場合は「スペース」をクリックして
行間間隔を広げます。

4.モックアップの作り方

今までに作ったサイトをモックアップとして掲載してみましょう。

まずはサイトの画面のスクリーンショットをCanvaにアップロード後に
編集画面に貼り付けます。

エフェクト → Smartmockups →すべて表示をクリック後に
コンピューターのLaptop15を選択します。

するとサイトの画面のスクリーンショットがPCの画面に挿入されて
モックアップ完成です。

同じフォーマットでページを増やしたい場合は「ページを複製」をクリックします。

Canvaで作ったデザインをビジネス利用できるか気になりますよね?その疑問はこちらの記事で解消できます。

>>>【最新機能紹介】Canva 商用利用や著作権ってどうしたらいいの?

5.お問い合わせフォームへリンク

Canvaでお問い合わせフォームを作ることは不可能なので
外部サイトにリンクします。

無料のお問い合わせフォーム作成サービスの中でも
私のおすすめは「form run」です。

form runで作ったお問い合わせフォームのURLにリンクしてみましょう。

①Canvaの編集画面に「お問い合わせはこちら」の文字を配置

②素材 → 線と図形 → 四角を選択 → 長さや色を調節 →ボタンを配置

③ボタンに「Contact」の文字を配置

④form runのお問い合わせフォームのURLをコピー

⑤Canvaの編集画面に戻ります。

もっと見る → リンク → お問い合わせフォームのURLをペースト → 適用

これで「Contact」の文字の下部に線がついて
お問い合わせフォームへのリンク完成です。

これで全てのページが完成しました。

最後に編集画面の上部にある
ページ名の入力欄に
Webサイトのタイトルを入力しておきましょう。

また、ページごとにそれぞれタイトルを設定することも可能です。

6.Webサイトとして公開

①編集画面の右上にある「ウェブサイトとして公開」をクリック

②Webスタイルを「プレゼンテーション」から「スクロール」に変更

③「ウェブサイトを開く」をクリック

これでWebサイトとして公開することが出来ました。

今回作ったWebサイトのURLを
プロフィールリンクに貼ると自分のポートフォリオサイトとしてリンク出来ます。

10~15分で簡単にWebサイトを作れるところが
Canvaのホームページ作成機能の魅力です。
ぜひ皆さんもCanvaでポートフォリオサイトを作ってみて下さい。

またWebサイトのアクセスやエンゲージメントを分析するためのインサイト機能もCanvaには備わっているのですが、
残念ながらCanva Pro(Canvaの有料版)にしないと使用することができません。
Webサイトを運用するためにインサイトの分析は必須だと思います。

このブログの以下のリンクのクーポンを使えば45日間無料でお試しが可能です♪

>>>Canva Proの45日間無料クーポンはこちらをチェック



CanvaでのクリエイティブやWebデザインをマスターして、Canvaをお仕事にしたい方も多くいるのではないでしょうか?

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!
▶︎0から始めるCanva Webデザイン講座

\ Canva Global公認日本初Canva Expertが教える/

最後にCanvaでホームページを作るポイントをまとめておきました。

Canvaで簡単にHPを作る手順は?

好みのテンプレートを選んで、文字・画像の編集をするだけでオシャレで簡単なホームページをCanvaで作成することができます。

CanvaのHP作成では、お問い合わせフォームは作れる?

お問い合わせフォームは作ることができません。他のツールを使う必要があります。

解説動画:【初心者向け】Canvaを使ったホームページの作り方を簡単解説!

よかったらシェアしてね!

この記事を書いた人