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

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

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

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


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

Neues Tuta-Logo mit Raster und Markenarchitektur in einem neuen Produkt-Ökosystem. Neues Tuta-Logo mit Raster und Markenarchitektur in einem neuen Produkt-Ökosystem. 今日、あなたは何回スイッチを入れましたか?

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

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

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

Erstellung der neuen Tuta-Website gemäß der neuen kreativen Ausrichtung der Marke Erstellung der neuen Tuta-Website gemäß der neuen kreativen Ausrichtung der Marke 新しいロゴを発表した後、私たちは洋平(ウェブ開発者)と一緒に新しいウェブサイトのワイヤーフレームを描くことから始めました。

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

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

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

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

Ein Teil des Moodboards, das den Entstehungsprozess der neuen Marke Tuta geprägt hat Ein Teil des Moodboards, das den Entstehungsprozess der neuen Marke Tuta geprägt hat ツタ・ブランドのクリエイティブ・プロセスに関わる参考資料、草案、スタディ(左)、ムードボード(右)。

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

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

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

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

Graffiti von Hannah Arent (1906-1975) an dem Gebäude, in dem sie geboren wurde in Linden (Hanover) Graffiti von Hannah Arent (1906-1975) an dem Gebäude, in dem sie geboren wurde in Linden (Hanover) 「誰も従う権利はない」。ハノーファーにあるハンナ・アーレントの生家の建物内の落書き。(アートワーク: Patrik Wolters / Kevin Lasner. 写真: Bernd Schwabe.)

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

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

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

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

Die Animation, die das neue Signet von Tuta invertiert, spielt mit dem Slogan der Marke, „Turn on Privacy“, und erzählt eine Geschichte. Die Animation, die das neue Signet von Tuta invertiert, spielt mit dem Slogan der Marke, „Turn on Privacy“, und erzählt eine Geschichte. ストーリーテリングのための空間。暗号技術とのクリエイティブな関連付けは、さまざまなオーディエンスの意識を高めるためのスペースを開く。

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

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

Von der Inspiration durch einen realen Schalter zur geometrischen Abstraktion auf der Grundlage des Rasters des Goldenen Schnitts. Von der Inspiration durch einen realen Schalter zur geometrischen Abstraktion auf der Grundlage des Rasters des Goldenen Schnitts. ロッカースイッチの等角図。新しいTutaシグネットの構成グリッドは、フィボナッチ数列(Φ=1,618)に従って分割された黄金色の正方形の長方形をベースにしている。

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

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

Treffen des Rebranding-Teams, das gleichzeitig die neue Marke und die Website entwickelt. Treffen des Rebranding-Teams, das gleichzeitig die neue Marke und die Website entwickelt. 左上からマティアス(共同創設者)、ダニエル(デザイナー)、洋平(ウェブ開発者)、ハンナ(マーケティング責任者)、アルネ(共同創設者)。左下、ロゴのバリエーションについて話すブランドンとダニエル。(写真:Lena Britz)

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

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

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

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

Das Studio Fabio Haag hat unseren ersten Entwurf für die Wortmarke typografisch aufpoliert, bis wir die endgültige Buchstabenform gefunden hatten. Das Studio Fabio Haag hat unseren ersten Entwurf für die Wortmarke typografisch aufpoliert, bis wir die endgültige Buchstabenform gefunden hatten. パートナーシップファビオ・ハーグ・スタジオは、私たちのワードマークの原案を検討し、タイポグラフィを反復することで、より個性的で読みやすいものにすることを任されました。

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

Die Teile, aus denen die neue Marke Tuta besteht Die Teile, aus denen die neue Marke Tuta besteht 新しいTutaブランドの解剖学。

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

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

Wärmer und dynamischer. Ein Vergleich von Marke und Website vor und nach dem Rebranding, von Tutanota zu Tuta Wärmer und dynamischer. Ein Vergleich von Marke und Website vor und nach dem Rebranding, von Tutanota zu Tuta ツタノタからツタへ。以前は冷たくモノトーン(左)だったが、現在は暖かくダイナミック(右)。

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

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

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

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

Die neue Unternehmenstypografie und die neuen Farben bringen die nötige Energie und den Kontrast für den Kampf für Privatsphäre. Die neue Unternehmenstypografie und die neuen Farben bringen die nötige Energie und den Kontrast für den Kampf für Privatsphäre. 色と形のエネルギーが、プライバシーのための私たちの戦いを後押しします。

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

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

Die Bilder auf unserer Webseite waren dunkel und schwer, jetzt sind die Bilder mit warmen Farbtönen zwischen rot und gelb hinterlegt Die Bilder auf unserer Webseite waren dunkel und schwer, jetzt sind die Bilder mit warmen Farbtönen zwischen rot und gelb hinterlegt 以前は(左)、画像は暗く重く、ソフトウェアでモノクロ効果を適用して作業していた。現在は、写真家アリレザ・フッセイニとのパートナーシップによるクリエイティブ・ディレクションのもと、光とともに色が計画されている。

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

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

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

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

Tuta behält den alternativen Punk-Underground-Look, gemischt mit Pop-Noten. Tuta behält den alternativen Punk-Underground-Look, gemischt mit Pop-Noten. 映画『トレインスポッティング』とアーティスト、バンクシーの作品(左)、旧ウェブサイト(上)、そしてチームメンバーとオフィスの壁に飾られたフレーム(下)。

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

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

Tutas neue Illustrationen arbeiten mit Licht- und Schattenkontrasten und lebendigeren Farben Tutas neue Illustrationen arbeiten mit Licht- und Schattenkontrasten und lebendigeren Farben 左はメル・ウィルケンがユーザー・フィードバック・インターフェースのために描いたイラストの一部で、右はFeuが私たちのアプリのウェルカム・インターフェースのために描いたイラストです。

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

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

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

Das Tuta-Logo und die Markenarchitektur mit den neuen Produkten Tuta Mail und Tuta Calendar Das Tuta-Logo und die Markenarchitektur mit den neuen Produkten Tuta Mail und Tuta Calendar ブランド構築のためにデザインされたロゴとその製品アイコン。

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

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

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

Das neue Produkt-Ökosystem von Tuta: Tuta Mail, Tuta Calendar und weitere Produkte werden folgen. Das neue Produkt-Ökosystem von Tuta: Tuta Mail, Tuta Calendar und weitere Produkte werden folgen. ファミリーは成長している。Tutaの新しい製品エコシステムは、Tuta MailとTuta Calendarで始まったばかりです。

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

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

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