今回は、Canvaで作るHP作成の最新アップデートについてご紹介していきます。
新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、
デザインを学びたい方に向けて、
・イラストレーターの基本操作、デザインの基礎知識、ロゴデザイン、ショップカード、名刺、YouTubeサムネイルの作成⽅法、印刷会社への⼊稿⽅法まで教えるAdobe Illustrator(イラストレーター)講座
・世界で26番目、日本初のオンラインデザインツールCanva公認のアンバサダー(Canva Expert)のmikimikiが教えるCanva Webデザイン講座
などのさまざまな講座をご用意しております。
今後デザインやマーケティングの知識を身につけてお仕事にしていきたい方はオンラインクリエイティブスクールRirian School.をチェックしてみてください
\ Canva Global公認日本初Canva Expertが教える/
CanvaのHP作成方法
![](https://mikimiki1021.com/wp-content/uploads/2022/03/6-1024x576.jpg)
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive01-1024x553.jpeg)
HPを作るときは、「テンプレート」から「ホームページ」を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive02-1024x551.jpeg)
テンプレートは赤枠のものを使用していきます。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive03-1024x558.jpeg)
「このテンプレートをカスタマイズ」
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive04-1024x575.jpeg)
まずはタイトルを変更します。
タイトル変更は忘れやすいので、最初にやってしまいましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive05-1024x571.jpeg)
テンプレートは6ページあります。
写真を差し替えるときは、挿入されてる写真を選択。
テンプレートは赤枠のものを使用していきます。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive06-1024x556.jpeg)
画面左「素材」
↓
任意の写真を入れましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive07-1024x555.jpeg)
文字も選択して、フォント・カラーを変更します。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive08-1024x556.jpeg)
次のページを変更する場合は画面下からページを選択
真ん中矢印をクリックしてみます。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive09-1024x554.jpeg)
全体のデザインを把握することができます。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive10-1024x554.jpeg)
「ページを追加」でページを増やす事もできます。
必要ないときは、「ゴミ箱」アイコンで削除
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive11-1024x557.jpeg)
新しくデザインを追加するときは画面左「テンプレート」
デザインは、他のテンプレートからも引っ張ってくることができます。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive12-1024x567.jpeg)
他のテンプレートで使いたいデザインがあれば、追加してカラーやフォントを統一しましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/03/mikimikiさん_先生風_上半身.png)
HPの作成方法についてはこちらの記事で詳しく解説しています!
>>>【初心者向け】Canvaを使ったホームページの作り方を簡単解説!
新機能:レスポンシブ対応
![](https://mikimiki1021.com/wp-content/uploads/2022/03/7-1024x576.jpg)
以前はCanvaで作ったHPはレスポンシブ対応がされていなくて、タブレットやスマホで閲覧すると見づらいデザインになっていました。
これが、今回アップデートされたことによってタブレットやスマホでも見やすいデザインになったので見ていきましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive13-1024x561.jpeg)
プレビュー画面で「小型デバイスに合わせてサイズを変更」にチェックを入れておきます。
PCで見たときは
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive14-1024x559.jpeg)
タブレット
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive15-1024x819.jpeg)
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive15-1024x819.jpeg)
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive15-1024x819.jpeg)
スマホ
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive16-714x1024.jpeg)
このようにレスポンシブされるようになりました。
次に、オリジナルで作ったページはしっかりレスポンシブされているか見ていきます。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive17-1024x556.jpeg)
赤枠の部分は、横並びに写真を配置して文字も挿入しています。
この場合、PCだと
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive18-1024x597.jpeg)
スマホ
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive19-725x1024.jpeg)
このようにしっかりレスポンシブされていました。
CanvaのAIが自動で配置を認識して対応してくれています。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive20-1024x574.jpeg)
デザインの確認が終わったら「ウェブサイトとして発行」をクリック
Canvaで使える機能を増やしたいときは、CanvaProがおすすめです。
CanvaProに登録をすると、背景透過だけでなく、使えるテンプレートやフォントが増え、デザインの幅が大きく広がります。
CanvaProは通常30日間のお試し期間がありますが、以下のリンクから登録すると45日間お試しできるので、気になる方は
使ってみてくださいね♪
新機能:ドメイン設定
![](https://mikimiki1021.com/wp-content/uploads/2022/03/8-1024x576.jpg)
今回のアップデートでドメイン設定もできるようになりました。
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive21-1024x552.jpeg)
ドメインは3つから選ぶことができます。
- 無料のドメイン
- Canvaで新しいドメインを取得
- 既存のドメインを使用する
無料のドメイン
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive22-1024x559.jpeg)
無料のドメインを選択
↓
サブドメインを選択
↓
設定して続行
↓
URLの一部を変更
↓
サイトの説明を入力
サイトの説明を入れることでSEO効果が変わります。
サイトがどんなサイトなのか160文字以内で入力しましょう。
「パスワード保護を有効にする」をチェックすると、パスワードを知っている人しか公開できない設定になります。
新しいドメインを取得
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive23-1024x554.jpeg)
使いたいドメインを検索
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive24-1024x555.jpeg)
希望のドメインを選択してください。
有料で使用することができます。
既存のドメインを使用する
![](https://mikimiki1021.com/wp-content/uploads/2022/02/canva-responsive25-1024x555.jpeg)
持っているドメインの使用もできます。
![](https://mikimiki1021.com/wp-content/uploads/2022/03/mikimikiさん_先生風_上半身.png)
動画編集にも挑戦してみよう!
以下の記事で編集方法が学べます♪
まとめ
今回は、CanvaでHP作成の新機能についてご紹介しました。
クオリティの高いサイトを無料で作ることができるので、Canvaを使ってご自身のサイトを作ってみてください。
![](https://mikimiki1021.com/wp-content/uploads/2022/03/mikimikiさん_先生風_上半身.png)
解説動画:【2022年最新版】Canvaで作るホームページがレスポンシブ対応になった!
新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、
デザインを学びたい方に向けて、
・イラストレーターの基本操作、デザインの基礎知識、ロゴデザイン、ショップカード、名刺、YouTubeサムネイルの作成⽅法、印刷会社への⼊稿⽅法まで教えるAdobe Illustrator(イラストレーター)講座
・世界で26番目、日本初のオンラインデザインツールCanva公認のアンバサダー(Canva Expert)のmikimikiが教えるCanva Webデザイン講座
などのさまざまな講座をご用意しております。
今後デザインやマーケティングの知識を身につけてお仕事にしていきたい方はオンラインクリエイティブスクールRirian School.をチェックしてみてください