システムエンジニア能力診断の制作裏話！ デザイナー、エンジニアがこだわり抜いた作品

こんにちは。広報担当の横尾です。

2016年 3月15日にリニューアルしたシステムエンジニア能力診断。
おかげさまで多くの方にご利用いただき、楽しんでいただけているかと思います。

リニューアル前のシステムエンジニア能力診断は、Excelで作成したというテストっぽいテストでした。
ですが、今回のリニューアルで「ともに冒険する仲間を」というテーマをもった素敵な診断サイトになりました。
ともに冒険する仲間を | AMG Solution システムエンジニア能力診断

想像以上の仕上がりにかなりワクワクさせてもらったのですが、今回素晴らしいときめきをくださった、デザイナーやエンジニアのみなさまにお話を伺わせていただきました！
システムエンジニア能力診断のかわいいキャラクターや、ユニークなアニメーションの制作裏話をご紹介します。

人物紹介

小林 陽一：
フロントエンドを担当。
html､css、JavaScriptを使用して、アニメーションを作成。
株式会社つみき

野田 真穂：
デザインを担当。
全体のデザインと、アニメーションの動きを制作。
株式会社ユニエル

小峯 正嗣：
イラストを担当。
キャラクターと背景を制作。
株式会社ユニエル

溜水 雅彦：
ブランディングとディレクションを担当。
最初の構成を制作し、スケジューリングや各所との連携を行う。
株式会社ユニエル

野田 一輝：
プロジェクトのアートディレクションを担当。
株式会社ユニエル

青柳 雄飛：
リニューアルの依頼主。
コンセプトを制作。AMGとしては、バックエンドを担当。
株式会社AMG Solution

正直ないなーと感じた昔のシステムエンジニア能力診断

 
－もっとたくさんの人に受けてもらえるサイトにしたいと、リニューアルが進められていきましたが、リニューアル前のシステムエンジニア能力診断を見たときの感想を教えてください

溜水：
正直な感想は、ないなー。って感じですかね……。
内容が固いので、ちょっとチャレンジしたくないなーって（笑）
職種的なこともあるんですけど、名前が「システムエンジニア能力診断」だったので、僕はその能力がないなって。

横尾：
私の場合、採用の1次試験だったので敷居が高かったですね。
あー、テストだーって（笑）

溜水：
カンニングはしたんですか？

横尾：
カンニングした……かなあ……（笑）
カンニングする時間が足りなかったって感じですね。

他に選択肢はないとまでいわせる安心感

－リニューアルするにあたって、デザインをUNIELに依頼しようと思った理由を教えてください

青柳：
他に選択肢はなかったです。

以前は個人のデザイナーさんに依頼していたんですけど、ずっと失敗していた感じもあって、デザイナーさんを3～4年探していたんですよ。
コーポレートサイトのリニューアルの際に、野田さんと知りあえて、そこからはもう野田さんでいきたい！ って気持ちが強くなりましたね。

野田：
ありがとうございます！（笑）

青柳：
だからもう他の選択肢は考えていなかったです。
デザイン関わるものは、すべて野田さんの手を入れてもらいたいって思いました。

日頃の行動からにじみ出る技術力の高さ

－アニメーションをつみきに依頼しようと思った理由を教えてください

野田：
小林さんとは、家が近くて飲んでたんですよ。
それで、たまさん（溜水）に、小林さんと一緒に仕事がしたいって、ずっと言ってたんです。
今回が良い機会だったので、小林さんにお願いしようって話になりました。

横尾：
アニメーションっていうと、仙人のワープも作られたんですよね？
わたし、あれが好きすぎて……（笑）

小林：
そうですね。というより、すべて担当しましたね。

つみきではこういったインタラクティブな実績がなかったので、こういったお話をどうしていただけたのかなって思う部分はありましたね。

溜水：
小林さんとはFacebookでつながっているんです。
小林さんはWebの技術に関わるデモ動画を投稿していることが多いんですけど、素人目からみても技術レベルの高いものが多いんです。
そういうのを見て、技術的に小林さんなら安心だって思いましたね。

コンセプトに負けないものをつくりたい

 
－こだわりや思い入れのある部分を教えてください

