みなさま、こんにちは。
GIRL'S TALKのデザインを担当している、見上です。
作業のほとんどをIllustratorで行っています。
今回は、女性たちの衝撃的なホンネあふれるサービスの世界観の作り方について、お話ししたいと思います。
恋愛、ナイトライフ、ココロやカラダの悩み...
「誰かに話したい、けど話せない」そんな悩みを抱える女性達のために生まれたサービスです。
ということで、早速詳しいお話に入ります。
GIRL'S TALKのメインターゲットは、20代後半～30代前半の女性。
単純に彼女たちを連想する色の取り入れ方をすればいいわけでもなく、
彼女たちが手にとる雑誌やウェブサイトにならえばいいというものでもありません。
いつ、どこで、何を片手に「ガールズトーク」をするのか？
生身の女性たちがガールズトークを繰り広げるとき、心の中はどんな色なのか？
固定された概念との距離を保ちつつリアルなイメージを分解してスマホの画面にあてはめています。
『可愛過ぎず飽きがこない、シンプルだけど悪い事してる感がありテンションが上がる』
シンプルでテンションが上がる…なんだか矛盾しているようにも感じますが、
あくまでも文字が主役という軸をしっかりと、これを具体的なイメージにしていくと
①お花モチーフ、キラキラ、ぷるぷるを排除して可愛さをおさえ
②質感は吸い込まれるようなマット。落ち着きを持たせ目に優しく見飽きないように
③使用色、エフェクトは控えめに、シンプルなオブジェクトの重なりで奥行きをもたせ
④アイコンやバナーのカラー選定でネオン光る夜の街を歩くワクワクとソワソワ感を演出
（都合よく解釈したみたいですが）こんな感じ。
▲ベースはグレーのみ。際立たせたいポイントにしぼって色をさし込みます。
▲アイコンに使用する色もマットに。柔らかいグラデーションでぼんやり光る印象に。
光らせすぎ、膨らましすぎ、派手すぎにならないよう注意し、ちょっと地味かな～と思う程度に存在感を落としてデザインするよう心がけています。
メリハリを持たせ、一つ一つのオブジェクトに存在感を持たせるため、奥行きを大切にしています。
たとえばボタンや見出しのあしらいについて
↓
これらの平面的なオブジェクトたちを重ねてみると…
↓
こんな感じ。
複数のオブジェクトを重ね厚みを持たせる事で、スマホの画面×文字の世界という平面に奥行きを持たせます。
奥行きを持たせることで情報を整理し、的確な優先順位をユーザーに示す事が出来ます。
全体的には実は地味な作りですが、バナーにだけ艶をだしてぷっくりさせるだけで、サービス全体に瑞々しさが行き渡ります。
たった一つのバナーがサービスの雰囲気を決める大事な要素になるため、たかがバナーと思う事なくこだわって作ることをとても大切にしています。
世界観に好評をいただいているGIRL'S TALKですが、リリース当初からほぼ変わらない世界を維持して来れたのは、プロジェクトメンバーがユーザーの目線に近づくよう心がけてきたことが大きかったと思います。
ユーザーを見るのはもちろんですが、「ユーザーと共にサービスを見る」ということを忘れないよう心がけていきたいと思います。
是非、女のホンネをのぞいてみてくださいね♡
GIRL'S TALKのデザインを担当している、見上です。
作業のほとんどをIllustratorで行っています。
今回は、女性たちの衝撃的なホンネあふれるサービスの世界観の作り方について、お話ししたいと思います。
GIRL'S TALKとは
女性限定完全匿名掲示板サービス「GIRL'S TALK」は恋愛、ナイトライフ、ココロやカラダの悩み...
「誰かに話したい、けど話せない」そんな悩みを抱える女性達のために生まれたサービスです。
ということで、早速詳しいお話に入ります。
ユーザーだけを見すぎないこと
サービスのターゲットをしぼりこみ、いざ、デザインをする段階で目を向けるのはどこなのか。GIRL'S TALKのメインターゲットは、20代後半～30代前半の女性。
単純に彼女たちを連想する色の取り入れ方をすればいいわけでもなく、
彼女たちが手にとる雑誌やウェブサイトにならえばいいというものでもありません。
いつ、どこで、何を片手に「ガールズトーク」をするのか？
生身の女性たちがガールズトークを繰り広げるとき、心の中はどんな色なのか？
固定された概念との距離を保ちつつリアルなイメージを分解してスマホの画面にあてはめています。
コンセプトを紐解く
たどり着いたデザインコンセプトは、『可愛過ぎず飽きがこない、シンプルだけど悪い事してる感がありテンションが上がる』
シンプルでテンションが上がる…なんだか矛盾しているようにも感じますが、
あくまでも文字が主役という軸をしっかりと、これを具体的なイメージにしていくと
①お花モチーフ、キラキラ、ぷるぷるを排除して可愛さをおさえ
②質感は吸い込まれるようなマット。落ち着きを持たせ目に優しく見飽きないように
③使用色、エフェクトは控えめに、シンプルなオブジェクトの重なりで奥行きをもたせ
④アイコンやバナーのカラー選定でネオン光る夜の街を歩くワクワクとソワソワ感を演出
（都合よく解釈したみたいですが）こんな感じ。
▲ベースはグレーのみ。際立たせたいポイントにしぼって色をさし込みます。
▲アイコンに使用する色もマットに。柔らかいグラデーションでぼんやり光る印象に。光らせすぎ、膨らましすぎ、派手すぎにならないよう注意し、ちょっと地味かな～と思う程度に存在感を落としてデザインするよう心がけています。
平面に奥行きを持たせ優先順を明確に
サービスの土台はあくまでも文字の引き立て役。メリハリを持たせ、一つ一つのオブジェクトに存在感を持たせるため、奥行きを大切にしています。
たとえばボタンや見出しのあしらいについて
↓
これらの平面的なオブジェクトたちを重ねてみると…
↓
こんな感じ。
複数のオブジェクトを重ね厚みを持たせる事で、スマホの画面×文字の世界という平面に奥行きを持たせます。
奥行きを持たせることで情報を整理し、的確な優先順位をユーザーに示す事が出来ます。
衝撃をひとつだけ
GIRL'S TALKを危険であやしげに見せているのは、他でもなくバナーです。全体的には実は地味な作りですが、バナーにだけ艶をだしてぷっくりさせるだけで、サービス全体に瑞々しさが行き渡ります。
たった一つのバナーがサービスの雰囲気を決める大事な要素になるため、たかがバナーと思う事なくこだわって作ることをとても大切にしています。
おわりに
最後までお付き合いいただき、ありがとうございました。世界観に好評をいただいているGIRL'S TALKですが、リリース当初からほぼ変わらない世界を維持して来れたのは、プロジェクトメンバーがユーザーの目線に近づくよう心がけてきたことが大きかったと思います。
ユーザーを見るのはもちろんですが、「ユーザーと共にサービスを見る」ということを忘れないよう心がけていきたいと思います。
是非、女のホンネをのぞいてみてくださいね♡
