デザイナー出自のCTOが考えていたプロダクトのVI

デザイナー出自のCTOが考えていたプロダクトのVI

VIという仕事はなかなかその内容について書くことはないもんですが、ひょんな機会をいただきました。ありがとうございます。
せっかく書いたので、こっちにも投稿しておこうと思います。
僕も単一プロダクトを持つ企業のCTOという立場をつい数日前に終えました。そういった記念も込めて。
ちなみに今回はいわゆる日本で言われるエンジニアリング分野の話は一切ありません。

FlipdeskのVIの話です。

Flipdeskは2年半前にスタートしたWEB接客プラットフォームで、リリース当初は「タグを埋め込むだけでサイト上にチャット機能を提供できます」というウリ文句の元、サービスがスタートしました。

現在はこのようなロゴを用いています。

これ、サービスが市場からある程度の知名度を得た後に、第二弾ロゴとして作成しました。
一方、初代のロゴはこちら。

だいぶ印象が変わってきますね。
時系列を踏まえて、初代ロゴの方からその由来を解説しましょう。

初代のコンセプトは「邪魔をしない」

当時すでにスマホのディスプレイはインターネット広告で溢れかえっており、広告はコンテンツを楽しむユーザーに邪魔者扱いされていました。
そしてFlipdeskが主戦市場としていたECサイトは一般ユーザーが何の気なしに訪れるWEBの中では数少ない広告非武装地域でした。(一部大手モールを除いて)
Flipdeskはコンテンツをポップアップさせたり、フローティングボタンとして表示したりという機能を持つので、テストマーケティングに付き合っていただけるクライアントを探していた段階でもしばしば「サイト内で広告を出すツールですか?」との勘違いを浴びました。
WEBで接客という概念がまだ世の中に浸透していなかった2014年では、フローティングボタンといえば広告でしょ、くらいの解釈をされることがザラだったんです。
そんな中でサービスの価値を業界に正しく理解されるにはFlipdeskは訪れたユーザーの邪魔をしないという認識を伝える必要があり、それをそのままビジュアルに落とし込みました。なのでとても線が細く、カラーも中庸な仕上がりになっています。
VIを通じて「リアル店舗の店員が全身全霊の気遣いで訪れたお客さんに喜びを与える存在であるように、Flipdeskも決してユーザーの邪魔はせず、ウェブ担当者の思いをスマートにお客さんに伝えるツールなんですよ」というメッセージを全面に押し出したのです。

また、同時に「店子であるかのように、ユーザーをちゃんと見てますよ」というメッセージも込めて、目入りの遊びを含めました。
当時はこのことに遊び以上の意味はなく、僕がビジュアルにほんの少しのポップさを加え、最後の辻褄を合わせる要素として入れたものでしたが、のちの幾つかの局面でアニメーションに使われるなどして馴染みやすさに一役買いました。
ビジュアルの最後の辻褄を合わせるエレメントはデザイナーのセンスやこだわりでしかありませんが、そうして加えたものには得てして作り手の思いが込められており、しばしばビジュアルの可能性を広げてくれる意外と重要な存在です。

またFlipdeskはロゴと事業コンセプトが同時並行で作られており(スタートアップでは珍しいことではありません)、当時された
「このロゴを見ていると、こんなコンセプトもありな気がする」
のようなやり取りに象徴されるように、ロゴのビジュアル・アイデンティティも事業コンセプトを決めるインスピレーションの一部でした。
ブレストの際にもまるで喋るかのようにロゴ案を次々と出すという感じです。
これは創業者にクリエイティブ担当がいるチームならではのアプローチで、言葉のやり取りだけでは思いつかない発想を引き出すこともあります。


当時ブレストに出ていたロゴの習作(一部)

そうしてビジュアルと事業コンセプトが双方の歩み寄りを見せて決定したのが、初代のロゴです。

カオスマップ掲載から着想した二代目「ひとりで戦えるロゴマーク」

