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関係の会社を見分ける勘所... Web関係の仕事をしているなかで、「あっ、この人・会社いけてないなー」とか思うシーンは何度かあると思うのですが、結果的にその勘があたる、精度が高いものを一つ紹介します。(※個人の感想です) 専門用語の言い間違いから見える人柄と環境 Webの制作やってるところで、営業さんとかも含めて、...
放置は怖い、SNSのアプリ連携の解除方法... Googleやtwitterなど連携してアカウントを作るサービスはとても便利ですが、一方で使わないサービスも出てきてそれをずっと放置するのは危険かなと思います。 連携の仕方はボタンひとつで簡単ですが、解除の仕方はよく知らないなと思ったので、調べてみました。 Googleの連携 まずは下記に...
【Advent Calendar】LTと私&LT始めたい方へ... LT Advent Calendar第1弾12/1の記事です。 今年はLT芸人と言われる1年でした。 自分でも数ヶ月連続でやっていたり、勉強会に参加したらいつもLTしてるとか、LTするために勉強会に参加してるとか色々言われた一年でした。 LT楽しいです。 LT(ライトニングトーク)とは...
WebデザイナがWindowからMacに切り替えたときに選択したアプリ... 最近WindowsからMacに乗り換えました。 操作方法は慣れるしか無いのですが、ツールは探しはちょっと苦労しましたがこういうの好きなので意欲的に探せました。 WindowsからMacに移行されるWEBデザイナー方は良く見ますので参考になれば幸いです。 あくまでまだ乗り換えたばかりの素人M...
Webデザイナが開発環境を作るにあたっての課題について考えてみた... 先日個人的にWordPressのお仕事いただいて自分で開発環境を作っていたのですが、ふとこの工程を自分でできるWebデザイナってどのくらいいるのかなと疑問を覚えました。 幸い私は大きなトラブルなく構築できた(以前似たような構成の案件があった)のですが、従来案件確定の段階で重要視されるのはスケジ...
記事掲載連絡の大切さ 最近WELQがきっかけかライターやメディアのモラルみたいなのが問題みたいな話が結構でてるのですが、最近私のブログの記事を掲載したいとわざわざ連絡くださるメディアがありましたので、記事をコピペするメディアばかりじゃありませんよってご紹介です。 掲載されれた記事 名古屋駅周辺でノマドでき...