リブランド・ツタ:新しいビジュアル宇宙の源を開く

プライバシーをONにする。それがTuta(nota)の初日から提供しているものです。今、私たちのブランド・アーキテクチャは、新しいアプリのエコシステムに反映されています。

New Tuta logo, its grid and the brand architecture in a new product ecosystem.

目が覚め、目を開けては閉じ、また眠りに落ちる。目覚まし時計が悲鳴を上げる。外はまだ暗い!廊下の電気をつけると、瞳孔が収縮する。目を閉じたままバスルームのスイッチを入れ、顔を洗う。カチッ!キッチンに入り、コーヒーを淹れてメールを読む。日差しが家の中に差し込む。突然、プライベートな空間がパブリックな空間に変わる。歩道に出るとすぐに街灯が消える。カチッ!


比喩とそのストーリーテリングの可能性

New Tuta logo, its grid and the brand architecture in a new product ecosystem. 今日、あなたは何回スイッチを入れましたか?

Tutaでは、アプリを提供するだけでなく、ウェブ上のセキュリティとプライバシーに関する認識を広めることを使命としています。この目的のために、比喩的な連想によるストーリーテリングは、技術的で合理的な説明を超えて人々を目覚めさせる強力なツールです。

皆さんはおそらく、1日に何回スイッチを切り替えるか分からないほど、何度もスイッチを切り替えているのではないでしょうか?あまりに自動的にやってしまうので、もう気づかない。ウェブも似たようなものだ。私たちは何も考えず、デジタル企業が私たちのデータを暗号化などで安全に保つことを期待しているだけなのです。それが私たちTutaの仕事であり、すべてのユーザーに約束することです:完全なコントロールをあなたの手で

完全に刷新されたブランド・アイデンティティは、まさにそれを反映しています。より鮮やかなサポートカラーを使い、ストーリーの可能性に満ちたミニマルなシンボルで、私たちはTutaブランドにモダンで暖かく、エネルギッシュな印象を与えました。

Tuta new website building process following the new brand creative direction 新しいロゴを発表した後、私たちは洋平(ウェブ開発者)と一緒に新しいウェブサイトのワイヤーフレームを描くことから始めました。

ステップ・バイ・ステップで、Tutaが新しいクリエイティブな方向へと移行していく様子をご覧いただけます。まず、アプリと旧ウェブサイトでロゴ(スイッチ)を発表しました。そして最近、「プライバシーをONにする」という新しいキャッチフレーズとともに新しいウェブサイトを立ち上げました。こうすることで、私たちの視覚的な物語は、このデバイスの基本的な機能である「何かを簡単にONにする」とつながることになります。今回の更新で、私たちはリブランディングの重要な部分を完了しました。次のステップは、新しいブランドを直接製品に展開することです。

私たちのクリエイティブ・プロセス、各決定を導いたコンセプト、そして最も重要なことですが、これが私たちの製品であるTuta Mailと Tuta CalendarのUXとUIにどのような価値をもたらすかについて、続きをお読みください。

新ブランド、新アナロジー

デザインはプロセスであり、それは多くの反復とルート変更を意味する。そのため、私たちは新しいシンボルにたどり着くまで、旧ロゴと同じように曲がりくねった道を歩んできました。この道では、暗号の視覚的な決まり文句(鍵、南京錠、盾、文字など)から、マスコットとしての動物まで、さまざまなコンセプトを経験した。これらすべての選択肢において、まだ何かが欠けていた。そして突然、「カチッ!」と音がした。

Part of the mood board that shaped the creation process for Tuta's new brand ツタ・ブランドのクリエイティブ・プロセスに関わる参考資料、草案、スタディ(左)、ムードボード(右)。

プラトン以来、あるいはそれ以前から、光と影に関する寓意は哲学や文学の一部であり、プラトン自身の洞窟神話はそのひとつに過ぎない。

毎日使う電気のスイッチは、多くの可能性を秘めている。光と影を通して公共空間と私的空間の移り変わりを探る、豊かなストーリーテリングのシンボルなのだ。この関係は目新しいものではなく、私たちのプロセスでは、ツタと同じくハノーファー生まれのハンナ・アーレントの考えに触発された。アーレントは私的領域と公的領域について長い時間をかけて考察し、前者を家庭の壁の居心地の良い影—私たちが個人として立ち直るために必要なもの—として扱い、後者を私たちが共同体の中で生きていけることを証明する日光、つまり私たちの可能性を発展させることができる公的空間として扱った。彼女にとって、どちらの空間も充実した人生の基本である。

人前で、他人がいるところだけで過ごす人生は、言ってみれば浅はかなものになる。それは可視性を保つ一方で、非常に現実的で非主観的な意味での深みを失わないためには、隠されたままでなければならない、ある暗い地面から視界に浮かび上がるという性質を失うのである。

