新しくホームページを作る時にチェックすべき20のこと

Web業界の統計情報を集める "Internet Live Stats" の調査によると、2014年9月に全世界のWebサイトの数は10億サイトを突破し、2017年6月現在では約12億900万件超となっています。
※ここでいうWebサイトとは、識別可能なホスト名やIPアドレスを持っているという意味

1991年7月6日に、スイスで世界初のWebサイトが登場。それから、かなりの月日が経過しますが、現在では1分間におよそ120ものサイトが生まれている計算になり、Webサイトを立ち上げることは"より一般的"なものになりつつあります。

昔に比べると、ドメイン取得の費用も安く、手続きも非常に簡単になり、サーバーの維持管理も牛丼1杯分ほどの月額費用で運用できるようになりました。
これは、情報の発信のしやすさという意味では非常に良いことですが、一方で世界中の人々がたくさんの情報を発信しているので、情報が氾濫しやすく、自分の発信した情報が届きにくくなるということです。

言い換えれば、どれだけ有益な情報を詰め込んで、見た目も非常に美しいWebサイトを作ったとしても、たくさんの人に見てもらえない可能性があるということです。そのためSEOやWebサイトの最適化を図ってより多くの人にリーチしなければならないということが言われていますが、果たして何をすればいいのでしょうか。

そこで今回は、新しくホームページを作る時にチェックすべきポイントをリストとしてまとめたのでご紹介します。

ゼロからコーディングをしなくてもいいWebサイトビルダーで作成したWebサイトや、必要な情報を入力するだけで始められるブログメディアなども、このチェックリストを確認しておくとよいでしょう。
　　

コンテンツ編

　　

1. 誤字脱字のチェックと可読性を確認する

ホームページができ上がったら、まず最初にチェックするのは誤字脱字がないかを確認することです。誤字や脱字があれば、情報を探している人が検索エンジンに入力したキーワードに引っかからなくなるケースがあります。

また、テキスト自体の可読性に関しても確認しておきましょう。一般的には、1行に書く文字は50〜70字程度と言われ、それを越えると読みづらくなるとされています。文章があまりにも長くなる場合には、改行を施すなどの工夫をしておきましょう。
　　

2. コンタクト情報とSNS情報を掲載する

一方的に情報発信するホームページだとしても、ホームページ上の情報のバグや誤りを指摘してもらえるので、詳細なコンタクト情報を記載しておきましょう。

SNSボタンは多くのホームページが掲載していますが、あまり多くのSNSを採用し過ぎるとチェックも大変になるので、まずは2つ程度から始めるようにしましょう。
今でも、twitterとFacebookをやっておけばひとまず大丈夫です。
　　

3. 適切なリンクにする

リンクはすぐに検知できて「クリックできる」ように見えるのがまず重要です。

また、外部リンクには「rel="noopender”」という属性を付けておきましょう。これは、「target="_blank”」を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作するので、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下する可能性があるからです。

「rel="noopender”」をつけることでこうした不具合を回避することができ、読み込み速度の低下を防ぐことができます。

重要なリンクは、カルーセルやアコーディオンに乗せて動かすようなことをしないでください。ナビゲーションにないリンクも「title」属性を付けておきましょう。これらは全てユーザビリティの向上につながります。
　　

4. FaviconやAppアイコンを作成する

意外と忘れがちなのが、FaviconやAppアイコンを作ることです。お気に入りに入れたり、スマートフォンのホーム画面に保存する時に、FaviconやAppアイコンが設定されていなければ、アイコンなしのホームページになってしまいます。自分のサイトを目立たせるためにも、ユニークなFaviconを作成しておきましょう。
　　

5. 404ページを作成する

こちらも後回しにされがちですが、ユーザーがURLを入力するのを間違えてしまったり、リンク切れが起こってしまった場合に表示する404ページもデザインし、設定しておきましょう。

エラーが起きてしまうのは避けられないことですが、起きてしまった場合にユーザーをWebサイトにつなぎとめておくのは、この404ページにかかっています。
　　

