最新情報をお届けします！
趣味でつながる恋活サービス『タップル誕生』が、コアターゲットをより若年層に変更。ロゴをリニューアルした。微調整にも見えるが、そこには綿密なプロセスが。特にユニークなのがブランドを再定義、パーソナリティチャートというツール活用。ぜひロゴ考案の参考にしてほしい。
※株式会社サイバーエージェントにおいて、タップルチームを率いるチーフデザイナー 漆原裕貴さんの寄稿記事としてお届けします。
[目次]
・はじめに
・ブランドの再定義
・ブランドパーソナリティチャート
・カラーパレット
・ロゴリニューアル
・ラベル
・ロゴタイプ
・シンボルマーク
・コンビネーションロゴ
・ガイドライン
・「マッチする」から「出会う」に
初めまして、サイバーエージェントにて『タップル誕生』のチーフデザイナーをしている漆原 裕貴です。
趣味でつながる恋活サービス『タップル誕生（以下タップル）』は、2014年のサービス提供開始から順調に成長を続けてまいりました。タップルは2018年4月、5年ぶりにサービスロゴを含めデザインを一新。マッチング市場の急速な成長と、サービス成長の両軸を見越したものになっています。
今回は、デザインリニューアルのプロセス、特にロゴに絞って紹介いたします。
ここ数年でマッチング業界自体のイメージやデザイントレンドも大きく変わってきました。我々も、これからのマッチング市場を牽引していけるようなサービスブランドを目指すべく、サービス提供開始から慣れ親しんだサービスロゴを中心にデザインリニューアルを行いました。
パーソナリティチャートでブランドを俯瞰
まずはじめに行ったのが、現状のブランドがどういう状態にあるのかを俯瞰的に見つめ直すということ。イメージを構成する各要素を5段階で評価したブランドパーソナリティチャートを作成しました。
今後の事業の方向性を踏まえつつ、各要素がどういった状態へ向かうのが好ましいのか再定義しました。
ブランドパーソナリティチャート
また、各要素がこのブランドパーソナリティチャートで表現した「これから」の状態にあるためには、どういったアプローチが考えられるのか。具体的な例も合わせてピックアップしていきました。
ブランドのイメージは、サービスがまとう空気を演出する必要があります。そのため、ロゴやUI、色味などのデザインに関わる部分だけでなく、ラベルや情報設計の考え方まで列挙します。
そして、定義した各要素同士がひとつのサービス内で共存できるのか、考えうる未来のイメージと致命的な乖離がないかなどを検証しました。
パーソナリティ要素の落とし込みの一例
「ポップで親しみやすい」といった抜き取った単語ではなく、チャートで示し一例も共有していく。そうすることで、デザイナー以外のチームメンバーとの共通言語にもなり、色々な案が出てきたときも、原点に立ち返って適切な選択ができます。
カラーパレットの再定義
上記のチャートを踏まえ、まずは影響範囲の大きいブランドカラーを一新しました。
▼ブランドカラー
これまで使用していたシンボルマークの2色を継承し、彩度を上げてより快活な色味へ。旧ロゴのカラフルな印象は引き継ぎ、メインカラーの2色にサブカラーの4色を新たに加えました。
▼背景色
これまで暗めの茶色やオレンジを用いてきましたが、すっきりとクリーンな印象を与えるため、白や限りなく薄いピンクを基本の背景に変更。
マッチング業界の過去のイメージを払拭し健全なサービスを目指していること、明るく楽しい印象であることを、白い背景の上で映えるカラフルな色で表現しました。
新旧のカラーパレット
“20代恋愛のスタンダードを創る”という指針から、より若年層に受け入れられるロゴへ
ラベル：『タップル誕生』から『tapple』へ
サービスの認知率が上がり、ユーザー調査からも「タップル」と気軽に呼称で使われている状況がわかったため、このタイミングでロゴデザインから”誕生”を取ることを決断しました。それにより、音感もより親しみやすい印象のサービスロゴに。（正式名称は『タップル誕生』のまま）
ロゴタイプ：丸みを帯びたウェイトの太い英語表記
以前のロゴタイプは漢字を含むため、Webバナーなど小さいサイズで使用する際につぶれてしまう問題がありました。また、以前は差し色が入ったカラフルなロゴを単体で使う機会が多くありましたが、今後は次の２つを意識する必要がありました。
・後述するシンボルマークとコンビネーションで使用できること
・キャンペーンやアライアンスに合わせて多様なテイストやトーンを振る舞えること
これらを踏まえニュートラルで癖の無い形状を前提としました。
ある程度太めで読みやすく、安定感があり、やわらかい雰囲気の丸味のあるボディを軸に、コンストラクショングリッドの思想で1からベースを作りました。
パターン出しの一例
英語表記での開発を進めつつも、これまでの日本語表記をブラッシュアップした案も作成。
ロゴ単体ではなく広告展開など使用時のイメージで比較できるよう、仮のポスターや交通広告のグラフィックを作成してチームメンバーと比較検討しました。
ある程度ベースが固まってからは細部のブラッシュアップを重ねます。「t」の左端や「e」の形状、太さ（密度）、カーニング、塗りの濃さなどを検証していきました。
ブラッシュアップの一例
完成したロゴタイプ
シンボルマーク：従来のイメージのままブラッシュアップ
シンボルマークは、従来の「出会いの場」をイメージした二つの円が重なったモチーフから大きく変えず、より良いバランスへブラッシュアップする方針になりました。
「もっと他に良いものがあるんじゃないか？」という状態がなくなるまで、ありとあらゆるパターンを試しました。
既存のアイコンイメージから大きく離れないことを念頭に、美しい数値になるよう、円の重なる割合や重なり方、アプリアイコンに収まったときの比率、重なった箇所の色の調整などを行いました。
シンボルマークの検証の一例
新旧のアプリアイコン
コンビネーションロゴ：バランス調整
旧ロゴはシンボルマークとロゴタイプを併用する基準が曖昧だったので、縦組と横組で使用する際のバランスも定義しました。
シンボルマークの幅を基準にロゴタイプの大きさをスクリーニングにかけ、収まりのいい値にアタリを付けてから、視覚補正で感覚的な微調整を行いました。
コンビネーションロゴのバランス
ガイドラインの作成：
現在ではありがたいことに、UIやサイト内だけでなく、外部の広告やリアルイベント、アライアンスによるキャンペーンなど、ロゴの用途や扱う関係者が多岐に渡るようになりました。
ブランド全体で統一したクリエイティブを保つために、ロゴガイドラインの作成と運用が重要でした。
カラーパレットの数値やアイソレーションなど基本的な規定に加え、優先したい基本の和文・欧文フォントや、縦組み・横組み・ロゴタイプ単体使用時の優劣、プライマリカラーをベタで敷く場合の特別な色指定など、他のガイドラインには無い独自の解釈も作成しました。
ロゴガイドラインの抜粋
2018年はマッチング第三世代といわれています。ユーザーの興味は「マッチ」から「出会う」へ。各サービス、「出会う」 までの導線を設計していくことが見込まれています。
『タップル誕生』でもアプリ側が「出会う」をサポートするために、メッセージが続かず、出会うまでに至らないというユーザーの声を反映して国内初の「おでかけ機能」をリリースしました。
国内初の24時間以内にデートのお相手がみつかる「おでかけ機能」をリリース。女性 が気になる「おでかけプラン」を設定してから24時間以内に男性からデートのお誘いが届く。
『タップル誕生』はこれからもユーザーが安心して出会うことができるマッチングサービスとして日々改善してまいります。
今回はロゴを中心としたデザインリニューアルの具体的な制作過程に触れましたが、実際は急成長しているサービスのなかで並行してデザインを刷新することの難しさや、開発の途中で全く別の案を並行したりとたくさんの学びがありました。
その辺りはまた後日、CyberAgentのDeveloper’s Blogでお話できればと思います。
漆原 裕貴（うるしばら ゆうき） 2016年サイバーエージェント中途入社。前職はWeb/CG制作会社のクリエイティブ責任者としてデザイン業務に従事。現在はチーフデザイナーとしてマッチングエージェントに参画し、『タップル誕生』のサービスデザイン、ブランディング、プロモーション関連のクリエイティブを担当。
文 ＝ 寄稿
4月から新社会人となるみなさんに、仕事にとって大切なこと、役立つ体験談などをお届けします。どんなに活躍している人もはじめはみんな新人。新たなスタートラインに立つ時、壁にぶつかったとき、ぜひこれらの記事を参考にしてみてください！
経営者たちの「現在に至るまでの困難＝ハードシングス」をテーマにした連載特集。HARD THINGS STORY（リーダーたちの迷いと決断）と題し、経営者たちが経験したさまざまな壁、困難、そして試練に迫ります。
Notionナシでは生きられない！そんなNotionを愛する人々、チームのケースをお届け。
