もう10月です。気がついたら一年終わってしまいしそうですね。
秋アニメ全然チェックしていなかったので、アニメだけじゃなくまたサイトの制作部分も一緒にチェックしてみました。
気になる演出やデザインなど刺激されたサイトをまとめてみました。
ふうせんいぬティニー
下層ページに入った後のナビゲーションの風船のふわふわが可愛い。
子供はこういうの好きそうですね。
うごかしているのはこんな感じかと。
[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
下層ページに入った左上にあるページ内リンクのデザインが直感的でわかりやすい。
曇天に笑う
ホバーで正面イラストと背面イラストが切り替わるのはスペースの活用としては良いアイデアな気がする。
ナビゲーションのところなどスマホ用に用意している。
少ない対応でスマホでも見やすいように設計している印象。
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とかで管理出来ますね。（気になる事もあるけれど…）
ブラウザ幅で管理ってわけではないですけど、こういうやり方もレスポンシブっていうのかな。
魔弾の王と戦姫
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
全体的に丁寧に作られている。
何気にナビゲーションのテキストがWEBFONTになっています。
ここも全体的に丁寧に作られてる印象
Twitter Cards Metaも対応している。
繰繰れ！コックリさん
サイト全体の世界観が作品に合っていて素敵。
細かい装飾が多くて手が込んでる。
あきらかにレイアウト崩れているページあるので、クライアントにバレる前に直した方が良いと思う
神撃のバハムート GENESIS
全画面で画像を表示して迫力出してる。
ページ毎に背景替えているのも世界観が出てよさ気。
スマホ用に専用ページを作っていて割りとPCの雰囲気を踏襲している。
弱虫ペダル GRANDE ROAD
こちらも全画面で見せるタイプ。
彩度の高い赤と黄色の配色で総北っぽさを出している。
横ナビゲーションとサブカテゴリのバランスが見やすい。
スマホサイトは一部用意して一部PCサイトに飛ばしてるタイプ。
スマホでPCサイトの上部にあるNEWSの詳細押すとメチャクチャなURLに飛ばされるのは早く直した方が良いと思います。
トリニティセブン
珍しくミニゲームがあるサイト。
FLASHでよくあったクリックゲームです。
難易度は調整されていていい感じだと思いましたが、ご褒美壁紙のキャラ画像が荒すぎておこ！です。
これのせいで非常に満足度が低くなっているので代理店は早急に制作会社に素材を渡し直した方が良いと思います。
SHIROBAKO
所々に動く演出を入れている。
くるくる回しているのは、jqueryrotateですかね。
サイコパス
今どき珍しいFLASHサイト。
FLASH使うだけあって動きがたくさん！
スマホサイトはスマホサイトできちんと作ってある。
四月は君の嘘
サイト可愛い。デザインは今期いちばん素敵と思いました。
ナビゲーションに角度つけたり、hoverのアニメーションさせたり芸が細かいです。
イベントをカレンダーで表示させているのは見やすくて良いなって思います。
おそらくCLNDR.js使ってる。
Bonjour♪恋味パティスリー
最初に好きなキャラを選択させてそのキャラ色にサイト素材替えさせるのは頭おかしいなと思いました（褒めてる）。
やり方はjquery.cookie.jsでcookie保存させてる感じですかね。
結城友奈は勇者である
アニメ系では珍しくレスポンシブデザイン。
主にナビゲーションのカラム落ちくらいの対応だけど、コストパフォーマンス良さそう。
レスポンシブのためかナビゲーションはアイコンでなっている。
まとめ
全体を通してスマホ（対応した）サイト少ないのが気になりました。
オタクとはいえ若年層はPC持ってなくてスマホで見るって言うイメージあるのですが違うのかな？
アクセス解析気になる…。
あとスマホで見ると見えないようなコンテンツも合ったりとチェック甘いなーと思うところです。
やはり放送時期重なる＝サイトアップの時期重なるで制作会社もしんどいのかなと勘ぐっていしまいます。
そんな中でも面白い・見やすいサイト作る人達はさすがだな～と思っています。
リッチ演出としてアニメーション系が少ないのも気になりました。
大きい画像をアニメーションさせると重いのでその辺の配慮かのと思ってます。
アニメのサイトなので、画像の多さと処理の重さのバランスは悩ましいですね。
私も業界違ったサイト作ってみたいのですが中々ご縁が無くて寂しいです。
（どなたかお声がけくださったら、全力で頑張る次第ですよ(*ゝω・*)）
アニメ自体は今期、続編が多いせいか外れの少ないアニメ時期かなと思ってます。
正統派が面白いのはわかりきっているので、どのアニメがダークホースとなって化けてくれるか今から楽しみです。
新アニメは3話までが大事と言われますが、私は観察眼が疎いので5話切りです。
ちなみに今期視聴確定しているのは、テラフォーマーズ、デンキ街の本屋さん、魔弾の王と戦姫、ログ・ホライズン、Fate/stay night、クロスアンジュ 天使と竜の輪舞（小倉唯ちゃん押し）、七つの大罪、繰繰れ! コックリさん、弱虫ペダル、甘城ブリリアントパーク、棺姫のチャイカ、SHIROBAKO、PSYCHO-PASS、四月は君の嘘です。