このページの本文へ

「榊田倫之建築設計事務所」: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を使った装飾にも一貫している。

カテゴリートップへ

ソーシャルランキング
  1. SEOはもう不要? それでもいまやるべきSEOの基本がわかる記事まとめ 52
  2. 用途別!WordPressプラグイン選びに迷ったら参考になる記事まとめ 17
  3. これから使い始めたいWebフォント&Google Font活用法まとめ 14
  4. もっと速く! Web制作の生産性ぐっと引き上げる最新便利ツールまとめ 7
  5. 失敗しない独立のために会社員時代にやるべき3つのこと 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  10. 3限目:「看板」から学ぶ「見出し」の基本設計とは!? 640
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング