こんにちは、UI/UXデザイナーの出口です。

アシアルにはアシアル情報教育研究所チームがあり、教育機関におけるプログラミング教育を中心とする情報教育関連の教育サービスを提供しています。その中で2023年の12月に、商業高校生を対象としたWebアプリコンテスト「全国商業高校Webアプリコンテスト」の第1回目を開催しました。

第1回目にもかかわらず、35校から175作品の応募をいただきました。
参加された皆様お疲れさまでした！
受賞された皆様おめでとうございます！！

私は、受賞された方々に授与することになったトロフィー用に専用のロゴをデザインさせていただきました。ロゴデザインの依頼が来たのは、Webアプリコンテストの審査も完了し、受賞者も決まっていた12月の中旬くらいで 、そこから年末ごろまでの制作となりました。ロゴの制作にはアシアル情報教育研究所チームの他にブランディングチームも参加しています。

ロゴの制作経緯

コンテストのWebサイトで使用しているロゴはデザインが複雑なので、トロフィーに印刷したとき細部が小さくて見えずらいかもしれないという問題もあり、簡略化してシンボル的なロゴを用意したいということでした。

元々のデザインには「第1回」など、次の開催時に更新が必要な要素を含んでいたため、今後も見据えてロゴを一新することになりました。

デザイン案を出して方向性を絞り込む

まずはロゴの「簡略化」と「第1回などの不要な要素を除く」などの要望をもとにデザイン案を作成していきます。元々のロゴで使用されている「電球」「太陽」などのイメージ要素や、「全国商業高校」「Web」「アプリコンテスト」などのキーワード、あとは「学生さんのコンテスト」イメージなどをデザインに落とし込んでみます。

特に、モチーフとして下記を象徴化してみます。
　・全商の「商」
　・Webアプリコンテストの「W」
　・企画やひらめきを表す「電球」

元のデザインは外部のデザイナーさんに依頼したロゴだったので、「w」や「商」のフォントの種類は何を使っているんだろう？とかを調べたりしました。

デザイン案をもとにロゴの方向性について再度チームで話し合いました。Webアプリコンテストの「W」が電球のフィラメントとかけていて面白いという意見がありつつも、改良ポイントとして様々なフィードバックを頂き、大幅な変更をすることに。

・現在のロゴに縛られなくてもOK
・モチーフは電球じゃなくてもOK
・プログラムを書いてもらうのも重要なのでWritingの「W」は使いたい
・参加のハードルが下がりそうなイメージに
・流行に左右されないシンプルなもの

他にも「今後スタッフＴシャツを作った時に、かっこいいロゴになるといいな」とかもありました。コンテストを盛り上げていって、様々な場でロゴの活用が増えてくるといいですね！

フィードバックをもとに再考

言葉だけだと各自で想像したものにズレが生じやすいため、ブランディングチームやアシアル情報教育研究所チームと、高校生が利用してそうな他社サービスのデザインを集めてイメージのすり合わせを行ったりしています。それらとフィードバックを合わせてデザイン案を再度出してみました。

再提案ではロゴにWebサイトで使われている色をいれました。トロフィーには黒一色のみで印刷する予定ではありますが、今後Webサイトに載せることがあった時には色を入れたバージョンを制作することもあるかもしれないと思い、サンプルを用意してみた形です。

当初の簡略化について「参加のハードルが下がりそうなイメージ」「流行に左右されないシンプルなもの」という具体的なイメージをもとに要素を削っていき、「Webアプリコンテスト」や「プログラムを書く（Writing）」の「W」は残したいという要望に沿って、「W」の形をベースにデザインを考えました。

この中では1と6のデザインが選ばれています。
コンテストのロゴということで、２つとも「W」の上に3つ突き出た形を「表彰台」に見立ててデザインしています。

1と6のデザイン案については、全体的には丸みをつけて優しい、親しみやすい形状にしています。「表彰台」イメージとしては、一番右端の凸が最も優れている表現で、1ではストライプのデザインで特別感を演出していて、6では右あがりに凸が少しだけ縦に長く、表彰台の階段のようになっています。そしてそれぞれ栄光の星がその上で輝いています。

本来、表彰台は真ん中が最も優れた台なので、真ん中の凸を伸ばそうかと思ったのですが、漢字の「山」になってしまいそうで「W」感がなくなるのでやめました。Wの凸の先端の形を、ヒヨコ（若いアプリ制作者という意味で）の嘴が右を向いているような形にして右への流れを作ることにしました。

今回のフィードバックでは下記の意見をいただきました。
・1年生から3年生まで3年間参加できる、困難からの成功（wの形からの連想で、山あり谷あり）なども意味合いとして持てそう
・下のアールのバリエーションが見てみたい
・安定感のあるロゴにしたいので、全体的に太くしたい

ロゴの凸形状だけでなく凹形状の部分にも着目し、瞬時に高校生達の3年間を連想したところが、普段から教育サービスに携わっているアシアル情報教育研究所チームらしい意見だなと感じたフィードバックでした。

最終ブラッシュアップでディティール調整

前回の1と6のデザインを合わせて、ディティールの違いを色々試してみることになりました。

ディティールの違いは下記になります。
・太さは3段階：a～c、d～f、g～i
・アールは3段階：1と4、2、3
・上に突き出てる３つの凸部分の長さの違い
　　adg（全て同じ）
　　beh（右端だけ長い）
　　cfi（右上がり）
・4の行は左斜め下に角のある形状違い

ロゴのデザイン決定！

結果として、「１i」に決定しました！
細部までこだわりのあるデザインに仕上がったのではないでしょうか。

最終的な新ロゴのデザインについてまとめると…

■ Wのモチーフ
・Webアプリコンテストの「W」
・プログラムを書くWritingの「W」

■ Wの形状、右肩上がりの意味づけ
・表彰台
・１～３年生まで３年間参加できる
・困難からの成功（山あり谷あり）

■ テイスト
・高校生を意識したテイスト
・参加のハードルが下がりそうなイメージ
・流行に左右されないシンプルなもの

となりました。

この新しいロゴを使って、早速トロフィーに印刷して頂きました♪

雰囲気出てますね！
皆さんが喜んで頂けたら嬉しいです。

最後に

今回は、Webアプリコンテストの結果発表後に話が持ち上がって作成したロゴだったので、ロゴ自体の存在を外部で知っているのは今のところトロフィーを受け取った受賞者だけとなっていましたので、新しいロゴに込めた想いを伝えられたらと思いました。

商業高校生のみなさん、
今後もコンテストに気軽にチャレンジしてみてくださいね！