サービスがある知名度を得ると、ロゴマークとともにサービスのイメージが独り歩きを始めます。
展示会用のチラシ、営業資料、代理店向け営業資料、サービスLP、連携先企業のWEB、取材記事、採用記事など、様々な場面、媒体で一般の方々の目に触れられる段階になると、見た人、説明を受けた人が、また隣人に解説を始めます。そうした過程で

  • カオスマップに掲載されているような状況では、やはり目につくサービスから解説を始められてしまう
  • 競合ロゴと並ぶと、刹那の直感勝負では強いロゴが勝つ(例えば代理店が接客ツールについて聞かれた際、いくつかのサービス資料を持っていて、2分しか時間がないとしたら?)
  • 解説中にサービスのディテールを忘れてしまっていた場合、ロゴや資料からディテールを補完して解説を続ける
    のようなケースが散見されはじめました。

前述のように線も弱く、中庸なつくりになっている初代ロゴは、そうした独り歩きの場面にめっぽう弱かったのです。
そこで現状表出されるシーンを考慮したロゴへの差し替えを決定しました。
様々な局面でプロダクトのイメージを統一的に、そして有機的に見せることができるような強く隙がないいロゴ、というのが、目標でした。

「統一的」のキーワードは、カオスマップにあっても営業資料にあっても、同じ佇まいでいられること。
ベースフォントを考える上でのキーポイントは

  • インターネットサービスであると一目でわかること
  • 営業状況を見るとネットリテラシーが高くない層にもアプローチしている。ここに対する目引きはビジュアル側からも支援が必要。
  • なので、サンセリフであることが必須条件(セリフはどうしても紙の権威の象徴となるイメージを与えてしまうため)
  • 版面率が高く、どっしりと構えて閲覧者をお迎えすること
    と設定し、歴史的な信頼感のあるTUBE – Johnston Underground(ロンドンの地下鉄)の公式フォントをベースに現代風に改良したものを採用しました。

「有機的」のキーワードは、一緒に仕事をしていたディレクターからの発案です。
「今後さまざまなノベルティ展開があったり、掲載メディアも多様になる。たとえばスマホで紹介されるような局面があった場合に、このロゴだと小さくなりすぎてしまう。我々はスマホをメインターゲットとしたサービスだというのに。」
こんな指摘をもらいました。
なので、縦長な表示であっても、ある程度どんな形のノベルティに使用するのであってもバリエーション展開の中でそのイメージをキープできるよう、マークを採用(マークの素案もディレクター発案)し、ロゴマークとロゴタイプの展開パターンを用意することで、さまざまな利用シーンに対応するようなVIセットに落とし込みました。

Flipdeskは何を成したのか。今後どうなっていくのか

僕らがFlipdeskを通じて解決したかった問題は
「全然カジュアルじゃないサイト内改善施策」
でした。

たとえばMDの限定されたECサイトが売上を上げようと考えたら、最も手っ取り早い方法が「セールを行うこと・クーポンを打つこと」、次点で「広告を打つこと」といった答えが返ってきます。「レイアウトやデザインを変更する」などのいわゆるサイト内の改善施策は、ある時はベンダーのシステムの制限であったり、またある時は社内のエンジニアリングリソース不足であったり、と、様々な障害が目の前にあり、サイトの周りにあるなかでも「最も手がつけにくく、金がかかる」という構図になっていました。
しかし、店舗を運営するにあたり、店舗という入れ物自体の改善に手を入れ難いというのは、非常に勿体無い話です。
なので、まず「目立たせるべきものを適切に目立たせる」ということに目的を絞って、ツール化してリリースしたのがFlipdeskです。
Flipdeskができることはシンプルですが、そのシンプルさを通じてまずはホットトピック(訪れたお客さんそれぞれにとっての旬な情報)=”旬” な情報の取り扱いに慣れて欲しかった。
どんなWEBサイトでも、運用状況がアクティブであれば必ずホットトピックが存在するのですが、現状ではWEB運用上の制約(できないこと)が多すぎて、その存在すら認識していないケースが多かった。そのお店の中でまず何をみて欲しいのかを誰もはっきりと認識していなかったということです。だから、店舗にまず来たお客さんに対する「いらっしゃいませ」を変更するのに、ものすごく冗長な手続きが要るんですね。そういう状況を変えたかった。
これが市場・業界に対するメッセージです。(もちろんそんな意図とは関係なくセンスの良い顧客によってさまざまな面白い使われ方が生み出されたりはするわけですが。笑)
店員さんが「いらっしゃいませ」の後に、今お店の中で一番耳寄りな情報を話し伝える、そんなイメージをそのままビジュアルに落とし込んだのが、Flipdeskのマークです。

