コラム

包むデザイン背景柄

和風な葉っぱイメージ

和風の円イメージ

ホームページ制作納品前チェックで見ておきたい4ポイント

ホームページ制作納品前チェックで見ておきたい4ポイントのイメージ

ホームページ制作では、制作フェイズごとにチェックをすることがほとんどです。

制作企画のフェイズでは、ホームページの必要なページを把握するためのサイトマップやホームページの導線を考えるためのワイヤーフレーム。

デザインフェイズでは、実際のホームページデザイン。
最後にgoogle Chromeなどのブラウザでチェックする最終確認。

全制作フェイズでデザイン面や使い勝手は確認されますが、サイトの中身までホームページのプロじゃない方がチェックするのは至難の技だと思います。

しかし、ホームページをプロに依頼したい方のほとんどがデザインだけではなく効果があるサイトを求められているのではないでしょうか?そうならないためにも見た目だけではなく、サイトの中身もチェックしておく必要があります。

今回はサイトの中身の品質でここだけは見ておきたいポイントを見ていきます。

htmlでここだけは見ておきたい2ポイント

かんたんにって書いたあったのに「いきなりhtmlって専門用語が出てきた…」と思われる方もいらっしゃるのではないでしょうか?

htmlの品質が悪いと最悪検索順位を大きく下げかねないとても重要なポイントです。

今回はそんなhtmlの中でも最低限おさえておきたい2ポイントをピックアップしました。

htmlを確認する

まずは、htmlを確認しましょう。

Google Chromeの場合は右クリックを押し、メニューの中から「ページのソースを表示」をクリックしてください。
Edgeだと「ソースの表示」などブラウザごとに微妙に文言が違うので注意が必要です。

そうするとこのようにサイトのhtmlデータが表示されます。
では、早速重要な箇所を見ていきましょう。

サイトのタイトルは最適か?titleタグを見てみる

titleタグは、ホームページ1ページずつにつけるタイトルを決めるhtmlのタグです。
googleなどの検索で表示されるタイトルもこのtitleタグが基準になります。

htmlの<title>〜</title>を確認してみましょう。
まず、この<title>〜</title>が複数ないかチェックです。

titleタグは、原則1つだけにしないといけないので複数ある場合は制作者に事情を聞いてみましょう。

<title>〜</title>の中身も重要です。
htmlにおいてtitleタグは、最も重要なものの1つです。

もしもtitleタグの中身が適当なものなら検索順位を落とすだけではなく、ユーザービリティー的にもよくありません。

例えば、包むデザインの例でいうと「京都のホームページ屋さん」というのがわかりやすいように「京都のホームページ制作・WEB制作|包むデザイン」となっています。

また、このtitleタグは1ページごとに異なるものをつけたほうが良いので、タイトルがかぶっているページがあれば製作者に確認してみてください。

重要見出しh1タグは最適か?

h1タグは、htmlの中で一番大きな見出しです。
このタグはタイトル同様にこのページはどんなページなのかが伝わるものにしたほうが良いです。

htmlの<h1>〜</h1>を確認してみましょう。

h1タグは、titleタグと違って複数使っても良いのですができれば1つ、多くて2つ程度にしておいたほうが良いです。

たまに<h1>〜</h1>の中身が<img>だったりすることもあります。
この場合は<img>の中にaltと書かれている文字があると思いますのでそちらを確認してみてください。
画像になっている場合、altがないと大問題です。

スマートフォンの実機で必ず確認する

スマートフォンサイト確認ツールなど様々な方法でスマートフォン版のホームページを確認することが出来ますが、必ず実機で確認してください。極稀に確認ツールでは再現できないような大きなホームページのレイアウト崩れが起こったりします。

ホームページの表示速度をツールで確認する

ホームページの表示速度が遅いとせっかくサイトにアクセスがあっても表示する前に閉じられてしまうケースが多いです。デザインの品質を下げてとても早いサイトにする必要はありませんが、見てもらえるホームページにするために表示速度を測るようにしましょう。

https://pagespeed.web.dev/

PageSpeed Insightsというサイトを使ってサイトの表示速度を図ってみましょう。

ここでは、モバイルの80点以上のスコアがでればベストですがデザイン上どうしても表示速度が遅くなるものもあります。
それでも40点以下になると良くない場合が多いので制作者に確認が必要です。

最低限この4つ必ず確認しましょう。

見た目ではなく中身の品質チェックの4ポイントを見てきました。
ホームページ制作は見た目ではなく、効果にこだわれる方がほとんどだとおもいますのでぜひ参考になれば幸いです。

デザイナーツツム ツムイメージ

筆者

デザイナーツツム ツム

コラムをご拝読頂きありがとうございます。包むデザイン代表デザイナーのツツムです。

京都を拠点にロゴデザイン・Web制作・印刷物デザイン・パッケージデザインなどを行っています。

当コラムでは、デザイン事務所での日常などを書いていきます。

他のコラムを読む

デザイン
制作相談

まずはお気軽にお話を
聞かせてください!

相談・制作依頼フォーム