MERYの開発部がアニマルでプリティなブランディングになっちゃった話

こんにちは!MERYでUIデザイナーをしている神尾と申します。普段はMERYというiOS・AndroidアプリのUIデザインをしています。

所属している開発部では、定期的に技術系の知見を同人誌にまとめ、技術書典や技術書同人誌博覧会といったイベントに参加しています。今回は、これらのイベントで頒布する同人誌の表紙のデザインをした際の話を書こうと思います。

はじまりは、「開発部で同人誌を出したい」の一言。

ある日サーバーサイドエンジニアの@gamiさんが言いました。

サーバーサイドエンジニアの@gamiさん「MERYの開発部でも技術書店で同人誌を出しませんか?」

技術書典とは、公式にもある通り、技術の知見をまとめ、同人誌化して頒布するイベントです。

新しい技術に出会えるお祭りです。 技術書典は、いろんな技術の普及を手伝いたいとの想いではじまりました。 技術書を中心として出展者はノウハウを詰め込み、来場者はこの場にしかないおもしろい技術書をさがし求める、技術に関わる人のための場として『技術書典』を開催します。

技術書典:技術書オンリーイベント

MERYの開発部でもプロダクトを開発していく中で、知見が段々溜まってきており、どこかで発表したり、共有できる場があればなあ…と考えていたタイミングでの一言でした。開発部にとって、とても前向きな第一歩となったように感じました。

私も開発部の一員として、何かしら携わりたい!と考えました。しかしながら、MERYに入社してから日が浅く、知見をアウトプット出来るだけの文章は書けないなと判断。デザイナーとして能力が発揮できる分野の、同人誌の表紙のデザインなら携われるのでは?と考え、手伝わせてください!と手を挙げました。ここから、自分でも気づかぬうちに、開発部のブランディングが始まっていました。

開発部の本の表紙って、どんな表紙がいいんだろう?

MERYの開発部として本の表紙をデザインする上で、

  • MERY社としての開発部を対外的にどう見せて行くか?
  • 現状の部署の雰囲気と寄せつつ、MERY社とどう絡めていくか?

この二点が非常に重要だと考えました。

まず一点目ですが、MERYといえば『かわいくなりたい女の子のための情報メディア』といったプロダクトとしての印象が強いかと考え、プロダクトを作っている、いわば中の人たちが、イメージを損なうような同人誌を出してしまうと、プロダクトを使ってくださっているユーザーさんに悪い印象を持たれてしまう可能性が考えられました。会社としてのMERYも同じで、会社のニュートラルな印象からかけ離れてしまうと、取引先等、対外的にイメージを損なう可能性が考えられました。

二点目は、MERYらしさ・対外的な良さに偏りすぎても、開発部の雰囲気が出ず、現状のメンバーからの違和感・新しい人が部署に入った時のギャップにつながるなど、マイナスな方向に動いてしまう可能性が考えられました。

手を挙げてから一日ほど、開発部について真剣に考える期間を設けました。方向性を明確にしないと、デザインをどう落とし込んで行ったら良いのか分からず、無駄に時間がかかってしまうと考えたためです。

MERY社としての開発部を対外的にどう見せて行くか?

MERYの開発部とは、会社の中でどのような立ち位置で、どう見られていて、何を目指しているのか。開発部について深掘りし、自分の中で咀嚼する時間が必要でした。行ったこととしては、

  • 会社としてのMERYと開発部のmissionの再確認
  • 現状の開発部の雰囲気を肌感覚で良いのできちんと掴む

です。

missionの再確認

会社としてのMERYのmissionや、部長が掲げていた開発部のmissionを改めて確認しました。ここが原点ですし、ブレてはいけないと考えたためです。

ここで自分の中でしっくり来たのは『愛される』というキーワードです。会社のmissionにも、開発部のmissionにも入っていたこのキーワードが軸になると考えました。

現状の開発部の雰囲気を肌感覚で良いのできちんと掴む

また欠かせないのは、現状の開発メンバーと、部署の雰囲気。会社も部署も、人で成り立っています。一人一人の個性が合わさり、雰囲気を作っている。そう考えたため、メンバーに着目し、開発部の個性とは一体なんなのかを言語化していくことに努めました。

