Canva Lesson 7 – Canvaを使って素早くウェブサイトを作成する方法

アツマツ
canva-website-creation-guide-for-beginners thumbnail

皆さん、こんにちは!小松です。

ビジネスや個人ブランディングにおいて、ウェブサイトは不可欠な存在となっています。しかし、「ウェブデザインは難しそう」「コーディングは無理」と二の足を踏んでいる方も多いのではないでしょうか?

Canvaは、プロ級のグラフィックデザインを簡単に作成できるオンラインツールとして知られていますが、ウェブサイト制作の分野でも革新を起こしています。プログラミングの知識もデザインスキルも必要なく、それでも美しく機能的なワンページウェブサイトが作成できるのです。

今日は、Canvaを使って魅力的なワンページウェブサイトを作成する方法を、ステップバイステップでご紹介します。

1. ウェブサイトのデザイン要件を決める

ウェブサイト制作の第一歩は、明確な目的と方向性を定めることです。以下の2つの質問に答えることで、あなたのウェブサイトの骨格が見えてきます

質問1 ウェブサイトの主な目的は何ですか?
個人の作品やスキルのショーケース
商品やサービスの紹介
特定の情報の提供
イベントの告知や参加者募集 など
質問2 訪問者にどのようなアクションを取ってほしいですか?
商品の購入
サービスの予約
ニュースレターの登録
お問い合わせ など

これらの質問に答えることで、ウェブサイトの構造や必要な要素が明確になります。次のステップでテンプレートを選ぶ際の重要な指針となりますので、しっかりと考えましょう。

2. テンプレートの選択または自作テンプレートの作成

Canvaにログインし、トップページの「webサイト」ボタンをクリックするか、「テンプレート」ボタンをクリックします。

「webサイト」ボタンをクリックすると、空白の新規キャンバスが作成されます。ここからWebサイト制作が始まります。

空白のキャンバス上に一からデザインを作成しても良いですが、Canvaの最大のメリットを活かすために、テンプレートを利用することをおすすめします。

Canvaにはプロのデザイナーが仕上げた素敵なテンプレートが多数揃っています。以下のポイントに注意してテンプレートを選びましょう。

テンプレートを検索:デザインツールの検索バーにキーワードを入力して関連テンプレートを探せます。
デザイン手法別:テンプレートを利用するだけでなく、プリセットされたレイアウトとスタイルでゼロからデザインを仕上げることもできます。
目的別絞り込み:ホームページ、ビジネス、ランディングページなど、目的別にテンプレートを絞り込めます。
王冠マーク付き:テンプレートに王冠マークがあるものはPROユーザーのみ利用可能です。フリーユーザーは王冠マークのあるテンプレートを避けましょう。

適切なテンプレートが見つからない場合は、白紙の状態から始めることも可能です。

本レッスンではフリーユーザーを考慮し、空白のキャンバスからウェブサイトの作り方を紹介します。

次のステップに入る前に、まずWebサイトの名前を決めましょう。今回作るのはウェディングサイトなので、「ウェディングウェブサイト」と名付けます。

3. ウェブサイトデザイン要素の編集

一般的なワンページウェブサイトは、以下の5つのセクションで構成されることが多いです。

1. ホーム(ヒーローセクション)
2. About Us(私たちについて)
3. サービス紹介
4. 料金案内
5. お問い合わせ

それでは、各セクションの作成方法を詳しく見ていきましょう。

3.1 ホームページ(ヒーローセクション)の作成

ヒーローセクションは、訪問者が最初に目にする部分です。強烈な第一印象を与えることが重要です。

3.1.1 デザイン素材の追加
Step 1:左側のメニューから「素材」をクリックする
Step 2:素材中の図形から四角素材を選び、キャンバスに追加する
Step 3:追加した四角素材を幅と高さを調整し、上部位置に配置する
Step 4:最後、図形素材の色を変更する

ヒント: コントラストの高い色を選ぶと、テキストが読みやすくなります。

3.1.2 画像素材の追加
Step 1:左側のメニューから「素材」をクリックする
Step 2:検索バーに関連するキーワード(例:「ウェディング」)を入力
Step 3:素材タイプから写真を選ぶ
Step 4:キーワードで絞られた写真一覧から使いたいと思う画像をクリックしてキャンバス上に追加する
Step 5:サイズと位置を調整
3.1.3 ページタイトルとサブタイトルの追加
Step 1:左側のメニューから「テキスト」をクリックする
Step 2:「見出し」と「小見出し」をクリックし、キャンバス上に追加とボックス内テキスト内容を編集
Step 3:フォント、サイズ、色、エフェクトなどをさらにカスタマイズ

