LINE Fukuokaでデザイナーをしている田中です。

普段は、LINEギフトのキャンペーンの制作物をつくるチームで、バナーやキャンペーンに関するUIなどをつくっています。

LINEギフト

LINEギフトデザインチームでは、複数人が制作に関わる場面での制作物のトンマナを揃えづらい問題を解決するために、Figmaを使ったアセット共有と相互レビューに取り組んでいます。

制作物のトンマナを揃えるための「アセット共有」「相互レビュー」「セルフチェックシート」

アートディレクターがレビューをするような体制ではなく、各々が自然とトンマナを揃えられるようにするための仕組みです。事業会社で制作物のディレクションをするような場面で、ぜひ参考にしていただければと思います。

当時、LINEギフトの制作の現場では、同じキャンペーンの制作物を複数人でつくる場面で、それぞれが別々のデザインファイルで作業するため、制作物のトンマナを合わせづらい問題が生まれていました。

同じクリスマスキャンペーンの制作物でも、イラストメイン・写真メインなどトーンがバラバラになってしまう

LINEギフトでは、東京と福岡の2拠点に所属する10人以上のメンバーが、キャンペーンや企画の制作物をつくっています。

父の日、母の日、などシーズンに合わせてキャンペーンを打つので、それぞれのメンバーが同じような制作物をつくる場面も多くあります。

シーズンに合わせたキャンペーンごとに、同じような制作物を複数人でつくる

しかし、複数人が同じキャンペーンの制作物をつくる場面でも、各々が違うデザインツールで作業していたので、制作物のアセットが共有されず、トンマナが揃いづらい問題が生まれていました。

トンマナが揃いづらい問題を解決するため、最初は東京拠点のアートディレクターが一つ一つファイルをみてレビューをする体制をとっていました。しかし、サービスが大きくなる中で、制作物の数も関わる人の数も増えていくため、レビューにコストがかかりすぎていました。

アートディレクターが1つ1つの制作物にレビューする体制では、レビューが間に合わない

そこでLINEギフトデザインチームでは、チーム全員が制作する場所をFigmaに統一して、それぞれ別々につくる制作物のトンマナを揃えるためのアセット共有・相互レビューの仕組みをつくりました。ポイントは以下の3つです。

  • すべての制作物をFigmaの共有ファイルでつくり、アセットを共有
  • トンマナの観点を揃えるための相互レビュー
  • レビューから生まれた基準は「セルフチェックシート」にまとめる

それぞれ具体的にまとめていきます。

バナーやUIなどすべての制作物をFigmaの共有ファイルでつくるようにすることで、つくった制作物やコンポーネントをチームで使い回せるようにして、制作物のトンマナを揃えています。

LINEギフトのキャンペーンに関わる制作物はすべてFigmaでつくるように

具体的には、キャンペーンに関わる制作物のプロトタイピングをするための個人ファイルをFigmaに用意して、誰かがつくった素材を使いたい時は、ファイルを覗きにくればすぐ使うことができるようにしています。

Figmaに、それぞれが制作物のプロトタイピングをするための個人ファイルを用意

また、FigmaにはLINEギフトのカラーアセットやコンポーネント、過去につくられた素材がまとめられているので、つくった制作物やコンポーネントをチームで使い回してトンマナを合わせやすくなっています。

チームでLINEギフトらしいトンマナの観点を揃えるために、それぞれがつくってきた制作物をFigma上で相互にレビューを行う、週3回の定例会を行っています。

トンマナの観点を揃えるために、Figma上で同じファイルを触りながら、相互にレビュー

レビューを行う際にも、Figmaに直接入って実際につくったものを触りながらレビューすることができるため、その場で修正して「これでいこう」とFIXすることが多くなりました。

レビューの中で出てきた制作の観点は、後から見返せるようにするために「セルフチェックシート」としてFigmaにまとめています。

新しく入った人でもLINEギフトでの制作観点を意識できる「セルフチェックシート」

セルフチェックシートは、制作時やディレクターチェックの前に注意すべき点を、メンバーが自分で確認できるようにするための仕組みです。セルフチェックシートをつくったことで、新しく入った人にもLINEギフトのトンマナを共有しやすくなりました。

アセットの共有が起こるようになったことで、制作にかける時間が減り、過去につくったデザインを更新していくことに取り組めるようになりつつあります。

過去につくっていたアセットをもとに更新した、父の日キャンペーンの事例。

例えば、父の日キャンペーンでのLINEのトーク画面に配信されるバナーをつくった時。これまでのキャンペーンでも同じようなバナーをつくっていたので、その素材をベースにまず最初のアウトプットをつくりました。

しかし、このパターンには「テキストが小さくて読みづらい」という問題がありました。テキストの大きさや商品の見せ方、導線などを修正して、今後のキャンペーンでも使えるアセットとして更新しました。

Figmaで過去のアセットが共有されていることで、最初のアウトプットを出すまでの時間が短くなり、制作の度に更新していくことができるようになっています。

LINEギフトのキャンペーン・企画の制作に関わるチームのメンバーからも、より全体が把握しやすくなったという声をもらっています。

LINEギフトのキャンペーン・企画の制作に関わるメンバーからの感想

今後取り組みたいこととしては

  • 社内のデザイナー間だけでなく、外部パートナーと協業する際にトンマナの連携をスムーズにする
  • 新規でアサインされるデザイナーがスムーズに業務に入れる流れを作る

が残っています。今後も個々人で進めるのではなく、チームで制作物のクオリティを上げられるような仕組みづくりに取り組んでいきたいと思います。

このデザイン組織をもっと知る