複数ブラウザで動作確認
消費者はいろんな環境で貴方のホームページを見ている。最低限の動作確認は店長の責任。
消費者はいろんな環境で貴方のホームページを見ている。最低限の動作確認は店長の責任。
 home 簡単には儲からない ネット販売の成功法則［広告宣伝］ 広告宣伝入門 メルマガ発行［顧客対応］ 顧客対応と広告［ホームページ］ ホームページ入門 決済方法入門・カード決済（消費者） ・カード決済（ショップ） クレジットカード決済 コンビニ決済 一円会社設立［共通］ 失敗/成功事例［全国セミナー開催］ セミナー講演依頼募集全国講師派遣承ります。 ［その他］ ショップ作成前に 編集後記 リンク集［サイト再編のために移動］ SEM オーバーチュア広告 SEO対策日記 SEM/SEO用語集［弊社執筆書籍］    不許複製・禁無断転載 2008/May/12  |
| 【目次】 |
不特定多数の人に見てもらうHPは相手のPC環境を想定して動作確認を行うのが鉄則です。
「そんなことは十分承知」とお叱りを受けるかもしれませんが、実際に見てみると数十ショップに1店は"オカシイ表示"になっているのが現実です。やはり、初心に戻って基礎から検討してみたいと思います。
●ブラウザによる相違
ご存知のように、同じHPでもブラウザによって見え方が違います。
ちょっとしたイメージの違いであれば問題ありませんが、あるブラウザで正しく表示されても別の種類のブラウザでは表示できないということはよくあります。特に、不特定多数の消費者を相手とするオンラインショップにおいては、これは致命的なことなのです。
●OS
自ショップのHPを動作チェックするには、OSの違いによってWindowsとMacの2種類のPCを用意するのが理想的です。
Windowsユーザにとっては「未だMac？」という感想を持たれる人もいるかもしれませんが、現時点でもMacは5%程度の市場シェアを持っているので無視するわけにはいきません。
「HPをチェックするためだけにMacを購入するのはムダな投資だ」という意見には納得できる部分もあります。その場合には、Macを持っている知人を探して協力を依頼するのも一考です。
例えば、Mac版ブラウザのNN（ネットスケープ）4.xでは、bodyタグの背景色の指定が無い場合には灰色が初期値となります。例えばYahoo!Japanでは下記のように背景が灰色で表示されます。
●ブラウザ
OSを用意するよりも簡単なので必ず実行して欲しいのが、ブラウザの種類を揃えることです。
IE（インターネットエクスプローラ）の利用者が圧倒的に多い（AccessReportの調査では95%超）のですが、NNの利用者も無視できる程に少なくはありません。NNは異なるバージョンの共存が可能なので、最新版のNN6.xと一緒に旧NN4.xもインストールしておきましょう。（NNの旧版はArchived Productsからダウンロード可能です。）
特にNN4.x（実際には4.7x）の完成度が低く特殊な動作をするので要注意です。しかも市場シェアも2%程度ありますので忘れずに用意して下さい。
Opera（オペラ）についてはシェアが0.数%しかありませんので最悪「無視」でもいいかと思いますが、できればチェックした方が無難でしょう。
●JavaScript
もっとも注意を要するのはJavaScriptを利用した時です。
ブラウザによってサポート状況が大きく異なるので、できればJavaScriptは利用しないのが賢明です。
どうしても利用しなければいけない時は、オリジナルのプログラムは信頼できる配布HPから拝借して下さい（もちろん著作権に注意）。ちょっと複雑なプログラムを正確に動かそうと思えば、ブラウザの種類を判断してルーチンを分岐させることになります。マトモなJavaScriptを配布しているHPでは必ずOSとブラウザのバージョン毎に動作確認をしている筈なので、その点も確認して下さい。
そして自分で一行でも変更した場合には、やはり2つのOSと異なるブラウザで動作確認をすることをお勧めします。
更に念のためにOperaブラウザでも確認をした方が無難です。IEとNNで問題なく動作していたJavaScriptがOperaでは動作しないということがあります。（実際、弊社のサービスでも何故かOperaだけでは動作しないJavaScriptというものもあり、修正を余儀なくされた経験があります。）
●スタイルシート
スタイルシートにも注意が必要です。
スタイルシートはデザイン変更に便利なのですが、NN4.xのサポート状況が非常に弱いという現実があります。
有名な例では、行間を指定する line-height があります。通常のブラウザでは行と行の間が詰まっていて読みにくいのですが、 line-height 属性で行間を指定すると可読性が向上します。例えば、このHPの左側ガイダンス（目次）は行間を120%に設定しているので、行と行の間に20%程度の隙間があるのがお分かり頂けると思います。
しかし、NN4.xにはバグがあって、line-height を利用すると画像が文字と重なってしまってHPがまともに表示されません。例えば、NN4.7では下記のように画像が文字を隠すことになります。
これでは、せっかくの訪問客もすぐに帰ってしまいます。
このように、スタイルシートの利用も慎重にすべきです。スタイルシートを利用した時には必ず各種ブラウザで動作確認をする習慣を身に着けて下さい。
●その他
NN4.x系では、checkbox（チェックボックス）や radio（ラジオボタン）は <form> タグで括っていないと全く表示されません。何かのデザインとしてこれらのタグを利用する場合は、必ず <form> タグを忘れないようにして下さい。
また、NN6.x系の特徴として「画像へのリンクが切れていると何も表示しない」という親切機能があります。しかし、ショップがNN6.xでしか自ショップHPの動作確認をしなければ、IEで見た時に「×」画像だらけになっている危険性があります。例えば下記は同じHPをNN6とIE6で表示しています。
時々「×」画像があちこちにあるHPを見たことがありませんか？。どう考えても「工事中」にしか見えないショップのHPであっても、本人（店長）には「×」画像が見えていないことも多々あるのです。画像のリンク切れは必ずIEでチェックをして下さい。
ご存知のように、同じHPでもブラウザによって見え方が違います。
ちょっとしたイメージの違いであれば問題ありませんが、あるブラウザで正しく表示されても別の種類のブラウザでは表示できないということはよくあります。特に、不特定多数の消費者を相手とするオンラインショップにおいては、これは致命的なことなのです。
●OS
自ショップのHPを動作チェックするには、OSの違いによってWindowsとMacの2種類のPCを用意するのが理想的です。
Windowsユーザにとっては「未だMac？」という感想を持たれる人もいるかもしれませんが、現時点でもMacは5%程度の市場シェアを持っているので無視するわけにはいきません。
「HPをチェックするためだけにMacを購入するのはムダな投資だ」という意見には納得できる部分もあります。その場合には、Macを持っている知人を探して協力を依頼するのも一考です。
例えば、Mac版ブラウザのNN（ネットスケープ）4.xでは、bodyタグの背景色の指定が無い場合には灰色が初期値となります。例えばYahoo!Japanでは下記のように背景が灰色で表示されます。
●ブラウザ
OSを用意するよりも簡単なので必ず実行して欲しいのが、ブラウザの種類を揃えることです。
IE（インターネットエクスプローラ）の利用者が圧倒的に多い（AccessReportの調査では95%超）のですが、NNの利用者も無視できる程に少なくはありません。NNは異なるバージョンの共存が可能なので、最新版のNN6.xと一緒に旧NN4.xもインストールしておきましょう。（NNの旧版はArchived Productsからダウンロード可能です。）
特にNN4.x（実際には4.7x）の完成度が低く特殊な動作をするので要注意です。しかも市場シェアも2%程度ありますので忘れずに用意して下さい。
Opera（オペラ）についてはシェアが0.数%しかありませんので最悪「無視」でもいいかと思いますが、できればチェックした方が無難でしょう。
●JavaScript
もっとも注意を要するのはJavaScriptを利用した時です。
ブラウザによってサポート状況が大きく異なるので、できればJavaScriptは利用しないのが賢明です。
どうしても利用しなければいけない時は、オリジナルのプログラムは信頼できる配布HPから拝借して下さい（もちろん著作権に注意）。ちょっと複雑なプログラムを正確に動かそうと思えば、ブラウザの種類を判断してルーチンを分岐させることになります。マトモなJavaScriptを配布しているHPでは必ずOSとブラウザのバージョン毎に動作確認をしている筈なので、その点も確認して下さい。
そして自分で一行でも変更した場合には、やはり2つのOSと異なるブラウザで動作確認をすることをお勧めします。
更に念のためにOperaブラウザでも確認をした方が無難です。IEとNNで問題なく動作していたJavaScriptがOperaでは動作しないということがあります。（実際、弊社のサービスでも何故かOperaだけでは動作しないJavaScriptというものもあり、修正を余儀なくされた経験があります。）
●スタイルシート
スタイルシートにも注意が必要です。
スタイルシートはデザイン変更に便利なのですが、NN4.xのサポート状況が非常に弱いという現実があります。
有名な例では、行間を指定する line-height があります。通常のブラウザでは行と行の間が詰まっていて読みにくいのですが、 line-height 属性で行間を指定すると可読性が向上します。例えば、このHPの左側ガイダンス（目次）は行間を120%に設定しているので、行と行の間に20%程度の隙間があるのがお分かり頂けると思います。
しかし、NN4.xにはバグがあって、line-height を利用すると画像が文字と重なってしまってHPがまともに表示されません。例えば、NN4.7では下記のように画像が文字を隠すことになります。
これでは、せっかくの訪問客もすぐに帰ってしまいます。
このように、スタイルシートの利用も慎重にすべきです。スタイルシートを利用した時には必ず各種ブラウザで動作確認をする習慣を身に着けて下さい。
●その他
NN4.x系では、checkbox（チェックボックス）や radio（ラジオボタン）は <form> タグで括っていないと全く表示されません。何かのデザインとしてこれらのタグを利用する場合は、必ず <form> タグを忘れないようにして下さい。
また、NN6.x系の特徴として「画像へのリンクが切れていると何も表示しない」という親切機能があります。しかし、ショップがNN6.xでしか自ショップHPの動作確認をしなければ、IEで見た時に「×」画像だらけになっている危険性があります。例えば下記は同じHPをNN6とIE6で表示しています。
時々「×」画像があちこちにあるHPを見たことがありませんか？。どう考えても「工事中」にしか見えないショップのHPであっても、本人（店長）には「×」画像が見えていないことも多々あるのです。画像のリンク切れは必ずIEでチェックをして下さい。
|