具体的に行ったこととしては、メンバーの名前やSlackというチャットツールでのプロフィールアイコンで使用しているマーク、性格、ミーティングでの雰囲気、他部署からの意見…様々なものを頭の中で洗い出すこと。その過程でふと、共通点を発見しました。

そう。Slackのプロフィールアイコンに、動物の画像を使っている人が多いのでした。そして部長のあだ名はこれまた『zoo』(なぜzooなのかの理由に関しては、動物園とは関係ないようですので今回は割愛させていただきます)!

『動物』と、そしてもう一つのキーワード、『愛される』。

この二つをテーマにして進めていく未来しか見えませんでした。しかし、これだけではどうしても先に進めません。開発部の雰囲気をぼんやりとしか掴めていなかったからです。そこで、私が受けた印象や雰囲気を箇条書きで洗い出してみることにしました。

  • 基本的に静かで大人しい。
  • 真面目でクール。しっかりとしている。
  • 特定の話題で凄く盛り上がりを見せる。(保険の話やコーヒーなど)

これだけを見ると、クールでかっちりしていて、どうも先ほどしっくり来ていた『動物』・『愛される』といったキーワードからはかけ離れているように思えました。例えるなら、リアルな虎にブリブリしたかわいいピンクのエプロンを付けているような、そんなチグハグなイメージです。悩みつつも、他部署の人と開発部の話になったときに、

