ギフトEC『TANP』のリブランディングプロセスまとめ

ギフトEC「TANP」を運営している、株式会社Graciaにてデザインチームのマネージャーをしている西野です。

2020/10/01に『TANP』は大幅なリブランディングを実施したのですが、その際のプロセスをまとめみました。

もちろんやり方に正解はないと思いますが、本来は"どう進めていくか"ではなく"どういったブランドを作り上げていくか？"という思考錯誤に時間を使いたいはずですので、これからブランドを作っていきたいけれどそもそも何をしていいかわからない...といったデザイナーさん（特にスタートアップでしょうか？）向けに、進め方のヒントにでもなれば幸いです。

そもそもブランディングとは？といった問いが発生すると思いますが、そこについては非常に深いテーマですし、優良な文献がいくつもあるはずなので、私が参考にしたものを簡単に載せておきます。

ブランド論

ブランドとは｜ブランドの意味をわかりやすく解説｜事例有 - Mission Driven Brand

プロジェクト概要

■ゴール
TANP"らしさ"を定義し、それらを体現するために必要なヴィジュアルとガイドラインを制作する。

■前提
"らしさ"を便宜上以下の通り構造化します。

■アウトプット
①ブランドアイデンティティ・プリズム
主に思想（上記MI）を整理するものとして採用しました、これを核とし行動（BI）や見た目（VI）を制作・判断していくための足掛かりとなるものです。

②ロゴ＋VIを形作る各種要素

- ロゴ
- サブシンボル
- キーヴィジュアル
- アイコン
- イラスト
- 制定書体
- ブランドカラー
など...

③ブランドガイドライン
作成したブランドの指針や、ヴィジュアルを正しく運用していくためのルール
※ガイドラインの一部

■期間
約10ヶ月（2020年1月~2020年の10月）

■プロジェクトメンバー
【西野】
・プロジェクトマネジメント
・経営陣の意思をデザインの言語に落とし込んでいく
【役員陣】
・中長期でTANPがギフト市場においてどのような存在になるのか言語化
【kern.inc タカヤ・オオタさん】
・CI/VIの作成、コンセプトの作り込み
【Graicaデザイナーチーム】
・チームとしての運用方法の決定
・WEB/アプリ・パッケージへの反映。

プロジェクト実施の背景

『ブランドコンセプトが不明瞭でデザインの軸がない』（※）という課題感を以前から持っていました。加えて、事業フェーズとしてもコアな価値はある程度安定して提供することができるようになり、その上でギフト市場No.1のプラットフォームになるためにTANPが今後どう勝負していくかを改めて考える段階にきていたことが今回の背景です。
※厳密には過去一度制作頂いたものがありますが、運用している人がおらず形骸化していました。

特にデザイン部署が抱えていた具体的な課題
・制作の度にそれぞれが『TANPふさわしいデザインとは何か？』から0ベースで考えるので、スピード感も出ず、アウトプットのテイストにばらつきが生じる。
・クオリティの管理や、デザインの意思決定が法人としてというよりは、西野個人の主観が強いものになっていた。

▼テイストがバラバラだった時期

■このプロジェクトを通じて狙っていたプロダクトチームとしての成果
1.ブランドアイデンティティを定義・確立することで、デザインに止まらず、サービスの各方面（どんな商品・コンテンツを用意するの？どんなCS対応するの？...etc）でどんな体験をよしとするのかの判断軸を作る
2.決定した世界観などをデザインシステムに落とし、制作スピードとクオリティラインを引き上げる。

具体的な進め方

振り返ると以下の4つのフェーズに分類できます。

1.経営陣の思想を言語化する期
2.ビジュアルコンセプトを固める期
3.サイトやパッケージへの実装期
4.保守・安定・運用期

■1.経営陣の思想を言語化する期
自分自身、ブランドとは？といった状態からスタートしました。そこで他社事例を調べた結果「ブランドアイデンティティ・プリズム」というフレームワークを用いると良さそうということで、プリズムを完成させるべく経営陣とワークショップを行いました。

「ブランドアイデンティティプリズム」を使ったメリット
　・アウトプットイメージが明確である
　・スタバなど他社事例が豊富なので、構成要素のイメージがつきやすい

やった後に気づいたこととして、フレームワークは正直なんでも良く、そのプロセスで"TANPらしさとは何か"について言語化する機会を作ること、共通認識を持つこと自体が重要だと思います。
実際、最初に作った物は現在の30%程度の精度でしたが、まず形にすることで、『ここは違くない？』『そもそもこういう捉え方をした方がいいのでは？』といった議論の対象が生まれたことが1番の価値でした。

注意点としては、『形にすることでやったきになる』『無理に型にはめてしまう』といった点です。完成した後は、『自分たちの感覚値とズレがないか？』『内容に一貫性があるか』の確認は必ずした方がいいなと思います。

また、もう少しラフな飲みの場などで「TANPをどんなサービスにしたいのか？」「ユーザーにどんな体験を届けたいのか？」など会話をベースにふとこぼれ落ちる、より真に迫った要素を抽出できると理想だなと思いました。

■2.ビジュアルコンセプトを固める期
プリズムの内容も材料とし、タカヤさんからの提案がここから始まります。思想においてはある程度共通認識がもてていたはずですが、デザインとして可視化した時に、答えが無い領域だからこそ経営陣の中で意見が割れるということが起こりました。

これを収束させるのに重要なポイントとなったのは『点じゃなく線で考える。』と言うことでした。

