山田松香木店リニューアル!(デザイン~コーディング&技術編)
« 山田松香木店リニューアル!(表現コンセプト~デザイン編) | ブログTOP | 宿・ホテルの予約サイト HOTESPA.netトップページリニューアル »
2009年7月21日
ども、松村→澤ときて、最後を務めます。ワキです。
今回、山田松香木店様のサイトリニューアルでは、イロイロと仕掛けやこだわりが盛り込まれているのですが、その中でも最も特徴的なものをひとつ紹介します。
「インターネットユーザーの閲覧環境にあわせたデザイン」について考慮したものです。
横に広がりのあるデザイン
先の澤さんのエントリーにて軽く触れているように、横に広がりのあるデザインを今回のリニューアルにおいて提案しました。
ただ、一昔前まで(大体3~5年くらい前でしょうか?)、この業界では「横幅760ピクセル以下でデザインするのが常識」とされてきました。その理由の多くは、ノートパソコンで閲覧しているユーザーの多くが800×600ピクセルの表示サイズが限界だったことからでした。(また、横に「お気に入り」を表示させて使うデスクトップパソコンユーザーへの配慮でもありました。)
では、最近のユーザーの閲覧環境ってどうなんだろう?
ここ数年、急速な液晶モニターの大型化と低価格化により、高画質大型モニターの普及が高まってきました。これにより、1024×768ピクセル以上※の大きな解像度で表示できるノートパソコンやデスクトップパソコンが大多数となり、800×600ピクセルでしか表示できないパソコンのシェアは非常に低い、数パーセント(調査データによりまちまちなので断定はできませんが、大体1~8%位)にまでなりました。これを受け、横に広がりのあるデザインが可能な状況になったのです。
※なんと最新モデルでは1920×1080ピクセルのフルハイビジョン表示可能なノートパソコンも発売されているそうです。また、最新OSのWindows Vistaや今年発売予定のWindows 7などはワイド表示サポートが標準となっているようです。
いざ!コーディング!
ただ、このデザインを受け、何も考えずに単純にコーディングすると、ほぼ全てのユーザーの環境で、横スクロールバーが表示されることになります。これを避けるため、「見えないとダメな領域」と「見えなくても良い領域」に分けました。
下記のページの場合は右の背景画像は「見えなくても良い領域」とすることで、現在多くのシェアである1024×768ピクセル以上の表示エリアを持つユーザーが閲覧した際、横スクロールが出ないように構築しました。

あまり大きくとらなければ「お気に入り」や「履歴」を表示させても横スクロールは出ません。

ちなみに、約30%以上のシェアがあると言われる、1280×1024ピクセル以上が表示が可能なユーザーには全ての要素が見れるようになっています。

我々WEBデザイナーは、ユーザーの色んな使用状況を想定し、ユーザーエクスペリエンスをより良いものにするための工夫や仕組みを常に考えながら日々制作にあたっています。あまり気付いてもらえない地味な部分が多く、脚光を浴びることはほとんどありませんが、サイトに訪れたユーザーにとってストレスにならず、目的の情報にすんなり到達でき、再度訪れてもらうこと(出来ればお気に入りに入れてもらうこと)が最終Goalなので、違和感無く、存在に気付かれないことこそが理想の仕事と言えるのかも知れないです。
今回、山田松香木店様のサイトリニューアルでは、イロイロと仕掛けやこだわりが盛り込まれているのですが、その中でも最も特徴的なものをひとつ紹介します。
「インターネットユーザーの閲覧環境にあわせたデザイン」について考慮したものです。
横に広がりのあるデザイン
先の澤さんのエントリーにて軽く触れているように、横に広がりのあるデザインを今回のリニューアルにおいて提案しました。
ただ、一昔前まで(大体3~5年くらい前でしょうか?)、この業界では「横幅760ピクセル以下でデザインするのが常識」とされてきました。その理由の多くは、ノートパソコンで閲覧しているユーザーの多くが800×600ピクセルの表示サイズが限界だったことからでした。(また、横に「お気に入り」を表示させて使うデスクトップパソコンユーザーへの配慮でもありました。)
では、最近のユーザーの閲覧環境ってどうなんだろう?
ここ数年、急速な液晶モニターの大型化と低価格化により、高画質大型モニターの普及が高まってきました。これにより、1024×768ピクセル以上※の大きな解像度で表示できるノートパソコンやデスクトップパソコンが大多数となり、800×600ピクセルでしか表示できないパソコンのシェアは非常に低い、数パーセント(調査データによりまちまちなので断定はできませんが、大体1~8%位)にまでなりました。これを受け、横に広がりのあるデザインが可能な状況になったのです。
※なんと最新モデルでは1920×1080ピクセルのフルハイビジョン表示可能なノートパソコンも発売されているそうです。また、最新OSのWindows Vistaや今年発売予定のWindows 7などはワイド表示サポートが標準となっているようです。
いざ!コーディング!
ただ、このデザインを受け、何も考えずに単純にコーディングすると、ほぼ全てのユーザーの環境で、横スクロールバーが表示されることになります。これを避けるため、「見えないとダメな領域」と「見えなくても良い領域」に分けました。
下記のページの場合は右の背景画像は「見えなくても良い領域」とすることで、現在多くのシェアである1024×768ピクセル以上の表示エリアを持つユーザーが閲覧した際、横スクロールが出ないように構築しました。

あまり大きくとらなければ「お気に入り」や「履歴」を表示させても横スクロールは出ません。

ちなみに、約30%以上のシェアがあると言われる、1280×1024ピクセル以上が表示が可能なユーザーには全ての要素が見れるようになっています。

我々WEBデザイナーは、ユーザーの色んな使用状況を想定し、ユーザーエクスペリエンスをより良いものにするための工夫や仕組みを常に考えながら日々制作にあたっています。あまり気付いてもらえない地味な部分が多く、脚光を浴びることはほとんどありませんが、サイトに訪れたユーザーにとってストレスにならず、目的の情報にすんなり到達でき、再度訪れてもらうこと(出来ればお気に入りに入れてもらうこと)が最終Goalなので、違和感無く、存在に気付かれないことこそが理想の仕事と言えるのかも知れないです。