パフォーマンス編

6. 画像を最適化する

画像サイズが小さければ小さいほどページの読み込み速度は速くなるので、SEO上もUX上も重要だと言われています。しかし、画像サイズを小さくすると劣化すると思っていませんか。実際、同じような品質で圧縮することもできます。Compressor.ioやOptimizillaのようなオンラインサービスを使えば、ドラッグ＆ドロップで簡単に複数画像を圧縮してくれるので便利です。

また、多くの画像をCSSやHTMLでリサイズすると、ブラウザへの負担がかかってしまいます。そのため、できる限り使用するままの大きさで画像を使うことが推奨されています。
　　

7. ページ容量やリクエストを軽減する

ページ容量は2MB以下、HTTPリクエスト数は50以下、というのを目安にすると、ページ速度の低下を防ぐことができます。CDN経由の外部のライブラリやスクリプトをたくさん読み込んでしまうと、それだけでHTTPリクエストが増加してしまいます。不要なものは取り除きたいですが、まれに二重にリクエストしていることがあるので、そうしたものは削ってしまいましょう。

また、ページが完全に読み込まれた後に画像やファイルをロードする非同期通信を使うことで、まずページを表示させるのにかかる時間を短縮することができます。画像の非同期通信として有名なのはLazy Load Plugin for jQueryです。
　　

8. Webフォントの範囲を絞る

多くのWebサイトがWebフォントを使わない文字までフルセットで読み込んでしまうので、ページの読み込み速度が遅くなってしまいます。とりわけ、自作で日本語用のWebフォントを作成した時にはとても重くなってしまいます。

システムフォントを使うか、2〜3フォントに絞るか、Webフォントの軽量化を図るか、一考してみる価値はあるでしょう。

日本語Webフォントについては下記のページも御覧ください。

参考：
印象的でSEOにも有利！日本語Webフォントの設定方法と素材サイト5選｜ferret

また、ferret Oneでも株式会社モリサワが提供する「TypeSquare」と連携しているので、使用を検討してみるのもいいでしょう。

参考：
Webマーケティングのトレーニングが付いているCMSはferretOneだけ｜ferret
　　

9. JavaScriptやCSSを圧縮する

JavaScriptやCSSは余計な改行な空白があるとそれだけで容量が大きくなります。そのため、できる限り余計な文字を取り除いてアップロードしましょう。

また、あまり知られていないかもしれませんが、GZIPという、テキストファイルを圧縮した状態でWebサーバーで読み込める圧縮形式があります。JavaScriptやCSSを圧縮してサーバーにアップロードすれば、読み込み速度高速化に一役買ってくれます。

参考：
gzip圧縮でCSSやJSなどの転送量を減らす方法｜Syncer
　　

10. Service Workerを使ってみる

Service Workerとは、Webページの裏側で働く独立したJavaScript環境のことです。Service Workerを使うと、Webページのオフライン対応をはじめ、プッシュ通信など、これまでのWebではできなかったことを実現することができます。

Service Workerは、Webページとは独立した形で動くものなので、キャッシュのコントロールをしたりできるので便利です。

参考：
パケット容量がいっぱいでも安心！「オフラインファースト」なホームページを作る3つのメリットと実装方法｜ferret
　　

セキュリティ編

11. HTTPS通信を行う

HTTPS通信は、ページを暗号化して通信を行う仕様で、ログインページなどの個人情報を扱うページはもちろん、セキュリティ上ほかのページにもHTTPSで通信できるようにしておくことが推奨されています。

通常、HTTPSの認証(Certificate)を発行するには月額1万円以上の費用がかかりますが、Let’s Encryptのようなサービスを利用することで簡単に無料でHTTPS通信を実装することができます。また、どれくらい安全なのかはSSL Labsのようなサービスで確認することができます。

昨今では「Wanna Cry」のようなマルウェアが非常にたくさんあるので、「自分には関係ない」と思って対策をしていないことが最も危険です。
セキュリティ対策は、できることから始めていきましょう。

