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