歴代の「プリキュア」の「重さ」を調べる

歴代の「プリキュア」の「重さ」を調べる 1

キュアップ・ラパパ!(挨拶)

良い子と良い大友ならば、毎週プリキュアを視聴しているとは思います。そして、さらに訓練されたお友だちは、毎週プリキュアのWebサイトもチェックしているのではないでしょうか?

最近のプリキュアの公式サイトって、手が込んでいますよね。キャラクターのイラストは大きいですし、キラキラもしていますし、動きもあったりと、楽しませる工夫がちりばめられています。

歴代の「プリキュア」の「重さ」を調べる 2

しかし、それらプリキュアのWebサイトはいったいどのくらいのファイルサイズなのでしょうか?

我が家は光回線なのですんなりと読み込めますが、人によっては読み込むのに時間がかかり、ページが重いと感じることも……?と、若干の疑問を抱いてしまったので、歴代のプリキュアWebサイトのデザイン、そしてトップページの読み込みファイルサイズを計測してみました。

プリキュアのWebサイトは朝日放送と東映アニメーションの2つがありますが、今回は東映アニメーションサイトでの計測結果となります。それではプリキュアの重さチェック、行ってみましょー!

歴代プリキュアサイトのデザインと重さの数値化

自分が感じた勝手なデザインの感想と、勝手な評価としてキラキラ度。そして、重さの比較は「Pingdom Website Speed Test」を使って数値化してみます。まずは始まりのプリキュア、偉大なる初代「ふたりはプリキュア」からです。

■ふたりはプリキュア(2004年)

歴代の「プリキュア」の「重さ」を調べる 3

みなぎる「ホームページ」感、推奨解像度は800x600あたりです。デザインとしてはわかりやすさ・情報への導入線を前面に押し出しています。新番組ということもありますからね。なお、キラキラしている場所はありません

放送開始は今から12年前、たしか当時はADSL&Flash全盛期。当時24歳だった僕は、いわゆるセカンドターゲット層としてまさにドハマリしていました。

歴代の「プリキュア」の「重さ」を調べる 4

ページサイズは281.4KB。軽い。めちゃくちゃ軽い。スマホの200kbps規制下だとしても高速に表示できるレベルです。調べてみたところ立ち絵は3ファイルに分割されており、それぞれGIF画像で27KB程度でした。画素数を抑えて超軽量化されています。

■ふたりはプリキュア MaxHeart(2005年)

歴代の「プリキュア」の「重さ」を調べる 5

シャイニールミナスが加わった、ふたりはプリキュアの続編。デザイン的にも作りこみが増して、アイコンなどは若干デザインされ始めていますが、やはり古さも感じます。まだホームページ。あと、少しだけキラキラしはじめましたね。6キラくらい。

歴代の「プリキュア」の「重さ」を調べる 6

ページサイズは344.1KBでした。初代から比べるとサイズは増えていますが、それでもかなり高速に読み込めそうです。当時のインターネット通信環境では、ADSLでも1MB付近しか出なかった地域も多いので、ページサイズは軽いに越したことはありません。

■ふたりはプリキュア Splash Star(2006年)

歴代の「プリキュア」の「重さ」を調べる 7

世間的にはあまり人気は高くありませんが、そこまで嫌いになれないSplash Star。サイトデザインが縦に伸びています。内部ページはフレームが活用されていて、まだ当時のホームページのセオリーを守ったオーソドックスなデザインです。キラキラは若干減って2キラくらい。

歴代の「プリキュア」の「重さ」を調べる 8

ファイルサイズは380KB。MaxHeartから若干増えていますが、画像1点程度の差でしょうか。トップページの情報量や大きな画像が増えているのにこれだけの差で収めているのは偉い。

■YES!プリキュア5(2007年)

歴代の「プリキュア」の「重さ」を調べる 9

「ふたりは~」ではなく、新しいプリキュアとして始まったプリキュア5。セーラー戦士と戦隊物的なイメージを加えるとともに、それぞれのキャラクターイメージをわかりやすくした作品です。ページデザイン的にはSplash Starと同様ですが、さらに縦に伸び、アイコン周りもゴージャスな「飾り」が加わり、キラキラしはじめました。20キラくらいまでキラ度が急増しています。