「開発部って真面目で堅い印象を受けるけど、でも可愛いところもあるよね。真面目な話をしていたと思ったら、突然可愛い顔文字の『 (´・ω・`)』を使ってきたり。だから好きなんだよねえ。」

という話をたまたま耳にしました。そうか…!

『真面目で堅い』といったところと『可愛さ』はギャップになる。このギャップこそ、『愛される』ポイントなのではないか…!

今までの仮説を検証し、正しいということに気付いた瞬間でした。先ほど頭に思い浮かんだちぐはぐな虎から一転して、キャラクターとしての動物、というコンセプトがぼんやりと決まってきました。愛されるためのアイコンとして、部長のzooという概念を筆頭とし、動物をモチーフにした、一見するとクールそうだけれど、よく見ると柔らかさや、ちょっとしたお茶目な感じが見受けられる。そんな雰囲気が、頭の中に浮かんできたのでした。

現状の部署の雰囲気と寄せつつ、MERY社とどう絡めていくか?

開発部の雰囲気をどう表現したら良いのか、という部分に関しては掴めました。ここでは開発部のデザインコンセプト、と定義して話を進めます。

開発部のデザインコンセプトが決まったのであればそのまま進めば良いではないか、と考える方もいらっしゃるかもしれませんが、私はコンセプト決めの前に、重要な点を二つ、考えていました。

  • MERY社としての開発部を対外的にどう見せて行くか?
  • 現状の部署の雰囲気と寄せつつ、MERY社とどう絡めていくか?

上記二点のうち、一点目は決まりました。次に二点目の、『現状の部署の雰囲気と寄せつつ、MERY社とどう絡めていくか?』について。

プロダクトのMERYには、アイコンとして羊がモチーフに使われています。

開発部のイメージとして考えた『動物』というアイコン。プロダクトのMERYとは位置付けが違うにしろ、MERY社の中の一部署として、開発部にも何か一つ、代表となるようなアイコンの動物を置くことで、MERY社の中の一プロダクト…ではないのですが、サブブランド的な立ち位置でのブランディングが目指せるのではないかと考えました

今回、技術書典というイベントで頒布する同人誌の媒体は紙。紙といえば…ヤギ。羊とヤギ…似ているようで、異なる生き物。これは、もう、ヤギ以外の何者があるというのでしょう。

という訳で、開発部の顔にもなりえるようなアイコンとしての動物、ヤギを置くことに決めました。

早速手を動かしていきます。

はい。ここまですごく長かったと思います。正直、ここまで到達してくださる方はいらっしゃらないのではないか…と心配になりながら書いています。それだけ、開発部のデザインコンセプトづくりに力を入れました。デザインコンセプトはそれに携わるものすべてのアウトプットの基盤になると考えているので、考えうることを考え抜いて、つよい地盤にしていく必要がありました(というか私はUIデザイナーで、主戦場はUI/UX周りになっており、この辺りは考え抜いた方が良いと判断したというのもあります)。ここからは早速手を動かして行くフェーズに入っていきます。

やったこと

工程としては下記の流れで行いました。

  • デザインコンセプトを元にムードボードを作成
  • ムードボードを元に表紙をデザイン
  • 法務チェック
  • 完成

なんだかシンプルで面白みがない…そう思われた方もいらっしゃるかも知れません。デザインするという行為はかなり泥臭く、上記のようなシンプルそうに見える工程の中でも、汗水垂らしながら、時には自分の中で希望や絶望を見ながら頑張っています(個人差はあるかと思います、私はそうです!)。というわけで簡単に詳細をみていきましょう。

デザインコンセプトを元にムードボードを作成

改めてデザインコンセプトを見直してみましょう。

  • 開発部のアイコンとしては動物を置く。顔になりえるものはヤギ。
  • 一見するとクールだがよく見ると柔らかさや、お茶目な雰囲気が感じられる。

特に後者に関しては、『クール』・『柔らかい』・『お茶目』といった、非常に幅広く受け取られがちな言葉で定義されています。『一般的に言われる開発部』と、『MERY社に属する開発部』といった枠組みだけで考える『クール』とでは、『クール』の種類が違います。また、人によってもイメージは千差万別でしょう。『MERY社に属する開発部』の『クール』で『柔らか』くて『お茶目』な雰囲気って、どういったものなんだろう?というものを明確に定義するため、また、イメージを膨らませるために、Pinterestのボードを使用し、雰囲気を掴んでいきます。

実際に試行錯誤しながら集めていたPinterestのボード

ここは私にとっては一番楽しいフェーズでありまして、とにかく無限に夢が広がります。他のデザイナーさんが一所懸命作ったであろうデザインを恍惚としながら閲覧し、ひたすら参考になりそうな画像を集めて雰囲気を掴んで行く。私はこの作業をやるためにデザイナーになったと言っても過言ではありません。いや、過言ではあるかもしれません。

  • この青味だと少し重た過ぎて『クール』で『開発部』っぽくはあるけど、『柔らか』くはないな…
  • このレイアウトすごくすてきだ。抜け感もあり、MERYっぽさもある。だが『開発部』らしさはない…

等々考えながらとにかく雰囲気を掴んでいきます。あ〜なんて幸せで楽しい時間なんだ…私はこの時間で、まるで自分が作ったかのような気になれるんです。まだ何もアウトプット出来ていないのに、素敵な画像が集まってくるだけで、何かを作った気になり、このまま出しても良いんじゃないか…そんな気持ちになります。もちろんだめです。そんなことはしません。

個人的には、ムードボードにはかけようと思えば永遠に時間がかけられるので、ある程度時間や、集めてくる内に見えてくる共通項がある程度出てきたら、などで区切って終わらせます。今回は後者で、共通項がある程度見えてきたタイミングで完了させました。見えてきたものとしては、

  • 線づかいのイラストなら、カチッとした雰囲気と、ゆるっとした雰囲気の間が取れそうなので採用したい。
  • 色味は寒色系が良さそうだ。MERY社はニュートラルな雰囲気を感じさせる、黒・白・灰色。開発部は、青、緑といったエンジニアを想起させるものがしっくりきそう。

というものでした。

ムードボードを元に表紙をデザイン

ムードボードである程度方向性が定まってきたので、早速Illustratorを開き、デザインしていきます。

私は新卒の頃から、「デザインはとにかくアイデアを出し作りまくれ。じゃないと良いアイデアが出ない。とにかく作って壊して作って壊してまた作るんだ」ということを耳にタコが出来るほど聞かされていました。とにかく思いついたアイデアを思いつく限りアウトプットするぞ!という気持ちはありました。しかし今回に限り、最初に描いたものがすごく良く…。

あー、もう、これだ!となりました。ということでここから先は本当に爆速で、イラストを描き、レイアウトを組み上げていく作業へ移りました。

執筆人数は多くなかった為、チームメンバーひとりひとりが、愛着を持てるような、そんな表紙にしたかったので、ひとりひとり、丁寧に動物に落とし込んでいきました。

また、今回タイトルはMERYの裏側を大公開、ということで『INSIDE MERY』というものが既に決まっていました。INSIDE感も欲しいなと思いつつ、レイアウトを組み上げていきました。そして出来上がったのがこちら。

INSIDE MERY vol.1

イラストは、リアルな動物に寄せつつ、色味を足さなかったり、必要以上に書き込まずラフな雰囲気が出るように。また、線を少し太めにしてポップな感じに。カッチリとしながらも、少しゆるさの出るイラストに仕上げました。

色味は、MERY社のニュートラルな雰囲気(白・黒)と、開発部の、青、緑といったクールな印象を受けるものを合わせた雰囲気に。

レイアウトは、枠の中に動物たち(開発部メンバー)を入れることにより『INSIDE』感を演出。

あしらい一つ一つに意味付けをきちんとすることで、自分でも、今までで一番納得感があるものになりました。また開発部だけでなく、他部署メンバーに説明する際にもきちんと『伝わる』デザインになっていて、すごく評判が良かったのを覚えています。

法務チェック

実は結構序盤…企画段階から法務の方と相談しながら、動いているプロジェクトではありました。理由としてはMERY社として初の試みであるということと、最初に書いた懸念の

  • MERY社としての開発部を対外的にどう見せて行くか?
  • 現状の部署の雰囲気と寄せつつ、MERY社とどう絡めていくか?

こちらの表現によっては、よくも悪くも影響が出る可能性があった為、慎重に、丁寧に、根幹やスタンスをしっかり練り、対応を考える必要がありました。ですので序盤から法務の方に入っていただき、

  • MERY社の開発部、サブブランド的な立ち位置で出版するものとする。
  • プロダクトのMERYを侵害しない、又似通ってユーザーを混乱させるデザインにしない。
  • MERY社が公式で出版している、ということが明確に分かるようにする。

というところは決まっていました。ですので上記の条件がきちんと守れているデザインになっているか、いわば最終チェックを法務の方と行い、無事にOKをいただきました。

完成

というわけで無事に完成したINSIDE MERY vol.1。続いて技術書典7で頒布したINSIDE MERY vol.2はこちら。

INSIDE MERY vol.2

『シリーズとして続いていくといいな』という願いも込め、季刊誌っぽく、出展する季節に合わせて、秋の装いにしました。線イラストではなく、フラットな表現にも挑戦。意外にもしっくりきたので、フラットな感じも有りだなと手応えを掴む表紙に。

次回の技術書典8にも新刊を提げ、出展する予定だったのですが、残念なことに新型コロナウイルスの影響で中止になってしまいました…。紙での頒布時期は未定ですが、INSIDE MERY vol.3の表紙はこちら。

INSIDE MERY vol.3

LGTMをたくさん生み出してもらえるよう(開発スピードがもっと上がりますよう)、LGTM農場というテーマで、立体感ある表紙にしました(立体感は個人的にやってみたいイラストだったので、完全に個人のやりたいベースになりつつあります…)。

最初の『本の表紙って、どんな表紙がいいんだろう?』から、いつの間にか開発部のブランディングになっていた。

途中でブランディングの話をちらほらしてしまいましたが、発端は技術書典の本の表紙をデザインする、というものでした。ですが、本の表紙から派生して、いつの間にかMERY社開発部のブランディングを考えるようになり、社内ではヤギといえば開発部、といった形で浸透していきました。いつの間にか開発部のアイコンとして定着しつつあります。

『動物』という親しみやすいアイコンを使ったことで、『かわいい』が広がっていった

本の他にも、頒布する際に一緒にお配りするノベルティを作成する機会も同時にありました。ステッカーからはじまり、トートバッグ・パーカー・Tシャツ・コースター…さまざまなものに展開していきました。

次第に社内からも「かわいい」「買いたい」「欲しい」といった声をちらほら聞くようになったり、社外との打ち合わせで開発部お手製Tシャツを着ていったりすると、「かわいいですね!どこのですか?」といったお声をいただけたりしました。

最初に考えていた『本の表紙って、どんな表紙がいいんだろう?』というところから、いつの間にか開発部が、プリティなアニマルで表現される部署になっていました。

今後の展開

ありがたいことに評判が良いのでECを始めようかなと考えています。協力してくださる会社さん、もしいらっしゃいましたら、ぜひご連絡ください。

chinami.kamio

chinami.kamio

餃子が大好きなUIデザイナー

トップへ戻る