Cntlog > WEB全般 > 2014年秋アニメサイトを同業者(Webデザイナ)目線で見て気になったとこ

2014年秋アニメサイトを同業者(Webデザイナ)目線で見て気になったとこ

もう10月です。気がついたら一年終わってしまいしそうですね。
秋アニメ全然チェックしていなかったので、アニメだけじゃなくまたサイトの制作部分も一緒にチェックしてみました。

気になる演出やデザインなど刺激されたサイトをまとめてみました。

ふうせんいぬティニー

http://tinnyballoon.com/
下層ページに入った後のナビゲーションの風船のふわふわが可愛い。
子供はこういうの好きそうですね。

該当ページ

うごかしているのはこんな感じかと。

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
} );
});

selector(セレクター) spread WIXOSS

http://selector-wixoss.com/index.html
下層ページに入った左上にあるページ内リンクのデザインが直感的でわかりやすい。

該当ページ


曇天に笑う

http://www.dontenniwarau.com/
ホバーで正面イラストと背面イラストが切り替わるのはスペースの活用としては良いアイデアな気がする。

該当ページ

ナビゲーションのところなどスマホ用に用意している。
少ない対応でスマホでも見やすいように設計している印象。

PC・スマホ用のファイル管理方法がなかなかおもしろいです。

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('<link rel="stylesheet" type="text/css" href="../css/sp.css">');
document.write('<script type="text/javascript" src="../js/common_sp.js"></script>');
}else{     
//PC用の読み込みファイル
    document.write('<link rel="stylesheet" type="text/css" href="../css/pc.css">');
document.write('<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>');
}

これなら共通のファイルもcommon.jsとかで管理出来ますね。(気になる事もあるけれど…)
ブラウザ幅で管理ってわけではないですけど、こういうやり方もレスポンシブっていうのかな。


魔弾の王と戦姫

http://www.madan-anime.jp/
jQuery Templates(今は開発はJsRenderに引き継がれています。)というJavaScriptテンプレートエンジンが使いやすそう。
配列で色々な値を受け渡したり出来きるようで、画像やテキストが変わるだけで、レイアウトが変わらないページの量産に力を発揮しそうです。

参考
JavaScriptテンプレートエンジン「JsRender」のすすめ

あとキャラクターページではURLにパラメータを振っていて値によって読み込む画像を替えて表示を切り替えています。

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);
}

該当ページ


Fate/stay night

http://www.fate-sn.com/
全体的に丁寧に作られている。
何気にナビゲーションのテキストがWEBFONTになっています。


http://sora-no-method.jp/
ここも全体的に丁寧に作られてる印象
Twitter Cards Metaも対応している。


繰繰れ!コックリさん

http://www.gugukoku.com/index.html
サイト全体の世界観が作品に合っていて素敵。
細かい装飾が多くて手が込んでる。

あきらかにレイアウト崩れているページあるので、クライアントにバレる前に直した方が良いと思う


神撃のバハムート GENESIS

http://shingekinobahamut-genesis.jp/
全画面で画像を表示して迫力出してる。
ページ毎に背景替えているのも世界観が出てよさ気。

スマホ用に専用ページを作っていて割りとPCの雰囲気を踏襲している。


弱虫ペダル GRANDE ROAD

http://yowapeda.com/index.html

こちらも全画面で見せるタイプ。
彩度の高い赤と黄色の配色で総北っぽさを出している。
横ナビゲーションとサブカテゴリのバランスが見やすい。

スマホサイトは一部用意して一部PCサイトに飛ばしてるタイプ。

スマホでPCサイトの上部にあるNEWSの詳細押すとメチャクチャなURLに飛ばされるのは早く直した方が良いと思います。


トリニティセブン

http://trinity-7.com/
珍しくミニゲームがあるサイト。
FLASHでよくあったクリックゲームです。
難易度は調整されていていい感じだと思いましたが、ご褒美壁紙のキャラ画像が荒すぎておこ!です。

これのせいで非常に満足度が低くなっているので代理店は早急に制作会社に素材を渡し直した方が良いと思います。


SHIROBAKO

http://shirobako-anime.com/index.html
所々に動く演出を入れている。
くるくる回しているのは、jqueryrotateですかね。


サイコパス

http://psycho-pass.com/
今どき珍しいFLASHサイト。
FLASH使うだけあって動きがたくさん!
スマホサイトはスマホサイトできちんと作ってある。


四月は君の嘘

http://www.kimiuso.jp/index.html
サイト可愛い。デザインは今期いちばん素敵と思いました。
ナビゲーションに角度つけたり、hoverのアニメーションさせたり芸が細かいです。
イベントをカレンダーで表示させているのは見やすくて良いなって思います。
おそらくCLNDR.js使ってる。


