00:10
サンフランシスコ・デザイントーク
この番組は、サンフランシスコにあるデザイン会社の社長が、日本で働くデザイナー、デザイナーを目指している方、デザインをビジネスに取り入れたい方向けに、デザインに対するインサイトや今後のデザイナーの在り方、プロダクトや企業のデザイン戦略について深く話します。
おはようございます。
おはようございます。
ロゴのブラック化現象
ということで、今日の本題なんですが、ロゴのブラック化現象についてお話ししていこうと思います。
これはやりましょう。
そもそもブラック化現象、僕が勝手に名付けたものなんですけど、結構前になるけど、TwitterがXになった時に極端にロゴが変わったじゃないですか。
鳥が文字のXになった。それだけじゃなくて、ロゴだけじゃなくてアイコンが、皆さんもインストールしている方はわかるんですけど、スマホのホーム画面で黒いのがいきなり出てきている。
それまでは青かった鳥さんが真っ黒な背景に白だけXって書いているというのがあって、結構大胆なリブランド、結構前にもその話をしましたけどリブランディングしたなと思っていて、
よく考えたら、結構黒目のアイコンおよびロゴって最近多くないかなと思って、ちょっとリサーチしてみたら実際多かったんですよ。それであれ、なんか最近流行っているのかなと思って、最近のトレンドかなと思って。
前から黒かったものと、Twitterみたいに黒くしたケースと、新しく作った場合にも最初から黒っていうのが多くて、黒いのがどんどんどんどん増えるから、僕がブラック化現象っていう風に書いて、うちのブログのフレッシュトラックスに、ちょっと冗談半分でも載せてみたんですけど、結構反響がありまして。
それで、そのことについてちょっと深掘ってみたらどうかなみたいな風に思ったという。
なるほど。ありがとうございます。
そうですよね。スレッツとかも。
メタが出したTwitterっぽいアプリのスレッツっていうのは、一時期リリース直後すごい勢いでユーザー集めてましたけど、メタってFacebookやってて、Instagram買収して、Instagramなんか何度も何度もアイコンアップデートっていうのは頻繁に行っていて、
最新のものもグラデーションで、色的にはちょっと紫っぽいのとオレンジっぽいののグラデーションみたいな感じじゃないですか。
メタ社の会社ロゴ自体も青のグラデーションなんですけど、このスレッツっていうのはいきなり真っ黒に真っ白、2つのトーンでベタ塗りでグラデーションなしっていうのは珍しい。
彼らにとっては結構珍しい大胆なアイコンになったなと思いましたね。
ありがとうございます。
じゃあもう何か土著級にというか、深くさらに質問していきたいんですけど、何で黒くなっていくんですかね。
何で黒くなっていくか。仮説なんですけど、ちょっと前までは、コロナの前ぐらいまでカラフルロゴが大流行りしてたんですよね。
新しく出てくるサービスとかリデザインしたのが。その後も数年間そのままでロゴがインスタに代表されるようなものと、あとグーグル系アプリ、グーグルマップスとかグーグルなんとかってついてるサービスって基本的にはグーグルの色、カラフルな色をうまいこと組み合わせたアイコンにその上にちょっとグラデーションかけるとか、
そんな感じのものが主流になってて、たぶん一つの仮説は、スマホの画面にアイコンを表示したときにカラフルにすると埋もれる、逆に黒っぽくすると目立つっていうのがあるかなと思いますね、これ一つね。
あと、アメリカとか欧米とか、色相の薄い人種の人たち、白人系の人たちとかを中心に、色毛の率結構高いんですよ、日本より。
色で識別しにくい目の構造っていうか、色相の構造になっている方が結構いるので、アクセシビリティ的にコントラストを強めにした方が識別しやすいんですね。
で、白黒にするとコントラスト強めになるんで、それを狙っているのかなとか、あとはモダンでかっこいいっていう、アパレルとかに多いモノトーンって基本的におとなしくて、おとなしいというかシックでかっこいい感じに演出できるっていうのとか、
あとは、デジタルサービスだけじゃなくてリアルな日常生活にも直結しているんで、あまりデジタルデジタルしない雰囲気の方がいいと思ったのかとか、あとはこれよく言われるんですけど、景気が悪くなるとファッションとかもモノトーンになってくるみたいな、人の気持ちが沈むとあまり派手なものを着たがらないみたいなのがあるらしくて。
最近コロナがあってその後、世界情勢とか世の中的にあまりポジティブなニュースが少ない。
特にスタートアップはファンドレイズが難しいとかあるんで、おとなしめに言ってるのかな。で、実は画面だとわかんないんですけど、印刷物にしていくと、白と黒ってモノトーンなのでインクが安いんですよね。
カラー印刷よりも白黒印刷の方が安いんですよ。手間がかからない。インクの数が少ないので。それのコスト削減。コストカットしたいときは白黒にするのが一番いいんですよね。っていうところがあるのかなと思って考えてたら、実は我々ビートラックスのロゴも2019年の後半にリデザイン、リブランドしたんですけど、
パッと見たら黒ベースに白のロゴがメインロゴだったんですよね。超偶然で全くトレンドとか知らずに会社がある程度成熟してきたりとか、次のステップに行くとか、あとはもう少ししっかりした落ち着いた雰囲気のイメージ、ブランドにしていきたいとか、
あまりシリコンバレーデジタルだけじゃない世界観、ユニバーサルの世界観を出したいっていう思いでモノトーンにしようって決めて、なおかつシックな感じで黒をベースに白をメインにしようと思ったら、完全に周りの方々と同じような感じになってて。
全くトレンドとか狙ってなくて、後付けで、僕が後で最近気づいたことなので。ただ、これメリットだけじゃなくて、結構弊害あるなって、一ユーザーとして思ったことがあって、特にパソコンでウェブサイト開いてた時に、
ツイッターのXとニュースピックス開いてたら、タブにファビコンっていう四角いショートカットのアイコンが出るんですけど、すごい識別するの難しくて。ニュースピックスのサイトを開けたことある方はわかると思うんですけど、黒ベースに馬のピクトグラムみたいな感じのデザインになってて、線で構成されてる図形なんですよね。
それに、Xも白バックに線で構成されてるXって文字で、遠くから見る小さい物体として見ると、一瞬ちょっと迷うんですよね。このコンマ何秒の脳の迷いと判断が、ユーザーエクスペリエンス的に非常に負荷が大きくてですね。
今まで直感的に、ツイッター青、ニュースピックス黒っていうので、結構色ベースで、多分考えずに無意識のうちにタブ開いてたなっていうのをその時に気づいて、あれちょっとわかんないってなって、そうしてみたら他の物もそうなってきてるんで。
例えば、黒ベースのロゴのサービスをタブどんどん開いてたりとか、そういうサービスのアイコンをスマホの上に並べたら、結構脳の負荷が高まってきてることに気づきまして、結構めんどくさいなと思ってて。
そこをね、カラフルなもので埋もれちゃうから、あえて黒にすると目立つと思ったら、黒が増えたことでまた目立たないっていうことに。
あとはあれですよね、TikTokとかも黒ベースだったじゃないですか、もともと。それすらも迷うみたいな。
で、Uberも黒いしとか。
確かに。
で、その記事を書いたら、コメントとかいただきまして、他にもありますよねとか言って、例えばアベマTVって言って。
僕はちょっとアメリカ住んでるんで、あまりそのアプリとかインストールしてなかったんですけど、改めて見ると、確かにと思って、サイバーエージェントの事業ですよね。
サイバーエージェントって緑がコーポレートロゴのカラーだと思うんですけど、なぜかアベマだけは黒ベースに白だったんで、おや?と思って、確かにと思って。増えてんなーって改めて思ったっていうことですね。
これからの、今は黒くなっているっていうトレンドみたいなのもあると思うんですけど、そこからさらにどうなっていくのかって予想するためにも、今までのアプリとかサービスのロゴのデザインの変遷みたいなのをちょっと振り返っていきたいんですけど、どういう風にアプリとかロゴとかデザインは進化してきたのかみたいなところもお伺いしたいですね。
アプリやサービスのロゴの変遷
僕が知っている限り、スマホが出て、最初はiPhoneなんですけど、スマホが出た後にアプリが出てきて、多分2007年、8年くらいからアプリが出てきて、現在に至るまでの15年くらいの間でどんな感じになっていたのかっていうのを簡単に説明させてもらうと、
最初は現実に存在する物体をデジタル化したデザインにしてたんですよね。フォトリアリスティックスとか言われたりしてるんですけど、スキュアモーフィズムっていう風に言われてたりするんですけど、
アプリの標準アプリとかでまだ残っているものがあったかもしれないんですけど、例えばメモ帳アプリはメモ帳っぽい絵になってるとか、カメラアプリはカメラの形をしているアイコンになってたりとか、そんな感じですね。
カレンダーはカレンダーっぽい絵になってるみたいな、その実物に存在するものをそのままアイコンで表現するっていうスキュアモーフィズムですね。
3次元っぽい立体的なデザインにしてグラデーションもちょっとかかってて、すごい作り込まれてるデザインですね。ズームインするとピクセルがすごい細かく描かれてるっていう。そういったものが最初のうちは多かったですね。
これはデジタルなサービスとかアイコンを触ることよりもリアルなものを触っている時間が長い人がユーザーが多かったので、スマホが新しいものだから。
なじみ深くするために、例えばインスタグラムの最初のアイコンもポラロイドっていうインスタントカメラっていうのが昔あって、撮ったらすぐフィルムが出てくるチェキみたいな。
デジタル2Dからフラットデザインへ
あれをインスパイアされて、あの形を使ったアイコンに最初していて、それを少しずつデジタル2Dっぽくしてて、数年前にいきなり今のカメラっぽくない丸が2つあるみたいな。あれはカメラのレンズのファインダーのところになってるんですけど、モチーフにしてますが完全にリアルなものと違うものになってきてるんですね。
これはリアルなものから、最初からデジタルに触れるところからスタートする人が少しずつ増えたことによって、リアルなものの再現をしなくてよくなったんですよね。
これが一番最初はスキューモーフィズムから一回大局に触れた時代っていうのがあって、フラットデザインって言われるんですけど、マイクロソフトとかが最初OSで採用して、そこからいろんなアプリとかにも広がったんですけど、超ベタ塗りに超平らな絵がアイコンになってるみたいな。
フラットって言われるやつなんで、超流行ったんですよ。グラデーションダサいみたいな、逆に。リアルを再現する必要ないじゃんみたいな。そうやってたんですけど、直感的に使いにくくないって声が出て、確かにベタ塗りだらけになると識別、また脳がしにくくなるんで。
フラットデザインからマテリアルデザインへ
その後に、Googleとかが生み出したマテリアルデザインっていうデザインスタイルっていうのがあって、これはフラットデザインに少し物理的なシャドウを入れるっていう、今でも結構まだ多いんですけど、
Google系のアプリとかで、ちょっと前とかまでは、メールのアイコンとかに少しフラットなんだけど、ちょっとリアルっぽいシャドウが入ってるっていう、日が当たってる感じ。見せ方をすることで、すごいカッコよく、ちょっと立体みたいな感じ。デジタルな3Dみたいな。
リアルを再現してるんじゃない?ってあって。その時に、それをもう少し押し進めて、くぼみとかエンボスとかも表現する、ニューフォフィズムっていうのになるんじゃないかって予想されてたんですけど、マテリアルデザインのもうちょい進化版の未来感のあるデザイン。
くぼみとかがあるやつなんですけど。それ意外とあんまりいかなくて、そこに。このマテリアルから次に行ったのが、冒頭でちょっと説明した、めちゃくちゃカラフルキラキラデザインみたいになった、ちょっと前、今でも、例えばスラックとかカラフルだったりとか。
Gmailとか。
あとフィグマとかもそうだったりとかして、そういうのがどんどんどんどん氾濫してったっていうか広がっていっちゃって、その時にすごいアメリカのデザイナーの間でも、これちょっと同じすぎてユーザー迷うよねみたいな。
そのスラックっぽいアイコンのものがものすごい、スラックとGoogle増えてて、プラスその時に最後にFacebookメッセンジャーも似たようなことをやってしまいまして、すっごい選びにくいっていうか、見にくい状態に、識別しにくい状態になってて、で次に黒っていうのが来たんですよね。
次のどうなっていくかみたいな予想とかってあったりしますか?全然、現段階でもあれですけど。
黒が増えたらやっぱり目立たなくなるじゃないですか。
寄り戻しが。
ただなんだろうな、これブログにもちょっと書いたんですけど、アイコンの色が地味になればなるほどそのアイコンを選ぶ率は下がるらしいんですよユーザーっていうのは。
目で引っ張られるんで、スマホの利用時間を減らしたければ画面を白黒モードに変えるとすごい使う頻度が減る。ただ、白黒モードとブラックのアイコンの大きな違いが一つあると思ってて、ブラックのアイコンでも通知っていうんですか、ノーティフィケーションの新着のやつがあると赤く光るじゃないですか。
そうですね。
あれは黒に赤で赤が目立つ。そこは効果あるんですけど、モノトーンの白黒モードにしちゃうとそれすら白黒になるんで目立たなくなるみたいなことがなってて。
多分、それぞれの会社とかサービスのブランドに忠実なデザインになってくるのかなと思ってて、今後。
アップルとかってずっと同じような白黒じゃないですか。黒いリンゴみたいな感じだったりとかするし、YouTubeも赤いままで、赤い楕円に三角っぽい感じのアイコン。
ずっと普遍的に識別しやすいから、あんまりコロコロ変えない方がいいなと思ってて。
そこがね、Googleが一番僕は下手だな。下手って失礼ですけど、3色4色使っちゃうのはいいんですけど、Google何かが脳でバグってしまうぐらいに寄せちゃってるんで、
もうちょっとそれぞれのサービスのブランドを作っていって、ブランドカラーとかも決めていって、それに合わせたデザインにしたらいいかなと思ってて。
そういった意味では、ある意味さっきちょっと言ったサイバーエージェントの、例えばアメブロっていうのとアベマTVっていうので、それぞれブランドをちゃんと分けて色分けもして、アイコン識別しやすくしてるっていうのは、非常にデザイナー視点からすると素晴らしいやり方なんじゃないかなと思ってるんで。
サービスごとにちゃんとブランドバリエーションを作って、なおかつメインのブランドとの繋がりも何かしら担保しておくっていうやり方をすると、そこの会社のアプリをGoogleみたいに5個10個出してるような会社が全部インストールしたら全部同じに見えちゃったらちょっとしんどいので、そういうやり方が今後いいんじゃないかななんて、デザイナー視点では僕は思ってたりします。
で、Appleはすごい前から上手だし、さっき言ったサイバーエージェント、僕はあまり使うことは少ない、アメリカにいる分あまり使うことは少ないんですけど、いいんじゃないかな。例えば楽天とかどうしたらいいか全然全く分からないですよ、そういった意味では。
使う機会はほとんどないので、その辺のブランドバリエーションで分けてアイコンもデザインしていけばいいんじゃないかなと思っている感じですね。
ありがとうございます。
ビートラックスでは日頃より好評をいただいているオリジナルebookの最新版を公開予定です。
今回は、エグゼクティブマネジメント層の方々にぜひ読んでいただきたい、ビジネスに役立つデザインの知見をご紹介するebookをご用意しております。
日本企業がグローバル市場でブランド力を武器に競争力を高めるポイントを3つ、事例を交えて分かりやすく解説しています。
番組概要欄のリンクから登録すると、公開日にebookをメールで受け取ることができます。
ぜひ皆様のビジネス戦略に新たな視点をもたらす貴重な情報源としてご活用ください。
サンフランシスコデザイントークでは番組に対する質問や取り扱ってほしいテーマを募集しています。
番組概要欄にあるこちらからGoogleフォームに飛んでいただいてぜひ送信してください。よろしくお願いします。
それでは今回の放送を終了します。ありがとうございました。
ありがとうございました。
