「榊田倫之建築設計事務所」：HTML＋JavaScriptで作るシンプル美

いま一番美しい、JavaScriptが効果的な新サイト

2009年03月13日 12時00分更新

文● 小橋川誠己／企画報道編集部

　FlashからJavaScriptへ――。ソニーグループのコーポレートサイトがJavaScriptを使って全面リニューアルされるなど（関連記事）、JavaScriptの勢いが感じられた。そんな2008年の年末にまた1つ、注目のWebサイトが国内で誕生していた。「榊田倫之建築設計事務所」のコーポレートサイト（http://www.sakakida.com/）だ。


榊田倫之建築設計事務所のトップページ

　細かな黒のチェック模様の上に浮かぶ、白いレクタングル。細いサンセリフのフォントで綴られた英文の会社名に、小さなテキストで示されたメニュー。そんなシンプルな榊田倫之建築設計事務所のWebサイトは、無駄な要素を極力削ぎ落とした“最小限”のデザインが印象的なサイト。今年2月に発表された「第4回JWDA WEBデザインアワード」（主催：日本WEBデザイナーズ協会）では、奨励賞に選ばれた。

　このサイトの主役は、同サイトのオーナーである建築家・榊田氏の建築作品の紹介ページだ。メニューの「Selected Works」から見られるこのページは、榊田氏がこれまでに手掛けた代表的な作品が、数多くの魅力的な写真によって紹介されている。


代表的な建築作品が紹介されている「Selected Works」のページ

　いくつかある作品紹介のコンテンツの中から、1つを選んでみる。すると、左側に大きな作品の写真が、そして右側には写真のサムネイルが並ぶページが表示される。思わずマウスの動きを止めて見入ってしまうのは、その写真の切り替えが美しいからだ。左側に表示されている写真は、数秒おきに、気持ちのいい滑らかな動きで、さっと別の写真に変わっていく。しっかりとディレクションが行き届いた写真の質の高さも相まって、まるで美しい建築雑誌をぱらぱらとめくっていくような感覚になる。


数秒おきに切り替わっていく作品紹介。その動きはとても滑らか。Flashのように見える

　一見するとFlashのように見えるこのサイト、実はXHTML/CSSL＋JavaScriptで制作されている。同様の処理を実現するJavaScriptライブラリはいくつか出回っているが、このサイトではオリジナルのスクリプトを使っているようだ。マウスだけでなく、キーボードによる操作にも対応しており（←→キーで作品が、↑↓キーでは写真が切り替わる）、ユーザビリティの面でも配慮がうかがえる。

　Webブラウザーの進化でJavaScriptの処理が以前に比べて速くなり、表現力が上がった最近では、JavaScriptを使ったサイトでも、かつてフルFlashサイトで敬遠されたような、過剰なアニメーション表現やエフェクトの多用による「分かりにくい」「重い」サイトが出始めている。

　そうした中で榊田倫之建築設計事務所のサイトは、絶妙なバランス感覚でJavaScriptを使っている。「できるけど、あえてやらない」という姿勢は、写真以外のビジュアル要素を省いたモノトーンのデザインにも、JavaScriptを使った装飾にも一貫している。

■関連サイト