SORACOMUG Explorer のデザインを作りました

2018年9月17日

SORACOM UG Explorerのメインイメージ画像とTシャツ用のロゴリライトをさせていただきました。
裏話とともに紹介致します。

いざプレゼンしろと言われても大丈夫なようにプレゼン資料から書きます。
宿題は出される前に終わらすタイプですね\(^o^)/
「くろにゃんこたんが早すぎる」的な

以下自己紹介です。

小ネタですが、会う人によって地図の縮尺を毎回変えてます。
インパクトしか無いプレゼンツールなので、細かいところは大事にします。

また、この猫のキャラクターはオリジナルです。
マーケティング分野でも結構ホットではありますが、キャラクターの方が話しかけやすいので実名出しというよりキャラクターで勝負しています。

登場して実はもう10年位になりますが、ようやく浸透してきた感じがします。

個人事業主あるあるの紹介です。
当然毎回毎回これを全部担当するわけではないので、プロジェクトによりけりです。

ここ数年はフロントエンジニアが多めですね。Vue.js初心者です。
PSDを頂いて、コーディングというのもよくやります。

A-SIDE

今回は大きく分けて2つ制作したので、ABで分けてみました。

1つ目はロゴです。
今回はTシャツというキャンバスに「Explorer」という文言と宇宙飛行士のイラストを入れることが命題でした。

ロゴ

一色です。
今回印刷物でしかも布地なので、線の太さ(大体0.1mm単位はNGでる)に気を使い大幅に修正を加えています。

現状ロゴとの比較です。
僕は「User Group JAPAN」の線の細さが好きなのですが、今回は太め。

「Explorer」の文字を入れたので、バランスを考えて「UserGroupJAPAN」は外し、◇(ひし形)になるように調整しました。

なんとロゴのタイプも変更しました。
ライセンス上「SORACOMUG」と明記されていれば、好きに加工しようが二次配布しようが、売ろうが勝手でOKということにしていますので、もちろんフォントも変更OKなのです。

ちなみに皆様恐る恐る御報告いただくのですが、ロゴの改変などに許可を求める必要はありません!
でも作ったよーと事後報告していただくのは本当に嬉しいです(´ω`)

今回は「Futura」を使用しました。
「Future」の捩りですが、深い意味については下記サイトへ
書体を知ろう:Futuraの驚くべき過去

超深い。
これ以上の意味のあるフォントは無いんじゃないかと思うくらいベストです。
ちなみに有料フォントですが、TypekitでもFutura PT が同期出来るので使いやすさに問題ないかな(´ω`)

この違いに気づいた人いるのかな(´ω`)

画像は開発途中のものです。
胸のワンポイントを想定していました。
ちなみにSUZURIで売っています(´ω`)

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//suzuri.jp/thirdparty/widgets.js”;js.charset=”utf-8″;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”suzuri-widget-script”);

取り分多めに設定していますので、もし欲しい方がいれば個別にご連絡ください。(少し安くします(笑))

ちなみに実際のものはこちら!

メトロブルーでお腹にどーんとロゴが入りました。
やっぱり上着などを羽織ったときに隠れないようにしたいのでイベント利用の場合大きいほうが分かりやすいですよね(´ω`)

形になるのってホント嬉しいものです(´ω`)

イメージ画像

さてB-SIDEです。

どーん(´ω`)

いかがでしょうか?結構勢いにまかせて作った感じはしますが、

「宇宙感全振り」で自由に作ってみました。
しかも肝心のロゴなんて半透明ですよ半透明。全然扱いが雑じゃないですか。
まぁこれくらいでイイんです。という意思表明でもあります。
出来ればどんどん改変してもらいたいものです(´ω`)

コンセプト

まぁ宇宙です。と言われればそうなのですが、

◯ロゴの中心と、星が円になっている部分がズレています。
SORACOMのサービス自体が、いわゆる中継なんですよね、モノと人との。なので目的地に到着してしまうよりは到着寸前をイメージしてあえてずらしました。

◯ロゴ付近
線を引いているのはそのまま「Beam」です。
ビームは光線なので、曲がらず一直線に向かっていくイメージを入れています。

◯ロゴ付近2
実はピンクの星が一つだけあります。
宇宙感満載ですが、ここだけは「人の心」を入れています。安直な言い方をすれば「君に届け」ですね。

◯ロゴ付近3
実は惑星とビーム付近に天の川のような雲を入れています。
(コントラストで気づくか微妙ですが)
SORACOMのイメージとして速攻LTEビームだけではなく、SigfoxやLoRAWANなどの省エネ通信もいっぱい合った上で成り立つようにというイメージも隠してあります。

◯画像下
普通に地球だと思いますよね。
まぁ、地球なのですが、CGのマップデータはちょっと浮かせています。
ベタな考えかもしれませんが、地上の基地局だけでは完結せず、衛星も含めてデータが成り立っているというイメージを込めて、成層圏程度に浮かせています。

◯ロゴがなんで半透明?
レイヤーモード「加算」です。みんなの力が「加わる」ことで成り立っているということです。

今回イベントのプレゼント用に壁紙も作りました。
なので納品物としては、
イベントメインビジュアル、FacebookOGP、Twitterカード(メディア、記事サイズ)、壁紙(4k、FullHD、スマホ大・小)と結構多岐に渡りました。

イベントに参加された方は忘れずにダウンロードしてくださいね(´ω`)

小ネタ

4K画質限定なのですが、ちゃんと4Kテレビで見てみるとこんな感じです。

家庭に存在するのでちょっとごちゃっと写り込んでおりますがご容赦ください。
ってそこではなくて、実はロゴをよく見てみると、、、

分かりますかね?
実はロゴに歯車の構造図を入れています。
これは4K壁紙だけでしか見られないものです。(じゃないと潰れちゃう)
他の画像には仕込んでいないので、透かしのようなものですね(笑)

込めたイメージは唯一つ。

「みなさまの生活がうまく回りますように」

最後まで読んでいただきありがとうございます!

みんなで盛り上げていこうぜ!