HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptとHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。
今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。
今回のお手本サイト：
『Baltijos prodiuserių grupė』
リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器や音響機材を組み合わせたユニークなビジュアルが印象的だ。
個性的な企業サイトをさらに印象付けるテクニック
ページ数が少なく、更新頻度の低いコーポレートサイト、という性質もあるのでしょう。XHTMLとJavaScriptで作られている「Baltijos prodiuserių grupė」は、ページを開いた瞬間から、一見して個性的なサイトだと分かると思います。大きな写真・画像をいくつも使い、ページごとにかなり自由なレイアウトで作られているのです。
イチゴとギターという意外な（？）組み合わせのキービジュアルを据えたトップページ
中でも今回注目したいのは、各ページの切り換え部分です。右上にあるグローバルナビゲーションには、「Apie mus」「Paslaugos」「Projektai」「Kontaktai」の4つのリンクが並んでいます。どれか1つをクリックしてみましょう。すると、ナビゲーションとロゴのヘッダー部分を残して、コンテンツ部分が大きく横にスライド。別のページのコンテンツに切り換わりました。
メニューからリンクをクリックするとヘッダーを除くコンテンツ部分が横にスライドして切り替わりました
ビジュアルデザインやレイアウトに凝ったサイトだけに、普通にページを切り換えていたのではつまらない、と考えたのでしょう。インパクトのあるコンテンツの切り換えによって、個性的なサイトの印象をさらに高めることに成功しています。
さっそく次ページでは、こうしたスライドでコンテンツの表示を切り換える機能を作ってみましょう。
