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つをクリックしてみましょう。すると、ナビゲーションとロゴのヘッダー部分を残して、コンテンツ部分が大きく横にスライド。別のページのコンテンツに切り換わりました。
![]() | ![]() | |
|---|---|---|
| メニューからリンクをクリックするとヘッダーを除くコンテンツ部分が横にスライドして切り替わりました | ||
ビジュアルデザインやレイアウトに凝ったサイトだけに、普通にページを切り換えていたのではつまらない、と考えたのでしょう。インパクトのあるコンテンツの切り換えによって、個性的なサイトの印象をさらに高めることに成功しています。
さっそく次ページでは、こうしたスライドでコンテンツの表示を切り換える機能を作ってみましょう。
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ+jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo!の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第16回 jQueryアニメ&エフェクト合わせ技で画像を拡大
- この連載の一覧へ






















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)



