MD-Blog_Web Creative

こんにちは、ディレクターの藤原です。

Webディレクターとはどんな職務なのか？　そもそも"ディレクション"とは何を指すのか？
Webプロダクション業界内でも会社によってその捉え方は異なります。また同じ会社でもプロジェクトが異なれば役回りも変わってきます。ただ、どんなプロジェクトでもWebディレクター職の人間なら「ここを気をつけている」というポイントがいくつかあります。

"Webサイト"と呼ばれる媒体の機能が多様化してきている昨今、一概にそのすべてを洗い出すことは困難ですが、今回のブログでは「Webディレクターがサイト公開前にチェックしたい11のこと」をテーマに、いくつか基本的なポイントをまとめてみたいと思います。

1. 最低限のSEO対策チェック

どんな趣旨のサイトでも、METAタグの抜け漏れチェックと同時に最低限のSEO対策チェックを行います。これは検索結果で上位に目立つため...という広告的側面ではなく、本来その情報を求めている人に届きやすくするため、という当然の視点からチェックしていきます。
最低限チェックしておきたい項目としては - title - keywords - description - h1

以上の4つの内容が、サイトがアピールしたい内容に適切な文言・表現になっているか確認します。
また、title/keywords/descriptionの各METAタグについては、一律に同じ単語を割り振るのではなく、各ページごとにユニークな内容が入力されているか、文章内容に合った文言が選定されているか、同時に確認していきます。

各METAタグの記述方法については以下のブログで分かりやすく解説されています。
http://www.suzukikenichi.com/blog/optimization-of-title-h1-and-meta-description/

2. OGP

Facebookで「いいね！」された時や、mixiでチェックされた時に表示される、あの内容です。

OGPの記載項目にはいくつか種類がありますが、最低でも

• og:site_name
• og:title
• og:image
• og:url
• og:description

この5つの情報は登録しておきましょう。
公開時にはFacebook上でURLを入力して、意図した内容がきちんと表示されるかをチェックします。

OGPの設定については以下のブログが分かりやすいですね。
http://smmlab.aainc.co.jp/?p=13024

3. sitemap.xml

Google、Bingなどの検索エンジンにサイト内のページを認識させるためのものです。このファイルに記載されたURLがインデックス化されるという保証はされていませんが、検索エンジンを正しくクロールさせるためには欠かせないファイルです。

「sitemap.xml Editor」といったサイトマップを自動で生成するサービスもありますが、実際に意図した検索結果へ導く構成になっているか、ファイル内部のチェックが必要です。クリエイターやエンジニアとも協働でファイル内容の整理、設置を行いましょう。

4. robots.txt

sitemap.xmlとセットで設置します。Googleなどの検索エンジンに対して、サイトのどこにアクセスしてはいけないかを定義することができます。
サーバ上にrobots.txtファイルが設置されていれば、検索エンジンのクローラーは原則としてその記述ルールに従います。特にMovable TypeなどのCMSでサイトを管理している場合には、「出力はするが検索結果に表示させたくない」というディレクトリが発生します。これらがきちんとrobots.txtに記載されているかを確認します。

5. faviconとapple-touch-icon（iOSホーム画面用アイコン）

faviconについては、ブラウザのアドレスバーやブックマークに意図したアイコン画像がきちんと表示されているか確認します。
apple-touch-iconは、iPhoneやiPadでホーム画面にショートカットを登録し、ホーム画面用の画像がきちんと表示されるか、画質・画角が適切かチェックします。

6. ブラウザ検証

Adobe BrowserLabなどのブラウザチェックツールも存在しますが、実際にユーザがご覧になる印象を確認するためには、Windows・Macそれぞれの実機でのデバッグは欠かせません。サイトによってターゲットブラウザは異なりますが、MONSTER DIVEでは主に以下の環境で検証を行うことが多いです。

