はじめに

最近のアニメの公式ホームページって、すごいおしゃれですよね。なんかもう『技術の粋』って感じです。

そんなアニメの公式ホームページをありがたく拝見し学ばせていただこうというのがこの記事の趣旨です。

なお語彙力不足により説明がわかりにくいので、各自公式ホームページを開きながら読んでください。
また、JavaScriptのコードを一つ一つ見ていくのはさすがにできないので、CSSを中心に見ていきます。

アニメ一覧の取得

2019春アニメ一覧|来期(4月放送開始)新作アニメ情報 | アニメイトタイムズ

上記サイトで下記スクリプトを開発者ツールのコンソールより実行し、アニメ公式ホームページへのURL一覧を取得しました。

copy(  
    [  
        ...document  
            .querySelector('div.responsive-iframe > div:last-of-type')  
            .querySelectorAll('a[target="_blank" i]:not(#times_affiliate-writer)')  
    ]  
        .map(v => v.href)  
        .sort()  
        .join('\n')  
);

copy()は開発者ツールのみで使うことのできる便利な関数です。
詳しくは: Web コンソールヘルパー - 開発ツール | MDN

取得した一覧は以下のとおりです(2019/03/15現在)。
漏れがあったら教えてください。

http://7seeds.jp/  
http://anime.heros-ultraman.com/  
http://aochan-anime.com/  
http://bungo-stray-dogs.jp/  
http://carolandtuesday.com/  
http://choukadou-anime.com/  
http://cingeki-anime.com/  
http://gunjyo-magumeru.com/  
http://hangyakusei-anime.com/  
http://hitoribocchi.jp/  
http://isekai-quartet.com/  
http://joshikau-anime.com/  
http://kenja-no-mago.jp/  
http://kinpri.com/  
http://meisakukun.com/  
http://mirutights.jp/  
http://nankoko-anime.com/  
http://nobutsuma-anime.com/  
http://occultkoumuin.com/  
http://onepunchman-anime.net/  
http://sarazanmai.com/  
http://senkosan.com/  
http://senryu-girl-official.com/  
http://shingeki.net/  
http://shoumetsutoshi-anime.com/  
http://w-witch.jp/501_takeoff/  
http://www.gundam-the-origin.net/index.html  
http://www.konooto-anime.jp/  
http://www.tbs.co.jp/anime/BAKUMATSU/  
http://www.tv-tokyo.co.jp/anime/aikatsufriends/  
http://yuno-anime.com/  
https://anime-hachinai.com/  
https://araiya.cf-anime.com/  
https://boku-ben.com/  
https://diaace.com/  
https://fruba.jp/  
https://kimetsu.com/anime/  
https://namuami-utena-anime.com/  
https://niagho.com/info/tvanime.html  
https://robihachi.jp/  
https://www.fairygone.com/  
https://www.monogatari-series.com/  
https://www.netflix.com/jp/title/80196883  
https://www.shonenjump.com/j/rensai/jimoto.html  
https://www.shopro.co.jp/tv/brs/  
https://www.tv-tokyo.co.jp/anime/bakugan-bp/  
https://www.tv-tokyo.co.jp/anime/prichan/  
https://www.tv-tokyo.co.jp/anime/youkai-watch2019/  
https://www.tv-tokyo.co.jp/watanuki/  
https://www.yte.co.jp/program/detail.php?id=107  
https://www.ytv.co.jp/mix/  
https://yatogame.nagoya/

とりあえず一番上から順番に見ていきます。

メタデータ取得

省力化のため、サイトの基本的な情報を取得するJavaScriptを書きました。
コンソールで実行します。

