Webデザインの教科書
- 公開準備編 -
Scroll

初めて公開する方向けこれだけは確認してほしいこと

Webページが完成して、いざ公開する前に確認してほしいことがあります。

今回は公開する前に確認することと、そのやり方について紹介します。

すでに公開済みの方も確認してみてください。

公開する前にすることは?

Webページを公開する前に、「絶対やってほしいこと」や「やっておくと良いこと」がいくつかあります。

  • 絶対やってほしいこと

    Webページを公開する前に必ず確認してほしいことがあります。

    どれも簡単な作業ですが、良い方にも悪い方にも影響します。

    しっかり対策をして良い影響にしましょう。

    • タイトルと説明文
      難しさ:

      Webページの「タイトル」と記事の「説明文」を設定します。

      検索エンジンで検索された時に表示される部分になるので、文章がとても重要になります。

    • 文字コード
      難しさ:

      どの端末やブラウザでも文字化けしないように、「UTF-8」という文字コードに設定します。

    • ビューポート
      難しさ:

      どの端末から見ても画面に合わせて表示してくれるようにビューポートを設定します。

    • 見出し
      難しさ:

      「h1」「h2」「h3」タグの中の文章はわかりやすいか、使い方は適切か確認をします。

      見出しタグの使う回数順番が重要になります。

      検索エンジンで検索された時に見出しの文章が引っかかることがあります。

    • ブラウザごとの確認
      難しさ:

      正しくCSSを書いていても、使っているブラウザによってはデザインやレイアウトが崩れてしまうことがあります。

      なので、ブラウザごとにWebページを確認します。

  • やっておくと良いこと

    設定しておくとさらに良い影響を与えてくれる項目があります。

    設定が簡単なものから知識が必要になるものもあったり、効果が出る早さもさまざまです。

    出来そうなものだけでも十分効果はあるのでおすすめです。

    • URLの正規化
      難しさ:

      Webページを公開するとURLごとに「ページランク」というものが付きます。

      ページランク」は検索順位に大きく影響するので、正しく評価してもらうためにURLを正規化します。

    • 記事の公開日
      難しさ:

      記事を公開した日にちをWebページの中に設置します。

      記事の情報が新しいものなのか古いものなのか、Webページを見ている訪問者に知らせます。

    • パンくずリスト
      難しさ:

      パンくずリストとは、今見ているページの「カテゴリー」と「ジャンル」を階層的に表したもの言います。

      例えば、訪問者が今のページから「ジャンル一覧」のページに戻りたい時など、利用しやすいように設置します。

      また検索エンジンに、他のページとの関係性を伝えることも出来ます。

    • サイトマップの作成
      難しさ:

      公開したページがGoogle検索で引っかかるように、全部のページのURLをリストにしたものをサイトマップと言います。

      サイトマップから公開中のページの存在をGoogleに伝えるために作成します。

    • ファビコン設定
      難しさ:

      ファビコンとは、Webサイト全体のイメージをアイコンにしたもの言います。

      検索時やブックマーク、スマホのホーム画面などでアイコンを表示させることが出来ます。

    • OGPの設定
      難しさ:

      OGPとは、「Twitter」「Facebook」などのSNSでシェアされた時に、情報を表示させる仕組みのことを言います。

      SNSでシェアされた時に、タイトルや画像などを一緒に表示させることが出来ます。

    • iphone11対応
      難しさ:

      iphoneXや11の画面は特殊な形に対応します。

      Webサイトを画面に合わせて表示するように調整します。

      対応する方法は下記のリンクで紹介しています。

    • 構造化データ
      難しさ:

      構造化データとは、「記事の内容」「更新日」「メールアドレス」「住所」「電話番号」などの情報をまとめたデータの事を言います。

      検索エンジンにこれらの情報を伝えることで、検索時にそれらの情報を表示してくれることがあります。

今回は「絶対にやってほしいこと」を紹介します。

「やっておくと良いこと」は上記のリンクから見ることが出来ます。

それでは、Webサイト公開前に「絶対にやってほしいこと」を解説していきます。

まず必ず確認することはWebページの設定です。

タイトルの設定や文字化け対策などについて解説します。

とても簡単なので、ぜひ確認してみてください。

Webページの設定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公開前に確認すること一覧|Webデザインの教科書</title>
<meta name="description" content="Webサイトを公開する時に確認することをまとめました。">
</head>
<body>
...
</body>
</html>
Webページの設定

