機能が増えても、ずっと直観的であるために。ecforceで取り組んだ「UIモーション44本ノック」について|Cocodaデザインケースデザイン組織ログインはこちら機能が増えても、ずっと直観的であるために。next」を公開しました。next」そのなかで、ecforceの機能をわかりやすく伝えるために、44本のモーション制作を社内デザイナー2名を中心に担当しました。ecforceで「すでに提供している機能」「今後実装していく機能」を伝えるモーションを44本制作。44本のモーションをただ制作するだけでなく、ecforceらしいコミュニケーションツールの一つとしてモーションを活用していけるよう、デザインシステム「albers」にも組み込んでいます。ecforceのデザインシステムalbersの一部。制作過程を振り返りながら、「モーションに力を入れた理由」「44本という多くのモーションを制作するための工夫」「どのようにデザインシステムに落とし込んでいるか」についてまとめたいと思います。機能を分かりやすく伝える、44本のモーション制作ecforceはスタートアップから大企業まであらゆるビジネスのEC化を支援するECプラットフォームです。多岐に渡るようになっています。継続率99.75%と、ご利用いただければ満足いただいている一方で、機能名だけみてもイメージが湧きづらいという課題がありました。機能が拡充し、お客様の様々なニーズに対応できるようになっていく一方、「機能名だけ見ても、何ができるか良くわからない」というお声もいただくようになりました。ecforceは、スタートアップから大企業まであらゆる方々に利用いただくサービスであり、なかにはデジタルツールに不慣れな方もいらっしゃいます。そのため、どのような方でも「分かりやすく扱える」ことが重要だと考えていました。社内でも商談時に「機能名を伝えてもイメージが湧きづらい」「説明がしづらい」といった声もあったため、直感的な伝わりやすさを重視したモーション制作に取り組むことにしました。段階的に合意をつくる、シナリオ設計モーション制作を進めるにあたり、まずどのようなシナリオで伝えるべきか、そのためにどんな要素がどのように動くと良いかを検討していきました。モーションは「動かしてみないとイメージが湧きづらく、レビューがしづらい」「実装コストも比較的高いため、手戻りが起こると大変」といった性質があります。今回は44本と数も多かったため、より丁寧にシナリオ設計やレビューをすることが必要だと考え、以下のように進めていきました。絵コンテの可視化まずディレクターを中心に、ピックアップする機能や、それぞれの機能をどのような構成でモーションに落とし込むべきかを固めていきました。ディレクターに用意してもらった構成案。モーションにおけるコンセプトや、機能毎の見せ方の案が記載されています。次に、構成案をもとにFigma上に絵コンテで可視化していきます。絵コンテを制作する上で意識していた点は以下です。機能をどう使うか(How)よりも、何ができるか(What)を表現する実際のUIを簡略化し、最小限の要素でわかりやすく見せる10秒程度でコンパクトに伝わる構成にするUIだけでなく人やアイテムなどのグラフィック要素を盛り込んで飽きさせないようにする機能紹介用モーションの絵コンテをFigma上に可視化。段階的にレビューを実施また、絵コンテの制作を進めながらマーケティングチームやディレクターに適宜共有し、レビューをもらえるようにしました。以下のような観点でレビューをもらいながら、徐々にクオリティを高めていくことで、チーム内での認識も揃いやすくなったように感じています。機能の内容が正しく伝わっているか?機能の推しポイントは表現できているか?マーケティングチームやPMにも適宜レビューをもらいながら、細かく改善を重ねました。Effectsでのモーション制作を進めていきました。機能の利用イメージを直感的に伝えることを目標としながら、効率的に44本のモーション制作を進められるよう工夫したことをまとめます。統一感を生むエフェクト設定44個のモーションに統一感をもたせられるよう、「使用するエフェクト」と「動くスピード」を一定にしました。実際のモーション制作風景。エフェクト・動くスピードを一定にすることで、統一感を出せるように工夫しました。エフェクトについては、position(位置)・rotation(回転)、scale(大きさ)といった基本要素のみを使用することによって、動きに統一感を持たせつつ、シンプルな設計で作れるようにしています。動くスピードについてはすべて「50」に統一し、同じ50の速度でも若干速く見える、または遅く見える場合は、45〜65に収まる範囲で同じスピードに見えるように調整しました。このように、シンプルなルールを設けておくことによって、当初の目標であった「機能を分かりやすく伝える」ための調整に時間をかけられましたし、制作もしやすくなりました。イラストシステムとの連携さらに、モーション内で使用するイラストについては、同時並行で制作されていた「イラストシステム」と対応させていくことで、ecforceらしさを演出しつつ、今後制作がスムーズに行えるように工夫しました。ecforceのデザインシステムの一部として開発されたイラストシステム。キャラクター・カラーリング・基本レイアウトなど様々な項目がまとめられています。同時並行で制作が進んでいたため、モーション制作では、まず仮の素材で実装しながら後日イラストを差し替えるという形となります。そのため、事前にどの要素が差し替え予定なのかをチームで確認し、作業が少ない動画を優先的に進めていきました。左がイラストシステムを取り入れる前のモーション。右がイラストシステムを取り入れた完成版。イラストを差し替える前後の比較が上の動画になりますが、トンマナを共通化させた要素をもとに制作することで、どのモーションを見ても「ecforceらしさ」を演出することができたように感じています。特設サイト内にて公開しました。併せてecforceのサービスサイトにおける機能紹介ページなどにも今回制作したモーションが展開されています。ecforceのサービスサイトなど、様々な場面で今回制作したモーションが活用されています。https://ec-force.com/functions今まで「機能名だけを見ても、イメージが湧きづらい」という声が上がっていましたが、今回のリリースを通して、以下のような変化が生まれました。機能紹介がわかりやすくなったという声を社内外からいただいた特設サイトの閲覧時間が従来の機能紹介ページと比較して1分ほど増え、ページの滞在時間があがった期間としては3ヶ月弱程かかったプロジェクトではありましたが、「ユーザー層が多様」「様々なユースケースを満たす、機能が豊富」「使っていただければ満足いただけるプロダクト」であるecforceにとって、モーションという打ち手はより価値や使い方を直感的に伝えるために適切だったと感じています。ブランドアセットとしてのモーションへさらに、今後モーションをecforceらしいコミュニケーションのツールとして活用して行くこと、効率的かつ品質高く制作を行うことを目的に、社内のデザインシステムに組み込みました。ecforceのデザインシステムalbersの一部として、今回制作したモーションや扱い方などがまとめられています。具体的には、zeroheight上に今回制作した全てのモーションデータやイラスト素材を格納し、全社員がいつでも利用できる状態となっています。今回制作したモーションを資料に展開するなど、様々なタッチポイントでの機能の伝わりやすさや制作効率を高めることができています。今回制作したモーションを資料に展開した例。他にも、マーケティング施策やプロダクトのオンボーディングなど様々な場面で活用したいという声が上がってきており、今後もecforceのブランド価値を高めるための要素として、モーションを活用していきたいと考えています。