void ((() => {  
    const title = document.title;  
    const ogp =  
        [...document.querySelectorAll('meta[property^="og:" i]')]  
            .map(elm => [elm.getAttribute('property'), elm.getAttribute('content'),])  
        ;  
    const url =  
        ((canonical = document.querySelector('link[rel="canonical" i]')) && canonical.href)  
        ||  
        location.href;  
    const description =  
        (descriptionElm = document.querySelector('meta[name="description" i]'))  
        &&  
        descriptionElm.getAttribute('content')  
        ;  
    const keywordsAry =  
        (keywordsElm = document.querySelector('meta[name="keywords" i]'))  
        &&  
        (keywords = keywordsElm.getAttribute('content'))  
        &&  
        keywords.split(/\s+/g)  
        ;  
    const styles = [...document.styleSheets];  
    const extStyles = [...document.styleSheets].map(v => v.href).filter(v => v);  
    const scripts = [...document.scripts];  
    const extScripts = [...document.scripts].map(v => v.src).filter(v => v);  

    const html =  
        [  
            `# [${title}](${url})`,  
            ``,  
            `\`description\`: ${description ? description : 'なし'}`,  
            `\`keywords\`: ${keywordsAry ? keywordsAry.map(v => `${v}`).join(', ') : 'なし'}`,  
            ``,  
            ogp  
                ? [  
                    `<details>`,  
                    `<summary>OGP</summary>`,  
                    `<table>`,  
                    `<thead>`,  
                    `<tr><th>property<th>content`,  
                    `</thead>`,  
                    `<tbody>`,  
                    ...ogp.map(([prop, content]) => `<tr><td><code>${prop}</code><td>${content}`),  
                    `</tbody>`,  
                    `</table>`,  
                    `</details>`,  
                ].join('')  
                : 'OGPなし',  
            ``,  
            [  
                `<details>`,  
                `<summary>CSS: 計${styles.length} (内部${styles.length - extStyles.length} / 外部${extStyles.length})</summary>`,  
                extStyles ? `<ol>${extStyles.map(v => `<li>${v}`).join('')}</ol>` : '外部CSSなし',  
                `</details>`,  
            ].join(''),  
            ``,  
            [  
                `<details>`,  
                `<summary>JS: 計${scripts.length} (内部${scripts.length - extScripts.length} / 外部${extScripts.length})</summary>`,  
                extScripts ? `<ol>${extScripts.map(v => `<li>${v}`).join('')}</ol>` : '外部JSなし',  
                `</details>`,  
            ].join(''),  
            ``,  
            `---`,  
            ``,  
        ].join('\n')  
        ;  

    copy(html);  
})())

上記スクリプトで取得した上で、DOMインスペクターを見て勉強していきます。

それでは実際にやっていきます。

アニメ「7SEEDS」公式サイト

description: 累計600万部超(デジタル含む)の近未来サバイバルストーリー、アニメ「7SEEDS」。2019年6月よりNetflixにて全世界独占配信決定!
keywords: アニメ,7SEEDS,セブンシーズ,小学館,flowers,フラワーズ,フラワーコミックα,フラワーコミックアルファ,フラワーコミック,田村由美,岩清水ナツ,青田嵐,麻井蟬丸,早乙女牡丹,天道まつり,守宮ちまき,草刈螢,百舌戸要,東山奈央,福山潤,小西克幸,沢海陽子,阿澄佳奈,石田彰,悠木碧,井上和彦,高橋幸雄,待田堂子,佐藤陽子,GONZO,ゴンゾ,Netflix,ネトフリ

OGP
property content
og:site_name アニメ「7SEEDS」公式サイト
og:title アニメ「7SEEDS」公式サイト
og:type website
og:description 累計600万部超(デジタル含む)の近未来サバイバルストーリー、アニメ「7SEEDS」。2019年6月よりNetflixにて全世界独占配信決定!
og:url http://7seeds.jp
og:image http://7seeds.jp/images/fb_image.png
CSS: 計5 (内部1 / 外部4)
  1. https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700
  2. http://7seeds.jp/css/modal-video.min.css
  3. http://7seeds.jp/css/common.css
  4. http://7seeds.jp/css/style.css
JS: 計7 (内部1 / 外部6)
  1. https://www.googletagmanager.com/gtag/js?id=UA-86622204-17
  2. https://platform.twitter.com/widgets.js
  3. http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  4. http://7seeds.jp/js/jquery.matchHeight.js
  5. http://7seeds.jp/js/modal-video.js
  6. http://7seeds.jp/js/action.js

まずheaderがかっこいいです。

backgroundrgbaを用いた値に設定しているので、うっすらと透けて後ろが見えてかっこいいです。rgbaではred, green, blueに加えalpha(透過度)を設定します。結構手軽にできるっぽいので良さげですね。

また、position: fixed;でビューポート上部に固定しているようです。

header nav .gnav-inner gnav-list uldisplay: flex;で中の要素を横に並べ、align-items: center;で上下真ん中に移動、中身にmargin-leftを使って余白を作っているようです。
FlexBox便利そうですね。
また、letter-spacing: -.01em;で文字間隔を詰めています。かっこいい。