歴代の「プリキュア」の「重さ」を調べる 10

ファイルサイズは507.7KB。情報量の増加とともにファイルサイズも右肩上がりです。キャラ絵も大きくなりましたし、ページデザインも凝ってきているので致し方ないでしょう。しかし、このあたりからADSLも48Mbps程度の高速回線が増えていますし、体感上の読み込み完了速度は変わっていないのかもしれません。

■YES!プリキュア5 GOGO!(2008年)

歴代の「プリキュア」の「重さ」を調べる 11

キラキラが!マウスカーソルを追尾するキラキラが! 個人ホームページ全盛期の文化がここに来てなぜか復活してきました! 読み込み時にもキラキラしたエフェクトがありますし、これはもう「ようこそ!◯◯◯のホームページへ!」という文言や「あなたは◯◯人目のお客様です」とかカウンターがほしくなりますね! あとキリ番踏んだ人は掲示板への書き込みは義務です(昔の掟)。

マウスカーソルがあまりにも衝撃的だったので、キラキラ度は50キラくらいあげていいと思います。

歴代の「プリキュア」の「重さ」を調べる 12

「ナローバンドは朽ち果てろ」と言わんばかりの1.3MB。キラキラを含め、トップ画像周りはFLASHを利用しています。しかし、いよいよ1MB超えしてきました。ADSLならば問題ありませんが、ISDNなどでは正直キツイレベルかも。

■フレッシュプリキュア!(2009年)

歴代の「プリキュア」の「重さ」を調べる 13

フレッシュフレッシュフレーーッシュ!

個人的にすごく好きな作品なので、つい盛り上がってしまいましたが、フレッシュです。このあたりからトップ絵に混じるイメージでアイコンが配置されはじめました。全体的なキラ度はGOGO!より下がっていますが、背景のキラキラが瞬く演出が加えられており、30キラくらいはあるのではないでしょうか?

歴代の「プリキュア」の「重さ」を調べる 14

ページサイズは1.5MB。読み込み時にFLASHアニメーションでキャラクターが飛び出てくるような演出が加えられています。なお、トップ絵周りのフラッシュだけで1MBを占めています。グッバイナローバンド

■ハートキャッチプリキュア!(2010年)

歴代の「プリキュア」の「重さ」を調べる 15

ページがついに横に伸びました。1024×768のディスプレイサイズだとフルスクリーン表示でギリギリ。横1200や1600などのサイズが推奨されはじめました。この頃は、PCモニターもフルHDサイズが流行りはじめていますしね。

キラ度的には、もうすっごいキラキラです。キャラクターがシュンシュンシュン!とカットインしてくる演出とともに、背景に飛び交うキラキラの嵐。トップページの背景において、7割をキラキラが占めています。これには80キラくらい与えたい。

歴代の「プリキュア」の「重さ」を調べる 16

ページサイズは2.3MB。これだけアニメーションがあり、キラキラしていたらさもありなんという感じです。なおFLASHを利用しているので、iPhoneなど、FLASH非対応の端末から見ると……。

歴代の「プリキュア」の「重さ」を調べる 17

満天の星空が見られます。この当時はまだスマホ用とPC用とでページを分ける文化がありませんでした。それもそのはず、スマホというものが世に出始めたのがちょうどこの頃です(iPhone 3GSが2009年6月発売)。

■スイートプリキュア♪(2011年)

歴代の「プリキュア」の「重さ」を調べる 18

放送当時はどうしても序盤のイザコザ劇が好きになれなかったスイートプリキュア。個人的にはあまり得意ではないプリキュアなのですが、編集部の松井さんいわく「ギスギスした関係から、絆が深まっていく過程の描き方がすごく好き」とのこと。ああ、なるほど……。

