これまで、静止画のデザイン作成を通して、テンプレートのカスタマイズや素材の活用術を学んできましたね。Canvaの可能性をどんどん感じていただけているのではないでしょうか。
今日はさらに一歩踏み込んで、Webサイトの作成に挑戦してみましょう！Canvaを使えば、専門知識がなくても、複数のセクションで構成されるプロフェッショナルなウェブサイトを簡単に作成・公開ができます。
今回は、Webデザイナーであるあなたが、サービス名「DAYTORA DESIGN」として、ご自分のWebデザインサービスを紹介するサービスサイト（シングルページ・スクロール型）を一緒に作っていきます。
デイトラちゃんこのサイト作成を通して、Webサイトの基本構成とCanvaならではの便利な機能を実践的に身につけていきましょう！
Webサイト作成の準備
まずは、CanvaでWebサイトプロジェクトを始めるための基本から確認していきます。
Webサイトに適したデザインの種類を選ぶ
Canvaのホーム画面で、Webサイトの種類を選択します。
デザインテンプレートの中から、あなたのWebデザインサービスサイトのイメージに合うものを選んでみましょう。
今回はこちらのテンプレートにしました！
Webサイトプロジェクトの基本画面確認
Webサイトの編集画面は、これまでのデザイン画面と基本は同じですが、複数のページを管理できる点が特徴です。
- キャンバス
中央にWebサイトのデザインが表示されます。下にセクションを増やしていくことができ、これは縦スクロールに繋がります。 - 下部のページビュー
Webサイトの各ページが横一列に表示されます。Canvaのウェブサイト機能では、このページが独立したページとして機能し、Webサイトのナビゲーションメニューに繋がります。 - サイドバー
静止画と同様に、素材・テキスト・アップロードなどのメニューがあります。
サイト構成を理解しよう
Webサイトを制作する前に、どのような情報をどこに配置するか、サイト全体の構成（サイトマップ）を把握しておくことが大切です。今回は以下のセクションを上から順に作成し、一つのスクロール型Webサイトを構築していきます。
【今回作成するサイトのセクション構成案】
- ヒーローセクション：魅力的なキャッチコピーとリードテキスト
- 自己紹介・DAYTORA DESIGNの強み
- サービス内容：具体的なサービスと目安の料金
- 制作実績/ポートフォリオ：デザインのテイストや実績を示す
- お客様の声
- 会社概要/お問い合わせ
ヒーローセクション
Webサイトで最も重要なのは、訪問者が最初に目にするTOPページです。特に、ページを開いて最初に表示されるファーストビューで、何のサービスを提供しているのか、どんな課題を解決できるのかを一目で伝えます。
メインビジュアル（写真/イラスト）の調整
テンプレートに元々あるメインビジュアルを、あなたのWebデザインサービスを象徴する素材に差し替えるか調整します。左側のサイドバー素材をクリックし、写真またはグラフィックタブから、よりイメージに合う素材を探して入れ替えましょう。
ロゴ・キャッチコピー・リードテキスト・CTAボタンの調整
テンプレートのロゴやキャッチコピーなどを、あなたのサービスに合うように書き換えます。
フォント/色の調整
サービスの世界観に合ったフォントや色に調整し、キャッチコピーなどが見やすいように素材などを活用したり、全体的な調整をします。
自己紹介と強み、サービス内容
ヒーローセクションで引き込んだ訪問者に対して、「DAYTORA DESIGN」がどんなサービスで、なぜ選ばれるのかを具体的に伝えます。
あなたが選んだテンプレートの該当するページ（セクション）をカスタマイズするか、新しいページを追加してもOKです。
自己紹介・DAYTORA DESIGNの強みセクション
あなたのプロフィール写真（またはイメージ画像）を配置し、簡単な経歴や、Daytora Designならではの強みを記述します。
サービス内容セクション
提供するWebデザインサービスの具体的な内容と目安の料金を記述します。料金プランは表を使って分かりやすく提示するのも良いです。サービスの全体像を、大きく3つの柱にまとめて簡潔に記述するのも効果的です。
まず背景には、ヒーローセクションで使用した画像を使いたいと思います。テキストなどが見やすいように、画像編集でぼかしを加え、調整機能で明るさの数値を上げたら背景として設定します。
さらにもう少し見やすくするため、背景画像の上にグリーンの四角形を素材をおき、透明度を調整して配置します。
次に、サービスの全体像を大きく3つの柱にまとめ、テキスト内容を修正します。テンプレートでは画像でしたが、イラストに変更しました！
制作実績とお客様の声
訪問者にサービスを信頼してもらい、利用を検討してもらうためには、客観的な制作実績やお客様からの推薦の言葉がとても大切です。
制作実績/ポートフォリオセクション
制作実績については、代表的なものを1つ載せて、それ以外は別のポートフォリオに移動するようにしたいと思います。
お客様の声セクション
お客様のコメントを入力していきましょう。お客様の顔写真を添えられるのであれば、説得力が増して良いです。
まず背景は、サービス内容セクションと同じように設定します。
そして、お客様の声のテキスト内容を修正し、見やすいように背景に白の四角形素材を配置しました。
会社概要/お問い合わせ
会社概要を載せて訪問者に信頼感を与えつつ、お問い合わせ方法を明記して、問い合わせへの導線を設定しましょう。
SNSアカウントがあれば載せても良いですね。
Googleフォームの埋め込み方法
テキストボックスに、Googleフォームの回答者へのリンクを入力し、編集ボタンを押してディスプレイモードを埋め込みに変更します。
Webサイト公開前の最終確認
テンプレートをカスタマイズし、Webサイトのデザインが完成しましたね！通常であれば何時間もかかってしまう作業が、数十分で終わったのではないでしょうか。
それではWebサイト公開に向けて、以下の3点を確認していきます。
- ページ内リンクの設定と確認
- 外部サイトへのリンク（ボタン含む）の設定と確認
- 画像の代替テキスト（Alt属性）設定の確認
ページ内リンクの設定と確認
Canvaで作成するシングルページのウェブサイトでは、セクションへのページ内リンクが使用できます。
❶テキストを選択した状態で右クリックし、リンクをクリックします。
❷この文章（デザインファイル）の中から移動させたいページのセクションを選択し、クリックします。テキストに下線がつき、指定したセクションへ移動するようなります。
外部サイトへのリンク（ボタン含む）の設定と確認
ページ内リンクを設定した時と同じで、テキストを選択した状態で右クリックしてリンクをクリック。
先ほどはセクションを選択しました、今回は赤枠内に移動させたいページのURLを入力します。
画像の代替テキスト（Alt属性）設定の確認
Canvaで作成したWebサイトに画像を挿入する際、代替テキスト（Alt属性）を設定することで、WebサイトのアクセシビリティとSEOを向上させることができます。
目の不自由な方がスクリーンリーダーを利用してサイトを閲覧する際に画像の内容を伝えたり、画像が表示されない場合にテキストで内容を補足したり、検索エンジンが画像の内容を理解するのに役立ちます。
Webサイトの公開と共有
Webサイトのデザインが完成したら、いよいよ世界に公開する準備です。公開前にいくつかの大事な設定を確認していきます。
公開前の最終準備と設定
CanvaでWebサイトを公開する際、表示される設定画面でサイトアドレスやタイトル・ファビコン・説明の項目を確認・設定します。これらは、サイトの見た目や検索エンジンの表示、SNSでのシェア時にとても大切です。
その他、検索エンジンでの表示の有無やパスワード保護などのオプションもあります。
サイトアドレス（URL）
公開するWebサイトのドメインを設定しましょう。
画面右上のWebサイトを公開ボタンをクリックし、サイトアドレス（URL）の部分です。Canvaの無料ドメインを使うか、有料プランにすればカスタムドメインも使用できます。
無料ドメインについて
Canvaでは、1つのアカウントまたはチームにつき1つの無料ドメイン（〇〇〇〇.my.canva.site）を使用でき、〇〇〇〇の部分は自由に設定できます（すでに使われているものは不可）
そして、URLの最後の部分（（〇〇〇〇my.canva.site/▲▲ココ▲▲）を変更し、複数のサイトを公開できます。無料プランでは５つまで、有料プランは無制限です。
タイトルとファビコン、説明文
ブラウザのタブや検索結果に表示されるサイトのタイトルなどを設定していきます。
まずは、画面右上のWebサイトを公開ボタンをクリックし、設定をクリックして進みましょう。
- タイトル
「DAYTORA DESIGN | Webサイト制作サービス」のように、サイトの内容が明確に伝わる名前に設定。 - ファビコン
ブラウザのタブに表示される小さなアイコンです。ご自身のロゴマークなどを設定すると、サイトのブランドイメージを高めます（推奨サイズは280×280ピクセル）。 - 説明文（ディスクリプション）
検索結果やSNSでシェアされた際に表示されるサイトの簡単な説明文です。サイトの目的やサービス内容を簡潔に（160文字以内）まとめ、興味を引くような文章を設定しましょう。
SNSリンクのプレビュー確認
WebサイトのURLがSNSでシェアされた際、通常はサイトの一番最初のセクション（ヒーローセクション）の画像やテキストが自動的にプレビューとして表示されます。公開前に、このヒーローセクションがSNSでどのように表示されるかイメージしておきましょう。魅力的なキャッチコピーやメインビジュアルをファーストビューに配置することが重要です。
プレビューモードで最終確認
公開ボタンを押す前に、編集画面右上のプレビューボタン（目のアイコン）をクリックし、実際のWebサイトがどのように表示されるかを最終確認しましょう。
PCやスマートフォンの画面サイズで表示を切り替えて、レイアウト崩れがないか、リンクが正しく機能するかなど、チェックします。必要があれば修正しましょう。
設定画面とプレビューモードでも、モバイルでサイズを変更ボタンがあると思いますが、こちらはCanvaが自動でレスポンシブ対応してくれるものです。細かな調整はできませんが、工夫次第でモバイルでも綺麗に表示させることができます。
Webサイトの公開
上記の設定が完了し、最終確認が終わったら、いよいよWebサイトの公開です！
プレビューモードの右上のWebサイトを公開ボタンまたは、設定画面から公開を続ける→公開ボタンをクリックして公開しましょう。
これで公開されました！
いかがでしたでしょうか？
今日は、Canvaを使ってWebサイトを実際に作成することに挑戦しました。シングルページ構成のWebサイトの基本から、各セクションの役割、そしてCanvaの機能を活用して効果的なサイトを構築する方法を学んでいただけたかと思います。
Canvaは、デザインの知識がなくても、ビジネスに役立つウェブサイトを手軽に作成・公開できる強力なツールです。今日学んだことを活かして、ぜひあなたもオリジナルのWebサイトを作成して発信してみてくださいね。
デイトラちゃんお疲れ様でした！