一定量スクロールすると出てくるビューポート右下の.pagetopは、.showが付与されることでopacity: 1;で透明化を解除しているようです。クリックされるとjQueryのanimateでページ上部へ移動します。

全体的に透明をうまく使っていてかっこいいです。

7seeds.jp/news/にて、.news-list liの間隔を開けるために.news-list li + liと書かれていました。.news-list li:not(:first-of-type)と同じだと思います。+ってこういうときに使えばいいんですね。使ったことありませんでした…。

7seeds.jp/staffcast/にはスタッフとキャストが書かれているのですが、そこではdisplay: inline-block;を使って2カラムにしていました。簡単なものならdisplay: flex;を使うまでもないのですね。

ULTRAMANアニメ公式サイト

description: アニメ『ULTRAMAN』 2019年4月1日、Netflixにて世界同時独占配信開始! 監督:神山健治×荒牧伸志、制作:Production I.G×SOLA DIGITAL ARTS
keywords: ULTRAMAN.ウルトラマン,清水栄一,下口智裕,神山健治,荒牧伸志,ヒーローズ,HEROS,アニメ

OGP
property content
og:url https://anime.heros-ultraman.com/
og:type website
og:title ULTRAMANアニメ公式サイト
og:site_name ULTRAMANアニメ公式サイト
og:description アニメ『ULTRAMAN』 2019年4月1日、Netflixにて世界同時独占配信開始! 監督:神山健治×荒牧伸志、制作:Production I.G×SOLA DIGITAL ARTS
og:image https://anime.heros-ultraman.com/wp/wp-content/themes/anime_heros_ultraman/assets/images/common/ogp_2.png
og:locale ja_JP
CSS: 計5 (内部1 / 外部4)
  1. https://fonts.googleapis.com/earlyaccess/notosansjapanese.css
  2. https://fonts.googleapis.com/css?family=Titillium+Web:400,600
  3. https://anime.heros-ultraman.com/wp/wp-content/themes/anime_heros_ultraman/assets/css/index/lib.css?ver=1552374628543
  4. https://anime.heros-ultraman.com/wp/wp-content/themes/anime_heros_ultraman/assets/css/index/style.css?ver=1552374628543
JS: 計5 (内部2 / 外部3)
  1. https://www.google-analytics.com/analytics.js
  2. https://anime.heros-ultraman.com/wp/wp-content/themes/anime_heros_ultraman/assets/js/index/lib.js?ver=1552374628543
  3. https://anime.heros-ultraman.com/wp/wp-content/themes/anime_heros_ultraman/assets/js/index/app.bundle.js?ver=1552374628543

読み込み時からかっこいい!!!
ビューポート中心に設置された(position: fixed;).sw-Loading_Markがふわっと(transition: 1s;)消え(opacity: 0;)、.sw-Loading::before, .sw-Loading::afterがカーテンのように開き(transform: translateX(hoge%);)、これまたかっこいいキービジュアル(.index-Mainvisual.v2::before)が見えました。
素晴らしいですねこの一連の動き。惚れ惚れします。

あと、.index-News .line-horizontal > divがいい仕事してます。

オーバーレイ表示を閉じるバツボタンは画像でした。

TVアニメ「みだらな青ちゃんは勉強ができない」公式サイト

description: 「少年マガジンエッジ」にて好評連載中!カワハラ恋による妄想ラブコメディ『みだらな青ちゃんは勉強ができない』TVアニメ化決定!
keywords: 淫らな青ちゃんは勉強ができない,みだらな青ちゃんは勉強ができない,みだらな青ちゃん,青ちゃん,あおちゃん,少年マガジンエッジ,マガジンエッジ,マガジン,堀江青,堀江,青,カワハラ恋,井上圭介,横手美智子,大島美和,SILVER, LINK,シルバーリンク,シルリン,講談社,木嶋拓海,木嶋,リア充,勉強

OGP
property content
og:site_name TVアニメ「みだらな青ちゃんは勉強ができない」公式サイト
og:title TVアニメ「みだらな青ちゃんは勉強ができない」公式サイト
og:type website
og:description 「少年マガジンエッジ」にて好評連載中!カワハラ恋による妄想ラブコメディ『みだらな青ちゃんは勉強ができない』TVアニメ化決定!
og:url http://aochan-anime.com
og:image http://aochan-anime.com/images/fb_image.png
CSS: 計8 (内部1 / 外部7)
  1. http://aochan-anime.com/css/style.css
  2. http://aochan-anime.com/css/modal-video.min.css
  3. https://fonts.googleapis.com/earlyaccess/notosansjp.css
  4. https://fonts.googleapis.com/css?family=Noto+Sans+JP
  5. https://fonts.googleapis.com/css?family=Roboto+Condensed
  6. https://fonts.googleapis.com/css?family=Noto+Serif
  7. https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500&subset=japanese
