本で勉強したい方へ。Webディレクション関連の本はこちらから。
はじめに
Webサイト公開は、プロジェクトの最終段階であり、長期に渡る努力の集大成です。
しかしながら、公開作業を軽んずれば、思わぬ落とし穴に陥る可能性があります。
本コンテンツでは、Webディレクターがサイト公開前に確認すべき重要なポイントを5つの観点から詳しく解説します。
確認作業を怠ると、SEO対策の失敗、ユーザビリティの低下、セキュリティ上の問題など、様々な課題に直面するかもしれません。
Webサイトの品質を高め、ユーザーに良好な体験を提供するためには、これらのチェックポイントを理解し、漏れなく実施することが不可欠です。
コーディングとデザインの確認
Webサイトの品質を左右する最重要事項は、コーディングとデザインの精度です。
ここでは、その確認方法について詳しく解説します。
デザインの突合せ
公開前には、必ずデザインカンプとWebサイトの突合せを行う必要があります。
レイアウト、要素の配置、コンテンツ内容などが、デザインどおりに再現されているかを徹底的にチェックします。
ディレクターは、デザイナーと緊密に連携し、デザインの意図を正しく汲み取る必要があります。
また、ディレクターは常に最新のデザインカンプを把握しておく必要があります。
デザインがブラッシュアップされた場合、そのたびにカンプを最新版に置き換え、反映漏れがないよう注意を払います。
デザインの細部にまで気を配り、ユーザーが質の高いWebサイトを体感できるよう万全を期すべきです。
表示の確認
デザインだけでなく、Webサイトの表示についても、様々な環境で十分なチェックを行う必要があります。
以下の観点から確認を行います。
- ブラウザ: Google Chrome、Safari、Microsoft Edge、Internet Explorer、Firefoxなどの主要ブラウザで表示を確認する。特に、IE6などの古いブラウザにも注意が必要。
- デバイス: PC、タブレット、スマートフォンなどのデバイスで表示を確認する。
- 画面解像度: 1366px、1536pxなどの一般的な解像度だけでなく、より高解像度の環境でも表示を確認する。
表示の確認作業は、目視による確認が中心となります。
しかし、ディレクターはデバイスやブラウザをできる限り多く揃え、実機で確認することが重要です。
エミュレーターなどのツールを活用するのも一つの手段ですが、実機と同じ挙動を期待できるわけではありません。
機能の確認
Webサイトの機能面でも、公開前に確認すべき項目が多数存在します。
特に、以下の点に注意を払う必要があります。
- ボタンのhover時の挙動
- スクロールの動作
- アニメーションの動作
- フォームの入力補助、確認画面、完了画面
- キーボード操作への対応
ユーザーがWebサイト上で行う一連の操作について、すべての側面を確認する必要があります。
また、アクセシビリティの観点から、キーボード操作への対応も欠かせません。
入力補助や確認画面の表示なども、フォームの利用者にとって重要な項目です。
ディレクターは広い視野を持ち、ユーザーフレンドリーな環境が整っているかを吟味すべきです。
SEO対策の確認
次に、Webサイトの価値を大きく左右するSEO対策について確認します。
SEO対策を怠れば、サイトが検索エンジンで上位表示されず、想定していたユーザーにリーチできない可能性があります。
構造化データの設定
近年では、構造化データによるSEO対策の重要性が高まっています。
構造化データとは、Webサイト上の情報を分かりやすく構造化することで、検索エンジンがその情報を適切に認識できるようにする仕組みです。
たとえば、レシピサイトでは料理名や材料、手順などの情報を構造化データで記述します。
これにより、検索エンジンはそのサイトの料理情報を適切に判断し、ユーザーからの関連検索に対して正確にヒットさせることができます。
ディレクターは、構造化データがサイト全体で適切に設定されているかを確認する必要があります。
メタタグの設定
Webサイトのメタタグ設定もSEO対策上、極めて重要です。
メタタグには以下の種類があり、それぞれの設定を確認する必要があります。
- title: ページタイトル。各ページ内容を的確に表す必要がある。
- description: ページの概要を説明するディスクリプション。検索結果の抜粋に使われるため、魅力的な文章にする必要がある。
- keywords: ページのキーワードを列挙する。過去に比べ重要度は下がったが、一定の効果は期待できる。
titleやdescriptionは検索結果に直接表示されるため、サイトの印象を大きく左右します。
ディレクターは、すべてのページでメタタグが適切に設定されているかを確認し、必要に応じて修正を行うべきです。
OGPの設定
OGPとは、Open Graph Protocolの略称です。
主にFacebookを始めとするSNSでのシェア時に、サイトの情報をどのように表示するかを指定するための仕組みです。
設定されるメタタグには以下のようなものがあります。
- og:title: シェア時に表示されるタイトル
- og:description: シェア時に表示される概要
- og:image: シェア時に表示される画像のURL
SNS経由でのトラフィックを重視するのであれば、OGPの設定は必須といえます。
ディレクターは、すべてのページでOGPが正しく設定されているかを確認する必要があります。
技術的な確認
Webサイトにおける技術的な側面も、公開前に確認しておく必要があります。
技術的な不備があれば、ユーザビリティの低下やセキュリティ上の問題につながる恐れがあります。
HTMLのバリデーション
最新のHTML仕様に沿ってコーディングがされているかを確認するため、HTMLのバリデーションチェックを行います。
バリデーションチェックでは、主に以下の点が検証されます。
- 不要なコメントやデバッグ用のコードが残っていないか
- 適切にタグがクローズされているか
- 属性値が正しく付与されているか
バリデーションエラーがあれば、ブラウザごとのレンダリング結果に差異が出る可能性があります。
エラーを排除し、すべてのブラウザで安定したサイト表示を実現する必要があります。
セキュリティ対策
公開されたWebサイトは外部からのリスクにさらされます。
ディレクターは、以下のようなセキュリティ対策を徹底する必要があります。
- SQLインジェクション対策
- XSS対策
- HTTPSの導入
SQLインジェクションは、不正な入力値によってデータベースが攻撃される脆弱性です。
XSSはクロスサイトスクリプティングの脅威で、外部からの不正なスクリプトが実行される可能性があります。
こうした脅威に対して適切な対策を講じる必要があります。
また、通信の安全性を守るため、HTTPSの導入も欠かせません。
リンクチェック
Webサイト内のリンク切れは、ユーザーにとって不快な体験につながります。
ディレクターは、リンクチェックツールなどを活用し、以下の点を確認する必要があります。
- 内部リンクが正しくつながっているか
- 外部リンク先が無事稼働しているか
- リンク先のファイルが存在するか
リンクチェックは自動化できますが、サンプリングによる手動確認も重要です。
たとえリンクチェックツールでエラーが出なくても、思わぬリンク切れが存在する場合があるためです。
解析・計測の確認
Webサイト公開後、適切にデータ解析や計測を行い、施策の効果を測定することが不可欠です。
そのためにも、解析・計測ツールが適切に導入されているかを公開前に確認しましょう。
アクセス解析の設定
Webサイトの訪問データを収集・分析するために、アクセス解析ツールを導入する必要があります。
Google Analyticsが最も一般的ですが、他にもAdobeやYahoo、フリーのStatCounterなどの選択肢があります。
これらのアクセス解析ツールでは以下のようなデータを収集できます。
- 訪問者数(セッション数)
- ページビュー数
- 滞在時間
- 直帰率
- デバイス/ブラウザ/OSの内訳
- 流入元の内訳(直接入力、リンク、検索エンジンなど)
公開前には、アクセス解析タグが適切に設置されているかを確認する必要があります。
また、収集されたデータがリアルタイムで確認できることも事前にチェックしましょう。
コンバージョン計測
アクセス解析に加えて、Webサイトの重要な目標である各種コンバージョンの計測も欠かせません。
コンバージョン計測により、以下の指標を把握することができます。
- 資料DL数
- フォームの入力/送信数
- 購入/契約数
- 会員登録数
特に電子商取引やリードナーシングなどに関連するサイトでは、適切にコンバージョン計測が行えるよう、タグマネージャーの設定を確認する必要があります。
計測サービスの導入チェック
アクセス解析やコンバージョン計測以外にも、Webサイト運営に役立つサービス・ツールを導入する場合があります。
それらが適切に設置されているかを公開前に確認しましょう。
- マーケティングオートメーションツール
- リマーケティングタグ
- A/Bテストツール
- ヒートマップツール
これらのツールを活用することで、サイト改善の手がかりを得られます。
ディレクターは、それらのツールが設置されているかを一つ一つ確認し、公開後の運営を円滑に行える環境を整備することが重要です。
アクセシビリティチェック
ユーザーに快適なWebサイト体験を提供するには、アクセシビリティ対応も欠かせません。
ディレクターは公開前にアクセシビリティチェックを行いましょう。
操作性の確認
Webサイト上の様々な操作が、様々な環境でスムーズに行えるかを確認する必要があります。
特に以下の観点から、問題がないかを徹底的に確認しましょう。
- フォーカス可視化
- キーボード・スクリーンリーダーでの操作性
- 適切なスキップナビゲーション
- 色覚や視覚特性への配慮
ユーザーはデバイスによって異なる操作性を求められます。
PCではキーボード操作が中心ですが、スマホやタブレットではタップ操作が主となります。
双方のインターフェースで違和感なく操作できるかを検証しましょう。
アクセシビリティチェック
アクセシビリティに関するガイドラインとして、世界標準規格のWCAG(Web Content Accessibility Guidelines)があります。一般にWebサイトでは、このガイドラインに基づいてアクセシビリティを評価することが推奨されています。
WCAGのチェックポイントは以下のようなものがあります。
- 代替テキストの適切な設定
- 適切な見出し階層の使用
- コントラストの確保
- リンクテキストの適切な設定
コーディングやデザインの視点からのチェックだけでなく、アクセシビリティに基づく評価を行うことが重要です。
ユーザー目線で丁寧にチェックを行い、誰もが利用しやすいWebサイトを目指しましょう。
まとめ
Webサイトの公開前には、様々な観点からチェックを行う必要があります。
デザインとコーディングの品質、SEO対策、技術的なセキュリティやパフォーマンス、データ解析・計測面のチェック、そしてアクセシビリティの確保など、漏れのないチェックが不可欠です。
チェック作業は、ディレクター一人で行うのではなく、デザイナー、エンジニア、SEOスペシャリストなど、関係者全員が役割分担して行うことが重要です。
時間と手間はかかりますが、質の高いWebサイトを構築するためには欠かせない工程です。
ユーザーにとって魅力的で利用しやすいサイトを実現すべく、関係者みんなで力を合わせて、最後の仕上げを行いましょう。
