モーション（動き）を加えることで、まるで命が吹き込まれたかのうようにストーリーが活気づきます。Squareでは、2020年中ごろから自社ブランドの見直しをはじめ、Square ブランドにとってプラスになっている取り組みや、改善の余地がある分野など、さまざまな評価を行いました。Squareを客観的に眺めることで、明らかになったことがあります。それは「モーションをどのように活用するか」ということについて、ブランドとしての明確な見解がないということ。これまでにもビジュアル言語にモーションを取り入れようとする取り組みはありましたが、モーションの使い方に関する戦略的な基本原則はありませんでした。そもそもなぜモーションを取り入れるべきなのかという基本的な理解が欠けていたのです。
どんなプロダクトにも、その起源となるストーリーがあります。私たちの場合は、モーションの必要性や、世の中の誰もがAdobe After Effectsのような映像制作ツールを使いこなせるわけではないという事実にあらためて気づいたことで、ある1つの考えが浮かびました。「独自のモーションツールを作ったらどうだろう？」
まずは、モーションそのものに対する考え方と、モーションとSquareブランドとの関係を明確にすることから始めました。ニューヨークを拠点とするブランディング会社「Athletics」と提携し、モーションに関する4つの基本原則を定義・確立して、モーションデザインを進めていく基礎を固めました。
ストーリーをスムーズにつなぎ合わせる
前へ、上へ、そして外へ
はるかなジャーニー（旅）への道を開く
焦点を定め、明確にする
モーションに関する基本原則を考えるうえで、技術面においては「hard cuts（大胆なカット）」と「smooth transitions（スムーズな切り替え）」を追求しました。オフセットモーションを利用して勢いを共有し、ストーリーを伝えやすくすることを心がけています。Squareブランドにふさわしいモーションの使い方を確立した後は、モーションツールそのものについて掘り下げて考えることになりました。ツールの見た目はどんなふうにするべきか？どのように使用されるのか？さまざまなスキルレベルのユーザーを考慮して展開できるか？アクセシビリティへの配慮は？Squareのクリエイティブチームをはじめ、誰もがかんたんに使え、しかもすぐさまモーションデザインを作成できるようなプロトタイピングツールを開発するのは、決して容易な作業ではありませんでした。技術面を追求しながらデザインへの配慮も同時に行うには、何よりもチームワークが重要なカギとなりました。
機能性を中核に
Ottoはデザインはもちろん、機能性も充実しています。技術的な面では、Athleticsと連携して作業ができるよう、スケーラブルなモジュール式フレームワークを導入しました。これにより、ツール完成後もさらなる進化を重ねることができ、今後の使い方に合わせてSquareのエンジニアがツールを改良、維持、拡張することができます。またAthleticsとの連携により、コードの詳細を確認できるため、セキュリティ対策に配慮した安全で機能性の高いシステムを実現することができます。
しかし何といっても、Ottoの技術的な最大の利点は、モーションファイルをJSONファイルとして保存できること。JSONファイルなら、誰もが編集でき、モーションファイルの保存・共有が可能になります。わざわざエディタやAfter Effectsで作業しなくても、プロジェクトを手軽に編集することができます。このように、作業中のファイルが身近なローカルシステムにあることで、これまで以上にスムーズに工程を進められるようになります。世界中のさまざまなチームと作業モデルに取り組むことが求められる今後は、このスムーズな工程がさらに重要になります。
テスト実施とプロトタイプ作成
ツールに対する製品要件がはっきりしたところで、さっそくアルファ版のプロトタイプの作成に取り掛かり、初期段階から機能のテストをはじめました。モーションシーケンスとして25種類もあったため、それぞれの複雑性を理解し、使いやすさを追求するためには、すべての種類で負荷テストが必要になることが想定されました。
アルファ版のプロトタイプでは、Ottoで技術的にどのようなことができるのかが明確になりました。モーションの原則と技術を手軽に利用・拡張できるようにすることで、クリエイティブ関連のプロジェクトに求められるスピーディーな市場展開を実現する方法を見つけました。これがきっかけで、OttoはSquareのブランド、製品、マーケティングなど、さまざまな異なる分野を橋渡しできる存在になると期待できるようになりました。また、大きなデザイン組織で起こりがちな、「部門のサイロ化（部門間の連携がなく、部門ごとに作業を孤立して行うこと）」の解決にもつながると確信しました。チーム同士が結束することで、よりスマートに作業できるのはもちろん、Squareブランドを世界に向けてより柔軟に展開できるようにもなります。デザインシステムをより明確かつ自信に満ちた方法でアピールすることで、Squareを導入する新たなビジネスを引き付けることができ、さらには新たな考え方や社内の新たな才能の発掘にもつながるはずです。
Ottoの実現に向けて
デザインプロセスをはじめるにあたり、システムデザイナーなら誰もが知る作業をすべて実行しました。大手他社のフレームワークを利用して、レスポンシブ対応の12列のグリッドシステムを構築したり、フレキシブルなカンバスサイズや、タイポグラフィスケールを作成したりしました。
直感的で統一感のあるデザイン
Ottoならではの特長といえば、スタイリッシュなデザインエレメントがプリセットとして備わっていること。Squareのフォントファミリーをはじめ、製品UI、コアカラーパレット、編集済みの写真、コピーライティングに関する明確なガイドなど、すべてがツール内に揃っています。Ottoを起動すれば誰もが自動的に、Squareのイメージに一致するブランドのモーションデザインを作成できるようになります。主なデザイン機能としては、グローバルな言語サポートや複数のモーションデザインのシーケンスなども活用できるため、世界のさまざまな市場向けにより長い構成のストーリーを作成することができます。また社内でもOttoは活躍しています。新しいコンセプトを発表するときや、アイディアをモーションで表現するときなど、全体的なクオリティの向上や、ビジュアル体験のレベルアップに貢献しています。
ふさわしい名前
Ottoの開発は、例えるならまず本を書き上げ、最後に表紙をデザインするようなものでした。このツールの名称を考えるにあたり、「シンプルさ」と「嬉しさ」が表現できる名前を選びたいと考えていました。最終的に「Otto」という名が一番しっくりくると感じたわけですが、この名前を選んだ理由は３つ。まずこの名前が回文で、前から読んでも、後ろから読んでも同じスペルだということ。そして2つ目の理由として、「Otto」という名詞には複数の意味があり、ツールの特徴をうまく表していること。そして、文字の形状がエレガントでわかりやすいマークのようだったので、最終的にこの名前に決まりました。
モーションを前面に
2022年の3月上旬にリリースして以来、多くの人がOttoを試し、さまざまなクリエイティブソリューションとあわせて多彩な場面で活用しています。ソーシャルメディアでの投稿や、ストーリーボードでの活用、関係者向けの社内プレゼンなど、あらゆる場面でOttoは大活躍しています。
Ottoの開発にあたって、Squareで働く誰もが個性あるクリエイターになれるようにしたいという想いがありました。誰もが手軽にすばやくモーションデザインを作れるようになれば、Squareが展開するグローバルな環境でも一貫性を保てるはずだという確信がありました。Ottoはユーザーの使用言語やスキルのレベルに関係なく、誰にでも手軽に利用でき、機能性と柔軟性を兼ね備えています。直感的に操作できるため、特別なトレーニングの必要もありません。
Squareに所属するさまざまな部門のパートナーと共同作業を重ねることで、Ottoの実現にいたることができました。これまで、デザインと技術面でのレビューを毎週のように繰り返してきました。担当チームをはじめ、提携しているAthletics、関係者の間で、誰もが心置きなく話し合えるような環境づくりに努めました。多様な意見があることは有益なことですが、同時にニーズや期待がまったく異なるという事態にもつながりかねません。一つの考えに全員の同意を得ることは、決して容易な作業ではありませんでしたが、オープンな対話を大切にすることでプロジェクトを成功に導くことができました。最終的に「Ottoのあるべき姿」を正確かつ緻密に描くことができたのです。
ブランドシステムチームでは、2022年以降も引き続き、革新的で表現力にあふれ、つながりを重視したコミュニケーションを重ねることで、Squareブランドのさらなる成長をめざしていきます。そのために、常にコラボレーションを心がけ、これまでにないシステムやフレームワークの開発に努めます。Squareのデザインやテクノロジーなら、大きな飛躍ができると信じています。そして、「こんなふうにしたらどうなるだろう？」と常に好奇心をもって問い続けることで、Squareならではのユニークなソリューションの開発に取り組み続けたいと思います。