Blog スタッフブログ

Webサイト公開前にチェックする項目をまとめてみる

Category | Blog
/ 1,556views

こんにちは。
デザイナーの山田です。

春の訪れを感じるようになりました。そろそろ桜が開花する頃でしょうか。
今年の桜の開花予想は例年よりも早いそうです。僕は春生まれということもあり、春という季節、またそれを象徴する桜はとても好きな花の1つです。神戸での開花を楽しみに待ちたいと思います。

さて、入社してから1年以上が経過して業務にも慣れてきたところですが、それでも心理的にヒヤヒヤしてしまうのは「Webサイトの公開作業」です。
ひとつ手順を間違えたり、対応を疎かにしてしまうと、思わぬトラブルに繋がってしまいます。
今回のブログでは、弊社の業務フローを参考にしながら、サイト公開前のチェック項目で主要なものをまとめていきたいと思います。

Table of contents

  1. コンテンツについて
  2. 表示・動作について
  3. SEO関係について
  4. その他設定について
  5. おわりに

コンテンツについて

まずは基本的なところですが、公開される情報が正しく表示されているかどうかチェックを行います。

テキストやリンクの確認

文章に誤りがなかったり、リンクが正しい遷移をしているか確認します。
誤字や脱字がないかもそうですが、意外と見落としがちなのが表記揺れです。例えば「お問い合わせ」の表記が下記のようにバラバラになっていることが多々起こります。

  • お問い合わせ
  • お問合せ
  • お問い合せ

細かな部分ですが、表記揺れは、Webサイトを閲覧するユーザーに違和感を抱かせてしまう要因になりますので、しっかりと統一しておくことが大切です。
また、テキストリンクやボタンリンクについても1つ1つクリックをして、正しくページ遷移がされているかもチェックしていきます。

ダミー画像の差し替え

制作するWebサイトの中には、素材画像を購入して背景などで用いることがあります。
素材画像は公開前に購入することが多く、制作段階では所謂「ダミー画像」を当てはめているのですが、公開前に忘れずに画像を購入し、画像を差し替えておかなければなりません。

alt属性の設定

alt属性とは、画像の代替となるテキスト情報のことです。
ブラウザの音声読み上げの機能を用いる際に読み上げられるなど重要な設定項目となるため、必要に応じて適切なテキストが入力されているか確認が必要です。

表示・動作について

Webサイトは多種多様のデバイス・ブラウザで閲覧されることが想定されるため、どの状況下でも同じように表示・動作されているかどうか、チェックを行います。

デバイスごとのチェック

昨今のWebサイトは、どんな画面サイズでもわかりやすい画面表示に切り替わるレスポンシブウェブデザインが主流です。
弊社制作のWebサイトもレスポンシブウェブデザインに対応しておりますが、公開前には検証用のパソコンやスマートフォン、タブレットで閲覧し、どの画面サイズでも表示崩れがないか確認をしています。

ブラウザごとのチェック

全ての主要ブラウザで正しく表示されているかのチェックも必要です。
「Chrome」や「Safari」、「Internet Explorer」など、ブラウザにはいくつか種類がありますが、その種類やバージョンによっては使えるプログラムが異なることがあり、それが表示崩れの原因となる可能性があります。

フォームの送信テスト

お問い合わせフォームやリクルート用のエントリーフォームなど、メールフォームを設置しているWebサイトでは、正常にメールが送られているかどうか確認するために送信テストを行います。
メールが正しく送信・受信できているかだけでなく、フォームのバリデーションが正しく機能しているかの確認も必要です。
また、制作段階ではメールの送信先にダミー用のメールアドレスに設定していることがあるため、公開前には実際に用いるメールアドレスに変更しておくことを忘れないようにしましょう。

404ページ

URLが正しくなかったり、存在していたページがなくなっていた場合などで代わりに表示されるページです。
意外と忘れがちですが、こちらも用意しておきます。

SEO関係について

Webサイトはただ見えていればいいものではありません。
ツールとして正しく機能しているか、検索エンジンに正しく評価を受けられる状態にあるか、設定を確認する必要があります。

Google AnalyticsやSearch Consoleの設定

公開したWebサイトにどれだけアクセスが集まっているか、またどのようにユーザーが巡回しているかなど、解析を行うことができるツールです。
公開前に忘れずに設置し、無事疎通が行われているかの確認が必要です。

titleやdescription、faviconの設定

Google検索エンジンなどでの検索結果の表示に関わる設定です。
この設定が漏れていると、「せっかく公開したのに、検索結果の画面でどのようなWebサイトか分からない」といった事態が起きてしまうので忘れずに記述します。

faviconとは、ブラウザのタブに表示される小さな画像です。ブックマークのアイコンにもなるため、こちらも設定しておくようにします。

OGP設定

TwitterやFacebookなどのSNSでWebサイトをシェアしたときに表示される情報のことです。
テキストやURLだけでなく、画像も正しく表示されているか、確認をします。

301リダイレクト設定

旧サイトと新サイトでドメインが異なっていたり、ディレクトリ名が異なっているときに、必要な設定です。
設定することで、旧サイトのドメインやディレクトリにアクセスしたとき、自動的に新サイトのURLにジャンプするようになります。
301リダイレクト設定を行うことで、ユーザビリティを向上させたり、検索エンジンにおける旧ドメインの評価を引き継ぐことができます。

noindex, nofollow、ベーシック認証

制作時には、Webサイト全体にnoindex,nofollow設定を施していたり、ベーシック認証をかけておくことが殆どです。
公開前には忘れずに、設定し直しておきましょう。

その他設定について

バックアップ設定

お客様との契約内容に応じてWebサイトのバックアップ設定を行います。
弊社制作ではWordPressを用いることが多いのですが、下記のような方法でバックアップをとることができるので参考にしてみてください。

【Google Drive】WordPressのバックアップ設定を更に簡単に【Dropbox】
https://www.willstyle.co.jp/blog/3019/

現行メールサーバーへの影響

これは前段階で把握しなければいけないことですが、Webサイトで用いるサーバーとメールで用いるサーバーが同一の場合、現行の設定等を見直さなければいけません。
ここを見落としてしまうとメールが使えなくなるといったトラブルが起きてしまいますので、必ず確認しておく必要があります。

サーバー移行に伴う基本のメール設定をおさらいしてみる
https://www.willstyle.co.jp/blog/3877/

おわりに

大まかな内容となってしまいましたが、Webサイトの公開前にチェックしておきたい項目のご紹介は以上となります。
公開作業はWebサイト制作の中でも、特に気をつけなければならないフローですので、注意しながら作業することを常に意識していきたいと思います。

Category | Blog
Author | Masaki Yamada / 1,556views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)