こんにちは!TRIVE GROUPでデザイナーをしている田島美鈴です。

今回は自社で運営しているメディアのクリエイティブを、デザイナー以外でもつくれるような仕組みづくりを約1年かけてしていたので、まとめてみようと思います。

概要 サムネイルやバナーなどのクリエイティブ制作を、デザイナー以外もクオリティを保ちつつ制作できるよう、figmaでのオペレーションを作成しました。

期間 約1年間 (他の業務もしながら徐々に仕組み化)

TRIVEグループではライフエンディングやマッチングアプリなどのメディアを複数運営しており、私はメディア内で使うサムネイルや記事内画像、UIをデザインしていました。

ただ、働き始めて事業のスケールが大きくなるにつれ、かなりのペースで記事が公開されるようなり、ライターからサムネや記事内画像のクリエイティブ制作の依頼がきて、制作をして、レビューを受けて、他のUIなどの業務に戻り...というようなことを繰り返すうちに、手が足りなくなってきていました。

そこで、ユーザー体験を守りながらも自分のクリエイティブ制作にかける時間は短縮していく方法を模索するようになったのです。

この課題感が出て来た当初は、ランサーズやクラウドワークスなどで外部に制作をお願いすることを検討しました。

しかし、実際にデザイナーさんやフリーランスの方にお願いしやりとりをしていたのですが、記事の文脈が伝わりづらく、コミュニケーションコストもかなりのものでした。

一度フォーマットを制作できてしまえばあとはそれを使って量産していくことができるため、約3ヶ月ほど試したのちに元々私の手の届かない細かなグラフィックを作ってくれていたメンバーが、自分たちでも一度挑戦してみたい。記事を書いた自分たちで作れるのが一番良いよね。という旨の相談をしてくれました。

では、社内のメンバー、特にライターメンバーがサムネや記事内の画像を制作できるようにするにはどうすれば良いか?

どうすればクオリティを落とさずに、多くのメンバーが制作に関われるようになるか?

まず最初にトライしたのは、ビジネスサイドやライターの方でも馴染みがありそうな、Googleスライドでクリエイティブ制作のマスターデータをつくることでした。

一部のつよつよメンバーには、IllustratorなどのAdobeを使えるライターもいたのですが、共同編集ができないこと、そして有料なため使えるメンバーを絞らなくてはいけないこと。そしてデザイナーの私でも使いこなせないほど操作が難しいので笑 ハードルが高いと判断しました。

その点Googleスライドは共同作業もでき、もちろん無料で、操作も感覚的に行うことができました。

ただ、やはりプレゼンテーションツールだと、グラフの制作など細かな表現には限界があることや、レイアウトなど制作できるデザインの幅が狭く、痒いところに手が届きません。

Keynoteはより操作性も良くデザインの選択肢も多いのですが、共有機能がありません。ライターのメンバーにはWindowsとMacの人がいる問題などもありKeynoteも断念...

次は、うっすら使ったことのあるCanvaで試してみました。

Canvaは無料で使えるオンラインのデザインツールなので、テンプレートも豊富でデザイン性に長けています。さらに、機能も多すぎることもなく操作に慣れていない人でも使いこなせるように設計されています。サムネイルだけならこのツールで充分そう。

おまけに共同編集もできてしまうのですが、一つ悩ましい点が、レイヤー機能がないことです。これまでのツールもそうでしたが、レイヤー機能がないことでグラフなどのオブジェクトが複数ある場合の細かいレイアウトやサイズなどの変更をすることが困難でした。

簡単に、共同編集でき、無料で、オンラインで、レイヤー機能もあるツール、、頭を抱えていた私でしたが、答えは本当に目の前にありました。...figmaでいいのでは?と

figmaのコアの用途はモバイルアプリやWebサイトなどのUI作成で、TRIVE GROUPでもデザインチームでずぶずぶにお世話になっています。

UIデザインに最適化されているため表現力は大きく劣りますが、圧倒的に軽量で、ツール自体の学習コストは低めでした。

そこでダメ元で、ライターメンバーの1人にfigmaをつかってもらったところ、なんと意外に使える...!すごい...!

かなり直感的に使えるようで、簡単な操作には困らなかったようでした。

そこからヒントを得て、figmaでのグラフィックシステム作りに舵を切っていくことになりました。

今回は現段階で採用している運用方法をご紹介します。

まず、1つのワークスペースの1番上に「general」ページを作り、そこに共通の素材や、フォントやカラー、余白などのガイドラインを配置し、誰もが使える場所にします。

そして、その下にライターメンバー1人1人のページを作り、個人の作業はそこで行うようにします。

そうすることで、元データを壊しちゃった!みたいなことを防ぐことができ、同じワークスペースを使うためカラースタイルなどをそのまま共有して使うことができます。

また、記事内画像などの素材は、テキストなどを変えるだけで再利用できるようシンプルに、かつオートレイアウト機能やコンポーネント管理なども徹底し、作業を軽量化しました...(これがめっちゃ楽...)

↑伝わりずらいのですが、イラストを選んでペーストし、文字を変えるだけで作成できています!

また、学習コストは低いと言いながらも、もちろん最初は使い方を理解をするのに時間がかかるため、「誰もがクリエイティブ制作をできること」を目標にしっかりfigmaの使い方に関する資料も作りました。

デザイナー以外がfigmaを使っている実例などは見つからなかったので、これで本当にいけるんだろうかと思いつつ手探りで進めましたが、なんとかオペレーションが完成し、半年ほどこのワークフローで回しています。

↑あるライターメンバーの制作ページ。もの凄い量です。

↑Slackで称えあっているやりとり


しかしながら、半年間ほどfigmaでの運用を実際にやってみて、課題感も出てきています。

一つは言語です。figmaはまだリリースから日が浅いこともあり、日本語には対応していません。ただでさえデザインツールは見慣れない用語が多いのに、現段階では英語しかないため学習のハードルを上げてしまっていると思います。

ただ最近は日本語化のGoogleの拡張機能のベータ版が出てきているようです!ブラウザならこれで解決するかも。 https://chrome.google.com/webstore/detail/figma-日本語化/ekodckpnalonppfcddgnkoapajahbahc?hl=ja&authuser=0

二つめは、動作が遅くなることです。環境の整った状態では問題ありませんが、やはりスペックの小さいパソコンでFigmaを開くと大分重く、消さないと他の作業ができなくなるぐらいになります。

解決方法として、beta版を使うと軽くなることと、一つのワークスペースにデータを溜めすぎず、適度に分散させることである程度軽減されます。この他にも何か解決策があれば教えてください!

このグラフィックシステム作りは、私がインターン時代に行っていたことなのですが、TRIVE GROUP全体で新しいことに挑戦しやすい環境があり、積極的にメンバーを巻き込んでの仕組みづくりができました。

デザイナーとしても事業にもっとコミットしていくために、良い仕組みづくりができたなと感じています。

まだまだな部分も多いですが、これからも頑張っていこうと思います!

見て下さりありがとうございました🎄

===

TRIVEデザインチームで公開中の、バッジデザインのプロジェクトはこちらから! https://cocoda-design.com/team/project/87

マッチングアプリメディア「 balloon」 https://ballooon.media/12045/

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