「Money Forward Tech Day2024」 ウェブサイト制作チームインタビュー

マネーフォワードが開催したテックカンファレンス「Money Forward Tech Day 2024」
そのウェブサイト制作にも新しいチャレンジがありました。

目指したのは、モーションデザインとアクセシビリティ※の両立。
※利用者の障害などの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々が提供されている情報やサービスを利用できること。

結果的に、軽くなめらかなモーショングラフィックは好評をいただき、Webデザイン参考サイトや、アクセシビリティを実現している事例として、「Accessible Website Gallery」「me ki ki ki」「S5-Style」などにも取り上げられました。

この記事では、社内外でタッグを組んだウェブサイト制作チームにインタビュー。
是非、実際のサイトもご覧いただきながら、お読みください。

【岩木 伊織（いわき いおり）】
フリーランスのモーショングラフィックスデザイナー。本プロジェクトでは、アニメーションツールRiveを活用した、モーショングラフィック制作を担当。

【清川 太雅（きよかわ たいが）】
マネーフォワードのフロントエンドエンジニア。アクセシビリティステートメントの策定にも関り、本プロジェクトの実装を担当。

【寺村 卓朗（てらむら たかお）】
マネーフォワードのBXデザイナー。「Money Forward Tech Day 2024」全体のデザイン統括・制作を担当。

モーショングラフィックをアップデートしたかった

ーーどういった経緯で今回のチームが立ち上がったんですか？

寺村：サイトの制作にあたり、専門性の高いモーションデザイナーの方と組みたいと考えていました。

これまでのマネーフォワードのウェブデザインでも、グラフィックやアニメーションなどを取り入れてきましたが、複雑な動きの再現が難しかったり、画像が荒くなってしまう等の課題を抱えていました。これをもっと統合的でインタラクティブなものにしたかったんです。

そこで、Instagramで気になっていた岩木さんにお声がけさせていただきました。

岩木：最初にInstagram経由でご連絡をいただいた時は、驚きました。僕は決してフォロワー数も多い方ではなかったし、もっと有名だったり大手のデザイン事務所もあるのに、なんで僕に声をかけてくれたんだろうかと。

寺村：岩木さんはポートフォリオやこれまでの実績から、クライアントワークをしっかりされている方という印象を受けました。

なにより、アウトプットが多彩だった。フラットなデザインのものもあれば、リッチに作り込まれたものまで、色んなチャレンジしている様子をうかがえて、こういった方ならコラボレーションしながら一緒に新しいチャレンジができそうだと考えたんです。

（左から寺村さん、岩木さん、清川さん）

清川：私の参加経緯としては「勝手に巻き込まれにいった」というのが一番正確かも（笑）

私はもともと運営スタッフではなく、エンジニア向けに登壇者募集があったタイミングで、テックカンファレンスについても知ったんです。そこから、運営について意見を出しているうちに「もうスタッフに入ってよ」と言われて、あれよあれよという間に参加することに。

特に興味があったのがイベントのウェブサイト制作です。

私は「アクセシビリティステートメント」の策定に関わってたので、実際に社内で事例になるようなサイトを制作したいと考えていました。寺村さんの話を聞いて、今回のサイトは、モーションは入りつつも構成自体はシンプルで、試行錯誤しつつ良いロールモデルにできそうだと思いました。

ダイナミックなデザインとアクセシビリティの両立

ーー 制作はどんな風に進められたんですか？

寺村：清川さんの参加が決まったところで、岩木さんにもアクセシビリティを重視したサイトにしたいと相談しました。

結果として、3人で対話しながら、モーショングラフィックとアクセシビリティが両立した良いサイトができたと思います。

清川：ポイントは「アニメーション」と「コンテンツ」を明確に分けつつ、ユーザーから見るとその2つがシームレスに繋がっている体験を作ることでした。

今回のアニメーションは、サイト上でイラストが常に動き続けています。しかし、アクセシビリティの観点では、そういったサイト上で動き続けるものって、必ず停止もしくは隠せるようにしないといけないんです。※
※Understanding WCAG 2.1 達成基準 2.2.2: 一時停止、停止、非表示を理解する

画面上に動くものがあると、他のコンテンツに集中したり情報を読み取ったりすることが難しい方への配慮ですね。

そこで、情報としての「コンテンツ」は表層レイヤーとして独立させつつ、バックグラウンドの「アニメーション」を違和感なく切り分けられるよう工夫しました。サイトの右下に一時停止ボタンがあるんですが、そこでアニメーションを止めても、サイト全体に一体感がある状態を目指したんです。

もちろん、アニメーションも妥協せず、単純にスクロールするだけでなめらかに背景が変わるように、全てがインタラクティブに繋がっていることにもこだわりました。

（通常時は背景のシーンがセクションごとに切り替わる）

（一時停止することで、背景は止まったままコンテンツが閲覧できる）

岩木：サイトとしては1個の長いサイトなんですけど、メニューから目的のセクションに飛べるようになっていて、その時も背景がなめらかに移行するようになっています。このナビゲーションとシーケンスを両立させるのが一番大変でしたよね。

繋がりのパターンがけっこうあって、その全てを綺麗につなぐためにモーションを作っています。各パターンで発生するおかしな挙動、いわゆるバグを全て潰していかないといけないので。

寺村：結果的に、一見ダイナミックに背景が動いているんですが、止まっても違和感がなく、モーションで表現したいことと、アクセシビリティとを共存させることができましたね。

