弁護士ドットコムの林（@taka_piya）です。

Figmaを使ってバナーを仕組み化するテンプレート(通称:バナーマシーン)を作り半年間運用してきたので、今回は「バナーマシーンの作り方」「メリット」「やってみて分かった課題」の話をしたいと思います。

背景〜バナー作成を効率化したい

所属している弁護士業務支援サービスでは、弁護士向けセミナー動画サービス「弁護士ドットコム オンラインセミナー」を提供しています。

月に何本か動画追加した際、動画に気づいてもらうためサムネイルやバナーを作りアピールする必要があります。
今までこの画像作成は業務委託の方が一手に引き受けてくれていましたが、退職されたため、デザインチームで引き継ぐ事になりました。

それぞれ担当プロダクトがあるなかで、単純にタスクが追加されるだけでは負担が大きくなります。どう効率化しようか〜と考えているときに見かけたのがSMARTCAMPさんの記事です。

バナー作成は仕組み化できる

こちらの記事ではFigmaを使って、セミナーのアイキャッチ画像の要素をパーツ化し組み合わせられるようにしたことで、質と効率を担保した運用が実現したことが記載されていました。

みんなで手分けしてバナーをつくるとなると、検討コストもレビューコストも馬鹿になりません。
これは！と思いテンプレート作りを始めました。

実際に作ったもの

そこで今回は、業務の効率化のために「テキストと画像を設定するだけ」で、「バナーのレイアウトとサイズパターンがいくつか生成され」「どれにするか選ぶだけ」という世界観を目指したFigmaテンプレート = バナーマシーンを作りました。

Figma上で画像とテキストを1回更新したら、すべてパターンに反映される」ような挙動をします。

バナーマシーンの作り方

具体的にどのような手順を踏んでテンプレートを作ってきたのかをご紹介します。

1. デザインパターンを見出す

まずは下ごしらえとして、どんなパターンを作るのか検討しなければなりません。
今回の工数削減の観点から、0から作成すること避けて過去のものからパターン化することにしました。

そこでチームメンバーのデザイナーと過去バナーを観察を行ったら、事件分野で配色、講師写真の数でレイアウトが作り分けられてきたことがわかりました。

2: パターンの中で動的な要素を抽出する

次は、どの情報が動的なのかを抽出します。今回は7つの要素を動的なものとして抽出しました。

この手順はデータベースに保存されている情報はなにか？とイメージすると上手くいくと思います。具体的なわかりやすい手順は下記の本で解説されています。

3: 動的な要素のComponentを作成する

ここからはFigmaで作業を行います。
まずは動的な要素を流し込む、Component作成していきます。
このプロセスで作成したコンポーネントをマスターデータとして、すべてのデザインで利用することで、1回の更新ですべてのパターンに反映されることを実現します。

4: Componentを配置してパターンを作成する

3で作成したコンポーネントのインスタンスを組み合わせてパターンを作成します。作成するときは、以下の2点を意識することで、変化に強くなります。

• 編集するときはパターン側ではなくComponentを編集する

• 文字数などに応じてレイアウトを変動させたい場合は、Auto Layoutで組む

• あるパターンだけサイズを変更したい場合は、移動ツールではなく、スケールツールを使い変更する

あとは必要なパターン数だけ4の手順を繰り返せばバナーマシーンは完成です。

運用してみて感じたメリット

スタートダッシュが切れる

毎回レイアウトを検討して、最適な配置を考えて…なんだかんだ1日かかっていた作業が、素材さえ揃えば1時間もかからず、レビューに出せるくらいには早くなりました。
車輪の再発明をしなくなった点はとても良く、効率化ができたと思います。

他の人でも同じクオリティですぐに作れる

チームに新しくデザイナー入ってきたタイミングで、オンボーディングを兼ねてバナーマシーンを使ってもらいましたが、すぐにマスターしてアウトプットしてくれました。
経験に左右されずに、一定のクオリティが担保できることは大きなメリットだと感じています。

課題

複数案件を同時にできない

新規バナーを作るときは、ファイルを増やすのではなくページを増やしていくようにすると、アウトプットも集約されていいのでは？と考えていたのですが、

• 2つ以上の案件が走ると、同時編集ができない

• 過去バナーがきちんとコンポーネントをDetachしていないと、意図せず影響を与えてしまう

となってしまい不便でした。今ではファイルごとコピーして使うようにしています。

Componentを意図せず上書きしてしまう

意図せずパターン側でマスターのComponentを上書きしてしまい、Component側の変更が反映されず(※Figmaは、で上書きがあるとMasterの変更が反映されなくなる)、「あれ？講師の名前が違う」ということが1度ありました。
これは現状注意してファイルを編集するしかないです。

デザイン上の微調整はなくならない

タイトルの長さによってはみ出たり、視認性が悪くなったりするため、やはり最後の微調整はなくなりませんでした。
完全にバナーマシーンだけで完成する世界観にはもう少し工夫が必要そうです。

まとめ

一度情報を入力すれば、バナーのパターンが展開されるFigmaのテンプレートことバナーマシーンの紹介でした。
弁護士業務の効率化を謳っているわけですから、私たち自ら業務の効率化を探求していきたいですね。そうすることで素早くユーザーに価値を届けられるのではないでしょうか。