Qiita Engineer Summit 2021 ロゴ作成 秘話

![Qiita Engineer Summit 2021 OGP画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/300daba5-8144-7e7f-a81f-4066075f84a7.png)


こんにちは。Incrementsのデザイナーの[出口](https://qiita.com/degudegu2510)です。

2021.12.17（金）16:30からQiita Engineer Summit 2021 Winterが開催されることになりました。

Qiita Engineer Summit 2021 Winterの開催にともない
今回はQiita Engineer Summit 2021のロゴがどのように作成されたのかを公開します。

この記事の内容は以下の通りです。

1. Qiita Engineer Summit について
2. ロゴに込める思い
3. ロゴを探る
4. ロゴをブラッシュアップ


## Qiita Engineer Summitについて
### Qiita Engineer Summit 2021 
Qiita Engineer Summit 2021は、”This is Engineering”をコンセプトに、参加企業各社が考え、取り組むエンジニアリングについて語っていだだく、エンジニア向けのトークセッションイベントです。

エンジニアはもちろん、エンジニアに関わる皆さまが集い、ソフトウェア開発で世界の進化を大きく加速させるべく取り組む企業とのコミュニケーションのきっかけを創出いたします。

+ 開催日 : 2021.7.21 Wed. 17:00 Start (※ Qiita Engineer Summit 2021は、終了しています。)
+ 対象者 : エンジニアとして活動している方
+ 参加費 : 無料（要事前申込）
+ 会場 : オンライン

https://qiita.com/official-campaigns/engineer-summit/2021

### Qiita Engineer Summit 2021 Winter
Qiita Engineer Summit 2021 Winterは “Be a Contributor” をテーマに、「エンジニアリングは社会に、そして世界にどう貢献できるのか？」を各企業が考え、取り組むそれぞれのエンジニアリングについて語るトークセッションイベントです。

エンジニアはもちろん、エンジニアに関わる皆さまが集い、ソフトウェア開発で世界の進化を大きく加速させるべく取り組む企業とのコミュニケーションのきっかけを創出します。

+ 開催日 : 2021.12.17 Fri. 16:30 Start
+ 対象者 : エンジニアとして活動している方
+ 参加費 : 無料（要事前申込）
+ 会場 : オンライン

https://qiita.com/official-campaigns/engineer-summit/2021-winter


## ロゴに込める思い
![Qiita Engineer Summit 2021 Logo](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3dee10e7-1b8c-3193-813c-21280e2c1b82.png)


Qiita Engineer Summit 2021 のロゴを作成するにあたって、以下のような思いがありました。

+ 企業の集まる場として、Qiitaのブランドイメージを表現したロゴにしたい
+ 各企業が考え、取り組む最高のエンジニアリングを表現できるようにしたい

### 企業の集まる場として、Qiitaのブランドイメージを表現したロゴにしたい
私たちとしては現状およびこうありたいというQiitaのブランドイメージを以下のように考えています。

+ エンジニアからの信頼に応えていく
+ 人が集まり、支え合い、助け合う
+ 公平で誠実なプラットフォーム

Qiita Engineer Summit 2021は、各企業が考え、取り組む最高のエンジニアリングについて語る場として、
ブランドイメージの中でも、「 **人が集まり、支え合い、助け合う** 」を表現したいと思っています。

このようなロゴにすることで、Qiitaのブランドを体現できるイベントとし、
参加するエンジニアが最高に幸せになるイベントにしたいと思っています。


### 各企業が考え、取り組む最高のエンジニアリングを表現できるようにしたい
Qiita Engineer Summit 2021のコンセプトである **”This is Engineering”** 。

このコンセプトには、Qiita Engineer Summit 2021を、各企業が考え、
取り組む「**最高のエンジニアリングを紹介・発表する場**」にしたいという
意味がこめられています。

そのため、Qiita Engineer Summit 2021のロゴでは、
幾何学な図形を繰り返し、色や組み合わせ方を変えることで
各企業の**”This is Engineering”**が表現できるようにしたいと思っています。

## ロゴを探る
### 幾何学な図形の繰り返しを検討する
幾何学図形を組み合わせて、Qiita Engineer Summitのロゴのアイコンを検討しました。

|案１|案２|案３|案４|
|:--:|:--:|:--:|:--:|
|![アセット1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8385c633-89d0-320c-85be-6b9ae78f2bb5.png)|![アセット 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/45f5163c-86cb-3c41-cb5f-4f8e1f9bd6a8.png)|![アセット 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d6ce174f-a7a8-a627-b903-2e62126c7a37.png)|![アセット 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c288938f-9c68-7aca-0658-986f29121c70.png)|

+ 案１
    + ドゲトゲしすぎてない感じはよさそう！
    + 部分的に、三角の向きを変えるとアクセントになって良さそう。
    + パターンが多くなりすぎて少し扱いづらそう。
+ 案２
    + ここまでトゲトゲしていると攻撃的なイメージがあるので、Qiitaのイメージと違う。
+ 案３
    + 上辺・下辺の線が揃っているのが気になる。
    + ギザギザにしても凹凸が上下左右で変わるので、違和感がある。
+ 案４
    + ドゲトゲしすぎてない感じはよさそう！
    + ブロックを繋げて、各企業の**”This is Engineering”**が表現できそう！

::: note  
ロゴのアイコンとして、案４の方向性が良さそうだと判断しました。
:::

### ブロックの数を検討する
`Qiita Engineer Summit` の文字は、仮置きして、ブロックの数を検討しました。

||6x6|5x5|4x4|
|:--:|:--:|:--:|:--:|
|Icon|![アセット5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/27b47dc7-1995-ab97-e1be-ba8714d155fb.png)|![アセット6](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/59ef87c5-979f-042d-e2f2-90713be1196c.png)|![アセット7](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/791a880c-938c-d471-129f-78bca7e00954.png)|
|Icon+Text|![アセット8](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/940e61cd-d34a-c7cc-aa5d-bd5109edd87d.png)|![アセット9](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d53cfcf6-66ec-f1a4-e339-fd7d2cf967fb.png)|![アセット10](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/af4b4037-5f13-31c2-6f46-5944265f3f42.png)|

+ 6x6
    + 最小のロゴサイズ(Qiitaロゴの最小サイズに合わせる)にすると、１ブロックが8px以下になるので、少し細かい。
+ 5x5
    + このくらいのサイズがちょうど良さそう。
    + パターンいくつか作れるし、自由が効く。
+ 4x4
    + 複数のパターンを作るには、ブロックの数が少ない。

::: note  
ロゴのアイコンとして、5x5のブロックを採用することにしました。
:::

### アイコンの色配置を検討する
5x5のブロック内の色配置を検討しました。
色は、[Qiita の VI で定義されている](https://blog.qiita.com/increments-design-system/) `#55c500` `#4DA600` `#4195D9` `#327CAF`、
Qiita の UIの Base Colorとして使われている `#E5CDC5`を使いました。

QiitaのQがそこはかとなく感じ取れる配置を探りました。
1→２→３→４→Fix の順に変化していきました。

|1|2|3|4|Fix|
|:--:|:--:|:--:|:--:|:--:|
|![アセット 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/652d594b-936b-c6b5-8d83-d753b913b4cc.png)|![アセット 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f008e26d-b033-099f-de91-92d4dcfdf1f7.png)|![アセット 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/db334915-c011-ee4c-6892-b5edbc6edc17.png)|![アセット 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e52e7af6-4964-2cba-b9cb-442cad9e5923.png)|![image-qiita_engineer_summit_icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/cd1eb9fe-5067-1114-5f35-638c0c805c1e.png)|

### ロゴを仕上げる
決まったアイコンと`Qiita Engineer Summit 2021`を組み合わせてロゴを仕上げました。

文字のサイズ・カーニング・行間を調整して、出来上がったのが、現在のロゴになります。

![Qiita Engineer Summit 2021 Logo](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ec901554-99eb-6a8f-1d71-e8adabdf9b88.png)




## ロゴにアニメーションをつける

<iframe width="560" height="315" src="https://www.youtube.com/embed/mqxZID3SpsU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 絵コンテを作成する
絵コンテはFigmaで作成しました。

||絵コンテ|コメント|
|:--:|:--:|:--:|
|シーン1|![シーン1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/83f75be9-469b-bdce-5c9f-8b163529a868.png)|アイコンのブロックが一枚ずつ表示される|
|シーン2|![シーン2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2b38ba17-75b6-53a7-36bf-0a871df5fef3.png)|アイコンが揃ったらが揃ったら小さくなりながら横にずれ 文字がバラバラにフェードインするイメージ|
|シーン3|![シーン3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/434361ba-bfdc-6607-85dd-393885ecd688.png)|斜めに装飾がフェードインするイメージ。段々と移動速度が低下して、ストップする。|

絵コンテを下に作ったアニメーションがこちら

<iframe width="560" height="315" src="https://www.youtube.com/embed/wrLuKSwvb0w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


### アニメーションを仕上げる
絵コンテ通り作成して、気になった部分を修正する。

+ シーンごとがパツパツ切れているので、もう少しスムーズにシーン移動したい。
+ 全体的にゆっくりなのでスピードをアップしたい。
+ テキスト部分のパラパラ表示させるのと、アイコンが小さくなりながら位置が移動するのがあまり相性がよくなかった。

修正したアニメーションがこちら

<iframe width="560" height="315" src="https://www.youtube.com/embed/mqxZID3SpsU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 最後に
今回は、Qiita Engineer Summit 2021のロゴ作成にあたって、ロゴにこめた思いや制作過程を公開しました。

Qiita Engineer Summit 2021に参加した皆さん、参加していただきありがとうございます。

Qiita Engineer Summit 2021 Winterの参加申し込みをお待ちしています。
ぜひ下リンクから参加申し込みをお願いします。

https://qiita.com/official-campaigns/engineer-summit/2021-winter

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