2020.5.24

Webサイトを制作した時にチェックしたい項目

世の中にはたくさんのWebサイトが存在します。
そして、それらを制作するのはWebデザイナーやコーダーです。

今回は、そのWebデザイナーやコーダーがWebサイトを制作した際にするべきこと、チェックしたいことを紹介します。

私自身、普段無意識に行なっていることもありますし、かつ、まだまだ知識不足な点もあるので、本記事に記載していること以外にもサイト制作時にするべき項目はあると思います。

なので、本記事はあくまで「こういう点を気をつければいいのか」程度に読んで頂ければと思います。

SEO

noindex, nofollowの解除

検索結果に表示させない手法として、metaタグのnoindexnofollowを用いることがあります。

本番公開前はこの設定をしていても問題ないのですが、本番公開後にも設定していると検索結果に表示されません。

なので、noindexnofollowは必ず解除しましょう。

パンくずリストの作成

パンくずリストは、Googleなどのブラウザのクローラに対して、Webサイトの構造を伝えるためにサイト上に設置することを推奨されています。

もちろん、ユーザービリティの観点からしても作成したほうが良いと思います。

昨今のGoogleのクローラは、ある程度サイトのマークアップに不備があっても、それを考慮してSEOが評価されると言われていますが、一般的に「パンくずリストは作成したほうが良い」と言われているので、特別な事情が無いのであれば作成したほうが良いでしょう。

サイトマップの作成

サイトマップは、サイトの全ページのリンクをまとめたページです。

こちらもパンくずリストと同様、Googleなどのブラウザのクローラに良い影響を与えるとされています。

ユーザー向けのサイトマップはhtmlで、クローラ向けのサイトマップはxml形式で作成しましょう。

titleタグ, meta descriptionタグの設定

titleタグとmeta descriptionタグもパンくずリストなどと同様、SEOに影響を与えるので設定をしましょう。

これらは検索結果に表示される文言にも反映されます。

meta canonicalタグ(URLの正規化)

URLの正規化の処理を正しく行っていないと、せっかく作成したコンテンツが検索結果の上位に表示されません。

このURLの正規化に関してはこちらのサイトで詳しく解説されています。

URL正規化とは?canonical属性・タグのしくみと使い方
SEO内部対策のひとつ「インデックス最適化」の基本となるURL正規化・canonical属性とは?検索エンジンにウェブページを重複なく正しくインデックスさせるためには、インデックスすべきURLを正規化し統一させておく必要があります。ここでは。link rel=canonicalタグの使い方と注意点、利用シーンなど詳しく...

バリデートエラーのチェック

HTMLを正しくマークアップすることはSEOの評価に繋がります。

こちらも、昨今のGoogleのクローラはマークアップに不備があっても(h1タグが無くても自動で判別してくれるらしい…)、ある程度自動で判断してくれるらしいですが、正しくマークアップすることに越したことはありません。

正しくマークアップ出来ているかどうかは、W3Cのバリデータチェックなどで判断すると良いでしょう。

The W3C Markup Validation Service
W3C's easy-to-use markup validation service, based on SGML and XML parsers.

マーケティング

Googleアナリティクス

昨今はGoogleアナリティクスでサイトのPV(ページビュー)やUU(ユニークユーザー)などを計測する企業も多いでしょう。

もし、クライアントがGoogleアナリティクスを導入していなかったら、提案してあげると良いでしょう。

Google Search Console

Google Search Consoleはサイトの流入キーワードや異常を検知してくれるツールです。

こちらもGoogleアナリティクスと同様、クライアントが導入していなかったら提案してあげると良いでしょう。

計測タグ系

サイトの運用年数が長ければ長いほど、GTMやYTMなどの計測タグや成果タグなど、様々な外部のタグが埋め込まれています。

もし、現在使われていないタグがあったら削除しましょう。
(もちろん、クライアントに確認は取りましょう)

使われている計測タグが多ければ、一元管理するために「Google タグ マネージャー」を利用するのも良いでしょう。

OGPの設定

OGPを設定すると、TwitterやFacebookなどのSNSでシェアした際にタイムラインに表示される内容をカスタマイズすることが出来ます。

詳しくはこちらのサイトで解説されています。

OGPを設定しよう!SNSでシェアされやすい設定方法とは?
OGPの設定していますか?設定することでFacebookやSNSでURLが共有された際に、サイトの情報をユーザーに対して正確に伝えることができます。今回はOGPの基本的な設定方法やポイント、困った時の対処法などをご紹介します!

コーディング後のチェック

urlにパラメーターがついても正しく処理が行われるか

パラメーターとはhttps://domain/about/?hoge=111?hoge=111に当たります。

JavaScriptPHP「URLを取得して○○をする」のような処理をしている場合、パラメーターが付いていない時には正しく動いても、パラメーターが付いているとエラーになることがあります。

チェックが漏れやすい項目なので、実装する際にパラメーターを意識してコードを書くようにしましょう。

ページャーの2ページ目以降が表示されるか

ページャーが存在するページは、CMSを使った「お知らせ」や「ブログ」などの場合が多いかと思います。

1ページ目は正しく表示されるけど、2ページ目が表示されない…ということはよくあります。

なので、ページャーが存在するページがある場合、2ページ目以降も表示されるか必ず確認をしましょう。

フォームのバリデーションを設定したか