JS: 計12 (内部1 / 外部11)
  1. https://www.google-analytics.com/analytics.js
  2. https://www.googletagmanager.com/gtag/js?id=UA-86622204-19
  3. https://platform.twitter.com/js/moment~timeline~tweet.6e5b62723488aee38af0c77681396a5b.js
  4. https://platform.twitter.com/js/timeline.4c6ab682148a0366f9efb1647a3f4799.js
  5. https://platform.twitter.com/widgets.js
  6. http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  7. http://aochan-anime.com/js/jquery.inview/jquery.inview.min.js
  8. http://aochan-anime.com/js/action.js
  9. http://aochan-anime.com/js/modal-video.js
  10. http://aochan-anime.com/js/modal.js
  11. http://aochan-anime.com/js/story.js

div.page-coverdisplay: flex;され、header.page-headerdiv.page-wrapperが横並びになっています。

.page-wrapper::beforeには切り離したノートの画像、.top-page-wrapperには散らばったノートの画像がbackgroundで表示されています。background-image便利そうですね。
そして.top-kv-image>imgにキービジュアルです。
複数の画像をうまく組み合わせているので、まるで一枚の画像のようです。

オーバーレイ表示を閉じるバツボタンは::before::afterで作っていました。

そして気になるのが.gnav-listheaderにある積まれた本のようなナビゲーションです。
この画像には非選択状態の積まれた本と選択状態の積まれた本が描かれていて、CSSスプライトを用いて表示されていました。
あっぱれです。

余談
こみっくがーるず公式サイトにも素晴らしいナビゲーションがあります。
mapを使って画像の特定の領域にリンクを貼っていて、ほんとすごいです。

アニメ「文豪ストレイドッグス」公式サイト

description: 文豪ストレイドッグス 「桜蘭高校ホスト部」「STAR DRIVER 輝きのタクト」の五十嵐卓哉×榎戸洋司が贈る待望のアニメ化! 原作:朝霧カフカ、漫画:春河35、監督:五十嵐卓哉、脚本:榎戸洋司、アニメーション制作:ボンズ
keywords: アニメ,, 文豪ストレイドッグス,, 朝霧カフカ,, 春河35,, 五十嵐卓哉,, 榎戸洋司,, ボンズ

OGP
property content
og:title アニメ「文豪ストレイドッグス」公式サイト
og:type tv_show
og:url http://bungo-stray-dogs.jp
og:image http://bungo-stray-dogs.jp/images/ogp.png
og:site_name アニメ「文豪ストレイドッグス」公式サイト
og:description 文豪ストレイドッグス 「桜蘭高校ホスト部」「STAR DRIVER 輝きのタクト」の五十嵐卓哉×榎戸洋司が贈る待望のアニメ化! 原作:朝霧カフカ、漫画:春河35、監督:五十嵐卓哉、脚本:榎戸洋司、アニメーション制作:ボンズ
CSS: 計8 (内部2 / 外部6)
  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
  2. http://bungo-stray-dogs.jp/dist/css/main0718.css
  3. http://bungo-stray-dogs.jp/dist/css/tv_overwrite.css
  4. http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700
  5. http://bungo-stray-dogs.jp/dist/js/libs/magnific-popup/magnific-popup.css
  6. http://bungo-stray-dogs.jp/dist/js/libs/swiper/css/swiper.css
JS: 計19 (内部5 / 外部14)
  1. http://platform.twitter.com/widgets.js
  2. http://www.google-analytics.com/analytics.js
  3. https://platform.twitter.com/js/moment~timeline~tweet.6e5b62723488aee38af0c77681396a5b.js
  4. https://platform.twitter.com/js/timeline.4c6ab682148a0366f9efb1647a3f4799.js
  5. http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
  6. http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js
  7. http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js
  8. http://bungo-stray-dogs.jp/dist/js/libs/swiper/js/swiper.min.js
  9. http://bungo-stray-dogs.jp/dist/js/libs/jquery.ua.min.js
  10. http://bungo-stray-dogs.jp/dist/js/libs/device.min.js
  11. http://bungo-stray-dogs.jp/dist/js/libs/jquery-peekaboo.js
  12. http://bungo-stray-dogs.jp/dist/js/libs/jquery.matchHeight.js
  13. http://bungo-stray-dogs.jp/dist/js/libs/magnific-popup/jquery.magnific-popup.min.js
  14. http://bungo-stray-dogs.jp/dist/js/main.min.js

