見出し画像

Kyashの新しいカード「Kyash Card」の、あえてブランディングに沿わなかったWebデザインの話

先日申し込み開始したばかりの「Kyash Card」のWebデザイン(LP)について書きます。

このLPを作ったことはKyashのブランディングとしては大きな出来事で、Kyashのクリエイティブの可能性を切り拓いたと言えるでしょう。

ブランディングにあえて沿わない選択をしたデザインが、製品の良さを表現し、結果的にユーザーに浸透させることができました。
このnoteでWebデザインの方向性、トーンアンドマナーの構築についての考え方の新しい価値観の一つになれば幸いです!

日本では珍しいカードデザイン

僕が入社したときはすでにKyash Cardの構想がスタートしており、いくつかのKyashアプリの搭載機能に先駆けカードデザインだけができあがっていました。

ちょっとポップでパッと明るい今までの印象とは大きく異なり、大人っぽくい、スタイリッシュなカードデザイン。
見た目の表現だけで言うなら、ブランディングから逸れるものでした。
このまま進めるには、あまりにギャップが大きい状態でした。

Kyashとしてまったく新しいプロダクト

Kyash Cardは今までのKyashリアルカード(現Kyash Card Lite)には無かった機能として、ICチップが入り、デザインはガラッとスマートになりました。また同時期に控えたアップデートで、アプリには毎月の支出の上限と、一回のお支払の上限を設定できる「上限設定機能」と、「海外実店舗、オンライン決済On/Off機能」が追加されました。

このリリースはKyashの目指すチャレンジャーバンクの姿に近づくための布石で、Kyash Cardは今後の成長においてとても重要なプロダクトです。
なので関わる全員が「未来感」を表現したい、という意思がありました。

そもそもその方向性でやることが大事なのか?という疑問も現場にはありましたが、カードデザインが放つ雰囲気がそれまでとは大きく異なることからも、プロダクトとして大きく価値観を変えて(変えさせて)挑みたい意思の表れでした。

抽象的なイメージのコンセンサスを取る

しかし未来的な表現を追求するほど、Kyashのブランディングからは逸れていくことも明らかでした。

僕たちはKyashを「ライフスタイルサービス」と考えてます。

これは、Kyashがいち金融サービスとしてお金の扱いが便利なだけではなく、お金の扱いが便利になることによって、日常のさまざまなシーンに豊かにするインフラである、という考え方です。

日常に浸透している・浸透するようすを提示するのがヴィジュアルアイデンティティの根幹なので、安直に「未来」を表現すると伝えたいことが違うものになってしまう可能性があります。

Appleのようにシンプルかつマテリアルな表現を未来的と感じる人もいれば、宇宙船や衛星、またはGANTZ、荒れた荒野も未来かもしれません。
つまり「未来」をKyashのヴィジュアルアイデンティティの中で表現していくことが今回のWebデザインとしての課題となりました。

ただ、聞けば聞くほど泥沼に入ることは明らかだったので、認識合わせの会話と、自分の中の意識整理用にムードボード(*1)を作成しました。
各々の考える表現がどのように違うかを伝えられるように、可視化します。

画像1

これを題材に話をし、目指すべきWebブランディングを絞り込みました。
(「宇宙的な」と「Apple的な」など、見事に分かれていました!)

あえてブランドカラーを使わない

Kyashではブランドカラーを6色定義しています。

画像4

以前のKyashサービスサイト

6色存在することには意味があって、Kyashのマインドアイデンティティを表現するために導き出した1つの答えでした。

これにより、日常のシーンにおいての様々な感情の表現や、ユーザーとのタッチポイントでの訴求を柔軟にすることができます。

ただ、今回の「やりたいこと」と「あるべきの姿」のギャップを埋めるには、視覚に訴えやすい要素である「ブランドカラー」を使わず、ほぼモノトーンにしようと判断しました。
カードデザインや、その世界観の主張を相対的に高められると考えました。

画像3

先行案内ティザーサイト。

リリース情報を配信するメールマガジンに登録していただくことを目的にしたティザーサイトでは、テキストとイラストのみでした。カードを思わせるイラストにはVisa Paywave(*2)とICチップを描きました。
今までの配色をしなかったことでこれらが際立ち、実際に搭載される機能について、SNSでは予想をする投稿が多数。期待感を増してる様子が見受けられました。

その後にカードのデザインやスペックを記載する現在のデザインになりましたが、情報公開を2段階に分け、「やっぱりICチップが!」「デザインがシンプルでよい」など、更に嬉しいリアクションをいただきました。

意図的に「どんなものになるのか」考えてもらうことで、期待値とモチベーションを高めることができました。

「らしさ」の軸の表現を最大化する

Kyashは「ライフスタイルサービス」であると考えているので、街中や人々の生活で起こりうる出来事など、どこか親しみを感じるようなシーンを写真で表現します。

・「色」は脳裏に残りやすいが、表現のうえでは解釈しづらい
・「写真」は解釈しやすい表現ができるが、脳裏に残すためには
 それを軸に置き一貫したデザインをする必要がある

こう考え、「色」を控え「写真」の世界観を相対的に強調することにしました。

画像6

アプリが主体のビジネスである場合、WebサイトにはスマートフォンやUIの画像が並びがちですが、シチュエーションをより写すことを意識しました。

カードの写真だけを撮るためにカメラマンの方(*3)をアサインしていましたが、方向性を伝えた上で無理を言って、このためだけに数カット多く撮影していただきました。(ありがとうございました!)

例えば、
武器である圧倒的にスマートなカードデザインのディテール

画像7

「ライフスタイル」のワンシーンの表現

画像8

画像9

Kyash Cardの反響と今回やったこと

そうして出来上がったLPと、申込み開始されたカード。

進化した機能もさることながら、視覚としては驚くほどシンプルなカードデザインが特徴的。キーヴィジュアルやOG Imageがシェアされ、そのパワーを活用できていたのでは、と感じています。

画像5

申し込み開始日には日本のTwitterトレンドで上位にランクインしました。

ここに至ったのはブランドの根幹や定義を意識しつつ柔軟に可変させた結果だと感じています。

また今回の取り組みをきっかけに、ブランディングにおいてのKyashらしいクリエイティブを見直すきっかけにもなってます。

今回の件で

・決まり事を疑う
・変える
・概念のうえで辻褄を合わせる

立ち回りも、デザイナーの1つの考え方だと感じました。



*1 
デザインのイメージを共有・可視化するための手法。今回のように1人でやったり、関係者全員で行ったりする。
ちなみに今回は「Webサイトやポスターなどデザインされたもの」は極力省いて先入観を減らしてます。
http://photoshopvip.net/87871
*2
Visaカードの非接触決済対応を表すマーク
https://www.visa.co.jp/pay-with-visa/featured-technologies/contactless.html
*3
スライムコーポレーション様に依頼しました。
長年のキャリアの中で熟練されたテクニックと、親しみやすいキャラクターで撮影も和やかかつ楽しく行えました!ありがとうございました。
http://www.slyme.co.jp/

Cover image: Photo by Priscilla Du Preez on Unsplash

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
12
「Kyash」(https://kyash.co/)という、お金の扱いをシームレスに、気軽に、便利にするサービスをつくる企業のデザイナー。オフィスでは月・金曜あたりにハンドドリップコーヒーを淹れています。自分の存在が福利厚生になることが夢です。

こちらでもピックアップされています

Kyash デザイナーブログ
Kyash デザイナーブログ
  • 6本

Kyashアプリやブランド、またフィンテックについてKyashデザイナーの観点で投稿します。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。