セキュリティの観点から、フォームのバリデーションが正しく設定されているかどうかは必ず確認しましょう。

昨今は様々なライブラリがあるので、それらを使うのも良いでしょう。

また、バリデーションはフロントサイドとサーバーサイド両方設定するようにしましょう。
(最低限サーバーサイドは必須です)

これらについては、以前別の記事で少しだけ紹介しましたので、よかったらご覧下さい。

【実用的なサンプルあり】jQuery Validation Pluginの使い方
フォームのバリデーションを手軽に実装出来るjQueryのプラグインjQuery Validation Pluginの基本的な使い方、実際に使う際に役に立つTipsをご紹介いたします。 公式サイト: バリデーションとは jQuery...

404ページを作成したか

404ページは間違ったURLにアクセスされると表示されるページです。

このような細かい積み重ねでユーザービリティは向上するので、出来る限り作成するようにしましょう。

スマホでのフォームのフォントサイズ

スマホでフォームのテキストボックスのフォントサイズが15px以下だと、入力時に画面がズームされてしまい、ユーザービリティを損ねてしまいます。

なので、スマホのテキストボックスのフォントサイズは16px以上にしましょう。

以前、こちらの記事でも紹介しましたので、よかったらご覧下さい。

【UX改善】iOSでフォーム入力時に拡大するのを防ごう
iOSでフォームを入力する時に、画面が拡大することがありませんか? 入力中は拡大されてもあまり気にならないと思います。 しかし、入力が終わっても画面は拡大されたままになっています。 なので、最終的に自分で拡大されている状態...

コメントの削除

HTMLなどのコメントは全部削除する必要は無いですが、明らかに自分用のコメントは納品前や本番公開前には削除しましょう。

本番環境でのチェック

フォームからメールが届くかどうか

お問い合わせなどのフォームに内容を入力して送信したらメールが届くかなど、思い通りの動きをするかどうかのチェックをしましょう。

テスト環境では動いていたのに、本番環境では動かないのようなことはよくあることですね…。

サイトをSSL化したか

SSL化することでサイトのセキュリティや信頼性が向上するので、出来る限りSSL化するようにしましょう。

リダイレクト系

httpにアクセスしたらhttpsにリダイレクトさせるなどの設定をしましょう。

他にも、wwwありでアクセスしたらwwwなしにリダイレクトさせるなどもあります。

リダイレクトを設定する際に、301302も意識するようにしましょう。

これらに関しては、こちらの記事で解説されています。

301リダイレクトの設定方法と302との違い
リダイレクトとは、英語で「方向を変える」という意味ですが、IT分野においては、ページを訪れたユーザーを指定したURLへ自動的に転送する設定のことを表します。 リダイレクトには301と302がありSEO担当者も混同しやすいため、正しい知識が必要です。 本記事では301/302リダイレクトとは何か、それぞれの違いと...

サイトスピード改善

画像のファイルサイズ圧縮

画像のファイルサイズを小さくすることで、サイトの表示スピードが向上します。

私はこちらのサイトをよく使っています。

オンラインで画像を圧縮。最高の画質および圧縮方式
複数のJPG、PNG、GIF画像を選んで瞬時に圧縮。オンラインで画像を無料で簡単に圧縮できます。

また、SVGを取り入れるのも良いでしょう。

.htaccessでgzip圧縮

GoogleのPageSpeed Insightsで指摘される項目のひとつです。

gzip圧縮に関しては、こちらのサイトで解説されています。

圧縮を有効にする【PageSpeed Insights gzip圧縮編】|Enazeal Engineer BLOG
Google PageSpeed Insights使ってますか? 言わずと知れた、モバイル、PCの表示速度や最適化の方法も提案してくれる無料のツールですね! 今回はその提案の中から「圧縮を有効にする」についてピックアップです。 早急にサイトスピードの改善・表示速度の高速化をしたい方は是非試してみてください。

WordPress系

ログイン画面のURLを変更

WordPressで制作したサイトは、何も設定をしていないとドメインの後に/wp-admin/のように入力してアクセスするとログイン画面に遷移してしまいます。

この状態だと、セキュリティ的によろしくないので、必ずログイン画面のURLを変更しましょう。

変更方法は2種類あります。

  • .htaccessで変更
  • プラグインで変更

以前、.htaccessでログイン画面のURLを変更する記事を書いたので、よかったらご覧下さい。

【htaccessで対応】WordPressのログイン画面のURLを変更してセキュリティを高める方法
はじめに 皆様は、WordPressの管理画面のログインURLを変更しているでしょうか? 何も対策をしていないと、WordPressのログイン画面にアクセスするのは誰にでも出来てしまいます。 /wp-admin/ /wp-log...

ユーザー名がバレないようにする

先程のログインURLと同様、何も設定をしていないとドメインの後に/?author=1のように入力してアクセスすると、ユーザー名が表示されてしまいます。

こちらも対策は出来ますので、しっかりと設定をしましょう。

WordPress ユーザーの一覧表示対策(?author=1やWP REST API)/ Web Design Leaves
WordPress のいくつかの機能により、ユーザーのログイン ID などを外部から取得することができるようになっているので、そのための対策方法について。

まとめ

サイトを制作する際にチェックするべき項目は毎回変わると思います。

特にサイトの挙動の確認やセキュリティ系はしっかりとチェックして、対応していなかったらしっかりと対応しましょう。

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア