多くのチェック項目が記載されたシートを用い、
エラーの発生率をできるだけ低く押さえます。

現在のWebサイトが閲覧できる環境は、数十万に及ぶと言われています。月間トラフィックが数万セッションレベルのWebサイトでも、利用者環境のバリエーションは1000を超えることも珍しくありません。このように様々なデバイス、OS、ブラウザで閲覧されるWebサイトにおいて、表示や実行の不具合をまったく発生させないことは事実上不可能です。また、ツールが使えず目視で確認しなければいけない箇所や、人為的な作業で開発されている箇所についても、一定の確率でエラーが発生します。

このようにエラーを100%防ぐことが難しいWebサイトですが、制作工程の工夫やチェックのフォーマット化などで、その発生率を低くすることは可能です。私たちでは、制作前、制作中、制作後の3段階にわたって、計100項目にわたるチェックを、チェックシートを使って行っています。このような対策を行うことで、エラー発生率をできるだけ低くなるよう、取り組んでいます。

制作前チェック

制作を開始する前にチェックする項目です。制作後の手戻りや余計な作業を発生させないことで、ミスの発生確率を下げます。チェックシートは、細かな仕様に関する事前確認にも用います。このチェックシートには、主に以下のようなチェック項目が記載されています。

  • 対象ブラウザ
  • Googleプレイスの要否
  • link rel=”canonical”の指定
  • meta name=”robots”の指定
  • doctypeの指定
  • meta charsetの指定
  • meta copyrightの指定
  • PrintCSSの要否
  • JavaScriptライブラリの指定
  • JavaScriptライブラリのバージョン指定
  • アクセス解析コードの指定
  • ダウンロードデータのトラッキングコードの指定
  • 外部リンクのトラッキングコードの指定
  • sitemap.xmlの要否
  • リンクパスの指定
  • トップファイルに対するリンク方法の指定
  • インクルード化など、サイト内共通要素の効率化に関する定義
  • スマホ、タブレットPCでのターゲットブラウザ
  • ソーシャルボタンの要望
  • サーバへの接続方法
  • httpsの有無
  • .htaccess の利用可否
  • サーバ OS
  • 使用できる PHP のバージョン
  • 使用できる Perl のバージョン
  • 使用できる MySQL のバージョン
  • フォームのmeta charset指定
  • CMSの編集可能画面
  • CMSのプラグイン等使用の制約

制作中チェック

制作中は、ページ個別のチェックを行っていきます。ブラウザによって挙動が異なる箇所については、ターゲットブラウザの種類分の確認を行います。チェックシートの各項目がクリアになっていない限り、納品はできないルールとなっています。チェックシートには、主に以下のようなチェック項目が記載されています。

  • Metaタグは正しく設定されているか
  • OGPタグは正しく設定されているか
  • Titleタグは正しく設定されていますか
  • 指定したトラッキングコードが正しく設置されているか
  • リンク切れはないか
  • パンくずは正しく設定されているか
  • ナビゲーションは正しくインジケートされているか
  • 外部リンクにはアイコンが付与されているか
  • PDFリンクにはアイコンが付与されているか
  • GoogleMapsのリンク先に間違いはないか
  • h1は正しく入力されているか
  • 原稿は正しく挿入されているか
  • 画像は正しく挿入されているか
  • 仮、サンプル、ダミーのテキストは残っていないか
  • 仮、サンプル、ダミーの画像は残っていないか
  • 誤字脱字は含まれていないか
  • 表記統一チェックはされているか
  • 社名、代表者名に誤記はないか
  • 電話番号、メールアドレスに誤りはないか
  • オンマウス時の挙動は統一されているか
  • noscriptは設定されているか
  • ページ内リンクは正常に動作しているか
  • 電話番号に対してclassとtitleが設定されているか
  • 必要な CSS だけが読み込まれているか
  • 必要な JavaScript だけが読み込まれているか
  • hxタグは論理構造に合わせて使用されているか
  • すべての画像にaltは正しく設定されているか
  • すべての画像にサイズ指定がされているか
  • 文字サイズを変更してもレイアウトは崩れないか
  • 文字数が多く入ることでレイアウトが崩れていないか
  • 画面表示の遅延・ガタつきは発生していないか
  • JSのエラーは発生していないか
  • ソーシャルボタンは正常に動作しているか
  • フォームのlabelタグは正常に動作しているか
  • printCSSにて、指定の用紙サイズで問題なく出力されているか
  • ソースコードの重複はないか
  • 最終的な画面デザインが適用されているか
  • [フォーム]確認画面でテキストエリアに入力した改行は反映されているか
  • [フォーム]メール本文は意図した箇所で改行されているか
  • [フォーム]半角数値のみ許可項目はサーバ側で全角→半角の置き換えをしているか
  • [フォーム]半角英字のみ許可項目はサーバ側で全角→半角の置き換えをしているか
  • [フォーム]半角カナはサーバ側で半角→全角の置き換えをしているか
  • [フォーム]エンターキーで送信されるか
  • [フォーム]入力エラーメッセージが発生したとき前回の入力内容は保持されているか
  • [フォーム]入力エラーメッセージは対象となる項目を認識できるものか
  • [フォーム]入力エラー時は対象となる項目がわかるようになっているか
  • [フォーム]入力エラーメッセージは1項目1つまでの表示となっているか
  • [フォーム]○○項目に対して、入力値チェックをおこなっているか
  • [フォーム]クロスサイト・スクリプティングなどの対策は実施しているか(GETパラメータ)
  • [フォーム]クロスサイト・スクリプティングなどの対策は実施しているか(POSTパラメータ)
  • [フォーム]CSRF対策は実施しているか
  • [フォーム]全て入力し確認画面へ遷移するとき、入力した全ての値が渡っているか
  • [フォーム]必須項目のみ入力し確認画面へ遷移するとき、入力した値のみ渡っているか
  • [フォーム]確認画面から入力画面に戻った時前回の入力内容は保持されているか
  • [フォーム]完了画面をリロードしてメール送信(登録処理)されないか
  • [フォーム]完了画面には次のアクションが提示されているか
  • [フォーム]全ての送信先にメールは届いているか
  • [フォーム]送信元のアドレスは設定したものか
  • [フォーム]送信先のアドレスは設定したものか
  • [フォーム]受信したメールは文字化けをおこしていないか
  • [フォーム]メールの件名は正しく表示されているか
  • [フォーム]メールの本文は正しく表示されているか
  • [CMS]一覧などで仕様通りの件数の投稿が表示されているか
  • [CMS]カテゴリの順序は仕様通りの順序で表示されているか
  • [CMS]投稿の順序は仕様通りの順序で表示されているか
  • [CMS]ページ遷移が仕様通りの画面に遷移されているか
  • [CMS]ページ遷移がある、先頭・最終画面のレイアウトは正しいか
  • [CMS]出力されたtitleは、仕様通りの表示をしているか
  • [CMS]出力されたMetaタグは、仕様通りの表示をしているか
  • [CMS]出力されたOGPタグは、仕様通りの表示をしているか
  • [CMS]出力されたパンくずは、仕様通りの表示をしているか
  • [CMS]bodyタグに仕様通りのクラス(ID)が指定されているか
  • [CMS]メニューのカレント表示はされているか
  • [CMS]ビジュアルエディタを使用して投稿してもレイアウトは崩れていないか
  • [CMS]投稿をプレビューしたとき公開画面と同じレイアウトで表示されているか
  • [CMS]ソーシャルボタンは正常に動作していますか

