Hermeticaは3Dデザインでフィンテックのブランドをどう引き上げたか

フィンテックのスタートアップHermeticaが、暗号資産に慣れ親しんだ投資家向けのブランドを構築しようとしたとき、おなじみの課題に直面しました。

何百もの似たような金融商品の中に埋もれることなく、信頼、透明性、技術的な信頼性をどう伝えるか？

この課題を託されたのが、Lepisov BrandingのチームであるDmitry LepisovとArthur Skripnikです。彼らが目指したのは、ビジュアルアイデンティティをつくるだけでなく、完全なブランドシステムを築くことでした。

マーケティング素材、製品のUI、SNSにまたがって展開でき、それでいて柔軟性とスピードを保ち、ブランドの精神に忠実であり続けるシステムです。

新しいタイプの金融の顧客層に向けたデザイン

Hermeticaは、暗号資産ウォレットや独自のステーブルコインなど、暗号資産ベースの金融商品を開発しています。

「金融は、伝統的にビジュアルが退屈な分野です」とDmitryは説明します。

チームは最初から、ビジュアルだけでは足りないとわかっていました。スピードやパフォーマンスを犠牲にすることなく、奥行き、動き、インタラクティブなデザインが必要でした。

Hermeticaのブランドには、真面目で信頼できる印象と同時に、際立つだけの独自性と創造性も必要でした。

3Dのコインが、ビジュアルシステム全体になるまで

プロジェクトは、ひとつのピッチデックという、かなり小さなところからはじまりました。

ArthurはSplineで、ダークでミニマル、手触りを感じさせる3Dのコインをひとつデザインしました。ブランドを定義するためではなく、ストーリーを支えるためのものでした。コインは投資家向けのピッチデックのためのものでしたが、反応はすぐにありました。

創業者たちに見せると、とても気に入ってくれました。同じ3DのスタイルをSNSにも取り入れられないかと頼まれ、次はWebサイトに、そして最終的には製品のUIにまで広がりました。

小さなプロジェクトとしてはじまったものが、あっという間に、すべてSplineで構築された、3Dを軸にした完全なシステムへと発展しました。

ブランドシステムと言語をつくる

プロジェクトが大きくなってもビジュアル言語とスタイルの一貫性を保つため、デザインチームは、統一されたコンセプトに沿って独自のブランドアイデンティティを確立しつつ、柔軟性とスピードを保てるフレームワークを開発しました。

• Macro - Hermeticaの中核となる製品を表す、ひとつの非常に精緻な3Dトークン。
• Mezzo - 製品の機能やストーリーに使う、積み重ねたり並べたりしたコイン。
• Micro - 市場の変動やトレンドを映す、波のようなパターンをつくる何千もの小さな要素。

このブランドシステムは、すべてのキャンペーンや投稿が同じロジックに沿うように、ブランドの背後にあるストーリーを紡ぐためにつくられました。

ルールがすでにシステムに組み込まれていたので、Hermeticaの社内チームは、ビジュアルの一貫性を崩すことなく自分たちで作業できました。

Hermeticaにとって、これらのグラフィックは魔法のように見えたようです。役に立つものをつくれて、私たちも満足しています。

Splineがワークフローに合った理由

画像、動画、SVGにわたるSplineのインポートとエクスポートの機能のおかげで、既存のアセットを複数のアウトプットに合わせて調整・再利用できる、速く柔軟なワークフローが実現しました。

Splineは単なる3Dツールではありませんでした。ブランドのための制作環境であり、オペレーティングシステムになったのです。

Arthurにとって、その魅力は明らかでした。

• ステートベースのアニメーション
• リアルタイムのレンダリング
• 複数の制作アウトプットに向けて、デザイン、アニメーション、アセットの準備をひとつの場所でできること

Dmitryにとっては、コラボレーションが一変しました。ワイヤーフレームや静止画のレンダリングを確認する代わりに、完全にインタラクティブなシーンをすぐに見て、ファイルに直接コメントを残したり、自分で要素を調整したりできたのです。

Hermeticaのチームも同じで、リンクを開くだけで、文脈の中で作品を体験できました。その結果、レビューは速くなり、判断も明確になりました。

私たちが設けたルールのおかげで、HermeticaのチームはSplineのファイルを開いて、カメラの視点などを調整し、簡単にエクスポートできました。

パフォーマンスを犠牲にしないスピード

Hermeticaは、しばしばタイトなスケジュールでリリースしていました。新機能、ダッシュボード、キャンペーン……

「クライアントから『1週間でこれを発表しなければならない』と言われることもありましたが、Splineのおかげで超高速で納品できました」

そうしたタイトな締め切りのひとつに間に合わせるため、チームはSplineで直接プロモーション動画をまるごとつくりました。従来の3Dレンダリングのパイプラインに頼らず、アニメーションとレンダリングをリアルタイムで処理したのです。

簡単でした。ダッシュボードの要素をいくつか読み込んで、押し出して、ライトを加えるだけ。魅力的なビジュアルをあっという間につくれました。

このプロジェクトのもうひとつの課題は、サイトのパフォーマンスに影響を与えない、ビジュアルの豊かなシーンをつくることでした。

「Micro」のアニメーションをつくるため、Arthurは超軽量なソリューションを考え出しました。三角形のコンポーネントひとつを、Splineのクローナー機能で何千回も複製したのです。マテリアルはひとつ。コンポーネントもひとつ。インスタンスは何千。

完成したシーンはわずか7〜10KBで、パフォーマンス最適化のテストでも高いスコアを記録しました。それでいて、洗練され、ダイナミックで、生き生きとした印象を保っていました。

すべてをシンプルにする集約

Splineのおかげで、チームは流れを止めることなく、さまざまなメディアをまたいで作業できました。

• インタラクティブなWebサイトのシーンを直接埋め込む。
• 製品UIのプロモーション動画をリアルタイムでレンダリングする。
• 同じコアアセットからSNS用のアニメーションをつくる。
• Splineから書き出したPNGでブランドガイドラインを構築する。

Hermeticaの社内チームがバリエーションを必要とするときは、ソースファイルを開いてカメラアングルを調整し、ゼロからはじめることなく新しいアセットを書き出せました。

引き渡しは、デザインシステムそのものと同じくらい柔軟でした。Splineは、スピードをトレードオフではなく機能にしたのです。

クリエイティブの勢いが残っているうちに、アイデアをコンセプトから制作へと進められました。長いレンダリング待ちもなければ、分断されたワークフローもなく、ツールをまたいで意図を説明し直す必要もありません。

何かをつくるとき、いちばん大切なのは勢いです。それを失いたくはありません。Splineのおかげで、アイデアをあっという間に可視化し、形にできます。

Splineをはじめよう

スケジュールを短縮し、手間を取り除くことで、Lepisov Brandingは、引き渡しも妥協も少なく、より高品質な仕事をより速く届けました。

そして、このレベルの「速さ」がどんなものかを知ったHermeticaの期待は変わりました。「SplineはHermeticaの基準を引き上げました。今では、これほど短い時間でどれだけの品質を実現できるかを知っています」

Splineによって、つくる人のスピードを落とすことなく、表現力があり、高性能で、スケーラブルなブランドシステムを構築できました。

営業担当に相談