サイトデザイン Archive

先日公開された InternetExplorer 9 Beta をインストールしてみました。



＞ InternetExplorer 9 Beta のダウンロード

ツールバー周りのインターフェイスがぐっとシンプルになっています。

見た目はGoogle Chromeに近くなりましたね。

アドレスバーが検索ウインドウ共用になっているのもChromeライク！

高機能＝ツールバー盛りだくさん　だったものが、シンプルになっていく傾向のようです。・・・個人的には大歓迎です。


評判の表示速度ですが、IE8にくらべると速くなっているように感じました。このあたりはバージョンが上がるたびに改善されてきていますね。

ウェブ屋として気になるホームページのレイアウト互換性ですが、IE8の表示と同様のようですね。フジデンキで制作した主なホームページをチェックしてみましたが、まったく問題なく表示できていました。


ベータ版ということもあり、アドオン等の未対応で不具合があるかもしれませんので、IEを常用している方は正式版まで待った方がいいかと思います。

また、IE9はWindowsVisra SP2以降を対象にしています。WindowsXPにはインストールできませんのでご注意ください。

ホームページを見るソフト＝ブラウザは、Windowsでは一般的にInternetExplorer（IE）を使っている方が多いと思いますが、その他にもいろいろなブラウザがあります。

また、Windows以外のパソコンにはIEはありませんので、自動的に非IEブラウザを使うことになります。

ところが、Windowsのシェアが大きいため、その標準ブラウザであるIE依存のホームページ仕様ができてしまい、非IEブラウザでは表示が崩れる場合もあります。


身近なところに例がありますので紹介してみます。

＞ 三春町のホームページ

IE8での表示


Firefox3.6での表示


Chrome6での表示



FirefoxとChromeでは右側のレイアウトが崩れています。




これはテーブルタグで構成されたレイアウトですが、ブラウザによりタグの解釈が違うので、こういったレイアウトのズレが生じることがあります。


ホームページの制作時に各ブラウザによる表示テストを行って調整しなければならないのですが、特にこのテーブルタグの扱いはやっかいです。ワタシもよく四苦八苦していました。

最近はホームページレイアウトにテーブルを使わなくなっている、ということは以前書きましたが、こういったこともテーブル離れの理由のひとつです。


ウェブ担当者の皆さんは、自社のホームページがどう表示されるのか、各ブラウザで表示してチェックして見ることをおすすめします。

先日、ホームページリニューアルの件でお話をさせていただいたお客様との会話の中で、ホームページデザインの手法の変遷についてあれこれお話しました。

ワタシがホームページを始めて制作・公開したのは1995年。その当時はホームページ作成ソフトというものもなく、テキストエディタでTHMLのタグを手打ちしていました。

フレーム

その当時画期的な手法だったのがフレームといわれるもの。



上記の図の場合は、タイトル・メニュー・コンテンツの3つのフレームに分割されます。分割されたページはそれぞれが1ページずつで構成され、メニューのページのリンクをクリックすると、コンテンツ内のページが変わるという仕掛けにします。
タイトルやメニューを共通化できるので、制作の手間も省けました。

しかし、検索サイトは1ページ単位で把握するので、コンテンツのページだけが表示されてしまうこともあり、何のページかわからないこともよくありました。

当然、SEO対策ではマイナスになり、禁じ手扱いです。

W3Cという、ホームページ制作の推奨規格を定める組織では、古い規格として位置づけられています。

今ではあまり見かけなくなりましたが、個人サイトやリニューアルされない組織や商用サイトでは見かけることがあります。

テーブル

その後、デザインの主流になったのがテーブルタグを使ったレイアウト。

本来はホームページ中で表を作るためのタグをレイアウトに用いた手法です。

1列1行	2列1行	3列1行
1列2行	2列2行	3列2行
1列3行	2列3行	3列3行

<table Border>
<tr>
<td>1列1行</td><td>2列1行</td><td>3列1行</td> </tr>
<tr>
<td>1列2行</td><td>2列2行</td><td>3列2行</td> </tr>
<tr>
<td>1列3行</td><td>2列3行</td><td>3列3行</td> </tr>
</table>

ページ全体をこういった表組みでレイアウトします。
表の中に表を入れ子するなどで、複雑なレイアウトをすることができ、レイアウトの自由度が高く、大手の企業サイトから個人サイトまで非常に多くのサイトで用いられました。

今でもテーブルタグでレイアウトされたサイトは主力といってもいいくらい存在すると思いますし、新規開設のサイトでもテーブルタグを使ったサイトを見かけます。　ホームページ制作業者さんもテーブルタグのレイアウトから脱却できないところもあるようです。