Webページの設定で確認することは4つあります。

headタグの中に「文字コード」「ビューポート」「タイトル」「説明文」の4つが設定されているか確認してください。

  • 文字コード

    Webページの文字コードが「UTF-8」に設定されているか確認をします。

    文字コードの設定は2つあるので、両方とも確認をしてください。

    • HTML内に記述

      headタグの中に文字コードを設定するタグを記述します。

      metaタグを使って「UTF-8」に設定します。

      <head>
      <meta charset="UTF-8">
      </head>
    • ファイルを保存する時

      テキストエディターでHTMLファイルを編集したあと、HTMLファイルを保存する時にも文字コードの設定が必要です。

      文字化けしてしまう原因で一番多いのが、保存する時の文字コードの設定が原因です。

      Visual Studio Codeを使ってる方は、上の動画で「UTF-8」に変更することが出来ます。

    Windowsで文字コードを設定

    Windowsを使っている方で、保存する時に上の画像のような画面が表示されることがあると思います。

    その時は、赤で囲まれたエンコードのところを「UTF-8」に変更をして保存をしてください。

  • ビューポート

    画面の大きさに合わせて表示範囲(Viewport)を設定します。

    この設定がないと、画面からはみ出てしまうことがあります。

    headタグの中にmetaタグを使って、表示範囲を端末ごとに合わせるようにします。

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
  • タイトルと説明文

    Webページのタイトル説明文を設定します。

    キーワードが検索された時に、一番最初に表示される部分になのでとても重要です。

    • タイトル

      上の画像の紫色で表示されている「基本的なHTMLとCSSを使って...」の部分がタイトルです。

      ここのタイトルが検索されたときが引っかかる部分でもあります。

      よく検索されるキーワードを2~3個ほど含めながら、魅力的なタイトルを付けましょう。

      headタグの中にtitleタグを使ってタイトルを設定します。

      <head>
      <title>公開前に確認すること一覧|Webデザインの教科書</title>
      </head>
    • 説明文(ディスクリプション)

      上の画像の複数行で書かれた「実際に作ってみよう!Webデザインの基本レイアウト...」の部分が説明文です。

      この部分は検索のキーワードには引っかからない部分です。

      ですが、説明文の内容でクリックされる確率を上げることが出来ます。

      metaタグの「description」を使って、説明文を記述します。

      <head>
      <meta name="description" content="Webサイトを公開する時に確認することをまとめました。">
      </head>
    タイトルとキーワード

    記事のタイトルは、検索される時に最も重要な部分です。

    よく検索されるキーワードをタイトルに含ませることで、検索結果に引っかかりやすくします」。

    • キーワードを調べる
      Web
      デザイン
      教科書

      よく使われるキーワードを調べるには、「Ubersuggest」という無料のツールで調べることが出来ます。

      キーワードを入力すると「検索ボリューム」が表示されるので、ボリュームが多いキーワードを厳選しましょう。

      ただし、キーワードは2~3個ぐらいまで厳選しましょう。

    • キーワードは3つまで

      タイトルに含むキーワードは、最大3つぐらいまでに絞りましょう。

      キーワードの入れすぎはキーワードの濫用と判断されるので、検索結果に表示されない可能性があります。

      キーワードをタイトルに入れすぎるのは逆効果になるので、3つぐらいに絞るとちょうど良いです。

    • キーワードの選び方

      検索ボリュームが多いキーワードは、競争率がかなり高くなります。

      競争率が高いキーワードは検索順位の競争が激しいため、検索上位に表示されるのはかなり難しいです。

      キーワードの選び方は、検索ボリュームが「かなり多い」「多い」「普通」の3段階のキーワードを選択しましょう。

      検索ボリュームがあまり多くないワードを入れて、競争率を下げることで検索上位を狙っていきましょう。

Webページの設定はこれで以上です。

特にタイトルは検索される時にとても重要です。

しっかりキーワードを調べて対策をしましょう。

見出しの確認

<h1>朝食と栄養</h1>
<p>普段の朝食で食べる物の栄養について。</p>
<h2>パンについて</h2>
<p>まずはパンです。今回は食パンについて調べてみました。</p>
<h3>食パンの栄養</h3>
<p>なにも付けていない食パンの栄養価は....</p>
<h2>ご飯について</h2>
<p>次にご飯です。今回は白米と玄米について調べてみました。</p>
<h3>白米の栄養</h3>
<p>白米の栄養価は....</p>
<h3>玄米の栄養</h3>
<p>玄米の栄養価は....</p>
見出しの確認
h1:朝食と栄養
h2:パンについて
h3:食パンの栄養
h2:ご飯について
h3:白米の栄養
h3:玄米の栄養