STAFF&CASTのページがかっこよすぎてこわいです。
transformtransitionを使ってかっこいいことしてます。
こればっかりは説明のしようがないので見てください。
…というかtransformtransitionでこんなことできるんですか? 考えた人天才だと思う。

オーバーレイ表示を閉じるバツボタンは::before::afterで作っていました。

TVアニメ「キャロル&チューズデイ」公式サイト

description: 総監督:渡辺信一郎、アニメーション制作:ボンズ、キャラクター原案:窪之内英策、音楽制作:フライングドッグ 強力なスタッフ陣が挑む オリジナルTVアニメ「キャロル&チューズデイ」。全世界の音楽を愛する人に捧げる、2人の少女が起こした奇跡の物語。
Dedicated to music lovers around the world, this is a tale of a miracle brought about by two teenage girls, created by a top production team featuring Shinichiro Watanabe as supervising director, animation production by Studio Bones, Eisaku Kubonouchi as original character designer, and music production by FlyingDog.
keywords: キャロル&チューズデイ,渡辺信一郎

OGP
property content
og:title TVアニメ「キャロル&チューズデイ」公式サイト
og:type website
og:url http://caroleandtuesday.com
og:image http://caroleandtuesday.com/core_sys/images/others/ogp.jpg
og:site_name TVアニメ「キャロル&チューズデイ」公式サイト
og:description 総監督:渡辺信一郎、アニメーション制作:ボンズ、キャラクター原案:窪之内英策、音楽制作:フライングドッグ 強力なスタッフ陣が挑む オリジナルTVアニメ「キャロル&チューズデイ」。全世界の音楽を愛する人に捧げる、2人の少女が起こした奇跡の物語。
CSS: 計15 (内部2 / 外部13)
  1. https://fonts.googleapis.com/css?family=Rock+Salt|Noto+Sans+JP:400,700,900|Noto+Serif+JP:400,700,900&subset=japanese
  2. https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanjp_s.min.css
  3. https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanmp_s.min.css
  4. http://caroleandtuesday.com/core_sys/images/others/css/sanitize.css
  5. http://caroleandtuesday.com/core_sys/css/import/top/001/set.css?1547174029
  6. http://caroleandtuesday.com/core_sys/css/import/top/001/dez_pt.css?1513680262
  7. http://caroleandtuesday.com/core_sys/css/import/top/001/unit.css?1550655127
  8. http://caroleandtuesday.com/core_sys/css/fsc/fss.css
  9. http://caroleandtuesday.com/core_sys/css/fsc/fsm.css
  10. http://caroleandtuesday.com/core_sys/css/fsc/fsl.css
  11. http://caroleandtuesday.com/core_sys/images/others/css/coreblo_reset.css
  12. http://caroleandtuesday.com/core_sys/images/others/css/utility.css
  13. http://caroleandtuesday.com/core_sys/images/others/css/magnific-popup-edited.css
JS: 計16 (内部4 / 外部12)
  1. https://www.google-analytics.com/analytics.js
  2. https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl5ur_dk/www-widgetapi.js
  3. https://www.googletagmanager.com/gtag/js?id=UA-127388922-2
  4. http://caroleandtuesday.com/core_sys/js/common.js
  5. http://caroleandtuesday.com/core_sys/js/user.js
  6. https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js
  8. https://platform.twitter.com/js/moment~timeline~tweet.6e5b62723488aee38af0c77681396a5b.js
  9. https://platform.twitter.com/js/timeline.4c6ab682148a0366f9efb1647a3f4799.js
  10. https://platform.twitter.com/widgets.js
  11. https://www.youtube.com/iframe_api
  12. https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js

パララックスの一種と捉えてよいのでしょうか。これほど美しいものは始めてみました。きれいすぎて変な声出ました。

また、英語への切り替えボタンがあります。bodydata-langの値を変え、CSSからbody[data-lang="ja"] .jaのように判別していました。

