京都のホームページ制作・WEB制作やロゴなどデザイン制作

デザインコラム

デザインやホームページ運用に関する事や京都の伝統の学びなどを
コラムで公開いたします。

ホームページ制作風景イメージ

ホームページ制作納品前チェックで見ておきたい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制作・印刷物デザイン・パッケージデザインなどを行っています。

当コラムでは、Web制作・デザイン・ブランディングの事をコラムで書いてまいります。

詳しい紹介

他のデザインコラムを読む

PRODUCTION ホームページや
各種印刷物制作
ご依頼・ご相談

ECサイトなど各種ホームページや
ロゴ・各種デザインの
ご依頼・ご相談はこちらからご連絡ください。
業務委託をお考えの制作会社さまや代理店さまもお気軽にご連絡ください。

制作のご依頼・ご相談