この記事は actindi Advent Calendar 2018 の23日目の記事です。

皆様ごきげんようです。
「子どもとお出かけ情報サイトいこーよ」のデザイナーとしてサイトの改善や制作に携わっている、メガネです。

2018/12/1でいこーよは10周年を迎えました。
自分は携わることになってから5年なので、その倍の期間サービスが継続していたと思うと、webメディアとしてはかなり息の長いサービスに入るのではないでしょうか。
（ちなみにいこーよを運営している弊社、アクトインディは15周年です。プリキュアと一緒ですね！！＼(^o^)／ワーオ）

いこーよはこの10年間基本はブレることなく親子のお出かけを応援してきました。
11/1から10周年の特集ページを公開し、子ども川柳、10年後の子どもへの手紙、笑顔写真などの募集を開始、そして10周年当日の12/1には、こども利用料無料チケット企画やサイト上でのヘッダー・フッタージャックなどのイベントも開催しました。
( ･ﾉｪ･)ｺｼｮｯ< (ここだけの話ですが、企画が立ち上がったのが9月ももう終わりにさしかかろうとするころだったので、12/1を迎えるまでの間制作に携わるメンバーは結構満身創痍「もぅ...ゴールしても、いいよね...?」という雰囲気もありました。今はいい思い出です。)

自分はこども利用料無料チケットのページや、ヘッダー・フッタージャックのデザインや制作を担当しましたが、
今回はその中のヘッダー・フッタージャックの話を書きたいと思います。

ヘッダージャックについての小話

いこーよ10周年企画の1つとして開催した「笑顔写真」では、なんと1600枚を超える写真の投稿をいただきました。
1504（いこーよ）枚超えるといいね、という話は内部的にありましたが、こんなに投稿をしてもらえるとは正直思っておらず、皆様の愛にただただ感謝です。

ヘッダージャックでは
「いこーよのこれから、子どもたちのこれからと未来」をデザインをコンセプトにしようと決めました。
笑顔写真の募集ページには、投稿写真がいこーよの顔に！というキャッチもあったのですがまさにそのとおり、投稿していただいた写真をいこーよの顔にしちゃったわけです。

※アニメーションを終了した現在もバナーとしてトップページに表示されていますのでしばらくは見ることができます。
こちらからどうぞ！

できるだけたくさんの笑顔を見せたかったので、リロードごとにランダムに写真が数枚出るような仕組みをエンジニアさんに作ってもらい、
それをGoogleWebDesigner（以下GWD）で作ったアニメーションで動かしました。
最終的には1600枚もの投稿をいただきましたが、12/1時点ではまだそこまでは届いておらず...
他の企画も含め、まだまだ募集中の状態でしたので、アニメーション後の切り替えで募集バナーを表示し、そこを微力ながらアピールをさせていただきました。＼(^o^)／あぴーる

アニメーションについての小話

過去にもヘッダージャックでアニメーションを使用しており、その時の担当者がそれぞれ長いもの、凝った動きのもの、高さのあるものなど制作してきました。

今回はその過去の知見を活かし、アニメーションをシンプルに、秒数は短めに！という意識をして制作をしていましたが、
レビューしたメンバーからの「くるくるっとしたら印象的だよね」という一言に、「短くシンプルにしないと4G回線でのアニメーションは厳しい」と言いつつも、わかりつつも、開発環境で試して、アレ？いけるかも…
なんてことを思ってしまい、それを採用することにしたのでした。

するとどうでしょう！！！

際にテスト環境にアップしたものを実機でみたときのひどさったら…(TдT)
動きはカクカク、笑顔写真が読み込まれないうちにアニメーションが進んでしまい、笑顔がみれぬままバナーに切り替わるという…悲劇...

特にMVMOな私の端末と大手キャリアD社な同僚氏端末を、せーのでリロードしたときの読み込み速度の差はかなりのものでびっくりしました・・。
小さい方、遅いほうに合わせるというのがwebでは鉄則ですね。ということで直していくことになりました。

直しはじめたのは公開前日の午前中。(ひゃーオラヒヤヒヤすっぞ）
まずチームメイトが画像サイズでっかいままだね、小さくしてみては？と提案してくれたのでそれを試しました。
少し読み込みに改善が！
それでも私のヘボ回線ではアニメーションが進む前に画像が読み込まれません。

そこで、もうやっぱりアニメーションを元のシンプルなものに変更しよう、ということでGWDで作り変え、それをコードに反映していきました。
（その前の状態までコーディングを担当してくれたのは、チームメンバーのアフロおじさんです、ややこしい仕様にも笑顔で(?)対応してくれました。ありがたいナー。）
そして出来上がったのが上部に貼ったアニメーション。
自分の端末でもなんとか読み込まれ、キャリアDの端末ではするすると。
ε-(´∀｀*)ﾎｯ

以前速度改善をするときに学んだことですが、webサイトが表示される順番のうちCSS画像は最後の方に読み込まれているので、その2つを組み合わせたCSSキーフレームアニメーション、（かつ画像をランダムに取得してくるのでキャッシュが効かない等の条件を兼ね揃えたもの）では軽やかに表示させることが難しいものであったことがわかりました。
今後の糧としていきたいと思います。(´・ω・｀)

フッタージャックについての小話

ヘッダーのほうでは笑顔写真をメインに、「未来」を感じるデザインを作りましたが、
フッターでは逆に「過去」の積み重ねに焦点を置くコンセプトでデザインを作ることにしました。

私も5歳と3歳の子をもつママーンですので、子連れのお出かけは結構しています。過去のおでかけのなかで特に印象として強くもっているのが、「持ち物」の変遷です。
子どもが0歳のころは持ち物がかなり多く、年齢があがると共に減っていったり内容が変わったりします。
荷物は減っていきますが、子どもが大きくなるにつれておでかけの内容も濃くなっていく印象もあります。そういう比例・反比例を経て親子の絆ができていく、それがいこーよの中を行き交っていて、積み重なって歴史になっているのだなあ、と感じていました。

そこから着想をえて幼少期のおでかけ荷物をいくつかピックアップし、ガーランド風に彩るデザインにしました。
色を使わずにしっとりとノスタルジックなイメージでみせることで、過去・積み上げてきたものをそれぞれの色で見てほしいという想いをこめています。
（おっと真面目すぎた(；´∀｀)）

イラストレーターで描いたアイコンにクレヨン風のブラシで、親子のあたたかみを表現できたかな、と思います。
いくつか描いたなかからモチーフとして形がわかりやすいものを選び、ガーランド風に並べていきました。
時の流れを意識して左から右に年齢が高くなっていくよう配置しています。

おわりに

普段はそれぞれが別のプロジェクトで動いていることが多い弊デザイナーチームでしたが、
10周年の企画を経て、チームで一つのものを作り上げていく楽しさを知りました。いいなあ（小並感

また、改めてこんなに沢山の方々がいこーよを普段から使ってくださっているのだと実感し、GoogleAnalyticsで数字を見ているのとは違ってリアルに使ってくれている人の存在を感じることができました。
これを機にもっとユーザーのリアルの声に耳を傾けていきたいです。

いこーよ10歳おめでとう！！

チームメンバーも10周年の話を書いているのでこちらもぜひ❤
いこーよ10周年ロゴができるまでの過程をまとめてみた 〜試行錯誤の日々〜
いいデザインを作るために いこーよ10周年で学んだこと