更新ストレスをゼロに！Pairsのデザイン業務効率化

こんにちは！Pairsチームでデザイナーをしている渡辺（@chihokotaro）です。
今回は、Pairsの運用のなかでもデザインに関する点について書きたいと思います。

デザイン更新タスクの課題点

Pairsは2016年2月現在で300万人以上のお客様に利用されているサービスに成長しております。そして、サービスの運用で欠かせないのがデザイン更新のタスクです。

Pairsのデザインタスクは大きく分けると、
- キャンペーンLPやバナーなど定期的に更新が必要となるデザインタスク
- チュートリアル改善などの新規施策デザインタスク
の2種類があります。
このうち、今回はキャンペーンLPやバナーなどの「定期的に更新が必要なデザイン」の効率化についてお話ししたいと思います。

課題1：デザイン作成の効率化

Pairsではほぼ毎日様々なキャンペーンや公式コミュニティを開催しています。
ここで必ず発生するのが開催日の日付更新や数字更新などの細かい更新タスクです。定常で発生する上に、ページ数が増えると更新しなければいけない画像数も増え、地味に日々の業務時間を圧迫していきます。

これを解決してくれるのが、Photoshopの「リンクオブジェクト機能」です。

キャンペーンLPやバナーで、開催日付部分をPhotoshopのリンクオブジェクトを作成して配置し、1つの日付ファイルを更新するだけで、各LPやバナーなどで一気に差し代わるように作成をしています。

また、LPの内部の構成も、共通の要素はリンクオブジェクトで作成しています。
こうすることで、写真の差し替えや機能追加などがあった場合でも、更新するファイルの数を最小限にすることができます。

そしてこのやり方は、多言語対応でも威力を発揮します。Pairsは現在日本と台湾でサービスを展開しています。リンクオブジェクトは翻訳作業を最小限にすることができるため、現在欠かせないやり方になっています。

まともに翻訳する場合、各デバイスや各キャンペーンごとのファイル数分の対応が必要になりますが、共通パーツをリンクオブジェクトにすることで、1つ対応するとあとはpsdを更新するだけで翻訳対応が完了するのです。

課題1のポイント

Photoshopのリンクオブジェクト機能で、複数ファイルを一気に更新。
（数字更新、他言語対応には特に威力を発揮！）

課題2：デザイン共有の効率化

作成したデザインは、実装に携わるエンジニアはもちろんですが、ディレクターやCSチームなど、サービスに関わるメンバー全員に共有します。

今までは、新規のキャンペーンを実装した時など、大きな変更があった際に、デザインを画像で書き出しして共有ストレージのフォルダに格納、という方法で共有していました。
しかし、特に更新やABテストの実施などの修正が多いキャンペーンLPは「あれ、今の最新ってどれなの？」状態に陥ってしまいました。

最新のデザインを、いつでも誰でも簡単に、そしてできれば自動で更新してほしい…

ということで、考えたのがGoogle spreadsheetでのデザイン管理です。

もともと、キャンペーンでは文言や翻訳の管理をspreadsheetで行っていました。そのファイルにデザインのシートを追加したのです。
もともと使っていたファイルなので課題であった「いつでも誰でも簡単に」はこれでクリアしました。
問題はできれば自動で更新してほしいというところです。

これも、Pairsの最新の画像を=IMAGE(“https://~~")でサーバーから参照することで、キャンペーンを更新すると同時にspreadsheet側も更新されるようになりました。
ついでに、このurlを記載することで、画像名や保存パスもここで確認可能というデザイナー側にも嬉しいことが。

課題2のポイント

Google spreadsheetでデザイン共有を自動化。
（画像パス確認もできるよ！）

最後に

サービス運用のデザインに本格的に携わって1年半ほど経ちましたが、更新や共有などの細かい作業の時間が積み重なると結構な時間になりますし、ルーチンワークもある程度必要になってきます。
まだまだ「自動化」といえるほどスマートではないですが、手軽で簡単なところから手を入れるだけでも、かなり効率が変わるので、今後も進めていきたいと思います。