記事の構造を作る見出しタグが、正しく使われているか確認します。

検索エンジンは見出しタグで、記事全体の構造を判断しています。

見出しタグの使う順番回数に気を付けながら、しっかり構造を作っていきましょう。

  • 使う順番
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>

    見出しタグは使う順番についてです。

    見出しタグの数字が「小さい」数字から「大きい」数字の順番で使うようにしましょう。

    つまり、h1h2h3h4h5h6の順番で使います。

  • 使う回数
    h1:ヒツジについて
    h2:家族構成
    h3:お姉ちゃん
    h4:得意なこと
    h3:お兄ちゃん
    h4:得意なこと
    h2:いつも食べるもの
    h3:食パン
    h3:白いご飯
    • h1タグは1回のみ

      見出しタグの「h1」タグは、1ページにつき1回しか使えません。

      h1」タグは記事全体のトップタイトルなので、何度も使用すると記事全体の構造が複雑になってしまいます。

      複雑な構造は記事の内容を理解しにくくさせるので、「h1」タグは1回だけにしましょう。

    • それ以外は何度でもOK

      見出しタグの「h2」「h3」「h4」「h5」「h6」は、何度でも使うことが出来ます。

      ただし、使う順番は必ず意識して使ってください。

      すべての見出しタグが、きれいな階層で意味が繋がるようにしましょう。

見出しタグの確認は以上です。

見出しタグもキーワード検索で引っかかることがあります。

使い順番と回数に気をつけながら、構造を作っていきましょう。

ブラウザごとの確認

いろんなブラウザで確認する

正しくCSSを書いていても、思い通りに表示してくれないことがあります。

上の画像は同じCSSで書いていますが、ブラウザが違うと表示の仕方も違う部分を表示しています。

最近は表示の違いは改善されていますが、念のため確認しておきましょう。

  • ブラウザによる表示の違い

    上の画像ではブラウザによって「文字サイズ」や「画像の大きさ」にバラつきがあります。

    同じCSSで書いているのに、たまにこのように崩れてしまうことがあります。

    • 表示の違いが出る理由

      このように表示の違いが出てしまう理由は、ブラウザごとにCSSの認識が違うからです。

      例えばある人が「右にちょっと移動して」と指示を出した場合、その「ちょっと」の具合は人によって認識が違います

      これは極端な例ですが、ブラウザにもこのような認識の違いでレイアウトが崩れることがあります。

      もし崩れてしまった時は、「CSS」や「構造」を見直して根気強く修正してください。

  • 確認するブラウザ

    確認するブラウザは、最低でも上の4つのブラウザで確認して下さい。

    世界中でよく使われている「Chrome」「Edge」「Safari」「Firefox」で確認します。

    • ブラウザ使用率

      この4つのブラウザで確認する理由は、世界中のブラウザ使用率がとても高いからです。

      ブラウザ使用率の高いブラウザに対応すると、ほとんどの利用者が問題なくWebページを見ることが出来ます。

      もし世界中のブラウザの使用率を調べたい時は「statcounter」というサイトで確認が出来ます。

      ブラウザの使用率が「3%未満」のブラウザは切り捨てても大丈夫だと思います。

IEに対応する場合

もし、Internet Explorer(通称:IE)でも綺麗に表示させたい時はCSSの書き方に注意が必要です。

IEはとても古いブラウザで、すでにサポートが終了してアップデートがありません。

「sticky」やGridレイアウトなどの新しいCSSは、レイアウトが崩れる原因になります。

そのため、IEでも使えるCSSだけでWebページを作成する必要があります。

  • IEで使えるCSSを調べる

    IEで使えるCSSを調べるには、「Can I use」というサイトで調べることが出来ます。

    上部の入力欄に調べたいCSSプロパティを入力すると、対応表が表示されます。

    ブラウザ列が赤色で表示されている時は、そのCSSプロパティは対応していません。

    反対に緑色の時は、IEに対応しているCSSプロパティになります。

これで公開前に絶対確認してほしいことはすべて紹介しました。

ちょっと手間がかかりますが、正直大変だと思います。

公開したページがたくさんの人に見てもらえるように、しっかり確認してください。