Webサイトにおける横幅サイズ最適解を求めるための試論 ~不易流行の情報デザインに触れる秋のデザイン週間~
投稿者：小川 悟
2009/10/28 22:59
この記事は約12分で読むことができます。
事実上、どんな場合でも、ウェブサイトは「セルフサービス」製品だ。あらかじめ読んでおく取扱説明書もないし、トレーニングセミナーもない。サイトでユーザーを案内してくれる顧客サービスもない。ユーザー自身が、勘と経験を頼りにサイトと直面するしかないのだ。
／『ウェブ戦略としての「ユーザーエクスペリエンス」 5つの段階で考えるユーザー中心デザイン』（Jasse James Garrett著,ソシオメディア株式会社訳）
最近肌寒い日などもあり、ようやく秋めいて？きたように思います。
秋は「芸術の秋」とも言われますが、毎年秋になると個人的に楽しみにしているイベントがあります。まず一つが「東京デザイナーズウィーク」です。公式サイトから抜粋しますと、「国内外から1,000を超える企業・学校・大使館・デザイナー・ショップなどが参加し、最新のデザインを紹介する、今年で24年目を迎えるインターナショナルなデザインイベント」ということで、メイン会場である明治神宮外苑とその周辺を巡るだけでも十分楽しめるイベントだと思います。普段は意識していないがために目に留まらなかった「デザイン」を発見したりということもあります。他にも、場所を六本木に移せば「DESIGNTIDE TOKYO」が開催されますし、神田・神保町なら今年で第50回を迎える「神田古本まつり」が開催されます。さらに今年・今月に限って言えば、（自分はまだ行けていないのですが）ビッグニュースなのが、千鳥ヶ淵から広尾に移転後リニューアルした日本画専門の「山種美術館」と、南青山と西麻布のちょうど間くらい、閑静な街並みの中でひっそりと建つ「根津美術館」の三年半越しのリニューアルオープンでしょう。後者の建築を手掛けたのは、現在のサントリー美術館を設計した隈研吾氏ということで、建物を見るだけでも楽しめそうです。私が以前訪れたのは、リニューアル直前の2005年10月頃でしたでしょうか、ちょうど尾形光琳作の国宝「燕子花図屏風」が公開されていたときでした。本作品は、いわゆる「琳派」の中では、俵屋宗達の「松島図屏風」と並ぶ有名作品です。この二つの美術館の開館によって、17世紀中期から後期にかけて、まだ三井家など企業体のパトロンが登場する以前の、江戸の職人・工芸文化が華やいだ時代の日本の芸術作品に触れることができる秋になりそうですね。
――と、秋到来に気分が高揚してのっけから自分の趣味の話題になってしまいましたが、もう少し続けさせて下さい。先の琳派を代表する二人の画家、俵屋宗達や尾形光琳の生きた時代――、その後、前代の桃山文化を継承し、寛永、元禄、化政と、文化芸術が華やいだ江戸文化が台頭する時代に突入していきますが、この時代にもやはり現代に名を残す著名人が現れました。その一人が松尾芭蕉です。
cf.財団法人 江東区地域振興会 芭蕉記念館
松尾芭蕉と言えば、紀行文の『奥の細道』が有名ですが、今年2009年は松尾芭蕉が弟子の曾良を連れて江戸を発ってから320年と言われています。少し前に発売された雑誌「一個人」の特集は『「奥の細道」を旅する』でしたが、私も今から5、6年ほど前に、夏季休暇を利用して当社専務と「奥の細道」の軌跡（の一部）を辿る旅行をしたことがありました。飯坂温泉駅前の芭蕉像の前で記念撮影したり、芭蕉も旅の疲れを癒したと言われる飯坂温泉周辺の「鯖湖湯」に立ち寄ったものの湯温が熱過ぎて入れなかったこと、松島の遊覧船でカモメが飛びながらエサを食べる器用さに驚いたこと、最上川を舟下りした際に船頭さんが話してくれた「おしん」の話、出羽三山の一つ羽黒山にあった三神合祭殿の造り（茅葺屋根の厚さや総漆塗りの内部）に圧巻されたこと、山寺（立石寺）で蝉の声に耳を澄ませたことなど、今でも新鮮に思い出されます――。
そんな芭蕉が言ったとされる有名な言葉・考え方に、「不易流行」（cf.「不易流行 – Yahoo!百科事典」）というものがあります。簡単に言えば、「不易」が時代を経てもその価値が変わらないもので、「流行」は時代と共に変わってゆくもののことを表現していますが、芭蕉はこれら二つは表裏一体のもので、統合されるものと考えていたそうです。これと一緒にしてはいけないのかもしれませんが、ふと、私たちが携わっているWebコンサルティングやWebマーケティング、Webデザインなどの世界においても言い当てていることがあるのではないかと感じたことを書いていきたいと思います。
ここでようやくタイトルにある「Webサイトにおける横幅サイズ最適解」の話になります。先に書いておきますと、結論として未来永劫これがベストだという横幅サイズはありません。なぜこのようなことを言うかと言いますと、まずは下の図をご覧下さい。
これは、当社が提供する、歯科医院の検索・予約ができるポータルサイト「歯科タウン」をモデルケースとして、実際に訪れたユーザーがどのくらいのサイズの表示域でブラウザを開いているかを調査したものとなります。当社クリエイターが試験的に行ったものなので、サンプル数は多くありません。左の数値は横幅サイズを降順で並べたもの（上位一部）で、右のグラフが一定の範囲ごとに集計した統計となります。
意外だったのが、多くのユーザーが予想以上に高解像度のブラウザで閲覧されていることでした。また、画面を最大化（中にはブックマークなどのサイドバーを表示）して見られている方が多いようです。ここで「解像度」と言うと語弊もあるので、今回のコラムでは「画面解像度」（cf.「画面解像度 – Wikipedia」）のことを指して言うことにします。閲覧したユーザーが使用しているディスプレイの解像度だけを調べたいのであれば、Google Analyticsなどのアクセス解析ツールにある「画面の解像度」を見れば分かります。今回は、実際利用されているディスプレイが表示している解像度の画面の中で、ユーザーが具体的にどのくらいの大きさにしてWebサイトを閲覧されているかを知りたかったと当社クリエイターが言っていました。クリエイターも自己満足でWebサイトを制作しているわけではないので、納品したお客様からだけでなく、実際にもっと多くのアクセスをされてくるお客様のお客様（エンドユーザー）からどのような見られ方をされているのかが気になるようです。
このアクセスのあったディスプレイの解像度、及び実際の表示サイズから想像される現在のトレンドは、およそ以下の順となりました。
1.1280×1024（SXGA,5:4）
2.1024×768（XGA,4:3）
3.1280×800（WXGA,16:10）
4.1680×1050（WSXGA+,16:10）
5.1440×900（WXGA+,16:10）
※6以降省略。左から、「ピクセル数」、「通称名」、「縦横比」となります。
通常Webサイト制作は、この「ピクセル」（cf.「ピクセル – Wikipedia」）（または％）を単位として構築されます。例えば、ディスプレイの表示を100％から変更しないで閲覧している前提で、1.の1280を例にすると、画面横幅いっぱいのサイズが1280ピクセルということになります。ですから、横幅400ピクセルはどのくらいの大きさになるかというと、画面の横幅の約3分の1くらいの大きさということになります。しかし、この大きさの画像を4.の1680サイズのディスプレイで閲覧すると、画面の横幅の4分の1よりも小さく見えます。
10月22日午前0時、先代の「Windows Vista」発売から2年9ヶ月、その前の「Windows XP」発売からちょうど8年を経て、新OS「Windows7」が発売されました。多機能・高機能化が進み、同時に大型ディスプレイの低価格化が進んだことで一般家庭まで普及し、文字通り「デスクトップ」画面はオフィスや家庭における「机上」と同意となり、様々なタスク（作業）を同じ平面上で行うことができるようになってきました。上記にある「16:10」は一般的なワイドディスプレイの規格ですが、この普及は家庭でパソコンを通じてテレビやDVDの閲覧をされる方が増えてきたことを示しているのかもしれません。ディスプレイサイズは、置き場所や使用者との距離の都合限界があると思いますが、近い将来、このくらいのサイズのディスプレイが今以上に普及してくるかもしれません。このくらいのサイズになると、画面の初期設定の横幅は最低でも1280くらいにはなっていると思います。
これらのトレンドの遷移とWebサイト制作がどう関係してくるのかと言いますと、ユーザーが実際に開いている解像度以上の横幅サイズでWebサイトを制作すると、横スクロール用のバーが表示されてしまうことになります。この横スクロールはWebサイトのユーザビリティを著しく損なうと以前から言われてきました。かと言って、小さめ小さめに構築（特に左寄せのレイアウト）すると、高解像度のディスプレイで表示した際に貧弱な印象を与えてしまいます。場合によっては「リキッドレイアウト」（ウィンドウの幅に合わせてレイアウトの最大幅が変わるように、ピクセルではなく％で設計する方法）で組んだ方が良いと言われることもあります。つまり、時代の流れに合わせて、ベストな横幅サイズは微妙に遷移していくのではないか？といった仮説を立てることができます。
この「Webサイトの横幅についての議論」は、今に始まったことではありません。ネット上でも多くの企業が試行錯誤していたり、Webデザイナーがブログで持論を展開していたりしています。例えば、私たちが「やはり、現状の社内の制作ガイドラインを疑い、そろそろ考えていくべきだ」と話題になったきっかけとなった以下の記事があります。
cf.So-net、トップページを4月1日よりリニューアル（japan.internet.com,2008年4月1日）
http://japan.internet.com/busnews/20080401/3.html
ここでは、「ユーザーの利用環境に合わせ画面サイズの横幅を拡張することで、情報を一覧で表示」と書いてあります。他にも、各社ポータルサイトなどで一斉にリニューアルが行われたのもこの時期でした。
cf.
・リニューアル続出！ポータルサイトに何が起きたのか？その異変に迫る（MarkeZine,2008年4月21日）
http://markezine.jp/article/detail/3340
・総務省報道資料 総務省ホームページのリニューアルについて（2008年4月21日）
http://www.soumu.go.jp/menu_news/s-news/2008/080421_2.html
こうした一連の記事に目を通すに、私たちが意識しなくてはならなかったことが、Webデザインおいても、「時代とともに変わるトレンド」、「ユーザーのニーズ」、「対象となるサイトの利用目的」など、マーケティングの観点から変えてゆく必要があるものがあることと、冒頭にも引用した『ウェブ戦略としての「ユーザーエクスペリエンス」 5つの段階で考えるユーザー中心デザイン』にもあるように、「常に利用者のことを意識して設計する」という不変的な考え方を持ってWeb制作に取り組む姿勢が必要だということです。
ブランドはサイトのデザインで作られるわけではなく、あくまで企業やそのサイトが顧客に約束した「価値」で作られる。ウェブサイトだからといって突飛なデザインにすることなく、企業として、サイトとして顧客にどんな価値を約束するのかといった上位の概念からデザインの方向性を検討する。
／『ユーザ中心ウェブサイト戦略 仮説検証アプローチによるユーザビリティサイエンスの実践』（株式会社ビービット,武井由紀子/遠藤直紀著）
最後に、冒頭の方でご紹介した「東京デザイナーズウィーク」の話をして終わりにしたいと思います。メイン会場では、企業もそうですが、美術系の学校や専門学校に在学中の方が自作の作品を展示されています。「これはどういう意図で創られたんですか？」と聞くと、ほとんどの方がその「制作意図、根拠」をしっかりと説明してくれます。これがWebサイト制作で言うところの「コンセプト」にあたります。専門課程でしっかり学ばれている学生さんの知識やわだかまりのない意思は、私も大変刺激を受けることがあります。
「情報デザイン」と言うと専門的な話になりやすいですが、大概デザインは情報を有しています。海外旅行に出掛けた際にたとえ外国語の知識がなくても、トイレで男女の区別がつかなくて困るというケースは少ないと思います。また、雨の日にお店の軒先に傘立てが置いてあれば、誰しもが迷うことなく傘を差しますよね？まさか店員さんに「これはなんですか？」と聞くことはないと思います。D.A.ノーマンの『誰のためのデザイン？ 認知科学者のデザイン原論』になぞらえて言えば、「傘立ては傘を立てることをアフォードする」とでもなりますでしょうか（cf.「アフォーダンス – Wikipedia」）。
cf.情報検定：J検 情報デザイン試験／（財）専修学校教育振興会 検定試験センター
http://jken.sgec.or.jp/guide/jdesign.html
「情報デザイン」については、当社が加入している日本ウェブ協会の理事長を務められる森川眞行氏（cf.「森川眞行 – Wikipedia」）が専門ですので、専門外の私がご説明差し上げるのも誤った解釈があっては良くないのでこの辺にさせて頂きたいと思いますが（汗）。
以上、私が見るCS本部は、改めてのご説明となりますが、Webサイトの設計を行うWebマーケティング部と、実際に構築を行う制作部とに分かれます。分業することで専門性を高める機能別組織（「ファンクショナル組織」／F.W.テイラー）となっていますが、今以上に品質を高めていく必要があるため、双方の組織にはもっと横串を通すべきだと考えています。もちろん今でも意識の側面では連携はうまく取れていますが、知識や技術といった実務的側面ではまだ課題が残ります。
こうしたギャップを埋めるため、現在、日本ウェブ協会主催の勉強会、『「ウェブ開発プロセス」への理解』へ部員が何名かお世話になっています。今後もこうした仮説検証と学習、実践によって個々人の能力を高め、お客様へより高付加価値のサービスが提供できるよう努力していきたいと思います。
