国内有数のブランドファームが語る、Studioで実現可能なデザインクオリティのこれから

“God is in the details / 神は細部に宿る” という信念から生まれた、デザインや演出に圧倒的なクオリティを見せるブランドファーム、STUDIO DETAILS。

国内外を問わず数多くの受賞歴を誇り、同社が手掛けるブランド戦略やクリエイティブ制作には業界内から確かな定評がある。

Studioで制作された「トヨタファイナンス デザインチーム」の採用サイトもまた、表現・演出の細部にこだわりが感じられる代表的な事例の1つだろう。驚くべきことに、ノーコードツールの活用はこれが初めてだったという。

どのような経緯から今回のプロジェクトは誕生したのか。エピソードを交えながら、STUDIO DETAILSの小林尚規氏、小猿啓太氏、豊田メル氏、大島涼佑氏の4名に、それぞれの視点からプロジェクトの舞台裏を語ってもらった。

両立を問われた、制作スケジュールとブランド体現

トヨタファイナンスが擁するデザインチームから「自組織の採用サイトをつくってほしい」と、STUDIO DETAILSへ制作依頼が入った。冒頭、まずはその背景から説明をする必要があると、今回のプロジェクトで統括を務めた小林氏が口を開いた。

トヨタファイナンスは、1988年にトヨタ自動車から分離・独立したトヨタグループの金融会社だ。スマホ決済アプリ「TOYOTA Wallet」など、複数の金融サービスを手掛けている。それらのビジュアルデザインやUI/UXデザイン、プロジェクトの企画立案など、幅広い役割をデザインチームは担っているという。

しかし、デザインチームが組成された当初は社内の認知度も低く、プレゼンスを高めることが喫緊の課題だったというのだ。STUDIO DETAILSが、デザイン組織のコンサルティングを任されたのがおよそ1年前の話となる。

小林氏「なぜデザイン組織を作るのか。会社としてデザインをどう活用するのか。土台となる定義づけにはじまり、デザイン活用のガイドラインやデザイナーの人事評価制度などをまずは策定しました。

並行してトヨタファイナンス側でも、金融DXの促進や新規BtoCサービスの拡充を加速させていたことから、即戦力となるデザイナー採用が急務に。当時のデザインチームは採用情報を発信する媒体が限られていたため、まずは採用サイトを制作することにしました」

だが、難しい課題にも直面した。求められたのは、納品までわずか1.5ヶ月というタイトなスケジュールだったのだ。トヨタファイナンスの採用ブランドを預かる以上は一切の妥協は許されない。厳しい条件下、最善の一手としてStudioが選択肢に浮上した。

小林氏「制作期間は短かったものの、目的や狙いは握り合えていました。ノーコードのStudioを使いつつ、STUDIO DETAILSのデザイン力を掛け合わせることができれば、ブランドを体現した採用サイトができると判断しました。

また、今後の運用を考えても、クライアント側でスムーズな更新ができるCMSがあることは機能的にも理想的でした。今回のケースでいえば『VALUES』『WORKS』『MEMBERS』の3箇所で活用しています」

ストーリーで訴求する。動画で伝える世界観のデザイン

小林氏がワイヤーフレームを書き、クライアントの狙いを落とし込むところからプロジェクトは始まった。コピーに「モビリティファイナンスに心躍る体験価値を生み出す」との言葉を据えると、続いてArt Directorの小猿氏とLead Designerの豊田氏が議論を深めたという。

小猿氏「求職者の方にもっとも響く表現やストーリーの情報設計から始めました。ビジョンや将来的に実現したいことなど、トヨタファイナンス デザインチームの活動に共感してもらえるようなデザインコンセプトを描き、採用サイトの最上段にキービジュアルを置く。そこから順にストーリー展開する訴求方法はどうかと社内で話を詰めていきました」

豊田氏「最終的に決まったのは、モビリティとファイナンスを示すアイコンが画面上に表示され、それらが上下左右・前後と縦横無尽に行き交い、駆け巡るデザインでした。トヨタファイナンスが目指す未来をシームレスに一連の動画で伝えたいと考え、実装方法も併せて模索していきました」

動画制作を含め、デザインに使える時間はおよそ1週間。トヨタブランドの世界観や先進的でクリーンな印象を出すことで、IT領域のデザイナーから関心を集めたいと考えた豊田氏は、3Dモデリングとモーショングラフィックスの製作に自ら着手した。

オブジェクトの形状やマテリアル、カラーリングの検証に試行錯誤を重ねた。透明感のあるガラス質とわずかな放射を加えた四角いキューブにはデジタルの意味を込めたという。