参考：
あなたのホームページは大丈夫？WordPressのセキュリティを高めるためにやっておきたい7つのこと｜ferret
　　

12. パスワードなどの暗号化

もしあなたのサービスがログイン情報などの個人情報を扱っている場合は、HTTPS通信をしているかどうかにかかわらず、暗号化しておくことをオススメします。実際、フリーWiFiなどを使って通信を行った場合は、やりとりを簡単に傍受することができるので、パスワードを容易に読み取られてしまう危険すらあります。
　　

SEO編

13. ページを特定できるようなキーワードを設定する

かつてほど重要ではなくなったにせよ、キーワードによるターゲティングは今でもSEO上有効な施策となります。

URLは長いよりは短くわかりやすいものがよく、Titleタグは長くとも70文字まで抑えたほうがよいでしょう。Meta Descriptionはそれぞれのページでユニークなものにし、155文字を限度に入力し、H1タグは1つのページに1つまでにします。

Meta Keywordに関しては、主要な検索エンジンが「重要視しない」ということを発表しているので、設定の必要はありません。
　　

14. Google AnalyticsとGoogle Search Consoleを設定する

Google AnalyticsやGoogle Search Consoleの設定がまだであれば、大至急行いましょう。ターゲットユーザーを分析し、ページ上の問題を発見するのには非常に重要です。また、ターゲットとなる国や地域によってはBing Webmaster Toolsを設定しておくとよいでしょう。
※とりわけ英語圏ではよく使われているからです
　　

15. XMLサイトマップを作成する

サイトマップを作成すると検索エンジンのクローラーが巡回する手助けになるので、サーバー上にサイトマップを作っておきましょう。Google Search Consoleでも作成から送信までが行えるほか、 XML Sitemaps Generatorのようなサービスを利用するのも1つの手です。
　　

16. Robots.txtを作成する

検索エンジンのクローラーが巡回するためのRobots.txtも、現在でも重要なファイルの1つです。忘れがちですが、必ず作成しておきましょう。
　　

17. FacebookのOGPやTwitter Cardsの設定

OGPとはOpen Graph Protocolの略称で、SNSでURLをシェアした際に、アイキャッチ画像やページタイトルなどを意図したとおりに正しく表示させる仕組みです。

参考：
Facebook・TwitterのOGP設定方法まとめ｜ferret

これを正しく設定しているかどうかでSNSの拡散度合いも大きく変わってくるので、設定しておくことを強くオススメします。
　　

アクセシビリティ＆ユーザビリティ編

18. コントラスト比を調整する

W3Cでの勧告によれば、コントラスト比は最低でも4.5：1にすることが推奨されています。コントラスト比が上手くいっていなければ、いくら文字の大きさが適切でも読みにくくなってしまいます。

参考：
文字が小さくて読みづらくなっていませんか？ホームページの可読性を見直す7つのチェックリスト｜ferret
　　

19. 画像などにAltタグを入れておく

近年、アクセシビリティの観点から様々なWebブラウザで音声対応が行われています。画像をはじめとした非テキスト要素には、Altタグを忘れずに付けておきましょう。正確な描写にするために、「〜の画像」という形でフォーマットを揃えておくのもよいでしょう。
　　

20. レスポンシブ対応＆モバイル最適化

言うまでもないことですが、モバイル経由でのWebサイトの閲覧は非常に多くなっています。
※4回中3回はモバイルからの閲覧だと言われています

モバイルでの表示に対応するだけではなく、モバイルに最適なタグを挿入しておくなど、様々な点を見直しておきましょう。

参考：
今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ｜ICS MEDIA
　　

まとめ

同じような内容のホームページが2つあった場合、結局上位に来るのはこれからご紹介するような対策を取っているホームページになります。せっかく素晴らしい内容であっても、見られることがなければ存在しないのと同じです。

対策次第で結果が大きく変わる可能性があるので、ぜひこれらの項目をチェックしておきましょう。