<a href="http://www.flickr.com/photos/web-marketing/1941558222/" title="Photo Sharing"><img src="http://farm3.static.flickr.com/2368/1941558222_62f1526a94_m.jpg" width="230" height="240" alt="dna-art-3.jpg" /></a>

<p>見た目のかっこよさや、ユーザビリティの改善を期待できることから人気の<a href="http://web-marketing.zako.org/web-person-words/web-marketing-words/13-design-guidelines-for-tab-controls.html">Ajax タブ</a>。サイトを見ていてなかなか買い物をしやすそうなサイトを見つけたので書き留めておきます。</p>

<!--more-->
<h3 class="tips">買い物のステップをAjaxでサクサク進ませる「dna11」</h3>
<p><a href="http://www.flickr.com/photos/web-marketing/1940565369/" title="Photo Sharing"><img src="http://farm3.static.flickr.com/2323/1940565369_28456fd585.jpg" width="500" height="327" alt="dna-art-.jpg" /></a></p>
<p>シンプルなインテリアに最適なDNAアート、「<a href="http://www.dna11.com/" target="_blank">dna11</a>」は、そのDNAアートを販売しているサイトです。実際に操作を見たほうが分かりやすいので動画にしてみました。</p>

<h4 class="tips">dna11</h4>
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/sYX03z4RIa4&rel=1&color1=0xe1600f&color2=0xfebd01&border=0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/sYX03z4RIa4&rel=1&color1=0xe1600f&color2=0xfebd01&border=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
<p>↑商品のページで、ほとんどスクロールしないまま詳細項目を選択できるようにAjaxタブでうまくまとめられています。</p>

<h4 class="tips">関連するAjax</h4>
<p><a href="http://www.flickr.com/photos/web-marketing/1942658173/" title="Photo Sharing"><img src="http://farm3.static.flickr.com/2346/1942658173_359cb519e3_o.gif" width="381" height="307" alt="goog309.gif" /></a></p>
<p>↑今回「dna11」で使われていたAjaxと同じ動きをするのがこのAjax。（<a class="ajax-link" href="http://www.dezinerfolio.com/wp-content/uploads/accordemo/01.html" target="_blank">デモページ</a>）</p>
<p>クールなデザインを実現しながらも、ユーザビリティまで向上させてくれるAjax、何よりも導入が意外と簡単なのが嬉しいですよね。</p>


<p>興味のある方は<a class="ajax-link" href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank">Simple Javascript Accordions</a>のエントリへどうぞ。</p>

<h4 class="tips">関連情報</h4>
<ul>
<li>Via：<a class="web-site-link" href="http://www.dna11.com/default.asp" target="_blank">DNA Art by DNA 11</a></li>
<li>Via:<a class="ajax-link" href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank">Deziner Folio</a></li>
<li>Ajax シリーズ</li>
</ul>

<div style="margin-bottom:0px;"><div style="float:left;"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4861004314%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4861004314%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank"><img src="http://g-ecx.images-amazon.com/images/G/09/nav2/dp/no-image-avail-img-map._V23175435_AA120_.gif" alt="Ajaxライブラリリファレンス" style="border:0;"></a></div><div style="float:left;margin-left:15px;line-height:120%"><div style="margin-bottom:10px;line-height:120%"><form style="margin-bottom:0px;" method="post" action="http://www.amazon.co.jp/gp/aws/cart/add.html" target="_blank"><input type="hidden" name="AssociateTag" value="snowboadteamz-22"><input type="hidden" name="SubscriptionId" value="028QVM5GAF1MWA4NBMR2"><input type="hidden" name="ASIN.1" value="4861004314"><input type="hidden" name="Quantity.1" value="1"><input type="image" name="submit.add-to-cart" src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp5.gif" /></form></div><div>Ajaxライブラリリファレンス<br /></div><div style="margin-top:0px; margin-bottom:10px"><div style="margin-bottom:5px">価格：<span style="color:#f33;font-weight:bold;">￥ 2,940</span><br />平均評価：4.0<br />納期：通常24時間以内に発送<br /></div></div><div style="margin-top: 5px"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4861004314%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4861004314%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank">Amazon で詳細を見る</a> by <a href="http://astore.amazon.co.jp/snowboadteamz-22" title="WEB担当者の本屋" target="_blank">WEB担当者の本屋</a></div></div><div style="clear: left"></div></div>