やっとWEBサイトが完成しましたね。

最終チェックも終えて、いよいよWEBサイトを公開していきます。

　

目次

1. WEBサイト公開に必要なものを準備しよう
   1. ファビコンってなに？
   2. サブドメインってなに？
   3. サイトの説明文ってなに？
2. Canvaのファビコンファイル形式とサイズを知ろう
3. Canvaのデザインツールでファビコンを作る
4. ファビコンをローカルにダウンロードしておく
5. Canvaの無料ドメインでWEBサイトを公開してみよう
6. サブドメインを設定する
7. 「設定の確認」でファビコン・タイトルなどを設定する
   1. ファビコンとタイトルを変更する
   2. ページURLの設定
   3. WEBサイトの説明を追加する
8. 高度な設定でSNS共有時のプレビューを確認する
   1. 「パスワード保護を無効にする」
   2. 「検索エンジンの表示を無効にする」
   3. 「リンクのプレビューが有効です」
9. 公開したWEBサイトを確認する
10. 凡ミスしていた！「表示サイズ」の件・・・。
11. ブレイクポイントが1025pxだった件・・・。
12. CanvaのSEO対策はどうなっているのか？
13. Canva無料ドメインの削除や編集もできる

　

　

SAKUWEB さくうぇぶ

　

WEBサイト公開に必要なものを準備しよう

WEBサイトを公開する際に、最低限必要なものを準備します。

　

　

また、SNS共有を設置しておきたいなら「リンクのプレビュー画像」を用意することもできます。

　

Canvaではデフォルトで、プレービュー画像に「1ページ目のデータ」が使用されているみたいです。

別の画像を準備する際は、1200×630pxの画像が必要となります。

　

それでは、準備する3つをひとつずつ見ていきましょう。

　

ファビコンってなに？

ファビコンとは、ブラウザタブなどに表示するオリジナルのアイコンのことです。

他にもブラウザ履歴やツールバーアプリ等にも表示されます。

　

　

作成には以下の条件があります。

　

　

このサイト用に作ったロゴマークをファビコンに利用したいのですが、SVG形式のため利用不可。

さらにサイズが大きすぎてファビコンには適しません。

　

なので、新たに作る必要があります。

　

サブドメインってなに？

Canvaの無料ドメインは以下のようなアドレスになります。

　

　
この「×××」の部分を設定するための文字列が必要となります。

ここは自由に設定することができますが、大凡サイト名ですね。

この文字列には、小文字、数字、ハイフンを組み合わせる必要があります。

　

サンプルサイトで考えると、「nekogurumi-cafe」です。

「nekogurumi-cafe.my.canva.site」がサイトのドメインとなります。

　

サイトの説明文ってなに？

サイトの要約文ですね。

160文字以内を目指して考えておく必要があります。

この文章は、検索エンジンにどんなサイトかを伝えるためにも重要な要素です。

　

サンプルサイトだと以下のような文章になります。

　

Canvaのファビコンファイル形式とサイズを知ろう

1番のファビコンを作っていきます。
　
前述しました条件が以下です。

　

　

1番のJPGもしくはPNG形式ですが、JPGは軽量のため画像が荒れやすく、PNGは重いけど画質がキレイなので、

PNGで作っていきます。

　

2番のサイズですが、280pxがちょっとファビコンとしては見慣れないサイズです。

CanvaではJpgかPNGしか対応していないのと、小さいサイズを大きく表示するより、大きいサイズを小さく表示したほうが、荒れを抑えることができるので、

とりあえず280ピクセルで作ってみます。

　

　

Canvaのデザインツールでファビコンを作る

ファビコンもCanvaで作っていきます。

　

　

　

ちなみに「リンクのプレビュー」画像を作りたい場合は、サイズを1200×630pxにします。

　

以前作ったロゴデータがあるので、それを利用します。

　

　

　

注意が必要なのが、ファビコンの最小サイズは48×48pxだということです。

280pxで丁度良く画像を作ったとしても、それを48pxに小さくするとなると、潰れてぐちゃぐちゃになります。

　

そこで、画面上で見た目が48pxになるように、画像をズームアウトさせてみます。

　

　

　

10%にズームアウトしたロゴ・・・・さっぱり読めませんよね。

こうなることを想定して、48pxでも見えるように要素を引き算していく必要があります。

　

このロゴを見て一番目を引くのは、ネコちゃんです。

他のテキストを全部削除して、ネコちゃんのみのファビコンにします。

　

　

これでファビコンが完成しました。

　

ファビコンをローカルにダウンロードしておく

公開時にファビコンを設定するのですが、ローカルからアップロードする必要があるみたいです。

作ったファビコンを、ダウンロードしておきましょう。

　

　

　

これでローカルにDLでき、公開に必要なファイル全てが揃いました。

　

　　

Canvaの無料ドメインでWEBサイトを公開してみよう

作ったデザインを開きます。

　

　

　

ちなみに独自ドメインで公開したい場合、新たにドメインを取得したい場合は、以下から作業の流れを確認できます。

　

　

サブドメインを設定する

　

　

　

サブドメインを入力して、「このURLは使用できません。」のエラーメッセージがでなければ取得可能ということです。

　

サブドメインは「早い者勝ち」となります。