ページはより一層デザイン要素が強まりました。このあたりからは「ホームページ」ではなく「Webサイト」でしょう。キャラクターがフェードインしてくる演出や、音符の形をしたアイコンが五線譜に並ぶ演出。アニメの延長として動きのあるギミックからWebサイトがスタートするデザインがすごく面白いです。

比例してキラキラもびっくりするくらい増えています。アイコンも背景もキャラクターも、キラキラしっぱなしなので、いよいよ大台100キラを与えても良さそうです。

歴代の「プリキュア」の「重さ」を調べる 19

ページサイズは2.8MB。最近の光回線では一瞬すぎて確認するのが難しいかもしれませんが、アクセス時には読み込み度を示す「%」が表示されます。ページサイズが重いことは重々承知で、読み込みに時間がかかることが前提とされていながらも、このキラキラデザインを通したかったってことなんでしょう。いいと思います!

■スマイルプリキュア!(2012年)

歴代の「プリキュア」の「重さ」を調べる 20

ほんと好き。全員好き。全話好き。

やはりFLASHで読み込み時にはキャラクターが次々に現れる演出。プリキュアのサイトとは?というプリキュアサイトとしてのフォーマットがすでに確立されていて、それをなぞった作りになっています。

全体的にキラキラしていますが、キラ度としてはスイートよりは若干控えめな90キラくらい。ここにきて若干キラキラの飽和を感じるようになりました。これ以上キラキラさせることもできるのでしょうが、キラキラしすぎると逆に見づらくなりますしね。

歴代の「プリキュア」の「重さ」を調べる 21

ページサイズは2.3MB。なんとスイートよりも軽量化されています。

■ドキドキ!プリキュア(2013年)

歴代の「プリキュア」の「重さ」を調べる 22

「プリキュア!ラブリンク!」の掛け声とともに、5種の変身アイテムが登場。そして5人のプリキュアが現れる!という、変身演出で始まるプリキュアのWebサイト。これは小さなお友だちは盛り上がるに違いありません。

スマイル、スイートに比べるとデザインは若干スッキリとした印象。キラキラもありますが、過去2作に比べるとかなり抑えられており、キャラクターにキラキラが被るようなことはなくなりました。80キラくらいまで下がっている印象です。

歴代の「プリキュア」の「重さ」を調べる 23

変身演出を加えているため、ページサイズはかなり重め。3.2MBにもなりました。凝った演出を行う上では致し方ないところです。しかし、実はここからFLASHではなくJavascriptを使ったPNGによるアニメーションに切り替わっています。いよいよ、スマホでの閲覧を意識しはじめたんですね。

■ハピネスチャージプリキュア!(2014年)

歴代の「プリキュア」の「重さ」を調べる 24

記念すべきプリキュア10周年のハピチャ。デザイン的にはこれまでのプリキュアフォーマットを踏襲した形となりますが、キャラクターが大きく描かれるようになっています。キラキラはこちらも控えめで80程度。大きなキラキラこそあれど、あくまでも背景のみにとどまっています。やはりキラキラが多ければ良いってもんじゃないってことですね。

歴代の「プリキュア」の「重さ」を調べる 25

ページサイズは4MB。いよいよ短めのMP3くらいのサイズになってきました。しかし、世間的にもインターネットは光回線が主流になってきていますし、読み込みにストレスは感じないのではないでしょうか。

■GO!プリンセスプリキュア(2015年)

歴代の「プリキュア」の「重さ」を調べる 26

ごきげんよう。いまだにこの挨拶が抜けません。デザインはこれまでのプリキュアフォーマットですが、アイコンが上部に移動して若干のアレンジが加わっています。プリンセスがテーマなだけあって、アイコン飾りなどはゴージャスに。キラキラも多めですが主に背景で、自己主張し過ぎない80キラくらいに収まっています。

歴代の「プリキュア」の「重さ」を調べる 27

ページサイズは4MB。さすがにこのあたりが1ページあたりの上限でしょう。

■魔法つかいプリキュア!(2016年)

歴代の「プリキュア」の「重さ」を調べる 28

