2月に受賞アプリを発表した「App App Award 2022」。フラー株式会社が毎年主催するこのアプリの祭典は、今回で7回目を迎えました。

今年のApp Ape Award 2022のメインビジュアルのデザインは、新卒でフラーに入社し、今年度で2年目を迎えるデザイナーが担当しました。

　この記事では、新卒で入社したフラーのデザイナーの吉原が、オンラインイベントのメインビジュアルを作成するまでのデザインプロセスを公開します！

デザインコンセプトの作成

　App Ape Award 2022のコンセプトが「変わりゆく世の中の、アプリとヒトの変わらない関係」に決まっていたので、そちらをもとにデザインコンセプトを考えました。

　まず行ったのはキーワードの発散です。アワードのコンセプト文から連想される言葉や、それをカタチにするとどのようなモチーフになりそうかなど、さまざまな観点からまずはひたすら言葉を発散しました。

「アプリとヒトの変わらない関係って、お互いに変わらない価値・幸せに向かって進んでいくことなのではないか。アプリとヒトが互いに影響しあって、変容しながらも、同じ方向に向かって進んでいくような様を、デザインで表現したい。」という気持ちが芽生え、その思いを一言であらわしてくれるキーワードに収束させていきました。　

その結果生まれたデザインコンセプトが「結束」です。

このワードにした決め手は

• ビジュアルのイメージがしやすい

• アワードのコンセプト文をわかりやすく伝えられる

という点でした。あまり抽象的な言葉になりすぎると、今後のデザインの展開がしにくくなるので、この段階である程度デザインのモチーフがイメージできる言葉にすることは意識しました。

チーム全員でデザインを作るための「デザイントーンスライダー」

具体的なビジュアル作りに入る前に行ったことが、「デザイントーンスライダー」の作成です。

今回のアワードを中心となって運営するチームメンバーは、デザイナーが自分だけ。デザイナー以外の他のメンバーの意見を取り入れた上で、みんなでデザインを作り上げたかったので、まず今回のアワードのデザインの印象がどうなっていくべきか、チームで議論してスライダーにまとめました。

例えば、「態度」という項目であれば、「アワードというフォーマルなイベントであることや、ターゲットがtoB向けのイベントであることから、真面目な印象に近づけたいね。でも、かしこまりすぎず、アプリ界隈をみんなで盛り上げようという場にしたいから、少しポップな印象も与えていこう」といった具合にデザイントーンをざっくり決めていきました。

　このスライダーを作成するメリットは、実際にデザインができあがった際にデザイナーではないチームメンバーも制作物に関して意見を言いやすくなる点にあります。

「トーンスライダーでは品性の項目をダイナミック寄りにしていたから、もう少しデザインに動きがあってもいいんじゃない？」というように、たとえデザイナーが一人でもチームのみんなでデザインを作っていくことができる環境を整えました。

チームメンバーからも「スライダーを作ってくれたおかげで、意見が言いやすくて助かった」という声をいただいたので、作ってよかったですね！

具体的なビジュアルのドラフト

　デザインコンセプト・デザイントーンが決まったところで、それを表現するメインビジュアルをドラフト（下書き）していきました。

自分はドラフトする際に決まった手法などはなく、紙に書いてみたり、iPadで書いてみたり、Figmaで作ってみたり、とにかく手を動かして色々試してみました。

チームのメンバーや、CDOの櫻井さんから適宜レビューをいただきながら、メインビジュアルを詰めていきます。

どの表現の方針が今回のビジュアルとしてふさわしいか、デザイントーンなどを参考にしながら皆さんと協議を重ねた末に定まったのが「アプリやデジタルの様子を点で表し、ヒトのイメージを曲線で表す」という見せ方です。

アプリとヒトが互いに絡み合い、影響しあっていく様子を表現できるのではないかという結論になり、大まかなビジュアルの方針が決まりました。

ここからさらに要素のカタチや背景のカラーなどのブラッシュアップを重ねていきました。

背景のカラーは明度が低いほうが、点ひとつ一つの様子がよく見えることや、発光している様子を伝えることができて相性が良いなどの理由から、黒に近い背景にしました。

櫻井さんのレビューで特に印象に残った言葉は「ケーススタディ」です。今回のメインビジュアルは、記事のサムネイルや、アワードのLP、OGPなど様々な場面で使用することが想定されていたので、それぞれのシーンでケーススタディしたときに、見栄えがいいように調整していきました。
　
また、メインビジュアルをもとに記事内で使うデータ紹介の画像なども作ることも想定されたので、「今回のアワードで作る他のクリエイティブにも応用しやすい、汎用性のあるデザインにしよう」という意識でデザイン展開していきました。

ビジュアルの上にロゴや文字が入るため喧嘩しないカラーが良いことや、変わらない価値に向き合い続けるという真摯な姿勢、アワードコンセプトの語り口調との整合性などを考えると、ブルーの方が良いねとなり、その方向性で最終調整に入っていきました。

最終調整では、ロゴを実際に配置して見え方を整えていきました。OGPになったときにどのシーンでも綺麗にロゴが見えるか、背景のビジュアルがnoteのマガジンのサムネイルで使ったときにしっかり映るかなどなど、ひたすらケーススタディと調整です（笑）。

この最終調整の段階に入るまで約1カ月ほどの時間をかけましたが、ケーススタディがもっと早い段階からできていたら、ビジュアル決定までの時間をより短縮できたなと実感しています。次にデザインをするときの課題ですね（笑）。

完成したメインビジュアルと、他のクリエイティブへの応用

チームメンバー、櫻井さんなどと協議を重ねてブラッシュアップしていき、完成したメインビジュアルがこちらです。

アプリとヒトが互いに影響しあい、「結束」していく。設定したコンセプトを体現するメインビジュアルを作ることができました。

　今回のメインビジュアルをもとにして、アワード期間に投稿したいくつかの記事内のビジュアルも作成しました。ドラフト段階で応用しやすいビジュアルにすることを意識していたおかげで、スムーズに他のクリエイティブを作成することができたのがよかったです。

また、ノーコードでサイトを制作できる「STUDIO」というツールを使って、受賞発表記事へ誘導するためのLPの制作も併せて行いました。こちらも是非ご覧ください。

関わるすべてのヒトの想いを汲み取ることを諦めない

App Ape Award 2022を終えてみて、App Ape Award史上最高のTwitterいいね数を観測するなど、数値として結果が見えて内心ホッとしました。

Twitterで受賞したアプリのファンの方が受賞を喜んでいたり「すごい賞を受賞した」とコメントしているのを見て、質の高いアワードとして認知していただけたのではないかとも感じています。喜びの声が届くことは、開催側としては何より嬉しいですね（笑）。

開催チームの中心メンバーは4人と少ないながらも、過去のアワードの開催者や、レビューしてくださる方や、アプリの作り手、アワード結果を見るユーザーなど、たくさんのヒトの想いを汲み取り、デザインをする必要がありました。

すべてのヒトの想いをデザインに反映させることを諦めずに、ギリギリまで検討をし続けたことが、アワード成功につながったように感じます。関わってくださった方、特にメンバーの皆さんには感謝しかないです！

ーーーーー
フラーではデザイナー全体のレベルアップを目指して日々精進しています。いっしょに働くデザイナーをはじめメンバーも積極採用中です。

ご興味お持ちいただけましたら、お気軽にご連絡ください。

採用ピッチ資料はこちら↓