ふうせんいぬティニー
[scshot url="http://tinnyballoon.com/" wsize="579" ] 下層ページに入った後のナビゲーションの風船のふわふわが可愛い。 子供はこういうの好きそうですね。 うごかしているのはこんな感じかと。 [javascript] jQuery( function() { jQuery.fn.ballon = function( config ){ var obj = this; var i = 0; var defaults = { 'move' : 5, // 動く量 'duration' : 1000, // 移動にかける時間 'delay' : 0 // 両端で停止する時間 }; var setting = jQuery.extend( defaults, config ); ( function move() { i = i > 0 ? -1 : 1; var p = obj.position().top; jQuery( obj ) .delay( setting.delay ) .animate( { top : p + i * setting.move }, { duration : setting.duration, complete : move }); })(); }; $('#hoge').ballon( { 'move' : 10, 'delay' : 200, 'duration' : 2000 } ); }); [/javascript]selector（セレクター） spread WIXOSS
[scshot url="http://selector-wixoss.com/index.html" wsize="579" ] 下層ページに入った左上にあるページ内リンクのデザインが直感的でわかりやすい。曇天に笑う
[scshot url="http://www.dontenniwarau.com/" wsize="579" ] ホバーで正面イラストと背面イラストが切り替わるのはスペースの活用としては良いアイデアな気がする。 ナビゲーションのところなどスマホ用に用意している。 少ない対応でスマホでも見やすいように設計している印象。 PC・スマホ用のファイル管理方法がなかなかおもしろいです。 [javascript] var ua = { iPhone: navigator.userAgent.indexOf('iPhone') != -1, iPad: navigator.userAgent.indexOf('iPad') != -1, iPod: navigator.userAgent.indexOf('iPod') != -1, android: navigator.userAgent.indexOf('Android') != -1, windows: navigator.userAgent.indexOf('Windows Phone') != -1 }; if(ua.iPhone || ua.iPod || ua.android || ua.iPad){ //スマホ用の読み込みファイル document.write(''); document.write(''); }else{ //PC用の読み込みファイル document.write(''); document.write(''); } [/javascript] これなら共通のファイルもcommon.jsとかで管理出来ますね。（気になる事もあるけれど…） ブラウザ幅で管理ってわけではないですけど、こういうやり方もレスポンシブっていうのかな。魔弾の王と戦姫
[scshot url="http://www.madan-anime.jp/" wsize="579" ] jQuery Templates(今は開発はJsRenderに引き継がれています。)というJavaScriptテンプレートエンジンが使いやすそう。 配列で色々な値を受け渡したり出来きるようで、画像やテキストが変わるだけで、レイアウトが変わらないページの量産に力を発揮しそうです。 あとキャラクターページではURLにパラメータを振っていて値によって読み込む画像を替えて表示を切り替えています。 [javascript] var chNum = 1; $(document).ready( function(){ if($.query.get('c') || $.query.get('c')=="0"){ chNum = $.query.get('c'); } changeChara(chNum); }); function changeChara(num){ $('#Main .chara-frame .container').fadeOut(100); setTimeout(function(){ $('#Main .chara-frame .container img').attr("src","/assets/character/c_"+ num +".png"); $('#Main .chara-frame .container').fadeIn(700); },100); } [/javascript]Fate/stay night
[scshot url="http://www.fate-sn.com/" wsize="579" ] 全体的に丁寧に作られている。 何気にナビゲーションのテキストがWEBFONTになっています。[scshot url="http://sora-no-method.jp/" wsize="579" ] ここも全体的に丁寧に作られてる印象 Twitter Cards Metaも対応している。
繰繰れ！コックリさん
[scshot url="http://www.gugukoku.com/index.html" wsize="579" ] サイト全体の世界観が作品に合っていて素敵。 細かい装飾が多くて手が込んでる。あきらかにレイアウト崩れているページあるので、クライアントにバレる前に直した方が良いと思う
神撃のバハムート GENESIS
[scshot url="http://shingekinobahamut-genesis.jp/" wsize="579" ] 全画面で画像を表示して迫力出してる。 ページ毎に背景替えているのも世界観が出てよさ気。 スマホ用に専用ページを作っていて割りとPCの雰囲気を踏襲している。弱虫ペダル GRANDE ROAD
[scshot url="http://yowapeda.com/index.html" wsize="579" ] こちらも全画面で見せるタイプ。 彩度の高い赤と黄色の配色で総北っぽさを出している。 横ナビゲーションとサブカテゴリのバランスが見やすい。 スマホサイトは一部用意して一部PCサイトに飛ばしてるタイプ。スマホでPCサイトの上部にあるNEWSの詳細押すとメチャクチャなURLに飛ばされるのは早く直した方が良いと思います。
トリニティセブン
[scshot url="http://trinity-7.com/" wsize="579" ] 珍しくミニゲームがあるサイト。 FLASHでよくあったクリックゲームです。 難易度は調整されていていい感じだと思いましたが、ご褒美壁紙のキャラ画像が荒すぎておこ！です。これのせいで非常に満足度が低くなっているので代理店は早急に制作会社に素材を渡し直した方が良いと思います。