• Windows: IE6〜7以上 または IE8以上 または IE9以上、FireFox / Safari / Chrome　※いずれも最新版
• Mac: Safari / Chrome / FireFox　※いずれも最新版

最近はPC向けのWebサイトと併設してスマートフォン向け／タブレット向けの表示スタイルを用意するサイトも増えてきていますので、各デバイスでの一般的な閲覧環境でのチェックも行います。
特にAndroidは、OSのバージョンが2.x系・3.x系・4.x系でブラウザで見栄え・表示処理が大きく異るケースがあるので、入念にチェックを行います。
なお、スマートフォンに最適化されていないサイトであっても、特に若年層向けのコンテンツについてはスマートフォンによるアクセスが想定されるため、適切にサイトが表示されているかどうか、チェックを行うことがベターだと思います。

デバイスやブラウザのシェアは以下のサイトで詳しく説明されています。 http://marketshare.biz-samurai.com/

7. バリデート / JavaScriptエラーチェック

HTMLのバリデートは、「Markup Validation Service」などのツールを使ってチェックしましょう。
JSのエラーについては、FireFoxの「Firebug」やGoolge Chromeの「Console」などを使用して確認します。正常ではないチェック結果が得られた場合は、なるべく具体的な箇所を調査の上、クリエイターやエンジニアと情報共有して解決していきます。

8. 404エラーページ

既に公開が終了したページなど、現在存在しないページへのアクセスに対して代替表示するページですね。
404ページを確認するためには、URLにランダムなファイル名を入力して、きちんとリダイレクトされるかをチェックします。

少し脱線しますが、これらNot Foundのページにアクセスしたユーザをイライラさせないために、ユニークなデザインをした404ページが増えて来ているようです。詳しくはGigazineさんの記事をどうぞ。

9. SSL・フォーム等の確認

お申し込みフォームやお問い合わせページなど、ユーザの入力を求めるコンテンツがある場合は、徹底的にチェックが必要です。
フォームの挙動や自動返信メールの内容の確認はもちろんですが、JSオフ時の動作や該当ページへのリンクがSSLとして処理されているかどうかなど、想定される様々なアクセスパターンを考慮してチェックを行います。

10. Google Analyticsの設定

言わずと知れたGoogleが提供しているアクセス解析ツール。多くのサイトでほぼ標準的に導入されています。サイト運用上の参考データだけでなく、Adwordsなど広告出稿を行う場合には直接的なマーケティングデータとなります。
ディレクターサイドでは、サイト公開と同時に、リアルタイムできちんと集計できているかを確認します。
Google Analyticsで取得したデータの解析にはしっかりした設定が必要なので、また別の機会に「Google Analytics設定のポイント」というタイトルで詳しくご紹介したいなと思っています。

11. Webmaster Toolの登録

GoogleやBingが提供しているサイト運営者向けのツール。上部に記述したrobots.txtやsitemap.xmlの管理もこちらで行います。SEO対策を行うサイトでは登録は必須です。下記の記事を参考に登録しておきましょう。

■GoogleとBingのWebmaster Tool
http://support.google.com/webmasters/?hl=ja
http://www.bing.com/webmaster/help

■ウェブマスターツールの登録と導入方法
http://whitehatseo.jp/google-webmaster-tools%E3%81%AE%E7%99%BB%E9%8C%B2%E3%81%A8%E5%B0%8E%E5%85%A5%E6%96%B9%E6%B3%95/

以上、「Webディレクターがサイト公開前にチェックしたい11のこと」と題してお届けしました。
これらの内容はディレクター職以外でも、サイトの構築や運営に関わっている人すべてがチェックすべきポイントです。制作担当者だけでなく、実際にそのサイトのオーナーとなる企業のWeb担当者の方もぜひ詳しく知っていただければ、より効率的なサイト運用が可能になるかと思います。はじめのチェックが肝心！なのです。

またこれらの情報は日々進化／変化していますので、今後もアップデートした内容をお伝えしていければと考えています。