ハンナ・アーレント『人間の条件』。

Graffiti illustrating Hannah Arent (1906-1975) on the same building where she was born in Linden (Hanover) 「誰も従う権利はない」。ハノーファーにあるハンナ・アーレントの生家の建物内の落書き。(アートワーク: Patrik Wolters / Kevin Lasner. 写真: Bernd Schwabe.)

以前のシンボルマークのメタファー(暗号化によってリラックスした気分になるための道)は、私たちの現在のポジショニングにとって、あまりにもサブリミナルなものになっていたことも確認されました。新しいメタファーでは、プライバシーの権利という信条は守りつつ、より客観的/物質的な方法で、ユーザーが完全にコントロールできるようにしました。Tutaはプライバシーへの道を開くだけでなく、日常的なプライバシー・デバイスであり、シンプルで使いやすい。

旧ブランドを監査する過程で、私たちはほとんどのテック企業(特に暗号化/プライバシー・ビジネス)がこのテーマを中立的かつ冷淡に扱っていることに気づき、新しいアイデンティティにもっとエネルギーと人間的な感情をもたらすことができると考えました。

新しい外観は、常に強い個性を反映してきた私たちのブランドの声とも、より合致するはずです。つまり、たとえそれが商業的に有利であったとしても、私たちは最大限の安全性を決してあきらめないということです。このことを念頭に置いて、新しいクリエイティブ・ディレクションは、プライバシーを選択する可能性という基本的な権利のための闘いのコミュニケーションに人間味を与え、温かみを加えることを目指した。

シグネット:強力な(そして明白ではない)視覚的隠喩

The animation that inverts the Tuta's new signet plays on the storytelling of the brand's tagline, “Turn on Privacy” ストーリーテリングのための空間。暗号技術とのクリエイティブな関連付けは、さまざまなオーディエンスの意識を高めるためのスペースを開く。

2023年、私たちはTutanotaからTutaに社名を変更しました。この短い名前は、ビジュアルにおいてもミニマリスト的なトーンを打ち出し、Tutaのミッションである「すべての人にアクセス可能なプライバシー」を翻訳する形式的なシンプルさを追求しました。この前提を念頭に置き、マーケティングとブランド戦略に関する徹底的なリサーチを経て、私たちは日常生活に存在するこのアイテムをグラフィックで表現することを思いついた。

スタイル的には、Tutaスイッチはイラスト的であることにこだわりはなく、このオブジェクトのリアルな表現であることを求めることもなく、むしろこの器具のいくつかの特性と動作を切り離したミニマリスト的抽象化である。

From inspiration in a real switch to geometric abstraction based on the golden ratio grid ロッカースイッチの等角図。新しいTutaシグネットの構成グリッドは、フィボナッチ数列(Φ=1,618)に従って分割された黄金色の正方形の長方形をベースにしている。

ミニマリスト的でアイソメトリックではあるが、ロゴとしてのこの表現は、スイッチの物理的な機能を幾何学的に保持しようとするものであり、元の形状の位置を垂直に反転させることで、ON/OFF位置のアニメーションや「プライバシーをONにする」/「監視をOFFにする」といったストーリーテリングで遊ぶのに十分な認識力を保っている。

ロゴは写実的なイラストレーションであることを主張しないため、常に主観の余地があり、見る人の解釈の余地がある。時には、気に入ったロゴが想像もしていなかったことを表現しているのを発見して驚くことさえある。だからこそ、私たちはロゴが実際に何を表しているのかよくわからなくても好きになってしまうことがあるのです。形や構図、あるいは感情が伝わってくるだけで、私たちの共感を得ることができるのです。

Meetings of the rebranding team, creating at the same time the new brand and website 左上からマティアス(共同創設者)、ダニエル(デザイナー)、洋平(ウェブ開発者)、ハンナ(マーケティング責任者)、アルネ(共同創設者)。左下、ロゴのバリエーションについて話すブランドンとダニエル。(写真:Lena Britz)

新しいシンボルの懸念は、ネガティブなもの、あるいは私たちが連想したくないものと混同されないようにすることでした。観客との知覚テストでは、望ましくない連想は確認されなかった。

使いやすさは、ツタが常に求めている品質です。このような使い勝手の良さによって、プライベートな空間を選ぶという概念をよりよく実現できるものは何でしょうか?この普遍的なシンボルを選ぶにあたっては、利用者を広げ、誰もがプライバシーにアクセスできるようにするという目標も考慮された。ツタの新しいシグネットを反転させるアニメーションは、ブランドのキャッチフレーズである「プライバシーをオンにする」のストーリー性を演出している。

ワードマーク:特注の小文字