ものすごく美しいのはw3mから見ても同じでした。
w3mというのはテキストブラウザで、基本的にテキストしか表示することができず、またCSSやJavaScriptは無視します。
最近のサイトはリッチなのでw3mからだとうまく閲覧できない場合がありますが、このサイトはHTMLもきれいに書かれているため、まったく問題なく閲覧できました。

技術力もあってセンスもあって、とても素晴らしいです!

オーバーレイ表示を閉じるバツボタンは::before::afterで作っていました。

TVアニメ『超可動ガール1/6』公式サイト

description: 「月刊アクション」にて2016年まで連載されていたÖYSTERによる超身長差ラブコメ『超可動ガール1/6』が2019年4月にTVアニメ化決定!
keywords: 月刊アクション,ÖYSTER,ノーナ,超可動,春人,フィギュア,ベルノア

OGP
property content
og:locale ja_JP
og:site_name TVアニメ『超可動ガール1/6』公式サイト
og:type website
og:url http://choukadou-anime.com/
og:title TVアニメ『超可動ガール1/6』公式サイト
og:image http://choukadou-anime.com/img/ogp.png
og:description 「月刊アクション」にて2016年まで連載されていたÖYSTERによる超身長差ラブコメ『超可動ガール1/6』が2019年4月にTVアニメ化決定!
CSS: 計6 (内部1 / 外部5)
  1. https://fonts.googleapis.com/css?family=Russo+One
  2. http://choukadou-anime.com/css/reset.css
  3. http://choukadou-anime.com/css/lity.css
  4. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css
  5. http://choukadou-anime.com/css/common.css?20190301
JS: 計11 (内部1 / 外部10)
  1. https://www.google-analytics.com/analytics.js
  2. https://www.googletagmanager.com/gtag/js?id=UA-86622204-22
  3. https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.js
  5. https://code.jquery.com/jquery-3.2.1.min.js
  6. https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.4/lazysizes.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.4/plugins/unveilhooks/ls.unveilhooks.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.js
  9. http://choukadou-anime.com/js/lity.js
  10. http://choukadou-anime.com/js/index.js

ユーザーの操作にありとあらゆるものがなめらかに反応して気持ちいいです。
:hover時ににゅるっと動いたり、マウスをのせた瞬間に動いたり、画面に表示された瞬間にスライドしてきたり…JavaScriptとCSSの連携がきれいです。

また、ほぼすべてのものがオーバーレイで表示されます。それでいて読み込みも早くて恐ろしいです。
これだけ大量の画像をよくもまぁこの一瞬で…。どう読み込んでいるんでしょうか。

オーバーレイ表示を閉じるバツボタンは画像でした。

TVアニメ「シンデレラガールズ劇場」 公式サイト

description: TVアニメ「シンデレラガールズ劇場」の公式サイトです。
keywords: アニメ,でれげき,シンデレラガールズ,シンデレラガールズ劇場,アイドルマスター,デレマス,アイマス,デレゲキ,デレ劇

OGP
property content
og:title TVアニメ「シンデレラガールズ劇場」 公式サイト
og:site_name TVアニメ「シンデレラガールズ劇場」 公式サイト
og:description TVアニメ「シンデレラガールズ劇場」の公式サイトです。
og:locale ja_JP
og:type website
og:url http://cingeki-anime.com/
og:image http://cingeki-anime.com/lib/images/ogp.png
CSS: 計4 (内部1 / 外部3)
  1. http://cingeki-anime.com/lib/css/slicknav.css
  2. http://cingeki-anime.com/lib/css/style.css
  3. http://cingeki-anime.com/lib/css/other.css
JS: 計12 (内部1 / 外部11)
  1. http://cingeki-anime.com/lib/js/jquery-1.10.2.min.js
  2. http://cingeki-anime.com/lib/js/smartRollover.js
  3. http://cingeki-anime.com/lib/js/smooth.pack.js
  4. http://cingeki-anime.com/lib/js/script.js
  5. http://code.jquery.com/jquery-1.10.1.min.js
  6. http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js
  7. http://code.jquery.com/ui/1.10.3/jquery-ui.min.js
  8. http://cingeki-anime.com/lib/js/jquery.slicknav.min.js
  9. https://platform.twitter.com/js/moment~timeline~tweet.6e5b62723488aee38af0c77681396a5b.js
  10. https://platform.twitter.com/js/timeline.4c6ab682148a0366f9efb1647a3f4799.js
  11. http://platform.twitter.com/widgets.js

トップページ読み込み時、タイトルロゴがアニメーションします。
キーフレームの名前は『korokoro』。確かにコロコロと動きました。