欠点はブラウザによって表示にズレが生じたり、テキストリーダーで読む際にバラバラに読み込まれ、内容がわからなくなる、といったことがあります。

複雑なレイアウトをしていると更新作業も大変なことが多いです。


「テーブルタグは本来、レイアウトに使うものではない」ということが言われるようになり、ホームページレイアウトの手法としては古い手法と見られるようになりました。大手の企業サイトや新規のサイトで用いられることはほとんどないと思います。

CSS

そして現在の主流はCSS（Cascading Style Sheets＝カスケーディング・スタイル・シート）によるレイアウトです。

CSSはコンテンツ（文書の構造）とデザインを分離することができます。

これによって、テキストリーダーで読み込んでも順序よく内容を読み上げることができます。

また、デザインを制御するスタイルシートを各ページで共有することで、サイト全体のデザインを一斉に変更することができます。

CSSの規格の統一とブラウザのCSS標準対応により、ブラウザによって表示がズレるということもほとんどなくなりました。


WordPressやMovableTypeといったCMSや、ネット上の有料無料のブログサービスもほとんどがCSSで制御されています。

ブログがSEO対策に有利といわれるのは、CSSがSEO対策に有効に作用するためです。


ホームページの新規立ち上げやリニューアルを検討している方は、レイアウトの手法も検討材料に入れることをおすすめします。

この秋以降、各ブラウザの新バージョンが続々登場します。


InternetExplorer9　9月15日にベータ版が公開予定

IE9のβ版、9月15日にリリース（IT media）


上記はIE9のプラットフォームプレビュー版サイト



Firefox4　ベータ3公開中　2010年末に正式版公開予定

Firefox 4 Beta 3登場、マルチタッチ対応とjsval変更（マイコミジャーナル）



Chrome6　ベータ6公開中

Google、「Chrome 6 β」を公開　拡張機能とオートフィルデータの同期が可能に（IT media）



Safariは先日、Safari5が公開されました。

ブラウザは新バージョンラッシュの様相です。

ウェブ屋はもちろんですが、ウェブ担当者の皆さんも、自社のホームページがどう表示されるかをチェックする必要が出てきます。

ベータ版の段階では無理にインストールする必要はありませんが※、正式版が公開されたらインストールしてチェックしてみることをおすすめします。


※ベータ版はテスト段階の製品なので、不具合がある場合もあります。また、プラグインや拡張機能（例：ツールバー等）が未対応の場合もあり、メインで利用しているパソコンにインストールしてトラブルが発生するとやっかいなことになる可能性もあるので注意が必要です。

みなさんはブラウザは何をお使いですか？

Windowsユーザーであれば多くの方はInternetExplorer（IE）を使っていると思います。Windows標準のブラウザで買ったときからすぐ使えるので、特に意識することなく使い続けているというパターンが一般的です。

しかし、ウェブ担当者のみなさんは、IE以外のブラウザも多数存在しシェアを拡大してきていることも知っておかなければなりません。


2010年6月のブラウザシェアは下記の記事にあります。

IEのブラウザシェア増加に転向、IE6も増加（マイコミジャーナル）

海外の業者のデータですので、日本国内だけのデータではありませんが、IEは60%程度です。
その他はFirefox、Chrome、Safariと続きます。特に最近はChromeのシェアが着実に拡大してきています。


ブラウザが違うとどんな影響があるのか？

見え方に差が出る場合があるのです。


ホームページをデザインするために使うCSS（カスケーディング・スタイル・シート）や、これまで多く用いられてきたテーブルタグの表現が微妙に（場合によっては大きく）ずれることがあります。

ウェブ担当者のみなさんは、お使いのパソコンに複数のブラウザをインストールして、自社のホームページをチェックしてみるといいでしょう。

Windowsでは

• InternetExplorer
• Firefox
• Chrome

この3ブラウザでチェックしておけばいいと思います。

※SafariはChromeと同じWebKitというエンジンを使っているので、表示に差はほとんどないのでインストールしなくてもいいかと思います。

Macでは標準のブラウザがSafariですので、Firefoxをインストールしてチェックすればいいでしょう。



余談ですが、ワタシはWindows、MacともメインのブラウザはChromeです。最大の理由は「速いから」。

以前はFirefoxがメインでしたがChromeを使うと起動のモタつきを感じるんですよね。（それでもIEより速いですが。）

IEは？　普段はめったに使うことがないです。　使うのは表示チェックや業務用等でIEじゃないとダメなサイトの時くらいです。