シンボルマークのデザインが決まったら、今度はスイッチのタイポグラフィに調和した文字を作るための最良の方法を考え、新しいロゴのデザインを完成させることが課題となった。小文字と筆記体からインスパイアされた書体を使うことで、カジュアルさを表現し、「安全」という大きな意味を持つこの小さな言葉をより親しみやすく表現することができた。

Fabio Haag studio typographically polished our first wordmark draft until we arrived at the final letter shape パートナーシップファビオ・ハーグ・スタジオは、私たちのワードマークの原案を検討し、タイポグラフィを反復することで、より個性的で読みやすいものにすることを任されました。

私たちのシンボルは幾何学的であるため、構成にコントラストをもたらし、手書きの文字「a」からインスピレーションを得た「a」のような、より有機的で表情豊かな形を提供する活字をデザインすることでバランスを取りました。スイッチの対角線上の角度は、活字を自然にイタリック体の軸へと導いた。Tutaのワードマークは私たちのシンボル用にカスタマイズされたため、対角線は文字の軸だけでなく、文字’t’の頂点と両端のカッティングにも直接影響を与えた。このミッションのために、私たちは活字デザイナーのファビオ・ハーグの才能に頼り、彼は素晴らしい仕事をしてくれた。

The parts that make up the new Tuta brand 新しいTutaブランドの解剖学。

色とフォント:より多くの色合いとコントラスト

テック・ジャイアントとの闘い、つまり脱Googleの使命は決して冷たいものではなく、この挑戦に対する私たちのアプローチも決して生ぬるいものではありません。このミッションに必要なエネルギーを得るために、私たちはカラーパレットを拡大した。

Warmer and more dynamic. A comparison of the brand and website before and after the rebranding, from Tutanota to Tuta ツタノタからツタへ。以前は冷たくモノトーン(左)だったが、現在は暖かくダイナミック(右)。

旧シンボルは技術的な問題に悩まされていた。小さなサイズでは、最後のカーブのディテールが小さすぎて判読できなくなり、パスの終わりが光学的に消えてしまうのだ。新しいシンボルのミニマリズムと、よりゆったりとした直線的な隙間は、ピクセルの歪みに悩まされることなく、本当に小さなサイズでも新しいロゴを読みやすくしている。

以前のタイポグラフィは、シンボルとのつながりが弱く、2つの異なるフォントのウェイトが混在していたため、より断片的な読み方になっていました。

以前の配色は、白とグレーの背景に1色の赤を使った、冷たく単調なものでした。よりダイナミックな色調にすることで、色彩の持つエネルギーに頼り、プライバシー保護への闘いを推進することができるようになりました。

古典的なワインレッドの色彩はそのままに、これまでの100%黒に代わって、赤を多用した新しい黒が登場した。また、オリジナルのワインカラーに、赤、マゼンタ、ローザカラーの二次的な色合いを加え、さらに強度を増しました。ファイター」と名付けられた鮮やかな赤のような彩度の高い色は、オレンジやイエローの晴れやかなムード、ベージュやピーチトーンの居心地の良さと組み合わされている。背景色の白とグレーに漂う無個性さを打ち消そうとしたのは、この「人に優しいムード」を念頭に置いてのことだ。この決断は、私たちの使命を人間的なものであると考える私たちの考え方と一致しています。というのも、私たちにとって、プライバシーとはまさに人間に関するものであり、その基本的権利なのだから。

New corporate typography and colors bring the energy and contrast needed to fight for privacy 色と形のエネルギーが、プライバシーのための私たちの戦いを後押しします。

私たちはまた、より良い企業タイポグラフィへの第一歩を踏み出しました。私たちの古い書体はシステム・サンセリフでした。普遍性とパフォーマンスを維持しつつ、タイポグラフィのコントラストをもう少し強くするために、私たちはサンセリフとセリフSCのバリエーションからNotoを選びました。これは、特に新ブランドのために考えられたタイポグラフィ・システムへの第一歩である。そして新しいウェブサイトでは、より興味深いタイポグラフィの階層を実現することができるだろう。

イメージ:モノクローム・アンダーグラウンドと温かみのあるポップの融合

The images on our website were dark and heavy, now the images transfer warm lights between red and yellow 以前は(左)、画像は暗く重く、ソフトウェアでモノクロ効果を適用して作業していた。現在は、写真家アリレザ・フッセイニとのパートナーシップによるクリエイティブ・ディレクションのもと、光とともに色が計画されている。

視覚的に、私たちのクリエイティブな決定は、私たちのパンクでハック的なルックのある種の保存を反映しており、例えば新しい色やイラストに「バンド」にポップなノートをもたらしている。私たちのブランドは現在、オーセンティックなイメージを持っており、一般的なイメージ・データベースはできるだけ避けるつもりです。私たちの価値観を表現するのはチームであり、そのために、新しいウェブサイトのチーム写真を撮影したアリレザ・フセイニなど、地元の写真家と協力しています。イラストや図像も同じように、ハノーファーのメル・ウィルケンのような地元のイラストレーターや、ブラジルのフェウのような国際的なイラストレーターと仕事をしています。

