Qiita エンジニアフェスタ 2021 ロゴ作成 秘話

こんにちは。エイチームグループでペアデザインを普及しているのデザイナーの出口です。

今回はQiita エンジニアフェスタ 2021のロゴがどのように作成されたのかを公開します。
この記事の内容は以下の通りです。

1. Qiita エンジニアフェスタ 2021について
2. ロゴに込める思い
3. ロゴを探る
4. ロゴをブラッシュアップ

Qiita エンジニアフェスタ 2021について

Qiita エンジニアフェスタ 2021とは、2021年7月1日から8月25日までの期間限定で展開された記事投稿イベントです。
毎年12月に開催しているQiita Advent Calendar以外にもユーザーのみなさんに盛り上がっていただける企画を作りたいという想いから、本キャンペーンを開催することになりました。
新しい夏の風物詩として楽しんでいただけたなら幸いです。

Qiita エンジニアフェスタ 2021 Online　Meetupでは、Qiita創業者の海野氏をお招きし、現Increments代表柴田、現Qiita PM清野とともにユーザーのみなさまの質問にもお答えしていきました。

Qiita エンジニアフェスタ 2021 Online　Meetupのアーカイブは、Qiita10周年特設サイトにて公開しているので、ご覧ください。

ロゴに込める想い

Qiita エンジニアフェスタ 2021のロゴを作成するにあたって、以下のような思いがありました。

• 新しい夏の風物詩として、Qiitaユーザーの印象に残って欲しい
• クリエイティビティの高いエンジニアに合う、クリエイティビティの高いロゴにしたい

新しい夏の風物詩として、Qiitaユーザーの印象に残って欲しい

Qiita Advent Calendarは、キリスト教圏で行われていた風習「Advent Calendar」に習って、12月1日から25日間、記事を投稿しようというイベントです。
Qiita Advent Calendarは人の風習や週間に習ったイベントとなっているため、皆さんに親しみやすく、楽しんでいただけているのではないでしょうか。

今回開催した「Qiita エンジニアフェスタ 2021」は、暑い夏にもQiita Advent Calendarと同じく楽しんでいただき、新しい夏の風物詩として、Qiitaユーザーの皆さんの記憶や印象に残って欲しいと思っています。

クリエイティビティの高いエンジニアに合う、クリエイティビティの高いロゴにしたい

エンジニア界隈で行われているイベントやMeetupなどは、全体的にテキストロゴが多い印象があります。
テキストロゴは「静」のイメージが強いですが、今回はあえて「動」を感じるロゴにすることで、外からも盛り上がって見えるようなイベントにしたいと考えています。

既にQiitaを利用いただいているユーザーのみなさん以外にも、プログラミングの初学者やエンジニア周辺の方々にまで影響を与えるイベントにできれば、新しい夏の風物詩として定着するのではないかと思っています。

ロゴを探る

第1段階

案1	案2

• 案1
  • 文字を抽象化させて、読ませる より 魅せることを意識しています。
  • 文字内で部分的にグラデーションを入れることで動きが出るように表現しています。
• 案2
  • 文字ベースのロゴで 読める + 魅せるの複合を意識しています。
  • 文字内で部分的にグラデーションを入れることで動きが出るように表現しています。

文字を抽象化させて、読ませる より 魅せることで、外から見ても盛り上がって見えて、Qiitaユーザーの皆さんの記憶や印象に残ると思い、案1をベースに進めました。

第2段階

第1段階の案1をベースに基本グリッドを作成し、すべての文字を作成しました。

• 基本グリッド
  • 1グリッド 縦 10px x 横 10px
  • 1ブロック 縦 5グリッド x 横 5グリット
  • 1文字 縦 4ブロック x 横 2ブロック (ブロック間 4px)

基本グリッドを元に作ったロゴ

基本グリッドの見直し

下記のグリッドでは、ロゴが小さくなった時にブロック間の4pxの部分が1px以下になってしまうことが発覚しました。
1px以下になってしまうと、ロゴが読めなくなってしまいます。そのため、基本グリッドを見直しました。

• old 基本グリット
  • 1グリッド 縦 10px x 横 10px
  • 1ブロック 縦 5グリットド x 横 5グリッド
  • 1文字 縦 4ブロック x 横 2ブロック (ブロック間 4px)

　⬇️

• 基本グリッド
  • 1グリット 縦 10px x 横 10px
  • 1ブロック 縦 5グリッド x 横 5グリッド
  • 1文字 縦 4ブロック x 横 2ブロック (ブロック間 6px)

new 基本グリットを元に作ったロゴ

文字として読めるように形を見直し

文字が全体的に抽象的すぎて読めない場合もあるため、e r s a を見直しました。

文字	old	new
e
r
s
a

文字を見直したロゴ

ロゴとして使う文字を見直す

Engineer Festa2021 の文字を全部ロゴとして使わなくても、部分的にロゴとして使った方が見やすく、親しみやすいものになると思い、Engineer Festa2021 → EF2021をロゴとして使うように見直しました。

ロゴを見直したロゴ

サイズ感を揃えるための視覚調整をする

2と0

2 は上部、 0は上部と下部が丸くなっているので、EやFと比べると若干小さく感じます。
そのため、2は上に数px大きく、0は上下に数px大きく調整しています。

白パターンと黒パターン

白は膨張色なので、白文字は黒文字より太く見えます。
そのため、黒文字を数px太くして視覚調整を行っています。

白パターン	黒パターン

完成 🎉 🎉 🎉

文字のエフェクトに合わせて、背景に装飾を加えました。
Qiita Green #55c500 とQiita Team Blue #4097DBでドットをベースとした幾何学模様を使いました。
パターンの展開や配置によって、背景でも 「動」を感じられるようにしました。

完成

最後に

今回は、Qiita エンジニアフェスタ 2021をQiitaユーザーの皆さんの記憶や印象に残るイベントにするため、 ロゴ作成にあたってロゴにこめた思いや制作過程を公開しました。

Qiitaユーザーの皆さんがQiita エンジニアフェスタ 2021を楽しんで頂けたなら幸いです。

現在Qiitaでは、サービス開始から10年をむかえたことを記念して、各年度で高く評価された記事や、10周年の記念イベント、Qiitaの歴史などを公開しています。

是非、Qiita 10周年記念サイトをご覧いただき、各コンテンツを楽しんでいただけるなら嬉しいです。

これからも改善に取り組んでいきます。ご意見ご要望がありましたらいつでもお寄せください。