29分でできる！あのサイトの“技”を盗め ― 第17回

JavaScriptでびゅんびゅんスライド！ページ切換法

2009年03月09日 11時00分更新

文● 古籏一浩、ASCII.jp

　HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptとHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。

　今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。

今回のお手本サイト：
『Baltijos prodiuserių grupė』

　リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器や音響機材を組み合わせたユニークなビジュアルが印象的だ。

http://www.balticproducers.com/

個性的な企業サイトをさらに印象付けるテクニック

　ページ数が少なく、更新頻度の低いコーポレートサイト、という性質もあるのでしょう。XHTMLとJavaScriptで作られている「Baltijos prodiuserių grupė」は、ページを開いた瞬間から、一見して個性的なサイトだと分かると思います。大きな写真・画像をいくつも使い、ページごとにかなり自由なレイアウトで作られているのです。


イチゴとギターという意外な（？）組み合わせのキービジュアルを据えたトップページ

　中でも今回注目したいのは、各ページの切り換え部分です。右上にあるグローバルナビゲーションには、「Apie mus」「Paslaugos」「Projektai」「Kontaktai」の4つのリンクが並んでいます。どれか1つをクリックしてみましょう。すると、ナビゲーションとロゴのヘッダー部分を残して、コンテンツ部分が大きく横にスライド。別のページのコンテンツに切り換わりました。