BrowserLabの使い方

BrowserLabを使うには、アドビの「Adobe ID」を取得しておく必要があります。
アドビの製品を買っていない人でも無料で登録できるので、まずは登録を済ませておきましょう。

Adobe BrowserLabのお勧めの使い方は、いきなりWebサイトのURLを入力してチェックするのではなく、まず初めに、「View」から「2―up View」を選びます。
すると画面が左右に二分割されるので、OSの名前のところにある▽をクリックして、「Window XP系のブラウザ」と「MacのOS X系のブラウザ」を選びます。
こうすることで、左右の画面を使ってWindow系とMac系の比較をすることができるようになります。
この状態で、WebサイトのURLを入力してチェックすると、あらかじめ指定したブラウザでの表示結果の画面キャプチャを自動生成してくれます。OSによる描画の違いや、ブラウザのバージョンによる描画の違いを実感してください。

「Adobe BrowserLab」とは?

Netscapeとの戦いに勝利したInternet Explorerが大多数を占めていたブラウザシェアも、Firefoxの登場で戦況が変わってきました。
新興勢力のGoogle Chromeや古豪のOperaとSafari。今は、まさにブラウザ群雄割拠の時代に突入しました。
そんな状況の中でたいへんな思いをしているのがWebクリエイターです。
さまざまなブラウザで正常に見えるように作らなければならないからです。
すべてのブラウザでまったく同じように作ることは不可能で、実際は表示が崩れないように作ることが求められます。
作業内容としては、各種ブラウザで実際に表示してチェックするのですが、ブラウザだけでもバージョンの遣いがたくさんあり、さらにOSもWindowsとMacそれぞれに バージョンの違いがあります。
OSの種類とバージョン、ブラウザの種類とバージョンのすべてを揃えた環境を用意するのは理想的ですが、現実的には難しいでしょう。
そういった場合には、「Adobe BrowserLab」のようなブラウザチェックができるツールを使ってクロスブラウザテス トをすると作業効率が良くなります。

「IE7.js」で各種ブラウザに対応する

【「IE7.js」とは?】
「IE7.js」は、GoogleのJavaScriptライブラリで提供されている、安心して使うことのできるJavaScriptです。
「IE7.js」を使えば、Microsoft Internet Explorerの標準に準拠したブラウザと同じように動作させることができます。
IE5とIE6でHTMLとCSSの問題を修正したり、透過PNGに対応したりすることができます。

【「IE7.js」などの使い方】
コードをコピーしてHTMLの<head>内に埋め込むだけで使うことができます。
これで、透過PNGや疑似クラス:hover、マージン:auto、mln-、max-などが修正できるようになるはずです。
しかし、「IE7.js」は、疑似的に対応しているように見せかけるもので、なおかつベータ版ですから、すべてのブラウザバージョンで起こり得る問題を完全に解決してくれるという過度な期待は持たないでください。「IE7.js」でも問題が修正できない場合は、個別に対応することが必要ですが、これがなかった時よりも、かなり対応がラクになるはずです。
とりあえず、「IE7.js」「IE8.js」「IE9.js」のすべてをテス卜してみて、自分のコーディングのクセも考慮して、修正の手数が少ないものを選ぶのがよいでしょう。

「Another HTML-lint」90 点以上をクリアする

W3Cの「Markup Validation Service」と「CSS Validation Service」は、判定とエラーや警告が示されるだけでしたが、「Another HTML-lint gateway」は、検証結果のページに解説があります。
使い方は、まず初めに「URL」「OATA」「FILE」のどれかを選んでください。
次に「URL」を選んだ場合は、テキストボックスにURLを入力し、「OATA」を選んだ場合は、大きなテキストボックスにソースをぺーストします。
「FILE」を選んだ場合は、「参照」からUPするファイルを選択してください。
最後に「チェック」をクリックします。

チェック結果で、「工ラーは見つかりませんでした。」と「このHTMLは100 点です。」と表示されればベストですが、実際は90点以上でも十分高得点なので、100点にこだわる必要はありません。
90点から100点に精度を上げるために時間を費やすよりも、コンテンツの充実のために時間を費やすほうが、賢明な時間の使い方と言えるでしょう。
とはいえ、100 点で表示される右側の「たいへんよくできました」のマークは、取れたら取れたでうれしいものです。コーディング技術を磨きたい方は、チャレンジしてみるのもよいのではないでしょうか?

HTMLがW3C勧告に準拠しているかを調べる

W3Cとは、インタ 一ネツトで使用される各種技術の標準化を推進するために設立された非営利の標準化団体です。
正式名称は、World Wide Web Consortium (ワールド・ワイド ・ウ工フ・ コンソ ーシアム)です。
一般的にはW3C(ダブリュースリーシー)と 呼ばれています。

W3Cの 「Markup Validation Service」は、 HTMLやXHTMLの記述が勧告内容と照らし合わせて準拠しているか、していないのかを検証できるサービスです。
分かりやすく言うと、HTMLやXHTMLの文法が正しいかどうかを判定してくれるサービスということになります。
使い方は簡単で、チェックしたいWebサイトのURLをテキストボックスに入力し、「Check」をクリックするだけです。「successfully checked」という表記が入った緑色の帯が表示されれば、W3Cの勧告内容に準拠したHTMLやXHTMLということになり、 アイコンを使うことができます。「Errors found」という赤い帯が表示されれば、W3Cの勧告内容に準拠できていないことになります。
この場合はもちろんアイコンも使えません。

コンテンツキーワードについて

□コンテンツキーワードとは
コンテンツキーワードとは、Googleがあなたのウェブサイトの中で「重要」だと認識しているキーワー ドを、200 個まで表示してくれるツールです。コンテンツキーワードを確認することで、Googleがあなたのウェブサイトをどの様に認識(解釈)しているかがわかります。コンテンツキーワードでポイントとなる「重要度」は、ウェブサイト全体におけるキーワードの出現率によって順位付けされています。

メニュー→最適化→コンテンツキーワード

コンテンツキーワードと併せて、「トラフィック→検索クエリ」のレポートも確認するといいでしょう。検索クエリレポートでは、ユーザーが入力した検索キーワードに対して、自社のウェブページが何回表示されたか、そのクリック数、平均掲載順位を確認することができます。検索順位は、Googleが認識している重要な単語(コンテンツキーワード)と、ユーザーの検索キ ワードは相関していますので、目標キーワードで順位を上げるためには、コンテンツキーワードを改善する必要があります。

□コンテンツキーワードの改善方法

コンテンツキーワードの改善方法は、キーワードの出現頻度を増やすことです。但し、キーワードを単純に増やすだけではスパムと判定されます。対象となるキーワードに関するウェブページを増やす方法で出現頻度を上げていく方法が最もよいでしょう。単語1に対して、ウェブページを1ページ増やすくらいの努力が必要です。

□検索順位の調べ方
お使いのブラウザによっては、よく見るウェブサイトが上位に表示されます。これは Cookie(クッキー)と呼ばれる機能が働いているためです。自分のパソコ ンで、純粋な検索順位を確認する方法をご紹介しましょう。

・Google Chromeのシークレットウインドウで検索する

この他には、Internet Explorerをログアウ卜して検索する、スマホでブラウザの検索履歴を消去して検索する、などがあります。Cookieは大変使利な機能ですが、検索順位を調べるのには適していません(Cooki eを消去すると、よく見るウェブサイトで保存されているID&PassWordも消去されますのでご注意下さい)。

ディレクトリー階層はなるべく浅くする

URL だけでなく、ディレクトリーの階層も 浅くする ことが求められます。
実際のお客様でも、深いディレクトリー構造のURLを採用していたために、インデックス状況や順位が芳しくないサイトがありました。 これらを浅いディレクトリー構造のURL に改修した途端にインデックスされたという実績があります 。単純に構造を浅くしただけではなく、永続化の観点から今まで存在 していた URLから新しい URL へのリダイレクトも行いました。なお、このケースでは、深いディレクトリーの URL を探用していたころはGoogle だけの順位が不調で、 Yahoo! JAPAN では問題ありませんでした。浅い構造に改修した結果、 Google の順位が改善され、 Yahoo! J AP ANは現状維持となりました。

トップページの役割

Web サイ トのトップページとは、 ほかの Web サイトから紹介される際、 リンクされることがもっとも多いWEBぺージであり、ひいては Web サ イトのエントランスにあたる。 トップページには非常に多くの役割があるが、 エントランスに訪れたユーザーを目的のWebぺージに適切に案内することがトップペ ージのもっとも重要な役割といえるだろう 。 ユーザーを目的のWeb ベ ージに案 内する際には、ユーザーが迷わず、ストレスなしにそのページまで到達できることが理想的である。そのため、ユー ザーのニース をしっかりと把握し、 ニーズの高いページに移動しやすいように、わかりやすい リンクを配置することが必要になる。また、 トップペ ー ジはWEBサイトの目次的な役割をも担っている 。ユー ザ に対して優先度の高い情報を伝える場としても、 トップページは重要な意味を
持っている 。もちろん、 トップペ ージ に掲載する情報の内容は、 Web サイ トの目的によ って異なる。