100 App Team Blog

半径100メートルのユーザーと気軽に匿名チャットができるアプリ「100(ワンハンドレッド)」のなかのひとたちによるテック x UI/UXデザイン x 企画あれこれブログ。プロダクトをグロースさせる試行錯誤の日々を記録。

カレーみたいなブランディングをしよう

こんにちは、デザイナーインターンのmomokoです。

 

私事なのですが、最近料理をすることにハマっています。

作っていて特に楽しいのがこちら。

 

f:id:momo_rockme:20190124110233j:plain

どん。カレーです。

 

これはこの間初めて作ったスープカレー。

カレールーにナツメグをプラスして作ってみたら、本格的な味に仕上がりました。

素揚げした野菜たちも一緒に盛り付けちゃったりして、おしゃれに。

とっても美味しく頂いてしまいました。

 

 

…開幕早々、なんの話だと思われたかもしれません。すみません。笑

実は、ただただカレーの話をしたいわけではないのです。

私がお話したいのは、「カレー」という「ブランド」(?)の話。

 

近年のカレーブームにより、グリーンカレーやレッドカレーなど、

いろいろなカレーも登場してきましたね。

 

 

しかし、やっぱり「カレー」という単語を聞いて思い浮かべるのは、

お皿の上で、「茶色」と「白色」が絶妙なバランスで拮抗し合っている

そんなイメージではないでしょうか。

 

 

カレーにおける「ブランディング」

 

カレーは誰もに愛される料理ですが、

どうしてみんなそんなに、カレーが好きなのでしょう。

もちろん、あのぴりっとした味がたまらないとか、

お母さんが作ってくれた思い出があるとか、いろいろな理由があるとは思うのです。

 

しかし、カレーにおける「茶色」と「白色」の色彩的なイメージは、

少なからずカレーの人気の理由のひとつになっていると思うのですね。

 

これを「ブランディング」と表現するのが正しいのかは分かりませんが、

カレーの色彩イメージが「美味しそう」という印象につながっている、という点では

あの色彩のバランスは、カレーという料理が人気になるためには

欠かせない要素だったのではないでしょうか。

 

 

若干強引かもしれませんが(笑)、私は100において、

「カレー」みたいなブランディングがしたいと思っていました。

つまり、100に「誰もに愛されるアプリ」、というイメージをつけたかったんです。

 

 

100はチャットアプリなので、

ユーザーの方々がアプリを起動した時、まず最初に

メインチャット画面を目にすることになります。

 

もう少し踏み込んで言ってしまえば、そのメインチャット画面こそ

「このアプリの顔」になるということ。

 

なので、メインチャットの背景画像は

100のイメージづけに関して、最も重要な画像である、ということになります。

 

 

100を「誰もに愛されるアプリ」にするために。

「アプリ界のカレー」にするために。

チャットの背景画像に関しては、色彩やモチーフからかなりこだわって作りました。

 

 

背景画像の制作過程

 

では、具体的にはどのように制作していったのか。

まずはその過程についてお伝えします。

 

f:id:momo_rockme:20190124112809p:plain

 

①立案・ラフ作成

まずは、背景画像としてどんなモチーフがふさわしいか検討しつつ、

サインペンで紙にアイデアを記していきます。

 

②制作依頼

以前お伝えした通り、私がプロジェクトに入る前は

エンジニアインターンのjyoさんとプロデューサーの小林さんの2人で

アプリ作りをしていました。

その際に、アイコンやクリエイティブ系の制作物は

すべて外部のイラストレーターさんから納品してもらっていたので、

アプリ内デザインの一貫性を保つため、背景画像に関しても

同じイラストレーターさんに依頼することにしました。

 

③納品

ラフをもとにイラストレーターさんに制作していただき、

背景画像データをいただきます。

 

④色味調整・微修正

イラストレーターさんから許可を頂いた上で、今度はわたしの方で

頂いたデータを「チャットの背景画像」としてふさわしい形に

整えていきます。

 

④完成

 

それでは、各工程を詳しくみてみましょう。

 

立案・ラフ作成

 

f:id:momo_rockme:20190124113929p:plain

 

