こんにちは、UIデザイナーの菅原です。

グッドパッチが手がける“デザインシステムのためのデザインシステム”、「Sparkle Design」。みなさん触っていただけましたでしょうか?

今回はSparkle Design制作秘話の第3弾として、私がこのデザインシステムの想いやコンセプトをロゴにどのように落とし込んだのかをお話しします。

単なる便利さを追求するだけでなく、私たちが目指す世界観を深く掘り下げた骨太なデザインシステムに込めた想いを、どのようにビジュアルに反映させたのか。この記事を読んで、少しでもSparkle Designを好きになっていただけたら嬉しいです。

Sparkle Designとは

Sparkle Designは、グッドパッチが開発したデザインシステムです。

Sparkle Designは、毎回繰り返される作業を代替し、デザイナーが本来向き合いたい、ユーザーの心を揺さぶるような創造的なデザインに集中できるように、「速く、良いモノ」を作るサポートを目的としています。

詳しい制作背景や特徴については、こちらの記事をご覧ください。

ロゴデザイン

 

Sparkle Designは、長期間にわたって使用されることを考慮し、シンボルとロゴタイプの2つの要素から成り立っています。これにより、オーソドックスでありながらも、時代を超えて愛され、使われるデザインシステムであることを表現しています。

シンボル・ロゴタイプの解説に入る前に、まずグッドパッチの「青い炎」について少し説明します。この「青い炎」は、グッドパッチのメンバーらしさやその人に宿る精神性を表すために、社内でよく使われる言葉です。青い炎は、最も温度が高い炎とも言われ、一見クールに見えるものの、実は熱い想いを秘めている様子を表現する際に使われてきました。

Sparkle Designは、グッドパッチがこれまで向き合ってきたクライアントの課題やプラットフォーム事業を通じて得た知見、そしてデザイナーがデザインを作る上で燃やし続けてきた「青い炎」を集約して生まれたものです。

そのため、Sparkle Designのロゴにもこの青い炎やグッドパッチの要素を取り入れることにしました。

ブランドコンセプトからデザインコンセプトへ

ロゴを作成するにあたり、メンバーがどのような想いを持っているのか、また誰のどんな未来を描きたいのかを制作メンバーにヒアリングしました。その結果を基に、ロゴの構想を練り上げていきました。

Purpose(社会的意義): 世の中にいいプロダクトを増やす。ハートを揺さぶるデザインを世界に増やす。 Vision(理想の未来): グッドパッチの手が届かないところでも、いいデザイン・プロダクトを生み出せるようにする。 Mission(ソリューションが担う役割): ・誰も“速く、良いもの”をつくるためのジャンプ台をつくる。 Value(価値観・行動基準): ・自分たちのノウハウを惜しみなく注ぎ込む ・最強のアセットをつくるのではなく、顧客中心 ・顧客の資産として残るソリューションを提供する

ヒアリングを通してどんな世界にしたいかを整理します。すでに作成中だったパーパスなどを照らし合わせ、まずはSparkle Designというブランドのコンセプトを明確にします。

モチーフやキーワードを絞り込み、デザインコンセプトに落とし込んでいきます。

Sparkle Designの目指すべき目的は、「ハートを揺さぶるデザイン」を増やすことです。これは、デザイナーの創造力がなければ始まりません。素早く良いものを作り上げた先に、デザイナーが本当に作りたかったクリエイティブなデザインや創造力が弾けます。その煌めく瞬間こそが、Sparkle Designの価値が発揮されるときです。

この点に着目し、デザインコンセプトに「良いものをすぐに提供できる瞬発力」「デザイナーの創造力を開花させる爆発力」、そして「プロダクトに合わせて適応し続ける持続力」の3つを置きました。

シンボル

シンボルには、Sparkle Designが目指す未来、「ハートを揺さぶるデザインを世界中に広める」という想い、先ほど述べたデザインコンセプト、そしてロゴストーリーを込めています。

「Sparkle」は日本語で「煌めく・煌めかせる」という意味があります。デザインシステムがあれば、デザイナーがこれまで作りたくても実現できなかった、創造力に満ちたクリエイティブな時間や基盤を迅速に構築できます。デザイナー一人ひとりの持つクリエイティブな火種が光り輝くことを願い、火花をモチーフにしています。

さらに、Sparkleは「Spark(火花が散る)」と「le(繰り返す)」の二つの要素が組み合わさった言葉です。デザインシステムは、組織やサービスの想いと共に常に進化し続けます。プロダクトとして目指すべき方向に応じて、煌めき方を変化させるという思いも込めています。

ロゴストーリーは、先ほど紹介したグッドパッチの青い炎からインスピレーションを受けて作られています。グッドパッチの知識が火種となり、Sparkle Designとして、デザイナーの創造力を輝かせる形を浮かび上がらせています。

このストーリーはラフスケッチを描くところから構想しています。スケッチも単に美しい形を作るのではなく、ロゴがどのように生まれたのかというストーリーを考えながら進めました。どのように輝き、変化していくのかを意識することで、最終的なデザインに説得力が生まれるためです。

ロゴの方向性が見えてきたところから、ディテールを詰めていきます。Sparkle Designらしい煌めき方を考えながら、さまざまなパターンを展開していきます。

Sparkle Designは常に変化し、良いものをすぐに提供する価値があります。そのため、「重たい雰囲気ではなく、光の数を減らして軽やかさを出そう」といったように、最初に決めた想いやコンセプトを基に見た目を調整していきました。

ロゴタイプ

ロゴタイプは、あらゆるサービスやプロダクトの基盤となる「皿」のようなニュートラルさと読みやすさを重視しています。同時に、Sparkle Designが持つ輝きや、素早く形にするシャープさも表現したデザインに仕上げています。

書体はMont Blanc-Trialを基にしつつ、Lexendの特徴を取り入れて調整されています。ロゴのディテールには、シンボルの傾きを10°に設定し、全体の統一感を持たせています。また、「p」のstem(ステム/縦画)を短くすることで、重心が安定して見えるようにし、デザインシステムとしての安定感を表現しています。

想いをクリエイティブに展開

ロゴを作ったあとは、そのデザインコンセプトをLPやプラグインアイコン、その他クリエイティブにも反映していきました。

 

私が個人的に作ってよかったと思うのは、制作チームのメンバー向けにデザインしたアクリルキーホルダーです。Sparkle Designの原型であるSparkleというネーミングが完成した際、制作メンバーへの感謝の気持ちを込めて作成しました。

ただ必要なものを作るだけでなく、メンバーを励ましたり、このプロダクトを作ること自体に意味を改めて見出したりするために、一人一人の「青い炎」を表現するアイテムとして、このようなグッズを展開することはとても意義深いと感じています。

 

終わりに

Sparkle Designに込められた想い、伝わったでしょうか?Sparkle Designが「もっと速く、もっと良いモノをつくりたい」と願うすべてのデザイナーやチームの力になれたらうれしいです。

Sparkle Designについてもっと知りたい方はぜひ以下のリンクを見てみてください!

Sparkle Designを詳しく知りたい方はこちらから