＜具体例〜ロゴタイプ〜＞
５〜６パターンにしぼれてきたデザインに対して、議論になった点としては平たく言うと『特徴的で印象に残りやすいもの』『シンプルで癖の少ないもの』どちらにするかというものでした。

ここで解決の緒になったのは（基本かもしれませんが）直近どうありたいか、見られたいかだけではなくギフト市場においてNo1プラットフォームであるために3~5年後どうあるべきかの観点を持つことでした。具体の内容については以下でタカヤさんと対談させていただいてますので参考にしていただければと思います。

寄り添い、魅力を引き出すロゴデザイン。TANPデザインリニューアルにおける制作について | 株式会社Gracia

＜具体例〜VI〜＞
キーヴィジュアルやブランドカラーなどより直接的にプロダクトに反映されるものは役員のネガティブチェックを通した上で、基本的に西野が意思決定しました。
ここではとにかくプロトタイプを作ったりして実際の馴染み方や印象を見つつディティール詰めていくことがポイントでしたね

▼TOPページに使用するイラストのテイスト調整の様子

■3.サイトへの実装期（完成したVIをプロダクトに落としていく）
最初はレビューラインを限定し、あえて属人性を高めました。走り出しは使い方のイメージが擦り合っていない部分も多いので、インハウスで一度作成した物を制作物であるタカヤさんにレビューして頂き、１つのアウトプットの中でもどの部分は必ず守る要素で、どの部分は状況に応じて変化させるのか"濃度"の部分をすりあわせていきました。

＜具体例〜色のトーンについて＞

from西野
"色のトーンについてですが以下ショッパーだけを見ると『彩度高め』『明度暗め』の印象を受けますが、個人の認識としては、『彩度高め』『明度暗め』などについても、扱う商品/ブランド/シーンによって適切なもの（ex.和テイストにものに対しては彩度が高いと扱いにくそう？など）があるので、変わらず展開図のデザインパターンを核としトーン自体もまずは柔軟に展開できればと思ってますが、タカヤさんとして元々意図していたものがあれば1度聞いておきたいです！"

fromタカヤさん_1
制作時の意図として、具体的に彩度／明度の濃淡を切り分けて考えていたわけではないのですが、
ー (仕様面で) 彩度が高いほうが色が沈む傾向にある印刷物ではコントロールがしやすいのではないか
ー (印象面として) ロゴのトーンが高級志向のなかで、当初から全体的なトーンを絞りすぎることで好き嫌いが起きないように、明るめの色を使いつつ、ポップになりすぎると元の大筋の方向性とは乖離してしまうので、落ち着いた色域を指定している
というのがありました。

fromタカヤさん_2
>和テイストのものにたいして
この部分について、個人的な意見としては当初からあまりにトーンの幅を広げすぎるとそもそものブランドイメージが自分たちの中では迷子になりやすく、かつ対外的には固定されづらくなってしまうので、まずは絞ること、拡張する際にも慎重に検討することをおすすめします！
たとえば伊勢丹の包装紙は見ようによってはすごく可愛らしく、あれ単体が高級感があるというより、伊勢丹というブランドイメージのおかげでああいう柔らかいデザイン展開をしても違和感がないということだと考えています。ですから、商品に合わせて自分たちのトーンを合わせていくというよりは、一定のニュートラルさがあるものを軸として展開／イメージが固定していくなかで、第2のステップとして幅というものを考えるのがいいのかな？と思いました！

■4.保守・安定・運用期
リリース後、社内でも各方面（営業資料など）でロゴやVIを使ってもらえることが増え嬉しい反面、やや想定していた使い方を逸れる場面が目立つようになりました。
そこで、より社内浸透をはかるべく以下2点を実施し、運用面のケアも行っていきました。

①社内キックオフ会
②社内チェックフローを作る（西野レビュー）

▼ZOOMによるキックオフ会資料〜ロゴ/VIの利用上の注意点

リリースから1ヶ月経った組織内の変化

リリース後まだ少し鹿時間が経過してませんが、簡単に良かった変化について紹介します。

＜デザイン関係者＞
VIを元にコンポーネントやカラーパレット、グラフィックのテンプレートなどデザインシステムとして落とし込んだことで、基本的には要素を組み合わせる、またはそれをベースにアレンジするというアプローチになりました。悩むべきでない部分がカットされたことで制作スピードはもちろん向上し、人による方向性やクオリティのばらつきは解消されつつも、状況によって自由に表現できる楽しさも保たれている状態が実現できました。正に当初の目的が達成されているのではないかと思います。

＜ビジネスサイド＞
一部を抜粋しますと、MD（営業）チームでは『これまでパートナーになりえなかったメーカー様にTANPをご利用頂ける様になりました。』とのお声をいただけました。TANP自体の個性が強く主張されるのではなく、よりフラットで様々な方面の商品・ブランドさんと馴染みやすいデザインをめざした結果も少しずつ出始めいるのではないかと思います。

終わりに

まだまだ、これからプロダクトの隅々に反映、アップデートを繰り返していかなければなりませんが、プロダクトに血が通い始めたという感覚があります。思想がプロダクトに降りてきているかどうかは、ファン・熱狂が生まれるサービスになり得るかの分かれ目だと思っています。今回のデザインリニューアル、リブランディングへの取り組みはその大きなターニングポイントになるのではないかと私自身、今後が楽しみです。

拙い文章ではございますが少しでも参考になれば幸いです。
また、TANPはまだまだ発展途上で採用も絶賛強化中なので、ご興味ある方は是非、お問い合わせください。

募集職種
・UI/UXデザイン（WEB/アプリ）
・グラフィックデザイン（バナー/LP）
・パッケージデザイン（ギフトボックス）