クリエイターの頑張りを視覚化してみた

こんにちは！ウエディングドレス選びがもっと楽しくなるクチコミサイト「Wedding Park DRESS」のデザイナーをしています、かおりん（@PANbooooo）と、新卒1年目エンジニアのなりりんです（過去に書いた記事はこちら）！

先日行われた社内ハッカソンイベント「WP HACK DAY」にて、私たちのチームは、「クリエイターの頑張りを視覚化するクリエイティブ」を作成しました。今回はそのクリエイティブを作る過程での学び等をご紹介したいと思います。

WP HACK DAYとは？

当社が掲げている「21世紀を代表するブライダル会社を創る」というビジョンと、「技術とデザインのウエディングパークを創る」というロードマップを実現してくために、「クリエイターの一体感作り」と「技術挑戦の機会作り」を目的として開催している社内イベントとなります。

WP HACK DAYについての詳しい内容についてはこちらのブログを参照ください。

今回は「ビジョン実現につながるもの」をテーマに、触れたことのない技術を持ち寄りながら、限られた時間の中でクリエイティブを作成しました。

課題の洗い出しと解決方法について

まずはビジョンをもとに、普段の業務や仕事を進める上で感じる課題についてをブレストしていきました。
洗い出しした課題は「サービスに関わること」「仕事に関わること」「職場に関わること」と、大きく３つにカテゴリー分けすることが出来ました。

次に、ひとつひとつの課題に対して、「どうなって欲しいのか / どうしたいのか」をもとに、その解決方法を丁寧に考えていきました。解決方法は、各々の出来る / 出来ないなどのスキル面に縛られずに自由に考えるようにしました。

全ての課題に対する解決方法を考えたのち、今回のイベントでは「クリエイターの頑張りを他職種に伝わるようにする」を、クリエイティブの力で解決したいこととして選びました。
この背景には、「ビジョンにある“21世紀を代表する”を叶えるためには、今後求められるものは“技術力”と“デザイン力”であり、この技術力とデザイン力はクリエイターのみならず、非クリエイターを含めた全社に知ってもらう必要がある」と考えたからです。

実際に作ったクリエイティブについて

作成したクリエイティブは以下になります。

タイトル画面になります。コーポレートキャラクターを用いることで、ふと見た時に癒される画面デザインにしました。

当社のロゴに用いられているハートがコーポレートカラーで塗られていくことで、「クリエイターの今日の頑張り度」を表現した画面になります。1日のコミット数やコメント数などに対してある程度の目標数を設定し、それを100%としています。

上記の頑張り度の詳細画面になります。GitのMR数やリリース数、コミット数などが表示され、数字でもクリエイターの仕事ぶりを知ることが出来ます。

対応内容の詳細

【エンジニア側】
・GitLabからマージリクエスト数、コミット数などを取得
・デザインへの埋め込み

【デザイナー側】
・画面のデザインと実装
・css3アニメーションの実装

大変だったこと

【エンジニア側】
・GitLab APIを使用した実装
GitLab上のマージリクエスト数やコミット数などを取得するために、GitLab APIを使用しました。
私はGitLab APIを扱うのが初めてだったので、最初は同じチームの先輩に教えてもらいながら仕組みを理解するところから始めました。
GitLab APIでは、パラメータを渡すことでデータを受け取ることが出来ますが、どのパラメータを渡せば欲しいデータを取ることができるかを考えるのが難しく感じました。ドキュメントを読み込み、色々なパターンで試しながら実装を進めていきました。

【デザイナー側】
・調べながら進めたcss3アニメーション
今回はJSを利用せずにcssのみでアニメーションを実装することにしました。css3アニメーションは業務の中で使用することも無かったため、未経験に近い状態でした。そのため、自分が作りたいものに近い情報を探す「検索力」が肝となりました。「css3アニメーション 波」と検索すると、いろんな参考サイトが表示されますが、なかなか表現したいアニメーションが出て来ず、様々なワードで検索をしたり、普段よく見るコーディングナレッジのまとめサイトなどを参考に進めていきました。

こだわったこと

【エンジニア側】
・表示速度を意識！
APIでデータを取得して画面上に埋め込む際、データを取得し終えてからページを表示させると読み込みに時間がかかってしまい、UXが悪くなってしまうと考えました。
そこで、非同期通信でJSON形式でデータを取得し、JavaScriptを用いて画面上に埋め込む、という実装方法を採用しました。
ただ、APIを呼び出してからデータが返ってくるまでに時間がかかってしまう時もあったので、取得時の速度も改善できるとより良いと思いました！また機会があれば挑戦してみたいと思います。

【デザイナー側】
・画面の中でキャラクターを生かす！
解決方法を考えるミーティングの中で出た「キャラクターを飼いたい！」という意見が忘れられず、サイネージの中に、キャラクターの寝ている姿や喜んでいる表情などを盛り込むことで、キャラクターが画面の中で生きている感じを演出しました。「ランチ時間にはご飯を食べて欲しい」や「マージ数が増えたらおやつをあげたい！」などの意見も出てきましたが、限られた時間の中では詳細を詰めることが難しく・・・涙。こちらはまた次回のHACKDAYでカタチにできればと思いました！

まとめ

今回は短時間で、ビジョンから自分たちが課題と感じていることを見つけること、そしてそれをカタチにすることを進めてきましたが、技術を軸にビジョンと向き合う時間はなかなか無かったため、新しい気づきを得た貴重な時間となりました。
デモ画面作成においても、自分自身の苦手としていた技術や興味があったけどなかなか手を出せずにいた技術を触るきっかけとなり、エンジニア及びデザイナーにとって成長に繋がる時間となりました。
作成したデモ画面を発表時にお披露目すると、「かわいい！」や「おもしろい！」などの声をいただき、とても嬉しかったです。
もう少し企画の部分からブラッシュアップをし直して、いつかは実際に取り入れたいと思います。