blog
ブログ

【2019年版】イケてるアニメはWebサイトもイケてる!アニメのウェブサイトの紹介

こんにちは。デザイナーのイノウエです。
私が初めて書いた記事、イカしたアニメのWebサイトをまとめた記事があります。

イケてるアニメはWebサイトもイケてる!アニメサイトの紹介

会社のブログで初の記事がヲタク全開で趣味に走りまくった内容で良かったのか?と、今更ながら思ってしまいましたが、あれから1年という時が流れ、色んなアニメ作品が世に出たことでしょう。

ということで(?)今回は、タイトルにもある通り”イケてる!”と思う、アニメのWebサイト2019年版を紹介したいと思います!

 

 

ぼくたちは勉強ができない

https://boku-ben.com/

週刊少年ジャンプで連載されている、恋愛漫画のアニメサイトです。
サイトは全体的にCSSアニメーションを多く使っていて、見ていて楽しいです。
教科書に載っている数式や漢字がフワフワと浮かんでいるこの背景は、パララックス(視差効果)を使用していて、背景画像を複数にしてそれぞれ違う動きにしているようです。

CSSアニメーション
要素をアニメーションさせるCSSの機能。手軽にアニメーションを実装できる点から、現在利用されているサイトはかなり多い。

パララックス
スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なるスピードでスクロールさせるようなWebデザインの手法。(Google参照)

 

ナカノヒトゲノム【実況中】

http://www.nhg-anime.com/

謎のフリーゲーム「ナカノヒトゲノム」をプレイする実況者たちが、原因不明の失踪事件を解明していく物語です。
トップページに移動したときに流れるアニメーションなど、とにかく動きの多いサイトです。
ゲームをテーマとしているアニメなのもあって、キャッチなどをドット文字にしているところも良いですね!

 

ビジネスフィッシュ

https://businessfish.jp/

顔は魚、しゃべるは日本語、職業は会社員と、そんな現代社会を生きる働く魚?達のお話です。
スマートフォンをメインにしたサイトで、 PC版はSP版のレイアウトを可変した形になっています。
漫画タッチのような吹き出しやコマ割りをイメージさせるデザインがギャグ満載?なこのアニメの雰囲気に合っていると思います!

 

えいがのおそ松さん

https://osomatsusan-movie.com/

お馴染み、赤塚不二夫のギャグ漫画「おそ松くん」原作としたアニメ「おそ松さん」の劇場版映画のサイトです。
おそ松さんの内容とは逆に、落ち着いたシンプルなサイトデザインになっています。
私が良く使用しているスライダー「Swiper」も多く使われています。

Swiper
スライダー(カルーセル)が作れるJavaScriptライブラリのこと。
jQuery不要で、拡張性が高く、レスポンシブにも対応している非常に便利なプラグイン。

 

劇場版「SHIROBAKO」公式サイト

http://shirobako-movie.com/

アニメーターや声優などのクリエイターを主人公にしたアニメの劇場版映画のサイトです。
アニメを作る現場で実際に使われている資料をページ内に散りばめていたり、
背景の星や月などのアイコンはそれぞれSVGで表示してアニメーションを設定していて、非常に細かく作られているサイトです。

SVG
ベクターデータの画像フォーマットのこと。
JPEGやPNGのようなビットマップデータと違い、SVGはベクターデータなので拡大・縮小しても画質が変わらない特徴を持っている。スマホやタブレット、高解像度PCでも綺麗に画像を表示することができる。

 

デジモンアドベンチャー LAST EVOLUTION 絆

http://digimon-adventure.net/

知らない人はいないであろう、デジモンの劇場版映画のサイトです。
サイトは全体的にシンプルでありながらもモザイクタイルなどでデジタルな世界観を表現していて、デジモンのイメージをしっかり表現しています。
トップページにある「デジモンと共に歩んだ、全ての”子どもたちへ”ー。」のキャッチが心に響きました。これは見に行かないと!!

 

いかがでしたか?
今回はアニメ映画のサイトも含めた形でご紹介しましたが、前回よりもパララックスなど、かなり動きのあるサイトが多く感じられたような印象です。
紹介したサイトは全てレスポンシブサイトでしたが、スマートフォンをメインにしたサイトも増え、PCよりもスマホで閲覧するのが一般的になっているようですね。
作品を広めたい!本編を見て欲しい!という想いがビシバシ伝わってきますね!!それではまた!

facebookでも情報を発信しています

facebookをフォロー
ブログ一覧に戻る