野田（真）：
全部にこだわっているんですけど、最初のTOPページが顔になるところなので、こだわりたいなと思っていて、すごい時間をかけました。
動きとかもすごく細かく考えて、小林さんにお願いしていたんですけど、想像以上のものが出来上がってすごくテンションが上がりました！

コンセプトが冒険ってことだったので、コンセプトに負けないものを作らなきゃってことが頭にあって、作りだしたら止まらなくなりました（笑）
結局すごく動きのあるサイトになってしまって、小林さんにはたくさんご迷惑をおかけしたんですけど……。

青柳：
作っている最中は、楽しいんですか？

野田（真）：
イメージが固まるまでは、もんもんとしていてすごく苦しかったですね。
ロゴも全然決まらなくて、最初はまったく違うテイストでやってたんですけど、これじゃない、どうしようって思ってて。
でも走り出したらスムーズにいくようになって、動きが出るようになった楽しい！ ってなって、どんどん乗っていきました。

同業者にこそ感じて欲しいこだわり

小峯：
一番最初に取り組んだのが、雲だったんですよね。
だから雲に一番思い入れがある気がします。

小林：
こんなにいっぱいあるのに、雲なんですね（笑）

小峯：
キャラクターでいうと、スピードスターが一番難しかったですね。
言葉からあんまり連想ができなくて。
みなさんと相談しながら作っていきました。

溜水：
こだわりっていうと、イラストをパッととみて分かりやすくってところですよね。

小峯：
そこはすごく意識していましたね。

小林：
アニメーションのこだわりは、鳥と雲ですね。
鳥はある一定の速度まで減速すると、方向を変えるんです。
そのあたりは、一般的にjQueryやCSSのkeyframeで実装されているようなアニメーションの方法では、できないんですよね。

例えば、雲も上下の振動で、影が小さくなったり大きくなったりするんですけど、三角関数を利用しているんですよ。
鳥は加速度と空気抵抗の２つの力を足しているだけなんですけど、以前同じような方法をフラッシャーの方から教えていただいて、個人の勉強のときに試していたので、今回流用してやってみようかなと思いました。

そういった細かいアニメーションのところを同業の方に見てもらえると嬉しいですね。

想像以上のものができあがる嬉しさ

－リニューアルされたシステムエンジニア能力診断を見た時の感想を教えて下さい。

青柳：
1回目のデザイン見せていただいたときに、頼んでよかったなって思いました。
私がいつもお願いするパターンで、具体的にデザインをこうしてほしいと伝えたくないんですよ。
なるべく何も言わないでこういうことをしたいんだってことを伝えて、それを考えて出してくださるのがうれしいので。

だから「今回はこういうのが来たんだ！」っていう驚きがありました。
特に最初に見たキャラクター案とまったく違うのが出てきたので（笑）

バックエンド側を担当したエンジニアも、今までとまったく違ったので苦労はあったみたいですね。

小林：
まさかこんなにJavaScriptが動くとはって（笑）
僕も思ってなかったです(笑）

公開されたものを見て、何も説明しなかったのに、お渡ししたフロントエンドのみのソースがバックエンドにきちんとつなぎこみされてあって、動いてリリースされてるなって感動がありました。

このメンバーでできた面白さ

小林：
フロント、デザイン、バックエンドまで、一通りのメンバーがそろっているわけですからね。
全員いるってプロジェクトはなかなかめずらしいと思うので。
だいたいそういうプロジェクトって代理店の方が、間に入ったりしてしまいますけど、直で提案できたり色んなことが実現もしやすいですよね。

青柳：
何やろうかなって考えたときに、また3社でやれたら面白いですね。

まとめ

いかがだったでしょうか？

関わってくださった方々のこだわりの数々に、途中からずっと感動しかしてませんでした。
冒険というコンセプトから世界を思いっきりひろげてくださり、提案されたデザインに毎回心をつかまれていたのを思い出しました。
今回、全力でリニューアルに臨んでいただき、インタビューにもご協力くださり、ありがとうございました！

みなさんも、「ともに冒険する仲間を」というコンセプトから作られた世界観と、ひとつひとつの動きにまで意味をもたせたアニメーションにぜひ注目してみてください。