Bonjour♪恋味パティスリー

http://www.bonkoi.com/index.html
最初に好きなキャラを選択させてそのキャラ色にサイト素材替えさせるのは頭おかしいなと思いました(褒めてる)。
やり方はjquery.cookie.jsでcookie保存させてる感じですかね。


結城友奈は勇者である

http://yuyuyu.tv/
アニメ系では珍しくレスポンシブデザイン。
主にナビゲーションのカラム落ちくらいの対応だけど、コストパフォーマンス良さそう。
レスポンシブのためかナビゲーションはアイコンでなっている。

まとめ

全体を通してスマホ(対応した)サイト少ないのが気になりました
オタクとはいえ若年層はPC持ってなくてスマホで見るって言うイメージあるのですが違うのかな?
アクセス解析気になる…。
あとスマホで見ると見えないようなコンテンツも合ったりとチェック甘いなーと思うところです。
やはり放送時期重なる=サイトアップの時期重なるで制作会社もしんどいのかなと勘ぐっていしまいます。
そんな中でも面白い・見やすいサイト作る人達はさすがだな~と思っています。

リッチ演出としてアニメーション系が少ないのも気になりました。
大きい画像をアニメーションさせると重いのでその辺の配慮かのと思ってます。
アニメのサイトなので、画像の多さと処理の重さのバランスは悩ましいですね。

私も業界違ったサイト作ってみたいのですが中々ご縁が無くて寂しいです。
(どなたかお声がけくださったら、全力で頑張る次第ですよ(*ゝω・*))

アニメ自体は今期、続編が多いせいか外れの少ないアニメ時期かなと思ってます。
正統派が面白いのはわかりきっているので、どのアニメがダークホースとなって化けてくれるか今から楽しみです。
新アニメは3話までが大事と言われますが、私は観察眼が疎いので5話切りです。

ちなみに今期視聴確定しているのは、テラフォーマーズ、デンキ街の本屋さん、魔弾の王と戦姫、ログ・ホライズン、Fate/stay night、クロスアンジュ 天使と竜の輪舞(小倉唯ちゃん押し)、七つの大罪、繰繰れ! コックリさん、弱虫ペダル、甘城ブリリアントパーク、棺姫のチャイカ、SHIROBAKO、PSYCHO-PASS、四月は君の嘘です。

関連記事

簡単かつ速攻でWebサイトを持てるGoogleマイビジネスの新機能... 2017年6月からGoogleマイビジネスに簡単なウェブサイトを作れるWebサイトビルダーの機能がつきました。 簡単かつ無料でつくれるのでホームページを持っていない人には朗報ですね。 すぐにインデックスされるので、検索でもすぐに引っかかる事ができそうです。 使い方 Goo...
2015年の振り返りと2016年に向けて|会社員 Advent Calendar 2015... 今年もAdvent Calendarに参加第1弾「会社員 Advent Calendar 2015」です。 他にもディレクターとかWeb解析とかやる予定です。 私は会社員してまして、今の会社は今年で2年目です。 ようやく社内の下積みを抜けて色々自分でできるようになったのでその振り返りです...
WebデザイナがWindowsからmacに乗り換えた感想... これまで15年ほど生粋のWindowsユーザーをしていましたが、この度MacBook Airに乗り換えました。 理由は仕事で関わる人が全員Macなので私だけWindowsだと業務に支障が出る事を懸念してになります。 正直ずっとWindowsでやっていくつもりでしたので半分くらい乗り気ではなか...
安くホームページを作る方法 私はWeb制作会社で勤めたり、個人でホームページ制作を引き受けているのですが、時々「予算無いけどとにかく凄いサイト作りたい」ってお客さんがいたりします。 私は安く作るという事は基本的にせず、あなたが〇〇をやってくれるなら私は作るだけに集中できるので安くは作れますよって感じでお話させてもらい...
無料で取得できるGoogleの資格(Google Partner)を取得しました。... マーケティングの知識や流行りの技術もそれなりに身についてきたので、資格でも取って実力試しでもしようかなーと思って、探してみたら無料でGoogleが認定している資格がありましたのでご紹介します。 Google Partners Google Partnerとは「Google AdW...
【Advent Calendar】LTと私&LT始めたい方へ... LT Advent Calendar第1弾12/1の記事です。 今年はLT芸人と言われる1年でした。 自分でも数ヶ月連続でやっていたり、勉強会に参加したらいつもLTしてるとか、LTするために勉強会に参加してるとか色々言われた一年でした。 LT楽しいです。 LT(ライトニングトーク)とは...