すでに同じサブドメインがある場合はエラーメッセージが表示されます。

その場合は、新たに考える必要があります。

　

また、文字列がCanvaが設定した規定外の場合もエラーメッセージがでます。

ドメインは後で編集することもできます。

　

「設定の確認」でファビコン・タイトルなどを設定する

ここでは、URLやファビコン、タイトル名やサイトの説明文などを設定していきます。

　

ファビコンとタイトルを変更する

デフォルトでCマークのアイコンが設定されていますので、先程作ったファビコンに変更しましょう。

　

　

　

これでファビコンの設定が完了です。

と同時にタイトル名も変更しておきましょう。

　

ページURLの設定

先程取得した「nekogurumi-cafe.my.canva.site」がドメインになります。

このページURL設定が、サイトの「アドレス」となります。

ちょっとこの意味を正確に理解していないのですが、ここは空欄で大丈夫そうです。

　

もしかしたら、同一ドメインでページを作れるのかもしれません。

今回作ったサイトをTOPページ扱いにして、新たに「保護ネコ紹介サイト」や、「カフェ情報サイト」を作ります。

　
そして、このURLアドレスをそれぞれ「hogoneko」「cafe」とか設定することで、
通常のサイト制作で言う3ページ分を作れるのかもしれません。

　

ただし、恐らくナビゲーションのリンク先を「hogoneko」「cafe」に変更はできないので、
ページにリンクボタンを設置する形になるかなと思います。

　

WEBサイトの説明を追加する

先に決めておいたサイトの説明文を入力します。

　

　

　

入力ボックスの右下に文字カウンターが表示されています。
160文字以上にならないように調節しましょう。

　

完了したら「発行」をクリックすれば、サイトが公開されます。

もし、SNS共有時のリンク画像を設定したい場合や、パスワードをかけたいときは、次に進みます。

　

高度な設定でSNS共有時のプレビューを確認する

説明文の下に「高度な設定」という項目があります。

ここをクリックすると3項目の設定が可能です。

　

「パスワード保護を無効にする」

サイトにパスワードをかけるかどうかを設定できます。
パスワードを知っている人のみ閲覧できるようになります。

　

「検索エンジンの表示を無効にする」

検索結果にサイトを表示したくない場合は無効にします。
表示したい場合は、有効にしておきます。

　

「リンクのプレビューが有効です」

SNS共有時に表示されるリンクの画像とサイト名のプレビューを確認できます。
画像はデフォルトで1ページ目が使われているようです。

　

　

公開したWEBサイトを確認する

公開が完了すると以下の画面が表示されます。

　

　

「WEBサイトを表示」ボタンをクリックして、確認してみましょう。

　

　

これでサイトの公開が完了しました。

　

凡ミスしていた！「表示サイズ」の件・・・。

公開したサイトを確認しました。

めっちゃデカい・・・。

　

　

原因は、エディタで作っている時に表示を50%にしていたせいで、
本番では、一つ一つの要素がデカくなってしまいました。

　

なんという凡ミス・・・・。

　

確かにプレビューでも縮小されて表示しているので、勘違いしていました。

作業する時は、ズームを100%にして随時確認する必要がありますね。
大分ショックで、直す気にもなれませんでした。

　

ブレイクポイントが1025pxだった件・・・。

canvaでは、ブレイクポイントが1025pxでした。

これにはさすがに落胆しました。

　

　

ブレイクポイントとは、レイアウト表示を切り替えるポイントのことです。

　

Canvaのプレビューでいうと、
ブラウザの幅が1025px以上の時は、ディスクトップ表示
ブラウザの幅が1024px以下の時は、スマホ表示となります。

　

なぜ1025なのか・・・。

　

これは、ディスクトップとスマホの間に「タブレット」があるからです。

タブレットの解像度で多いのが「768×1024px」です。なので1025なんですねぇ。

　

でもね、
タブレットよりスマホのシェアの方が明らかに高いのに、
しかもプレビューで「タブレット」なかったのになんで！！と思ってしまいました。

　

恐らくこの設定は変更できないでしょう。

　

CanvaのSEO対策はどうなっているのか？

専門的なお話になります。

SEO対策で実装されているのは、
タイトルとディスクリプションのみですね。
あと、画像のalt属性くらいで、タグは全滅っていう感じです。
やはり企業やお店サイトには向いてないです。

　

一応、canvaで用意されているアクセス解析もあります。
上メニューの「インサイト」からインプレッションやエンゲージメントなんかを確認できるようです。
ただし、無料プランでは閲覧不可。

　

SEO対策など気にしなくて良い個人的なサイト向きということが明確になりました。

　

Canva無料ドメインの削除や編集もできる

先程取得したドメインですが、削除や編集もできます。

　

　

　

　

このページでドメインの削除や編集を行うことができます。

　

凡ミスがあれど、Canvaを使って、ここまでできてしまうのはスゴイことです。
それに加えて、ロゴやファビコン等の画像制作も制限があるものの簡単に作れました。

　

ただ、テンプレートが豊富な分、自分の決断力が必要だと思うし、
制限クリアのための工夫も必要でした。

　

Canvaで制作できる物がたくさんあるので、
次は別のデザインを作ってみたいと思います。