制作後チェック

Web制作は人為的な作業や、目視でなければ確認できない箇所が多く、チェックシートを使ってチェックしても、それをすり抜けてしまうことが発生します。そのため、納品直前に特にクリティカルな項目のみをチェックする、制作後チェックを行い、重要なエラーだけは必ず発生させないようなチェック体制を取っています。チェックシートには、主に以下のようなチェック項目が記載されています。

  • Googleプレイスの登録は完了しているか
  • link rel=”canonical” は適切に設定されているか
  • meta name=”robots” は適切に設定されているか
  • sitemap.xml は作成、設置されているか
  • sitemap.xml の登録は完了しているか
  • doctypeは指定されたバージョンか
  • meta charsetは指定されたコードか
  • meta copyrightは指定されたものが入力されていますか
  • OGP facebookイメージは設置されていますか
  • apple-touch-iconイメージは設定されているか
  • faviconは設置されているか
  • OGPの設定は正常に動作するか
  • Link rssは設定されているか
  • JavaScriptライブラリは指定のバージョンか
  • JavaScriptライブラリは指定されたライブラリか
  • JavaScript ライブラリは対象ブラウザで使用可能なバージョンか
  • アクセス解析コードは指定されたものが設定されているか
  • リンクのパス指定方法は指定された方法で設定されているか
  • トップファイルに対するリンク指定の記述は統一されているか
  • リンク切れがないことを確認したか
  • 不要な画像、js、css、html、pdfファイルは含まれていないか
  • JavaScriptに不要なfunctionが残っていないか
  • JavaScriptに不適切なコメントが残っていないか
  • CSSに不要なセレクタが残っていないか
  • CSSに不適切なコメントが残っていないか
  • 表記統一チェックはされているか
  • CSSバリデート内容に問題はないか(ハック系は除く)
  • 404 エラー時の画面は用意したか
  • スマホ向け文字サイズ自動調整機能は制御されているか
  • スマホ向け自動電話番号機能は制御されているか
  • 想定していないリンクが設定されていないか
  • 画像ファイルの容量は適切か
  • 不要なファイルが含まれていないか
  • 未購入のカンプデータが残っていないか

公開後チェック

納品データに間違いはなくとも、本番環境に載せた際にうまく作動していなかったり、あるいは納品データが正しくアップされておらず、不具合が発生していたりすることがあります。そのため私たちは、公開直後も必ずWebサイトをチェックし、大きな問題が発生していないか、確認を取るようにしています。チェックシートには、特に重大な確認項目が記載されています。

  • 表示の不具合が発生していないか
  • リンク外れは存在しないか
  • リンク先がテスト環境になっていないか
  • 各種バリデータでのエラーは検出されていないか
  • スマートフォンでも正常に表示されているか
  • ソーシャルプラグインのボタンは動作しているか
  • ログ解析のタグは正常に動作し、データが取得できているか
  • sitemap.xmlの登録は完了しているか。
  • フォームにて、テスト送信は問題なく完了できたか
  • フォームのテスト送信後、DBやCSVなどに正常にデータが蓄積されているか
  • ログインは正常に行えるか
  • 権限による閲覧制限や機能制限は正しく機能しているか
  • お問い合わせや資料請求など、サイトのゴールには正しく遷移できるか
  • カートや購入は正常に機能しているか
  • 電話番号やメールアドレスに誤りはないか

様々な環境で閲覧され、OSのアップデートも頻繁に起こるがゆえに、Webサイトは常にエラーと表示一体ですが、その発生をできるだけ低く抑えるためのワークフローを整備しています。

制作・開発メニュー Service Menu of Development

テスト

多種多様なデバイスやブラウザで閲覧されるWebサイトに不具合は付き物です。私たちはチェックシートによる三段階確認を行うことで、不具合発生率をできるだけ低く抑えることを目指しています。