Goodpatch Tech Blogの寄稿者へ送るピンバッジのデザイン秘話と、宝石モチーフに込めた想い
こんにちは！22卒UIデザイナーの菅原です。
Goodpatchには、デザインを中心としたオウンドメディアGoodpatch Blogのほかに、エンジニアが気になる技術トピックについて執筆するTech Blogがあります。エンジニアリングとデザインを繋ぐ取り組みに共感してくれる方に向けて発信を行なっています。
Goodpatch Tech Blogの編集チームは有志のエンジニアメンバーで成り立っており、その目的を達成するべく、記事を寄稿するメンバーを増やし今以上にTech Blogの発信力を強めたいと、テックブログ編集部から打診がありました。継続的に社外へ発信する体制を整える一環として、参加賞として半期ごとに寄稿者へピンバッジを贈呈することになり、今回私はそのデザインを手がけることになりました。
これを読んだ人に、ハートを揺さぶるデザインプロセスの一例をご紹介できればと思います。
宝石をモチーフにしたデザインコンセプト
ピンバッジのコンセプトは、「一つの結晶体を世に出した功績を讃える」
宝石をモチーフにしています。一瞬で宝石ができるわけではないように、Blogの寄稿される記事もこれまでの努力や時間が詰まって世にでます。
そういった一人一人の努力が宝石のように輝き、そしてその宝石がたくさん溜まっていくことでTech Blogが一つの宝箱（＝みんなが価値や魅力を感じて、喜んで覗きたくなるような場所）になることを目指しました。
また、ピンバッジを受け取ったエンジニアの書くモチベーションが上がり、ただ記事を書くのではなく、世に対して価値のあるものを届けているんだと再認識できるようなピンバッジを作りたいと思い、宝石をモチーフにデザインしました。
1 モチーフ発散・方向性決め
先ほど、宝石をモチーフにコンセプトを考えました！と書きましたが、最初からそこまで考えられた訳ではありません。最初は「集めたくなる、もらってテンションが上がるピンバッジにしたい！」というふんわりとした指針を持った状態で案を考えました。
では一体それはどんなデザインなのか。深ぼるために世の中にあるピンバッジのデザインを色々見てみます。高級感のあるピンバッジはどんなデザインなのか、かわいいピンバッジは何からそう感じさせるのかなど、分布図に分けて傾向別に分けてみます。
具体に寄せすぎると、シリーズ化させにくいこともあるので今回は抽象的な表現かつ、スタイリッシュでかっこいいピンバッジがなんとなく良さそうとあたりをつけておきます。
今回のピンバッジは一回でて終わりではなく、次また別デザインを半期ごとに作っていきます。なので連作として違和感のないモチーフ探しを分布図作りと同時に進めました。キャラクターや星座、花、宝石などの連作にしやすいものをラフでピンバッジに落とし込んでみます。宝石であれば石言葉、花で花言葉などピンバッジをもらった人へのメッセージも意識しながらモチーフを選びました。
エンジニアや他のデザイナーと相談し、先ほど分布図であたりをつけていた、抽象的かつ高級感のあるピンバッジに合いそうな宝石案に決定。次に抽象的な表現を模索します。
2 グラデーション表現の模索
宝石の方向性が決まったので、まずはあまりルールを考えずに形やグラデの良し悪しを模索してみます。この段階では宝石特有のカット感ではなく、グラデーションを用いた輝きの表現を中心に試しています。
ちなみに使用している色は、モチーフにしている宝石の色から持ってきています。赤のデザインは「アゲート」という宝石で意味は「勇気・行動力・成功の象徴」。青のデザインはアイオライト、「目標に向かって前進する」という意味を持っています。選ぶ宝石も、ブログ寄稿者の行動を讃える意味に則した宝石を選定しました。
3 フォルムの模索とルール作り
今後シリーズ化をしていくことを考えると、何かしらデザインにルールがあることでより世界観やデザインに統一性が生まれます。「色味は元になる宝石から抽出してくる」だけでなく、「形は規定のグリッドの中から作り出す」というルールも追加して形を模索していきます。
ある程度形を出した段階で、グラデーション表現も試行錯誤を繰り返します。単なるグラデーションと言えど、少しの調整で大きく印象が変化するので何階調にすると綺麗か、形に適した表現は何かなどは複数個並べて判断していきました。
また、ピンバッジは手元で持つと意外と小さいものです。数センチの世界に、どれだけ世界観を吹き込むことができるかが肝になるので、実寸サイズで出力したりして色味や階調の良し悪しを見ていきます。
4 コンセプトストーリー作り
ここまでビジュアルを出した段階で、次に「何を持って良いビジュアルと言えるのか」の軸（＝コンセプト）を設定しておく必要があります。今まではふんわりとしか考えていなかった、「これを受け取ってくれる人にどう感じて欲しいのか」を言語化しブラッシュアップの 方向性を固めていきます。
なぜ僕は宝石をモチーフにピンバッジを作っているのか。宝石をモチーフにしたデザインで何を伝えたいのかを言語化していくと、宝石とTech Blogの共通項が自分の中で見えてきました。
一瞬で宝石ができるわけではないのと同じで、ブログも一瞬でできるわけではない。長い年月やそれまでの努力が募って初めて世に出ます。そうした一人一人の努力の結晶を讃えるピンバッジだからこそ、宝石（結晶）である必要がある。そしてそんな記事がブログ内に集まっていく様子が、まるで宝箱のように誰かにとって価値のあるものになってほしい。うんうん、自分でも納得のいくコンセプトストーリーが作れたと思います。
また、初めから言葉で固めすぎずにまずは手の赴くままに表現を作ってきたおかげで、自分の中で作りたい世界観がぼんやりとあったのが言語化のしやすさに繋がります。。初めからコンセプトを生み出すにもある程度模索的に作ることが重要だと改めて実感できたタイミングでもありました。
5 宝石のカット表現の模索
コンセプトを固めたおかげでビジュアルを決定する軸が決まりました。コンセプトがある上で、また違う表現を試してみます。（自分が作ってきたものを相対的に見るため）
次は、より宝石のカット感が出るようグリッドの重なりから生まれる面ごとに色を切り替え、それをカットとして表現する宝石案を進めます。宝石のモチーフをさらに出して計6個で見た時の統一感を見たり、カットの数や配置する色の濃さを全デザインで共通させて、シリーズとしての強度を強めます。
ここまで作り、宝石のカット案とグラデーション案の2つができた後、メンバーチェックをします。初めに固めていた抽象度・気品さなどを加味して最終的にグラデーション案に決定です！！※次回以降のグラデーション案はシークレットにしてます
完成！
ピンバッジは、ピンズファクトリーにて製作していただきました。小さいながらに存在感のある雰囲気がでています。また、ピンズファクトリーでは通常コート紙なのですが、よりピンバッジの雰囲気に合わせたいとお願いをしてマットめな台紙に変更していただきました。おかげでより高級感の溢れるピンバッジになりました。
裏面にはモチーフとなった宝石と、宝石のもつ言葉の意味を記載しています。第一弾のアゲートは「勇気・行動力・成功の象徴」。ブログに寄稿してくれた行動力や、勇気を讃えるピンバッジです。
服につけてもよし。バッグにつけてもよし。シリーズを揃えて飾ってもよしのピンバッジができました。
また、エンジニアの方だけでなく社内メンバーからも「欲しい」「Tech Blog書こうかな」という反応もたくさんいただきました！
最後に
元々、今回のピンバッジのデザイン制作依頼は「1個のみ」作る予定でした。ですが、ルールやモチーフの宝石も一個一個デザインしていたので、一番コンセプトと想いが詰まったこの宝石シリーズを3年間自分のデザインで展開したい！とお願いをしてシリーズで作らせていただくことになりました。今後どんなピンバッジが出るかお楽しみに！
以上、ピンバッジの制作プロセスでした。サポートしてくれたグッドパッチの皆さん、ここまで読んでくださった皆さんありがとうございました！
最後になりますが、グッドパッチでは一緒にデザインでハートを揺さぶりたい方からのご連絡をお待ちしております。
【Design Div】UIデザイナー
【Design Div】Androidデベロッパー