Tutaはハイテク企業の中でも、より人間的なブランドとして常に際立っている。商業的価値が低いという意味でも、より親しみやすい外観という意味でも、大手ハイテク企業の論理に逆らう大胆な使命を持った小さな集団であることが反映されている。

Tutaともう一人の子供との間で決断を迫られた。私はそれぞれのウェブサイトを閲覧して感触を確かめたが、より商業的な印象を受けたもう一方のウェブサイトよりも、Tutaの親しみやすさと知識の共有を重視する企業文化の方が好きだった。Tutaの人間的な側面が、私をそちらに向かわせたのです。

cdrc @cdrc@tux.social, 2024年3月10日

Tuta keeps the alternative-punk-underground look mixed with pop notes 映画『トレインスポッティング』とアーティスト、バンクシーの作品(左)、旧ウェブサイト(上)、そしてチームメンバーとオフィスの壁に飾られたフレーム(下)。

前ブランドから続くステンシル・ルックは、Tutaのプライバシー革命のポジショニングに合うアンダーグラウンドな価値を間違いなくもたらす。

市場に対するこのパンキッシュな抗議姿勢において、私たちはチームのステンシル・イラストのようなこのアンダーグラウンドなルックのエッセンスを残そうとしました。私たちは小さな会社であることを愛し、オルタナティブであることを愛し、アンダーグラウンドを愛しています。だからといって、私たちのソリューションをニッチなものに限定したいわけではなく、むしろウェブ上のプライバシーに対する意識を高め、プライバシーを可能にすることで私たちのリーチを広げたいのです。

Tuta's new illustrations work with contrast of light and shadow and more vibrant colors 左はメル・ウィルケンがユーザー・フィードバック・インターフェースのために描いたイラストの一部で、右はFeuが私たちのアプリのウェルカム・インターフェースのために描いたイラストです。

私たちの新しいイラストは、点描技法(暗い点を集中させて影を作る)を使った陰影によって、光と影/パブリックとプライベートのコントラストをコンセプトにしています。また、よりダイナミックな新しいカラーパレットを使用しています。

リブランディングの段階と今後の製品

アプリアイコンにどの程度のブランディングが必要かは相対的なものであり、戦略的なものからフォーマルなものまで、さまざまな要因に左右されます。ブランドとその製品の間に視覚的な一貫性を持たせることは、色、イラストのスタイル、タイポグラフィなど、さまざまな方法で可能です。リブランディングの過程で、私たちはブランドと製品を形状レベルでも一致させたいと考えました。このため、Tuta製品のアイコンは、ブランドシグネットのグリッドに由来し、部分的に同じ構造を持っています。Tutaのアプリファミリーは、カラーシステムと、メールの「M」やカレンダーの「31」といった最初の文字で区別されています。

The Tuta logo and brand architecture with the new Tuta Mail and Tuta Calendar products ブランド構築のためにデザインされたロゴとその製品アイコン。

私たちは現在、ブランド開発と呼ばれるリブランディングの第3段階にいます。私たちのプロセスは4つのフェーズに分かれており、以下のように名付けています:

  1. ブランド監査 (旧ブランドの分析)
  2. ブランド・クリエイション (シンボルマーク、ワードマーク、カラーなど新しいロゴの作成)
  3. ブランド開発 (新しいクリエイティブな方向性をすべてのブランド資産と製品に広げる)
  4. ブランドの実施 (一貫したデザイン・システムの採用)

リブランディング・プロセスでは、すべてのフェーズ、特にブランド監査フェーズにおいて、チーム全員がいくつかのワークショップに参加した。

The Tuta new product ecosystem: Tuta Mail, Tuta Calendar, and more to come. ファミリーは成長している。Tutaの新しい製品エコシステムは、Tuta MailとTuta Calendarで始まったばかりです。

すべてのものを、すべての人のために暗号化することをモットーに、Tutaの新しい製品エコシステムには多くの新機能が登場します。Tuta MailとTuta Calendarでファミリーを発足。

次の主なリブランディングステップとして、私たちは製品のUX/UIにさらに直接取り組み始めます。

ここTutaでは、企業、医療クリニック、活動家、ジャーナリストなど様々な人々やグループの要求を満たす、暗号化されたエコシステム製品の成長に興奮しています。今後数回のデザイン投稿で、私たちは今後のリリースについてさらに詳しく説明し、それらがTutaの暗号化ソリューションでの体験にどのようなプラスの影響を与えるかを紹介します。