そして、同時に僕らがこのサービス展開を通じて見ている未来は
「WEBってこんなものじゃない。もっといろんなことができる」
です。

なぜ5年前は誰もWEB上でチャットを使わなかったのでしょうか?(これは、FlipdeskをはじめとしたWEB接客ツールが解決しました)
なぜ今はWEB上で相手の顔を見て会話ができないのでしょうか?
どうしてWEBは僕の顔を見ただけで「あぁ、この人は男だな」と判断してくれないのでしょう?
いつまで僕らは検索ボックスに面倒なキーワードを打ち込んで質問しなければならないの?

こういった疑問や不満を解決できる技術をすでに世界の技術者は持っています。
そうした不満が解決された世界は、誰かがその気になればフッと世の中に現れてくるわけです。
そうすると、WEBは今では誰も体験したことがない楽しみ方ができるプラットフォームになります。
現在でもまだまだカタログ式自動販売機でしかないECサイトにもどんどん変化が訪れてくるはず。
マーケティングが変わるでしょう。
MDの考え方が変わるでしょう。
サイト運営スタッフの構成だって変わるでしょう。
そんな世界を顧客とともに睨んでいきたい。というのが、プロダクトを生み出した立場の本当の思いです。

僕とデザイン

ここまではプロダクトの話をしました。ここからは少しだけ僕とデザインそのものの話をしましょう。

VIの対価はよく「無料〜ラーメン一杯〜数百万円〜数千万円」と揶揄されます。
ビジュアルの価値の優劣はなかなかわかりにくく、時にクリエイターは水商売と同じだ、とも例えられます。

ビジュアルの価値は直感の精度であるとか、デザイン理論の積み重ねだとか思われがちですが、本当のところは想像力です。
どのような媒体に、どのように掲載され、どう、どのような人の目に触れ、どう使われ、どのような競争相手と並び、人はそれをどう思い返すのか、時勢は何を後押しし、なんの表現を本質と歪めているか、などの「それが在る状況」をできる限りくまなく想像できる力が、そのまま作品の深みになります。
そして、そこから生まれた抽象的な共通点を経験や知識、世の事例に当てはめてみたり、時には実験的な要素の効果を仮定して組み込んで新しい表現方法にチャレンジしてみたり、といった社会に寄り添わせるような行程を経て具体化し、初めてひとつのアウトプットになります。

僕は、ビジュアルデザインが商業的に必要とされているものである以上、その価値はアウトプットの安定感だと考えています。
それを支えるのが「深み」の存在であり、限られた時間でどこをどれだけ深掘りしていけるかというセンスは、世の中でしか養われません。
なので、デザインビジュアルを支える人やチームは、人生を通じて世の中を良く観察する必要があります。そして、世の中を見る角度を意図的に変えられる力を身につける必要があります。
時には子供の視点、異性の視点、時には半年後、3年後の未来を歩いている人の気持ちになって、世に送り出される作品を眺める視点が必要です。

デザイナーはそれがビジュアルやサウンドであっても、体験であっても、プロダクトエンジニアリングの一部であったとしても、まして、事業デザインの一角を担う場合でも、どんな時も抽象(概念)と具体(社会)を結びつけることがそのプロフェッショナビリティです。
そして、社会に出る具体的なアウトプットはどんなに広い抽象から導き出すにしても常にたったひとつしかないという宿命を持っています。

僕はその宿命と対峙する面白みは、人生を賭けるに値するほどのものだと思っています。
だから僕はCTOであり、アートディレクターであり、デザイナーであるというような人生を送っていますが、エンジニアリングをする時も、事業を構築する時も、街の開発コンセプトをひねり出す時も、常に僕の根底はデザイナーなんです。

逆にいうと、今デザインを担っている人は、自分がその後どんな職種や業界に抜擢されたとしても対峙できる根底の考え方を構築する必要があります。
どんな業界や職種とも相対する可能性があるのもまた、デザイナーだからです。

また機会があれば、どこか(別な媒体かもしれませんが)で「具体をまとめて流れを作る」ことを担うアートディレクションという概念を紹介しましょう。
この概念は、メディアとコンテンツ、人とSNSの関係性を解釈するのに、とても便利なものです。
日本や世界の情報発信産業が、この概念をどう捉え、導入して来たかを紐解くと、さまざま面白い答えが見つかります。