w3mでとても見やすいです。

TVアニメ「群青のマグメル」公式サイト

description: TVアニメ『群青のマグメル』の公式ホームページです。原作は「少年ジャンプ+」(集英社)にて好評連載中!!
keywords: 群青のマグメル,ジャンプ,河西健吾,M・A・O,山村響,森川智之,第年秒,バトル,因又,拾因,ゼロ,ジャンプ+,富樫義博,集英社

OGP
property content
og:title TVアニメ「群青のマグメル」公式サイト
og:type article
og:description TVアニメ『群青のマグメル』の公式ホームページです。原作は「少年ジャンプ+」(集英社)にて好評連載中!!
og:url http://gunjyo-magumeru.com/
og:image http://gunjyo-magumeru.com/images/sb_fbsum.jpg
og:locale ja_JP
CSS: 計10 (内部2 / 外部8)
  1. http://fonts.googleapis.com/css?family=Open+Sans
  2. https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Vollkorn:400,700|Days+One:400|Khand:700
  3. http://gunjyo-magumeru.com/css/style.css
  4. http://gunjyo-magumeru.com/css/slider-pro.css
  5. http://gunjyo-magumeru.com/css/menu.css
  6. http://gunjyo-magumeru.com/css/index.css
  7. http://gunjyo-magumeru.com/css/lightcase.css
  8. http://gunjyo-magumeru.com/css/animsition.css
JS: 計14 (内部3 / 外部11)
  1. https://www.google-analytics.com/analytics.js
  2. http://gunjyo-magumeru.com/js/jquery.min.js
  3. http://gunjyo-magumeru.com/js/jquery-migrate.min.js
  4. http://gunjyo-magumeru.com/js/jquery.easing.1.3.js
  5. http://gunjyo-magumeru.com/js/jquery.sliderPro.js
  6. http://gunjyo-magumeru.com/js/animsition.js
  7. http://gunjyo-magumeru.com/js/lightcase.js
  8. http://gunjyo-magumeru.com/js/common.js
  9. https://www.googletagmanager.com/gtag/js?id=UA-128523493-1
  10. http://gunjyo-magumeru.com/js/rainbow.js
  11. http://gunjyo-magumeru.com/js/index.js

ul.navliにマウスをホバーすると、.burn(炎)が出てきます。
いい味出してますね。

.once_news:hoverのとき背景色が変わるのですが、そのとき同色のbox-shadowも用いていることによりシャープな印象が柔らかくなります。後ろから照らされているようで面白いです。

TVアニメ「叛逆性ミリオンアーサー」公式サイト

description: TVアニメ『叛逆性ミリオンアーサー』公式サイト 10月11日(木)、10月18日(木)二週連続スペシャル番組放送決定! 10月25日(木)より第1話スタート!
keywords: ミリアサアニメ,叛逆性,叛逆性アニメ,アニメ叛逆性ミリオンアーサー,

OGP
property content
og:title TVアニメ「叛逆性ミリオンアーサー」公式サイト
og:type website
og:url http://hangyakusei-anime.com/
og:image http://hangyakusei-anime.com/core_sys/images/others/ogp2.jpg
og:site_name TVアニメ「叛逆性ミリオンアーサー」公式サイト
og:description 10月11日(木)、10月18日(木)二週連続スペシャル番組放送決定! 10月25日(木)より第1話スタート!
CSS: 計15 (内部3 / 外部12)
  1. https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto:400,700&subset=japanese
  2. https://cdn.jsdelivr.net/npm/[email protected]/dist/css/yakuhanjp_s.min.css
  3. http://hangyakusei-anime.com/core_sys/images/others/css/sanitize.css
  4. http://hangyakusei-anime.com/core_sys/images/others/css/magnific-popup-edited.css
  5. http://hangyakusei-anime.com/core_sys/css/import/top/001/set.css?1551682918
  6. http://hangyakusei-anime.com/core_sys/css/import/top/001/dez_pt.css?1531883061
  7. http://hangyakusei-anime.com/core_sys/css/import/top/001/unit.css?1551684428
  8. http://hangyakusei-anime.com/core_sys/css/fsc/fss.css
  9. http://hangyakusei-anime.com/core_sys/css/fsc/fsm.css
  10. http://hangyakusei-anime.com/core_sys/css/fsc/fsl.css
  11. http://hangyakusei-anime.com/core_sys/images/others/css/coreblo_reset.css
  12. http://hangyakusei-anime.com/core_sys/images/others/css/utility.css
