takumart.net link

takumart.net - Takuma saitou Art works |  Art Works  |  Photo Works  |  Profile  |  Download  |  Mail  |  Blog  |  Link  |  Sitemap  

2010年1月14日木曜日

「ブラウザ幅900px以上は85%」

ブラウザ幅の近年のトレンド。
900pxぐらいといわれてますよね。
Takumaです。
 

【ブラウザー】
ウェブページを閲覧するためのソフト。米国マイクロソフト社のインターネットエクスプローラー、米国モジラファウンデーションのファイアフォックス、米国アップル社のサファリ、ノルウェーのオペラソフトウエア社のオペラ、米国グーグル社のグーグルクロームなど。(by Yahoo!辞書)

 

ネットを見る際に人は、ディスプレイを見ます。
モバイルだと画面は小さいですが、PCでもサイズは有る程度限られてきます。

例えば、モバイルサイトなら機種毎に仕様が多種多様な為、一列の文字数幅を対応機種の内の最大公約数で決めたりします。

では、パソコンは?


■ブラウザ幅900px以上は85%をどうみるか?■■■■■■■■■■■■■■■

パソコンでは、PC用ディスプレイの中に表示されるブラウザウィンドウが表示できる横幅を主にデザインや設計を行ないます。
諸説ありますが、
・昨今、多くなってきたネットブック
・オールインワンのちょっと大きめのノートパソコン
・大型ディスプレイを取り付けたマルチディスプレイ等の作業環境
等々、作られたサイトには様々な利用環境からの来訪想定されます。

その際に指標になるのが、以下のようなデータ。

▼ピックアップサイト▼
BROWSIZEの220万PVより集計、ブラウザ幅900px以上は85%に達した : akiyan.com

ブラウザには、スライドバーが多くのブラウザの場合「右」に表示され、全体的に枠があります。
この内側をここでは、「レンダリングエリア」と呼んでいます。

つまりは、来訪したサイトの中身が映し出される領域を「900px」でサイトを設計した場合。
一般的には全体の「85%」の人々が通常の内容(サイトの本文領域:BG要素除く)の領域を支障なく見られるというデータ。

これに加え、Googleでは縦幅も考慮した「ファーストビュー」でデータ集計がされています。

▼ピックアップサイト▼
Browser Size

この場合、縦幅「850px~950px」と横幅「450px×500px」の領域では、「95%」カバーできるとされています。


■ブラウザ幅残りの15%をどう考えるか?■■■■■■■■■■■■■■■■

この15%は、実のところ大きな数字です。
例えば、「100,000人」の来訪者がいるとしたら、その内の15%「15,000人」に
正しく情報を伝えられないという事になります。

よくありがちなのが、「3カラムの内の右カラムが描画領域外」になるという事例。
横スクロールをしてもらえれば、見てもらえるのですが当然、望ましくありません。
というわけで、優先順位的には低い要素を右カラムに置くのがセオリーとされています。

上記は主に固定幅コーディングで起こる問題ですが、「可変」といわれるように最低限の各カラム表示幅を設定した後に、広がる分にはウィンドウサイズを基に%で伸びたり縮んだりするコーディング手法もあります。
加えて、Ajaxで制御するという荒業もあります。(※あんまり、使われてませんがw)

▼takumart.net:過去記事▼
「リキッドレイアウトとAjaxの親和:前半」 | takumaの「デザインはあれでアートはそれで」in takumart.net
「リキッドレイアウトとAjaxの親和:後半」 | takumaの「デザインはあれでアートはそれで」in takumart.net

その他にも、「エラスティックレイアウトについて」という手法もあります。

▼takumart.net:過去記事▼
「エラスティックレイアウトについて」 | takumaの「デザインはあれでアートはそれで」in takumart.net

ですが、最近のブラウザにズーム機能(文字サイズの変更のみでなく画面全体を等倍拡大)がついたので、実装優先順位は若干低めの手法です。

「可変」というWEBならでわのディスプレイ環境との補完手法。
ディスプレイのユーザー利用サイズ(正確には、解像度ですが)は大きくなる方向へ進んでいますが、初期設計からサイトを立ち上げる際には、チェックしたい事柄ですね。


■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
The BIO Agency

●んで、一言

「電球」をモチーフにした、サービスをイメージさせる内容を写しこむデザイン。
シンプルなモチーフだからこそ、内容に目がいきますし「電球」というモチーフの特色もうまく活用されているように思います。

海外のブランディング系サイトは軸がしっかりしていてインパクトもあるので勉強になりますね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■