豊田氏「デザインだけでなく、採用サイト内の写真にもこだわっています。フォトグラファーにはディレクションの時点で、清潔感が感じられる少し青みがかかった表情・雰囲気が出るような撮影をお願いをしました」

改めてサイトを訪れると、『MEMBERS』セクションにおける一部のメンバーは顔部分に光が当たっていることに気づく。これは「顔出しをしたくない」というクライアントの要望によるもので、全体の雰囲気を損ねることなくリクエストに応えた演出といえそうだ。

クリエイティビティと利便性、双方を追求できるStudioの魅力

一方、Studioを活用して “クリエイティブの最大化” を実現するためには、アイデアを本当に高いクオリティで実装できるのかを考える必要がある。

この課題に対してLead Developerの大島氏は事前にStudioをよく調査し、複雑な実装であってもStudioのカスタムコードを活用すれば、ほとんどのアイデアは実装可能だと感じていた。

1つだけさらに調査が必要だったのは、動画データをどのように扱うかについてだった。動画データをアップロードする機能については、現時点でStudioに搭載されていない。

大島氏「解決方法として考えたのは、CDN環境を用意してあらかじめ動画をアップロードしておき、カスタムコードでDOM要素を挿入する方法でした。これがうまく機能したので、あとは実装で調整できました。パフォーマンス向上のために素材となる動画容量を可能なかぎり軽量化しつつ、最適な体験になるよう最後まで微調整をしました」

小猿氏「キービジュアルからイントロダクションへ、イントロダクションからその次のセクションへと、動画が1フレームも途切れないようスムーズにつなげる必要がありました。大島には、スクロールした際にどんなタイミングでも必ず動画の最後のフレームまで再生し、途切れず次の動画に切り替わるような細かい実装・演出を詰めてもらいました。できるだけインタラクションの阻害をしないような作り込みが重要だと考えたためです」

ほかにもSTUDIO DETAILSは、採用サイト内のコンテンツ『MEMBERS』でもアイデアの実装をしている。サイトを訪れるたびにメンバーの配置がランダムで変わるように仕掛けを施したのだ。この仕掛けには、トヨタファイナンス デザインチームがフラットな組織であると強調する狙いがある。

Studioのデフォルト機能として、ランダムに情報を出し分けるような機能は提供していないのだが、どのように実装したのか。

大島氏「MEMBERSのセクションには、メンバーの顔写真・名前・肩書などが配置されていて、クライアントはエディター上で画像などの追加・変更ができます。表示については、Studio上に配置した要素にスクリプトでスタイルを追加し、毎回ランダムで並び替えて表示しています。カスタムコードを活用し、シャッフルしたのち再配置するようなプログラムが、ページを開く前に毎回実行されています」

クライアント側で更新がしやすいStudioの利点を活用しつつ、カスタムコードをフルに活用して “クリエイティブの最大化” を実現している。

クオリティの定義はどう変わる？Web制作「未来」のスタンダードに向けて

業界内外からの反響も大きかったに違いない。トヨタファイナンスの担当者は、期待以上のアウトプットに驚きの声を隠せない様子だったという。その評価は親会社のトヨタ自働車にも届くほどだったそうで、副次的なPR効果があったことも小林氏は補足した。

STUDIO DETAILSの公式Xアカウントでも、いいねの数が1,000以上 、インプレッションも40万を超える反応があったとのことで、今後のWebサイトにおける「クオリティ」の定義について考えるきっかけにもなったそうだ。

小猿氏「Web制作のスタンダードが少しずつ変化しているのではないか。SNSのリアクションから、新たな視点を検討する機会になりました。

今回でいえば、採用活動に寄与するサイトをつくることが目的だったので、『制作期間をさらに3ヶ月延長したい』と提案してしまうとその分だけ採用機会を3ヶ月先延ばしにすることに繋がってしまいます。

実装工数やスケジュールを圧縮する分、コンテンツとして使用する写真やテキスト、デザインを含むあらゆる素材の作り込みに注力しクオリティを担保することは、重要なポイントだと考えています」

現状、ノーコードツールとしてのStudioと、STUDIO DETAILSとして求めてきたクリエイティブ要件にはギャップを感じつつも、将来的に目指すところが重なり合う可能性は十分にあると小猿氏は続けた。

短い制作スケジュールであっても、ビジネスの目的に寄与するデザイン性の高いWebサイトをつくることが新たなクオリティの定義だとしたら。「誰よりも、どこよりも、デザインのクオリティにこだわる」ことを使命に掲げるSTUDIO DETAILSの、次なる挑戦が始まる。