今回のイベントは「グローバル化」がテーマの一つでもあったので、そのダイナミズムを表現したくて、同じ画角で宇宙から街までどんどんズームしたりズームアウトできる映像にしています。

岩木：僕はアクセシビリティに関しては、意図的にあまり捕らわれ過ぎないようにしました。おふたりがその点をしっかり確認してくださっていたので、僕は純粋に「こうしたら可愛いよね、面白いよね」というところに注力した方がバランスが良さそうだと思って。

『Rive』を活用した制作の裏側

ーー今回はモーショングラフィックに使用したツールも挑戦的だったとお聞きしました。

寺村：今回岩木さんの提案で『Rive』という新しいツールでモーションを制作頂いたんですが、サイトを公開後すぐに「なんであんなに軽いの？」と社内外から驚かれました。SNSでも話題にしてもらえたり。

岩木：『Rive』は、（制作当時）まだ開発 version 1.0にもなっていないとても新しいツールなんですが、海外のモーショングラフィック界隈ではすでに評価されていて、注目している人も多いです。

『After Effects』のようなメジャーツールは、開発され続けている分やはり重くて。もっと軽くて新しい表現方法はないか、半ば趣味で色々なツールを試している中で『Rive』に出会い、仕事でも使ってみたいと思っていました。

そんな中で、マネーフォワードさんに提案したら「チャレンジだけどやってみましょう」と快諾いただいて。上場もしている大きな会社が、こんな新しいツールを試してみてくれるんだという驚きもありましたね。

実は、軽さを活かして、このサイトのアートボードサイズはすごく大きいんです。1920×2840 pxくらいかな。それでも1.5MBくらいしかないはず。

寺村：そのおかげで、1つのデザインファイルで全ての画面比率に対応できている。PCサイズ用、スマホサイズ用といった風に複数用意する工数が省けましたし、結果的に、サイトのウィンドウサイズも再読み込み無しでシームレスに変更できるようになりました。

新しいツールなので「フロントエンドとのコラボレーションが上手くいくかな？」という不安はあったんですが、清川さんはどうでしたか？

清川：キャッチアップには一定時間はかかりましたが、一度わかってしまえばシンプルでした。

『Rive』はデザインから実装まで同じ人が一貫して使うことを想定されているようなので、そこをデザイナーとエンジニアで分担すると、コミュニケーションを密にする必要がありますが、その点は今回のチームは上手くいきましたね。

フラットな関係で、フィードバックのラリーがスムーズで軌道修正も上手くいきました。

『Rive』を介してコミュニケーションを取っている感じでした。

岩木：僕も今回の座組はやりやすかったです。個人的にはトップダウンでなくフラットな制作体制の方が好きなので。

もちろん、フリーランスの立場としては、トップダウンは「守られる」メリットもある。要は途中に大手のプロダクションが入ったりしていると、クライアントからの無茶な意見やひっくり返しはそこで止めてもらえたりするので。

今回のような座組は、直接クライアントと深く関わっていくことになるので、同じ目標・クオリティを共有し合えていないと、成り立たないんですよね。でもそこがクリアできれば、提案に対してすぐにレスポンスやフィードバックがもらえる。Slackの同じチャンネルにいてバーっと話している感じ。そうすると、回転も上がってクオリティも高くなる。

特に今回は新しいツールを使っていた中で、この座組の良さが出た気がします。

社内外でタッグを組んで次のデザインチャレンジを

ーー今後アップデートしたいポイントはありますか？

清川：もう少しクリエイティブ側の希望を実現できるようになりたいですね。今回私は、けっこう妥協点を生み出していく役回りになっていた気がして。

寺村：そんなことないよ（笑）　清川さんは、僕らクリエイティブ側の「あれもいいな。これもいいな」という夢をちゃんと実現できる着地点に落ち着かせてくれたイメージです。

清川：多分、クリエイティブとしては、もっと突き詰めたい部分があったんじゃないかと。さっきお話した、アニメーションとコンテンツの切り分けは上手くいったけど、やはりモーショングラフィックに制限がかかっていた気がするので、もっと高いレベルで両立できるようになりたいですね。

あとは、サイトの特性もありますね。エンジニア向けのカンファレンスサイトとなると、ユーザーが知りたいのは、タイムテーブルや登壇者など「情報」がメインになるので、例えば、会社のカルチャーを伝えるような、メッセージ性が強いサイトだと、どんな風に実装ができるだろうかとか、チャレンジしてみたいです。

岩木：僕は、今回『Rive』を使えたことがすごく良かったと思っていて。

おそらく、正式に「『Rive』を使って制作した」と公表している、企業コンテンツってまだ日本にほとんどないと思うんです。そういう事例を作れたのは良かったし、マネーフォワードさんが使ってくれたことで、仕事で使われやすくなるんじゃないかと思います。機能もどんどんアップデートされていますしね。

そして、個人的には、またマネーフォワードさんとは、ウェブサイトに限らずお仕事ご一緒できるとうれしいです。

寺村：そう言っていただけてうれしいです。

岩木：今回のカンファレンスのオープニング映像のような仕事や、もっと広告的なものも良いかも。新しいツールも、他にも色々実験しているところなので、一緒に試せたら面白いですよね。

寺村：マネーフォワードは、Valuesのひとつに「Tech & Design」を掲げているので、そういう挑戦は大歓迎です。

僕自身も、岩木さんとお仕事することで、新しい発見やチャレンジの機会になって、仕事を拡張してもらえている感覚がありました。機会があれば、これからも是非よろしくお願いします。

取材・文・写真／苞山美香（マネーフォワード採用広報）