「誰もに愛されるアプリ」と先ほど書きましたが、

これは特に国内に限った話ではありません。

 

開発チームは、100 が日本国内のみで使われることを想定しておらず、

むしろ世界中の人がこのアプリを使ってつながってくれることを

目標としています。

 

そのため、背景画像のモチーフを選ぶときには

「世界中の人になじむもの」であること、という条件がありました。

 

「世界中の人になじむもの」。

それは、「世界中の人が背景として認識できるもの」であり、

かつ「世界中の人が1度は目にしたことがある風景」である

必要があったのです。

 

そこで私が選んだモチーフは「海」「森」「お城」。

「海」「森」は世界中に存在するものですし、「お城」も物語の中で

よく語られるイメージです。

 

 

納品

 

f:id:momo_rockme:20190124114837p:plain f:id:momo_rockme:20190124114842p:plain

 

「海」の案は今回は見送ることにして、

「森」と「お城」のラフ案をイラストレーターさんにお送りしました。

 

自分の考えていたイメージがそのまま形になり、

すごく感謝したのを今でも覚えています。

 

 

色味調整・微修正

 

背景画像の最終形を考える上で、

「これをクリアしなければ100を愛されるアプリにできないだろう」

と考えた点が4点あります。

 

 

(1) 見ていて落ち着くような色彩にすること。

制作しているなかで、匿名というアプリの特性から、発言が荒れてしまったり

会話の雰囲気が悪くなってしまったりといったことも予想されました。

 

そのため、「見ていてゆったり落ち着くような配色」を心がけました。

 

(2) 見ていて楽しくなるような色彩にすること。

このアプリのもともとのコアバリューとしては、

「楽しくおしゃべり」できるような場を提供すること。

 

そのため、(1)を満たしつつ、かつ「見ていてワクワクするような配色」が

できるよう努力しました。

 

(3) 100の「オリジナリティ」あふれるデザインにすること。

今や、世にはさまざまなチャットアプリがあふれています。

その中で、ユーザーの皆さんに特別な親しみを持ってもらうためには

オリジナリティを持つことが大切だと考えました。

 

(4) チャットの視認性が高くなるようなデザインにすること。

「ブランディング」のみに気を取られ、本来の目的である「会話」がしにくい

ごちゃごちゃしたデザインになってしまうと、それこそ本末転倒。

「チャットがしやすい」「見やすい」画像にすることを心がけました。

 

 

このように考えた結果、背景画像はこのような仕上がりに。

 

f:id:momo_rockme:20190124115712p:plain f:id:momo_rockme:20190124115842p:plain

 

チャットの視認性も高く、落ち着いた配色。

しかし、ワクワクするような明るさも兼ね備えていますし、

どのチャットアプリにもないオリジナリティあふれる背景画像に

なったと思います。

 

 

ちなみに、初期UIにおけるメインチャットの背景画像はこんな感じでした。

 

f:id:momo_rockme:20190124121614p:plain f:id:momo_rockme:20190124121618p:plain

このデザインは、チャットアプリであることは分かりやすいのですが…。

 

ワクワク感やオリジナリティという観点でみたとき、

このデザインよりもさらにレベルアップできたのではないかと思います。

 

 

まとめ

 

長々と背景画像の制作についてお伝えしてきましたが、

果たして、これで「カレー」みたいなブランディングができているのか

それはまだ、私たちにもわかりません。

 

 

もしかしたらきせかえテーマのような形で

「自分でデザインをいじる」機能がつくかもしれませんし、

ある日突然、背景画像が変わる、なんてことも

もしかしたらあるかもしれません。

(これは本当にただの予想にすぎません…笑)

 

それはやっぱり、ユーザーのみなさまの反応を見ながら、

「最善とはなにか」を考えていく中での話。

 

ただ、さまざまな試行錯誤があるかもしれませんが、私たちの目的はただ1つ。

 

繰り返すようですが 、「100をアプリ界のカレーにすること」です。

 

背景画像に限らず、誰もに愛されるアプリになれるように、

日々改善を行っていきます!

 

本日のブログは、これにておしまいです。

 

またお会いしましょう!

 

 

momoko