重要:フォントの選択は、ウェブサイトの印象を大きく左右します。ブランドイメージに合ったフォントを選びましょう。

3.1.4 ロゴの追加
Step 1:左側のメニューから「素材」をクリックする
Step 2:検索バーで「ロゴ ウェディング」と検索する
Step 3:グラフィック調のロゴを選んでキャンバスに追加する
Step 4:サイズ、位置、色を調整する
Step 5:必要に応じて、ロゴの横にサブタイトルを追加

ヒント: オリジナルのロゴがある場合は、「アップロード」機能を使って追加できます。

3.2 About Us(私たちについて)ページの作成

Aboutページはどのサイトでもよく見られるページの一つです。Aboutページを作成するため、新しい空白ページを追加します。

ページの下に「ページを追加」ボタンをクリックすると新しい空白ページを作ることができます。

3.2.1 コンテンツの追加
Step 1:ホームページの上部デザインを複製し、Aboutページに貼り付ける
Step 2:「見出し」テキストボックスを追加し、「About Us」などのタイトルを入力
Step 3:「本文」テキストボックスを追加し、紹介文章を作成する
Step 4:ウェディングに関連する画像素材を追加
Step 5:レイアウトを調整し、完成

プロのテクニック:文章は簡潔に。箇条書きを使うと読みやすくなります。

3.3 サービス紹介ページ

サービス紹介ページは、お客様にどのようなサービスを提供しているかをお伝えするページです。

サービスページでは、より素早くレイアウトを作成するために、Canvaが提供するレイアウト機能を使用します。

Step 1:左側のメニューから「デザイン」をクリック
Step 2:「レイアウト」ボタンをクリック
Step 3:レイアウト一覧から好みのレイアウトをクリック
Step 4:プリセットされたレイアウトがキャンバス上に追加される

レイアウトを使うと素早く画面のレイアウトを決めることができます。それでは、レイアウトをカスタマイズしていきましょう!

3.4 料金案内ページ

サービスページの続きとなるのがプラン料金紹介ページとなります。料金照会ページはサービスページをコピーしてカスタマイズします。

現在表示ページの下にあるページ一覧からコピーしたいページをクリックし、右上の三点ボタンをクリックするとページ設定メニューが表示されます。メニュー一覧から「1ページを複製」をクリックすると、そのページが複製されます。

それでは料金案内ページをカスタマイズします。

ページ名を変更する
写真を削除し、下のサービス名と説明欄を再利用する
既存の説明欄に料金費用と含まれるサービス内容を記入する

3.5 お問い合わせページ

最後となるのはお問合せページです。お問合せページでは正確な連絡方法をお伝えしなければいけません。お問合せページの制作流れは以下の通りです。

Step 1:ページ上部デザインをコピペして統一感を出す
Step 2:ページ名をContact Usに設定
Step 3:素材からお問合せページに使えそうな画像を選び、サイズと配置を行う
Step 4:お問合せ先情報をテキストボックスで記入する
Step 4:素材からボタンを選び、文字入力後、問い合わせフォーム向けのURLを設置する

以上、ワンページサイトの作成は完了となります。

サイトのデザイン完了後、次のステップは公開となります。ですが、公開前に行わなければいけない作業が三つあります。

1. 各ページの名前を設定する
2. メニュー設置とプレビュー確認
3. 公開設定

4. プレビューとページの調整

ページデザインが完成したら、早速どのように表示されるか確認する必要があります。

4.1 ページのプレビュー

画面、右上のプレビューボタンをクリックするとウェブサイトのプレビュー画面が表示されます。

プレビュー画面ではデスクトップとモバイルのビューを切り替えながら確認することができます。

また、ナビゲーションメニューを含めるを選択すると、ナビゲーションメニューがページの最上部に表示されます。

4.2 ナビゲーションメニューの設定

ナビゲーションメニューを表示させるには各ページにナビゲーション用ネームを設定する必要があります。

ネームの設定方法は以下の通りです。

下にあるページ一覧から名前を変更したいページをクリックし、右上の三点ボタンをクリックするとページ設定メニューが表示されます。メニュー一覧の最上部にある「1ページの名前を変更」をクリックすると、テキスト入力ができるので、ネームを入力後Enterを押すとネームの設定が完了します。

ネーム名は短く、わかりやすいものにしましょう。(例えばHome、About、Planなど)

ネーム設定後、再度プレビュー画面を見ると、設定したネーム通りにナビゲーションメニューが自動生成されました。

プレビュー画面で必ずモバイルデバイスでの表示内容を確認しましょう。