やっと現行プリキュアまで追いつきました。背景、キャラクター、ロゴが別々にフェードインしてくる演出ですが、こちらもFLASHではなくJavascriptです。また、アイコンはこちらも上部に集中していますね。発注先がGO!プリと同じなのかも?

ページ全体としては背景にキラキラがちりばめられつつ、キャラクター(フォーム)がキラキラと光を帯びています。また、キーアイテムであるリンクルストーンのダイアの輝きもあるため、キラキラ度は高めです。それでもキャラクターに被るほどのキラキラではないので、85程度が妥当であろうと思います。

歴代の「プリキュア」の「重さ」を調べる 29

ページサイズはなんと5.4MB。4MBが上限だと言ったな。あれは嘘だ。

プリキュアのサイトからインターネットのトレンドが見えた

さて、長々と比較してみました。数値的に見れば、初代「ふたりはプリキュア」から比べて現行の「魔法つかいプリキュア!」はページサイズが約19倍になっています。

歴代の「プリキュア」の「重さ」を調べる 30

具体的に比較しますと、まほプリのページ上部の飾りイラスト(305KB)は、初代プリキュアのホームページ全体(281.4KB)よりもファイルサイズが大きいのです。しかし、魔法つかいプリキュアのページが重いか?といったらそんなことはなく、現在の標準的な光回線であれば問題なくスムーズに読み込みが完了するのではないでしょうか。スマホのLTEでも今は20Mbpsくらい出ますし、読み込みにストレスを感じることは少ないはずです。

歴代の「プリキュア」の「重さ」を調べる 31

全体を見てみましょう。当時のインターネット環境を考えると、ちょっとキツイかも?と感じたのが、ハートキャッチプリキュア。

2010年当時はBフレッツなどの光回線が増えてきていて、インターネットの興味のある家庭では高速回線を利用していました。ページサイズは2.3MBなので、光回線ならば水をすくうかのように簡単に読み込めますが、まだADSLだった家庭では、読み込みに若干のストレスを感じたかもしれません。

演出面で驚いたのはGOGO!でマウスカーソルの追尾、フレッシュでのキャラクターがフェードインしてくる効果です。このあたりからWebページは情報を発信するだけの場ではなく、アクセスしてコンテンツの「楽しさ」を伝える場でもあるといった存在意義の変化が見受けられます。

2013年、ドキドキプリキュアでFLASHからJavascriptへと動き、演出の手段が変わっていたのも面白いポイント。文中にも書きましたが、やはりスマホへの対応という点が大きいはずです。スマホ用サイトを作るよりも、ページそのものをスマホへ対応させようというアプローチを選択しています。

このように時代の変化とともに、プリキュアのページに求められるものが変わり、同時にページサイズも増えていきました。前述のとおり、ハートキャッチは当時のインターネット事情からしたら若干重いかもしれません。しかし、これだけの画像をちりばめて、動かして、なおかつこのサイズに収める。その裏には、きっとすごい努力が裏にあるのでしょう。そのおかげで、アクセスした時に楽しさを感じる素晴らしいプリキュアサイトになっているのです。

このまま右肩上がりで、ゆくゆくは1ページあたり10MB近く……になるのは歓迎できませんが、子どもたちがページを開いた時に「わぁぁ!」と感じるような楽しい演出はぜひ続けてほしいなぁ……と思います。

歴代の「プリキュア」の「重さ」を調べる 32

オマケのキラキラ度比較がこちら。スイートを頂点として、最近は落ち着いている傾向です。

歴代の「プリキュア」の「重さ」を調べる 33

スイート。お前はキラリすぎだ。

©ABC・東映アニメーション

source: ふたりはプリキュア, ふたりはプリキュア MaxHeart, ふたりはプリキュア Splash Star, YES!プリキュア5, YES!プリキュア5 GOGO!, フレッシュプリキュア!, ハートキャッチプリキュア!, スイートプリキュア♪, スマイルプリキュア!, ドキドキ!プリキュア, ハピネスチャージプリキュア!, GO!プリンセスプリキュア, 魔法つかいプリキュア, Pingdom Website Speed Test

キュアコグレ