ちょっと、いつもとは毛色をかえて。
今回はウェブサイトの批評、レビューをしてみようかと。
今期アニメ、個人的に推していきたいアニメとなったハナヤマタからいきたいと思います。
まずはTOPページ。
画像では該当divを非表示にして消してありますが、ページ全体を舞う桜の花びらが印象的なページです。
ヘッダで読み込まれているスクリプト、flowerAnime.jsによるものですね。
コード見る限り、自作のようですね。手が込んでます。
あと、意図しているかどうかは別として、このスクリプトは常にブラウザの描画領域の前面、全体に出てくるようなっているので、キャラクタービジュアルを右クリックで持っていきにくくなっていますね。
おもしろいです。
キャラクターの表示の部分、今どきFLASHを使うこともないので、各キャラの背景透過画像を、それぞれ表示するようにしてあります。
いい感じの素材が・・・
つぎにSTORYページ
質素、簡潔。
気になるのは、このページにテキストコンテンツが存在しないことですね。
普通のサイト設計の上ではさけるべきとされています。が、、、アニメサイトとかの場合は別に気にしなくていいことですね。
下部に「あにてれ」へのリンクがありますが・・・
このロールオーバー効果の実装の仕方が非常に気になります。
opacityで透明度変化を与えるとき、背景色を与えていないと、firefoxでは数ピクセルですが画像がずれます。
なので画像にマウスオーバーした瞬間に若干ずれるのがわかるかと思います。実際、白を背景色に設定すれば解消できました。
・・・もっといえばon側の画像はopacity変更せずずっと１でいい気がします。off側だけ表示非表示がかわればいい話なので。
つぎはキャラクターページ
まとまっていてみやすいですね。
若干気になるのは、ハナ役の田中美海さんの名前に、ヤヤの画像がかぶっていることですね。読めないことは無いので問題ないと思いますが、
本来なら、ヤヤの画像の入っているdivのtopをもう少し確保してあげるべきです。
このキャラクターの画像をマウスオーバーすると、画像が塗りつぶされたものにかわりますね。
ここの組み方なんですが、通常にdivを重ねているせいで、キャラクターの画像の位置と少しずれた挙動をします。
主にハナの画像がはナルとヤヤの後ろにいっている関係上、マウスオーバーに反応する領域が狭いです。
手間の問題はありますが、可能ならクリッカブルマップを利用するとよかったかもしれません。
ついでにいうと、クリックして開いたときにキャラクターが大写しになりますが、戻るボタンが右上に出てきてるのがわかりづらいです。
ちょっとページになじみ過ぎですね。
そしてムービーページ
ここも気になりますね。別に粗捜しをしてるつもりは無いんですが結果的にそうなってますね・・・
それぞれyoutubeの動画がiframeで埋め込んである訳ですが
その上動画タイトルのdivと、下のyoutubeの埋め込みの幅がずれています。
理由としては、タイトルとyoutubeの埋め込みをまとめているdivにはwidthの指定があるんですが、
youtubenの埋め込みのiframeが、そもそもwidth属性を持っているため、そちらが優先されている、という状態ですね。
.moviebox .movie iframe{width:100%;}
とかしておくのが無難なんじゃ無いでしょうか？
イベントページとグッズページ、スペシャルページは基本ディスコグラフィページと同様なのでまとめて・・・
「詳しくはこちら」をクリックすると、モーダルで内容が表示されます。
一般的にLightboxと呼ばれるやつですね。無駄な画面遷移、ページ遷移がないのが良いと思います。
ここは特別書くようなことも無いですね。
強いていえば、各配信サイトへリンクを張って、飛べるようにしてあげた方が親切です。
こちらも特に問題ないですね。
下層ページ全体を通していえる問題は、画面右上にあるTOPへのボタン。これ、TOPページに遷移するボタンですね。
一般的に、TOPとかいて上を示しているボタンはページ下部から上部（TOP）へのスクロールアップを示すことが多いです。
そのボタンは画面右にfloatしてありますが・・・
画面上部、タイトル部分をおせばTOPページにと飛べるので、ここにボタンがある意味はあまりません。
わかりづらい、と思うのであれば、そもそも左サイドバーのグロナビにHOMEとしてあげた方がよいです。
TOPだと、ページ上部という意味と、TOPページという意味が同時に考えうるのでよろしくないからです。
あと、headerタグ内。
<meta property="og:site_name" content="ハナヤマタ TVアニメ公式サイトE" />
となっていますが、Eは確実にミスですよね。
・・・といった感じでしょうか。やってみたら大概揚げ足取りになってました。すみません。
色使い、コンセプト等の面では見やすく、いいサイトだと思いました。若干詰めが甘い部分がきになるサイトでしたが・・・。
ちなみにこのサイト、スマホだと違った表示になります。
スマホ側のソースは読んでいませんが、レスポンシブ等ではないので、index.phpでユーザエージェントを読んで、出し分けをしているんでしょう。
あちら側も近いうちにレビューしたいと思います。
そんなこんなで、ハナヤマタ アニメ公式ウェブサイトのレビューでした。
