こんにちは！デザイナーの渡邊です。
今年の5月に入社し、UIデザイン業務などを担当しています。リモート下でチームメンバーとなかなか直接会えない状況ですが、毎日楽しくお仕事させていただいております！
そんなリモート中でも、活発に新たな知見を得たり情報交換をしていこうと、BASEでは『BDI NIGHT』という勉強会を行っています。
今回は『BDI NIGHT』ロゴの制作過程についてお話します！
そもそも『BDI NIGHT』とは？
2018年の秋頃から活動している、BASEのデザイナーがやりたいことを持ち寄って、デザインに関する幅広い知見をみんなで楽しく学ぶことを目的とした任意参加の社内勉強会です。 デザイナーだけでなく誰でも参加することができ、時々PMやエンジニアが覗きにきてくれることも！
『BDI』は「BASE Design Inspiration」の略。Inspirationの名の通り新たなひらめきにつながる新しいトピックを取り上げることも多くあります。
『NIGHT』がつく理由は主に夜に開催されること、また仕事よりちょっとリラックスモードで、お酒やお菓子などを片手に気軽に参加してほしいなという想いからついたそうです。
今までに行ったBDIの例だと
- Figma講座
- フォントかるた
- webレイアウトトレース
- アプリトレース
- 内製UIコンポーネントライブラリ「bbq」のロゴを作る
- Instagramのデザイナードキュメンタリーを見る
- 開発ブログの微妙なとこ洗い出し
- カスタマージャーニーワークショップ
などなど....勉強だけでなくコミュニケーションの場としても活用しています。
『BDI NIGHT』のロゴをつくろう！
BDI NIGHTのお題としてこの勉強会のロゴを作ることに。ロゴ決定までの全３回を振り返っていきます！
1.BDIを知る・分析する
DAY1では新入社員の私が参加するということで、改めてBDIについての概要を教えていただきました。
その後、BDIをどう思っているか、どんな場にしたいかを明確にするためにmiroを使ってブレストを行いました。
ざっくりとですが「自由度の高さ」や「わいわい感」「敷居の低さ」などに関わるキーワードが多めの印象でした。
「なるほど、堅苦しさや過度なアカデミック感を出すと温度感がズレてしまうかも...？」などの見当がつき、BDI初参加の私にとって大いに参考になるありがたい時間でした。
2.デザイン制作
第1回の後半〜第2回はみんなで作業タイム。 zoomを繋ぎ、雑談しながら資料探しやラフ作業などを進めていきました。
個人的にですが人と話ながら作業をするとかなり手が進みます！特にラフなどの精密さよりも量や勢いが必要な作業は特に...。オフィスなら何気なく隣の人とお話したりできますが、リモート下だとこういったコミュニケーションも少なくなっていたので、久しぶりの感覚でとっても楽しかったです。
私のデザインの進め方
デザインの進め方は人それぞれですが、一例として私の進め方を紹介します！
- とりあえず資料をpinterestで集め
- 「なんかいい感じなの作りたい...」ぐらいのゆるい感覚でロゴを眺め観察します
- 「BDI」と短いアルファベットなので、文字そのものにユーモアな図案が加わってるものorグラフィック主体のロゴじゃないと持たなそうだな....など考えながら見当をつけてピンしていきます
- BDIのらしさを演出するアプローチを複数考えながらラフを書く
- ラフを出す際は似たような案が並ばないよう、がっつり見た目が変わることを意識します。アプローチから全然違う考え方にするとアウトプットがばらけて良い感じに！
- インパクトある象徴的なグラフィックをメインにしたい→ひらめきの象徴の電球を使いたい、それだけだと情報量すくないので、手を入れたり背景に星空いれたり...
- 勉強会であることをアイコン化したい→知見を得る....インストールアイコンとかを落とし込む？先進感・シンプル・ラボっぽさ
- 勉強会なんだけども、敷居を低くしたいという意志を汲みたい→BARとかお酒みたいな夜の楽しいプライベートな雰囲気
- ラフを出す際は似たような案が並ばないよう、がっつり見た目が変わることを意識します。アプローチから全然違う考え方にするとアウトプットがばらけて良い感じに！
ラフを書きながらもpinterestに戻って、どうやったら想像してる図案がうまいこと収まるのか、参考資料を集めたりを繰り返します。
ラフはipadで書いてます。
- 気に入った案をブラッシュアップしながら、オリジナリティを担保する
- 資料をいっぱい見ながら書いていると、資料にデザインが似てくることがかなりあります。他のデザインと差別化できるオリジナリティを加え、影響を受けていると思われる資料からはリスペクト精神を持って意識的に離していきます。
トレスやレイアウトの一致などのトラブルが起こらないよう、パーツは01で手書きで書き起こしたりします。
イラストレーターで整え、仕上げ加工などする
Aiを使ってガッツリ詰めていきます。基本的にはモノクロで制作→コントラストがあってちゃんと視認できるかチェック→着彩の順に進めています。
- 打ち文字をそのまま使うことはせず、基本的にはアウトライン化してバランスを見ながら調整します。
3. お披露目&投票タイム
最終回でメンバーの案をお披露目！各案にコンセプトを添えて、自身の作品を紹介していきました。1つのお題でも製作者によって全然解釈が違い、個性的なロゴが集まりました。
各自コンセプトを発表した後、１人３票で好きなロゴに投票する形で決定しました。
最終的に投票で私の案が選ばれました...！ありがとうございます...！
採用されたロゴ
結果、こちらの案が採用されました！BASEの象徴ティピからひらめきを外に向けて発信するイメージの図案です。グランジの加工を施し、ティピ×夜=ナイトキャンプな雰囲気に仕上げました。
グランジ加工はwebにおいてはあまり相性が良くなく、サイズによっては潰れてしまうこともあります。 グランジは私の好みで付けた点でもあるので、どんな環境でも快適に使ってもらえるようにグランジ無しverと横組verも用意しました。
また、slackのコミュニケーションのために小さくても視認性をある程度保った絵文字verも用意しました。割と好評でうれしかったです！
まとめ
普段UIデザインの仕事がメインの中、他のメンバーのグラフィックデザインを見れた事が新鮮でとっても楽しかったです。発想も１人１人全然違い、自分では考えつかないような素敵な案が沢山出ていました。 UI/UXと違ってロジカルには解決しづらいグラフィックデザイン領域ですが、こういった解釈の広がりを見ると明確な答えがないからこその面白さを改めて実感します。 柔軟な発想力を持って、これからも色々なデザインにチャレンジしていきたいと思います！次のBDI NIGHTが待ち遠しい...！
