<span class="mt-enclosure mt-enclosure-image" /><img alt="Flashの派手さが大好きな人が知っておくべきjQueryサンプル" src="http://web-marketing.zako.org/images/ajax-jquery-navigaton.jpg" width="514" height="204" style="" /></span><p>最近は以前よりも多く「Flashでサイト構築するのがカッコイイ」という企業サイトを多く見ますが、場合によってはそれがすごく使いづらいサイトになってしまっているものも多く見受けますよね。</p><p>ブランディングやプロモーション用のサイトであれば問題ないのでしょうが、用途が違うサイトがFlashによってユーザビリティを下げてしまう例も多々。</p><p>そんな企業サイトにオススメしたい、Flashを使わなくてもカッコイイjQueryナビゲーションの実例やサンプルをご紹介。</p>

<!--more-->
<h3 class="header-label">jQueryのナビゲーションが素晴らしいサイト9選</h3>
<p>今回ご紹介するのは、<a class="web-site-link" href="http://buildinternet.com/2009/01/8-sites-with-excellent-jquery-navigation/" onclick="window.open('http://buildinternet.com/2009/01/8-sites-with-excellent-jquery-navigation/'); return false;">Build Internet!</a>のエントリで紹介されていた9つのjQueryナビゲーションサイトと、私が独自に選んだAjaxサンプルです。</p>

<p>そもそもjQueryのようなAjaxは、Flashに比べて表示が軽い上に、ブラウザでJavascriptをオフにしていても、ほとんど手を加えずとも表示することができるという利点がありますよね。 一方Flashの場合は、別にコンテンツを用意しなければ、何も表示されない状態になってしまう。</p>

<p>そういったことを鑑みても、<strong>Ajaxでも対応できるような範囲であれば、そちらを選択したほうが良策</strong>と言えます。</p>

<p>そんなjQueryがどれくらいまで出来るのかというクールなナビゲーションのサンプルをどうぞ。</p>

<h4 class="header-label">1. Carrot Creative</h4>
<dl>
<dt><a class="web-site-link" href="http://carrotcreative.com/" onclick="window.open('http://carrotcreative.com/'); return false;">http://carrotcreative.com/</a></dt>
<dd><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/SWBIU-cgXCI/AAAAAAAAPfQ/KNg0y1CqARs/s400/Fullscreen-capture-20090104.jpg" /></dd>
<dd>↑上部のナビゲーションメニューをクリックすると、横スクロールで画面遷移します。 一昔前なら、Flashでなければ実現できないものでしたよね。</dd>
</dl>

<h4 class="header-label">2. jQuery Background Position</h4>
<dl>
<dt><a class="web-site-link" href="http://snook.ca/technical/jquery-bg/" onclick="window.open('http://snook.ca/technical/jquery-bg/'); return false;">http://snook.ca/technical/jquery-bg/</a></dt>
<dd><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SWBhNiVDceI/AAAAAAAAPjE/CaAsOXJqNNo/s400/jquery-bg.jpg" /></dd>
<dd>↑AjaxでFlashのようなアニメーション効果を出したもの。</dd>
</dl>

<h4 class="header-label">3. Aviary</h4>
<dl>
<dt><a class="web-site-link" href="http://aviary.com/home" onclick="window.open('http://aviary.com/home'); return false;">http://aviary.com/</a></dt>
<dd><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SWBJU_vTR6I/AAAAAAAAPf4/MQl_zjcDYwk/s400/aviary.jpg" /></dd>
<dd>↑メニューにマウスオーバーでサブメニューを表示。 通常のJavascriptよりも芸の細かいメニューを実現しているのが特徴。 Flashでなくとも出来るという良例です。</dd>
</dl>

<h4 class="header-label">4. WP Coder</h4>
<dl>
<dt><a class="web-site-link" href="http://wpcoder.com/" onclick="window.open('http://wpcoder.com/'); return false;">http://wpcoder.com/</a></dt>
<dd><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SWBLCZKjofI/AAAAAAAAPgY/JBN0i9nlHHE/s400/wpcoder.jpg" /></dd>
<dd>↑注文までの各コンテンツが画面遷移なしにその場でポップアップするもの。 HTMLのコンテンツを表示させるので、現段階ではFlashよりSEO的にも有利です。</dd>
</dl>
<h4 class="header-label">5. Matt Dempsey</h4>
<dl>
<dt><a class="web-site-link" href="http://www.brightcreative.com/portfolio/" onclick="window.open('http://www.brightcreative.com/portfolio/'); return false;">http://www.brightcreative.com/portfolio/</a></dt>
<dd><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SWBWwQ1lDhI/AAAAAAAAPhk/zxdrjbJgZWs/s400/brightcreative.jpg" /></dd>
<dd>↑サブメニュー要素のポートフォリオ コンテンツをスライドショー形式で表示させているもの。</dd>
</dl>

<h4 class="header-label">7. Red Crown Studio</h4>
<dl>
<dt><a class="web-site-link" href="http://www.redcrownstudio.com/" onclick="window.open('http://www.redcrownstudio.com/'); return false;">http://www.redcrownstudio.com/</a></dt>
<dd><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SWBYdCAorQI/AAAAAAAAPiE/nRJpL9dZ8yk/s400/redcrownstudio.jpg" /></dd>
<dd>↑ポートフォリオ、画面遷移共にAjaxを使っている例。</dd>
</dl>

<h4 class="header-label">8. jQuery iPod-style Drilldown Menu</h4>
<dl>
<dt><a class="web-site-link" href="http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu" onclick="window.open('http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu'); return false;">http://www.filamentgroup.com/</a></dt>
<dd><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SWBeV_QKQUI/AAAAAAAAPik/4vqAxZ71Bho/s400/iPod-style.jpg" /></dd>
<dd>↑このようなiPodスタイルのメニューもFlashなしで実現可能。</dd>
</dl>

<h4 class="header-label">9. jQuery Keypress Navigation</h4>
<dl>
<dt><a class="web-site-link" href="http://nettuts.s3.amazonaws.com/013_keypress/demo/demo.html" onclick="window.open('http://nettuts.s3.amazonaws.com/013_keypress/demo/demo.html'); return false;">KeyPress Navigation Demo</a></dt>
<dd><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SWBifT_pARI/AAAAAAAAPjk/fht52eFD7YE/s400/keypress.jpg" /></dd>
<dd>↑ショートカットキーのようにキーを押すことで画面遷移出来るもの。</dd>
</dl>

<p>これはまだまだほんの一部ですが、「これをやるならFlashだろう。」というものもあったのではないでしょうか。 それだけAjaxというものが何故注目されているかがわかりますよね。</p>