5. ウェブサイトの公開

いよいよウェブサイトの公開ステップまでたどり着きました。公開まであと一歩です。

ウェブサイトを公開するには、右上の「webサイトを公開」ボタンを押します。

次にサイト公開前の設定を行います。初めて見る方には何のことかと思うかもしれませんが、一つ一つ説明します。

モバイルでサイズ変更:デスクトップでデザインした内容をモバイルデバイスに合わせてサイズをレスポンシブに変更する項目です。必ずチェックを入れましょう。
ナビゲーションメニューを含める:各ページのネームを設定したら、ナビゲーションメニューを必ず表示しましょう。ユーザーの利用体験が向上します。
WebサイトURL:Canvaを利用してサイトを公開する際には、サブドメイン形式での公開となります。つまり、メインドメインは「.my.canva.site」で、ユーザーはメインドメインの前にサブドメイン用のサイト名を設定します。サイト用途に合わせて設定しましょう。
カスタムドメイン:カスタムドメインは、自分が購入して所持しているドメインを利用できる設定項目です。ただし、この項目を利用するにはProユーザーになる必要があります。
公開設定:ウェブサイトの公開前にサイト説明やパスワードの設定、検索エンジン表示の有効化、リンクプレビューを無効にするかなどを設定する項目です。

公開設定については以下の画像を参考にしてください。

ウェブサイトの説明:サイトの紹介文章を入力します。
パスワード保護:一般公開ではなく限定公開の場合、パスワード設定ができます。限定公開の場合、検索結果には表示されません。
検索エンジンでの表示:有効にすると検索エンジンに収録され、検索結果に表示されます。
リンクのプレビュー:有効にすると、SNSに共有時にプレビュー表示が可能になります。

どのような公開方法を取るかはサイトの公開目的によります。ユーザー個々の判断に委ねられます。

設定が終わったらサイトを公開します。「Webサイトを公開」ボタンを押すとサイトが公開されます。

公開後のサイトはブラウザで確認できます。

6. まとめ

Canvaを使用したウェブサイト制作の魅力は、その簡便さと柔軟性にあります。プログラミングやデザインの専門知識がなくても、プロフェッショナルな外観のウェブサイトを短時間で作成できることが大きな利点です。

しかし、ツールの使いやすさに頼りすぎないことも重要です。以下のポイントを心に留めておきましょう

1. 明確な目的: ウェブサイトの目的を常に意識し、それに沿ったデザインと内容を心がけましょう。
2. ユーザー体験: 見た目だけでなく、ナビゲーションの使いやすさや情報の見つけやすさにも注意を払いましょう。
3. 一貫性: 色使い、フォント、画像スタイルなど、サイト全体で一貫性を保つことが重要です。
4. モバイル対応: スマートフォンでの表示を必ず確認し、必要に応じて調整しましょう。
5. SEO対策: 適切なキーワードの使用や、メタデータの設定を忘れずに。
6. 定期的な更新: 公開後も、内容を定期的に更新し、新鮮さを保つことが大切です。
7. フィードバックの活用: 訪問者やクライアントからのフィードバックを積極的に取り入れ、継続的に改善しましょう。

Canvaは確かに優れたツールですが、最終的にウェブサイトの質を決めるのは、制作者のビジョンとクリエイティビティです。テクノロジーの進化により、ウェブデザインの敷居は大きく下がりました。この機会に、あなたのアイデアや情報を世界に向けて発信してみてはいかがでしょうか。

ウェブサイト制作の旅は、技術的なスキルを磨くだけでなく、自己表現や効果的なコミュニケーションを学ぶ素晴らしい機会にもなります。Canvaを使いこなし、あなたならではの魅力的なウェブプレゼンスを築いていってください。

関連記事
chatgpt-canva-sns-content-creation-guide-thumbnail
初心者でも簡単! ChatGPTとCanvaを使ったSNS投稿の作り方
create-professional-social-media-posts-with-canva thumbnail
Canva Lesson 4 - Canvaで魅せる!ソーシャルメディア投稿のカスタマイズ術
canva-text-editing-tips-for-beginners  thumbnail
Canva Lesson 5 - 誰でも使えるテキスト機能の魅力を徹底解説!
canva-guide-image-editing-effects thumbnail
Canva Lesson 6 - Canvaで簡単画像編集! 初心者のための完全ガイド
canva-ai-design-assistant-magic-studio thumbnail
Canva Lesson 3 - Canvaの革新!AI機能で変わるデザインの未来
canva-design-tool-intuitive-ui-tips-and-tricks thumbnail
Canva Lesson 2 - 直感的インターフェースを使いこなす