新しく3月から携帯業界に進出するイー・モバイル。CMも見かけるようになりましたね。
モダンブラウザを使ってる人、IE7にアップデートしてる人は、このサイトの違和感に気づいたと思います。
そうです。レイアウト崩れまくりですね。皆さんもWeb標準について考えていただく良いきっかけかなぁなんて思って記事にします。※Web標準=簡単に言うとHTMLを正しく使い、ブラウザを選ばないサイトにしようぜ！って事です。(W3C)
ということで、イーモバイルのサイトをモダンブラウザで見比べてみました。
どうですか？各ブラウザの名前が書いてあるところが、大きな空白になっているのが分かると思います。
この部分は制作者としてはこう表示させたかったのだと思います。
実はこの現象、正しく表示されているのは前の4つで、間違っているのが、一見正しいように見えるこのIE6なんですね。
原因はIE6が非常にお馬鹿なんです。なのに、そのお馬鹿なIE6を基準に作り込んでしまっているので、その他の正しいモダンブラウザでは表示がおかしくなるという理由なんです。
普通制作現場では大まかに「モダンブラウザ基準で作り込む→IE6用に修正を加える→その他のお馬鹿ブラウザ用に修正を加える→完成」という流れなんですが、その流れが一切見られない作りなんです。
まず「これでいくらもらってるんだろう…」という疑問が沸きましたね(笑)モダンブラウザを切り捨てて、IE6のみがターゲットで良いなんて、こんな楽な仕事は無いと思いますよ。altもtitleも無いし、ヘッダー・フッターはイメージマップで済ませちゃってるし…ちょっと正直適当すぎるでしょ？って思った。
依頼者の意向なのか、制作者の怠慢なのかは分かりませんが、新規立ち上げのサイトでこれは勿体ないなぁって思っちゃいますよね。
話を戻して上の画像、Safari以外は全て標準的なブラウザサイズの1024×768でキャプチャしてます。一般的にノートパソコンを使ってる人はこのサイズが多いと思うのですが、製品紹介ページであるにもかかわらず、IE6以外では最大表示にしても肝心の製品の画像が最初の画面に一つも出てきません。
おまけにノートパソコンの場合、マウスではなくトラックパッドをを使ってる人が殆どです。IE6以外でも画面を下にスクロールさせれば、レイアウトが崩れながらも製品画像は出てきますが、初心者の人がトラックパッドを使う場合、スクロールするだけでも結構一苦労だったりします。
だから800×600、それ以上でも1024×768以内である程度の内容が分かり、見る人が一瞬で理解できるようなサイトを作るようにしなければいけないわけですね。
余談ですが、画面を最大化してブラウザを利用する人ってそんなに居ないし、最大化してたとしても左側にお気に入りを表示させている人とかもいるので、やっぱり800×600以内に納めるのがベストだと思います。ちなみに、このブログを見てくれている人の約半分は1024 x 768の解像度です。
数字とか文章ではなく、イメージしやすいようにちょっと意地の悪い事をしてキャプチャしてみました。
正直言って、なんのページかさっぱり分からないですね。
それに比べて松尾敬法公式サイトなんてこんな悪条件でもこの通り！
いい加減そろそろまとめに入りたいと思います。とにかく、そもそも情報を発信するという役目のサイトであるにもかかわらず、使用環境によって情報が意図したように伝わらないというのはナンセンスだと思うんです。情報は平等であると。
最近では当たり前のように視覚障害者用にサイト内容を読み上げてくれる音声ブラウザを意識したサイト作りなんかが行われています。
本当にそういう点では、一昔前と比べたら手間は非常にかかるようになりました。でもその手間の分見てくれる人が増えるという可能性がある＝お店なら集客に繋がる＝増益が見込める。なんて式も成り立つと思うのです。分かりやすく言えばバリアフリーですかね？
個人サイトでも同じで、不特定多数の誰かをターゲットに自分の意見を伝えたい場合に、より多くの人が集まり討論ができると思います。身内だけの内容なら先日も書いたように、知らない人間に見られるよりはVOXやMixiのような閉鎖的なスペースで運営するのが良いと思います。今の時代どこで誰が読んで恨みを買うか分かりませんからね。
この記事では詳しく書きませんが、Web標準を心がけると、後々の管理も楽になります。「内容はHTML」「デザインはCSS」というように分離して管理すれば、季節ごとにデザインを一気に変更！なんて荒技も簡単に行えます。サイトを持ってる人は今後Web標準を意識してみると良いと思います。これから作ろうと思ってる人は、ホームページビルダーとかでちょちょいと作るのではなく、面倒でも勉強してWeb標準を強く意識して作ると、後々ハッピーになれると思いますよ。そんなのは面倒だ！って方は、一度HAGANE Materializeへご連絡いただけると超ハッピーになれます(笑)最終的に宣伝です。
かなり長文になってしまいましたが、何を言いたかったのかというと、「イーモバイルって興味があったけど、サイトを見て買う気が失せた」という事です(笑)
今の時代にターゲットブラウザがIE5～IE6のみってあり得ないよ…
しかし、同じ会社なのに会社概要の方はしっかりしてるんだよね。IE5対策は不完全だけど。
ソースのインデントの使い方とかIDの名付け方やコメントの使い方を見る限り別の人(会社)が作ってるんだよね。なんで今までの人(会社)を使わなかったんだろう…事情はあると思うけど、なんだか勿体ない感じがして意味不明です。
あ、最後に、自己中心的電脳空間HAGANEとかその他諸々のめっきり更新していない我が輩のサイトは、イーモバイルの事を言えないような状態です(笑)本当に酷いもんです。酷すぎてリメイクする気にならないのでござる…くれぐれも突っ込まないでいただきたいのでござる…
最後に、Web標準に興味を持った人にはこれが最高にお奨め。
入門したての方はまずこちら↓
FOM出版
売り上げランキング: 3639
土台を据えるのに最適です
XHTMLとCSSの連携が“よくわかる”
完全に初心者向けです
2冊目でバイブルはこちら↓
XHTMLとCSSでつくる“正しい”Webサイト
秀和システム
売り上げランキング: 1867
2冊目に買う本
「web標準」を知る上で必読の書
Web屋なら必読の書。
