いま,見ておきたいウェブサイト

第78回 Mercedes-Benz - the new A-Class - 2012,くらげごはん。,Homeless Hotspots

この記事を読むのに必要な時間:およそ 2 分

花粉のムズムズもゆっくり和らぎ,暖かい陽気につられて,どこかに出かけようかと計画している今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

スクロールで語られる,新しいクルマ

Mercedes-Benz - the new A-Class - 2012

2012年3月8日から18日までスイス・ジュネーブで開催される「ジュネーブモーターショー2012」での発表に合わせて公開された,Mercedes-Benzの新しい「A-Class」のスペシャルサイト,⁠Mercedes-Benz - the new A-Class - 2012』です。

図1 ⁠Mercedes-Benz - the new A-Class - 2012』

図1 『Mercedes-Benz - the new A-Class - 2012』

スポーティな5ドアハッチバックへと生まれ変わった「A-Class」の特徴を,縦に長いスクロールを使って表現しています。ユーザーがスクロールをし続けることで,ブラウザ全体に映像を流しているような表現を実現しています。

図2 モーターショーの会場から,展示の様子も生中継された

図2 モーターショーの会場から,展示の様子も生中継された

実際に「ジュネーブモーターショー2012」で展示されている「A-Class」の様子をリポーターが生中継する「First Impression」など,コンテンツの内容もよく考えられています。

「Internet Explorer 6」のシェア減少が変えるもの

『Mercedes-Benz - the new A-Class - 2012』では,表現が再現できないブラウザで閲覧した場合,画面上部に最新のブラウザを使うように促すメッセージを表示し,別のコンテンツを提供しています。このような方法は,⁠Progressive Enhancement(プログレッシブエンハンスメント:どのブラウザでも基本的なデザインと機能を提供しつつ,新しいブラウザでは,より豊かなデザインや機能を提供するという考え方)⁠として,以前から行われてきました。

図3 豊かな表現が実現できないブラウザでは,別のコンテンツが提供される

図3 豊かな表現が実現できないブラウザでは,別のコンテンツが提供される

豊かな表現を提供する"足かせ"となっているブラウザが,Microsoftが2001年に発表した「Internet Explorer 6」です。Microsoft自身もIE6を撲滅するためのウェブサイトを立ち上げるなどしてきましたが,最近ではThe US Says Goodbye to IE6と題したBlogで,⁠アメリカ国内でのIE6のシェアが1%未満になった」ことを発表しています。

日本でも,すでに海外では実施されていたIE6の自動アップデートが,3月中旬に行われることが発表されたことで,これを機会に,制作時のIE6への対応を"別料金対応"とする制作会社も登場しています。さまざまな問題の原因となっていたIE6が減少することで,国内でも制作における表現領域が,より豊かな方向へと拡大していくのかどうか,注目していきたいと思います。

美しい"縦書き"の時代

トップ - くらげごはん。

株式会社はてなのデザイナー,元山和之さんによる食と料理の記憶をつづったBlog,⁠くらげごはん。』です。

図4 元山和之さんの食と料理の記憶がつづられた『くらげごはん。』

図4 元山和之さんの食と料理の記憶がつづられた『くらげごはん。』

credit:元山和之

記事の内容を表した写真が大きく使われているトップページが印象的ですが,それ以上に個性的なのが,各料理を紹介する記事のページです。CSS3を使った「縦書き」「段組(カラムレイアウト)⁠を組み合わせることで,見慣れた雑誌のようなデザインを実現しています。

図5 雑誌の1ページのような「縦書き」「段組」の組み合わせ

図5 雑誌の1ページのような「縦書き」と「段組」の組み合わせ

縦書きをメインとしたBlogやウェブサイトはまだ少ないですが,現時点でも,工夫次第で縦書きの美しいウェブサイトが構築できるという,素晴らしい事例だと思います。

「縦書き」表現は,広がるか

『くらげごはん。』では,⁠縦書き」「段組」の組み合わせで,雑誌のようなレイアウトを実現しています。ただ残念なことに,すべてのブラウザで,この美しい縦書きのレイアウトは表示できません(例:Windows版のFirefox(Ver.11)では,縦書き部分が横書きになったり,縦書きの位置がずれたりしてしまう)⁠

図6 ⁠くらげごはん。』のスクリーンショット(iPadのMobile Safari)

図6 『くらげごはん。』のスクリーンショット(iPadのMobile Safari)

現時点で,こうした縦書き表現は,難しいのでしょうか。上のスクリーンショットは,iPadのMobile Safari(iOS 5.1)『くらげごはん。』を表示したものです。CSS3の「writing-mode」プロパティなど,文字表現に関するプロパティが多数サポートされたMobile Safariでは,⁠くらげごはん。』の縦書きを,美しく,見事に表現しています。

「視線の動き」「コンテンツの上下への積み重ね」を考慮すれば,PCのブラウザでは,どうしても「横書き」が主流となるでしょう。一方,iPadのようなモバイルデバイスでは,画面全体を見渡せるため,今まで本や雑誌に採用されてきた「縦書き」の表現が生きるでしょう。

個人的には,今後,縦書き表現はモバイルデバイスを中心に増加していくと考えています。また同時に,PCのブラウザでも縦書き表現がサポートされていくでしょう。そうした中で,PCのブラウザ上でも,日本語の縦書き表現を利用したウェブサイトが登場してくるのかどうか,期待したいと思います。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入