JS: 計18 (内部4 / 外部14)
  1. https://www.google-analytics.com/analytics.js
  2. http://www.youtube.com/iframe_api
  3. https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl5ur_dk/www-widgetapi.js
  4. https://www.googletagmanager.com/gtag/js?id=UA-74788309-6
  5. http://hangyakusei-anime.com/core_sys/js/common.js
  6. http://hangyakusei-anime.com/core_sys/js/user.js
  7. https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js
  9. http://hangyakusei-anime.com/core_sys/images/others/js/mav.js
  10. https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
  11. https://platform.twitter.com/js/moment~timeline~tweet.6e5b62723488aee38af0c77681396a5b.js
  12. https://platform.twitter.com/js/timeline.4c6ab682148a0366f9efb1647a3f4799.js
  13. https://platform.twitter.com/widgets.js
  14. https://www.youtube.com/iframe_api

ページ読み込み時と移動前に、JavaScriptにより#wrapperopacityの値が変わりふわっと表示されるようになっています。
ときどき見るこれってこうなってたんですね。

オーバーレイ表示を閉じるバツボタンは::before::afterで作っていました。

TVアニメ「ひとりぼっちの○○生活」公式サイト

description: 「コミック電撃だいおうじ」にて大好評連載中の『ひとりぼっちの○○生活』がアニメ化!ぼっち少女による“脱”ぼっちコメディー。2019年4月、TVアニメ放送開始!
keywords: 電撃だいおうじ,AMW,電撃コミックNEXT,ひとり,脱ぼっち,コミュ障,カツヲ,アニメ,4コマ,コメディ

OGP
property content
CSS: 計8 (内部2 / 外部6)
  1. http://hitoribocchi.jp/lib/bootstrap.min.css
  2. http://hitoribocchi.jp/lib/animate.css
  3. http://hitoribocchi.jp/lib/colorbox/colorbox.css
  4. https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c
  5. http://hitoribocchi.jp/css/common.css
  6. http://hitoribocchi.jp/css/style.css?upd=0227
JS: 計18 (内部3 / 外部15)
  1. https://www.google-analytics.com/analytics.js
  2. https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
  4. http://hitoribocchi.jp/lib/bootstrap.min.js
  5. http://hitoribocchi.jp/lib/colorbox/jquery.colorbox-min.js
  6. http://hitoribocchi.jp/lib/createjs.min.js
  7. http://hitoribocchi.jp/lib/particlejs.min.js
  8. http://hitoribocchi.jp/js/common.js?upd=0227
  9. http://hitoribocchi.jp/js/top.js?upd=0227
  10. https://www.googletagmanager.com/gtag/js?id=UA-124577669-1
  11. https://platform.twitter.com/js/moment~timeline~tweet.6e5b62723488aee38af0c77681396a5b.js
  12. https://platform.twitter.com/js/timeline.4c6ab682148a0366f9efb1647a3f4799.js
  13. https://platform.twitter.com/widgets.js
  14. http://hitoribocchi.jp/js/particle_bg.js
  15. http://hitoribocchi.jp/js/top-kv.js?v=1_1a

canvas!!??!?
canvasdrawImage()で画像を描画しキービジュアルとしているようです。
それでいてレスポンシブデザイン。JavaScriptでcanvasheightwidthが書き換えられています。
windowresizeイベントでしょうか? すごいですねこれは…。

オーバーレイ表示を閉じるバツボタンは画像でした。

おわりに

目に見えて文章量が減ってきたので一旦ここまで。
とりあえず10作品見れました。

ここまでの感想としては、

  1. プロすごい。クオリティやばい
  2. jQueryは未だ健在
  3. background-image便利
  4. 疑似要素便利
  5. transition便利
  6. opacity便利
  7. 全サイトを見るこの試みは無謀だった

CSSもJavaScriptもバリバリ使うようなモダンなサイトで、思っていたよりも時間がかかってしまいました。

あと42作品。誰か代わりに…でも自分で見たいと勉強にならない…。いくらなんでも疲れた…。
…アニメ紹介動画とか作る人、すごいですね。いつもありがとう!!!

#1としましたが続くかどうかは未定です。

関連記事

この記事へのコメント

まだコメントはありません
2
@okayuの大して技術的ではないブログ
2
このエントリーをはてなブックマークに追加