Abstract導入。さあ、闇払いをしよう。現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。JavaScriptの設定を変更する方法はこちらHomeテクノロジーBlogAbstract導入。さあ、闇払いをしよう。トップ全記事一覧テクノロジー2018.12.14Abstract導入。さあ、闇払いをしよう。2018の14日目の記事です。一覧はこちらこんにちは。Calendarの14日目を担当するデザイナーの鈴木(@kankisuzuki)と申します。JAPANアプリのUI/UX領域に携わっています。はじめに「この余白って何ピクセル?」「最新版これであってる?」「ボタン押したときの挙動は?」何が正しいのかわからない、共有フォルダに潜む深い闇に挑む新卒デザイナーの話。共有フォルダの闇デザイナー同士でUI改善に取り組むときや、職種を越えてエンジニアさんや企画さんにフィードバックをいただく機会はプロジェクトを進める上で幾度となく訪れると思いますが、これまで一つのSketchファイルを複数のメンバーで共有するというのは得てして不安がつきまとう、闇深いものでした。「ほげほげの画面UI_ver1.2_修正版(最新)-Android.sketch」こんな名前のついたSketchファイルをプロジェクトで使っていたりしませんか?不安が頭をよぎりますよね。本当にこれ、最新版なんだろうか。それだけではありません。・・・完全に、闇です。JAPANアプリでは現在20人近くのデザイナーが一つのアプリのUI/UX設計に関わっています。各機能ごとにデザイナー同士が連携して開発するのが日常茶飯事なので、この問題には早くから直面していました。一時はGitの導入も検討しましたが、本来コードの共有に利用されるGitではビジュアルの差分がわからず、果たして作業効率が上がるのかという確証はありませんでした。そんなとき不意を打ってに現れたのが、Abstractというサービスです。Abstractについてまずはこちらの動画をご覧ください。Folderこの面白おかしいPV、つい何度も見てしまいます。Abstractとは、一言で言えばSketchファイルのバージョン管理を行ってくれるサービスです。エンジニアの方であれば「デザイナーのためのGitHub」と想像していただけるとわかりやすいでしょう。クラウドサーバーにプロジェクトのSketchファイルをアップロードすることによって、更新が行われるたびにその差分を記録し続けてくれるという優れものです。いつ誰がどのファイルを修正したのかというログを参照することができたり、必要に応じて過去のデータを再構築することもできます。それだけでなく、最近のアップデートで利用できるようになったInspect機能ではマウスオーバーで色やサイズやフォントといった仕様を参照することができ、開発に役立てることもできます。同様のサービスにZeplinやinVisionなどがありますが、GitHubライクなバージョン管理機能を中心に据えたAbstractはエンジニアの方が参照するときにも操作が直感的で使いやすいと社内では評判です。今回は、Abstractの導入を検討している方に向けて、これまでの導入プロセスと導入後の成果をお伝えできればと思います。導入の事前準備Abstractはデザイナーにとって非常に強力なツールとはいえ、社内でもすぐに導入できたわけではありません。導入に至るまでに、私たちは以下の3つをステップを実践しました。Libraryの作成Abstract運用のルール決めSketchテンプレートの作成Abstract導入の前段階として、属人化していたSketchファイルをテンプレート化する作業を行いました。これによってファイルを参照するときに迷うことがなくなり、新しくデータを作るときも無駄なくスムーズに行なえます。具体的には下記のようなチェックリストを作成し、担当者にチェックをお願いしました。Librariesを極力活用する長いリストになりましたが、この中からいくつかピックアップして詳細を見てみましょう。アセットの命名規則を見直すSketchのシンボルは「/」で区切ると階層を分けることが出来るので、これを効果的に利用しています。シンボルか必須の対象として「書き出しが必要なもの」「ステータスのパターンがあるもの(タップ時や既読時の変化など)」の2つを設定しました。フォントの上下マージンを指定するテキストの上下マージンはテキスト自体を選択すると実際の位置とズレが生じるため(※Sketchのバグ)マージン確認用のレイヤーを作成しています。※Sketchのバグについて(2018年12月現在)SketchのOpenTypeフォントにだけに起こるバグで、行間指定によりテキストの上部に余白ができてしまいます。テキストを選択してoptionキーで確認するとフォントの位置が実際に指定したい位置より下にずれます。ノーマル時、タップ時、既読時の指定の仕方を見直すシンボルは各ステータスごとに作成し、それぞれ末尾に以下のような名前をつけています。:テキストマージンレイヤーなどが入ります。タップエリアのレイヤーが入ります。:ガイドや吹き出しなどが無い、実装時の状態。わかりにくい部分は吹き出しコメントで指定する分かりにくいものは吹き出しでコメントつけています。アートボードの端にある罫線は、見逃し安いから注意書きつけといてあげると親切です。アートボードの影を消す、背景に色をつけておくなど、見やすくわかりやすいデータになるように適宜工夫していきます。以上が、Sketchテンプレート作成の主な概要です。次に、Sketchのバージョン47から導入されたLibrary機能を使ってシンボルの共通化を行いました。Designの思想に基づき、コンポーネントを機能別に細分化しています。これをAbstractにアップロードすることによって、Libraryの修正が関連する他のSketchファイルすべてに同期されるようになります。Styleを当てることで、スポイトを使わずとも共通化が可能になります。運用方法のルール決め新しいシステムの導入過去には、それを社内で浸透させるための丁寧な説明が必要です。加えてAbstractはデザイナー以外の人も日常的に参照するものになるので、そのためのマニュアルを作成しました。参照の仕方、Sketchファイルの操作など)導入編(インストールの仕方、アドミン情報、メンバー招待の仕方)デザイン業務編(ブランチの切り方、ファイル作成・編集・コミット・マージの方法と注意点など)見えてきた光の先に以上の導入を経て今年の10月から本格的にAbstractの稼働が始まり、早速様々な成果が表れました。導入後の成果1:圧倒的時短これに尽きます。大規模開発におけるマスターデータの編集というのは恐ろしいもので、以前は修正したい項目を見つけても実際に修正が行われるまでにいくつかの承認プロセスが必要でした。それがAbstract導入によって、ブランチを切って修正→チームにレビューを依頼→問題なければマージ→エンジニアに共有、という流れで、誰でも気付いた点を速攻で修正できる新しい文化が生まれました。それに加えて、修正後の状態を見せながら提案ができるためイメージの共有も容易になり、「いいね!やろう!」という素早い意思決定ができるようになりました。導入後の成果2:作業・進捗の可視化いつ・誰が・どのファイルを・どのように修正したのかというログが残るようになり、プロジェクトの進捗管理が楽になりました。データ消失などの心理的不安がなくなり、共有サーバを利用していた頃には想像もしないほど大胆な修正が行えるようになりました。顔を合わせる確認会等を設定せずに進捗確認できるのは、リモートワークの推奨がされている弊社にとって非常に大きなメリットでした。導入後の成果3:コミュニケーションの活性化UIや機能のアップデートが容易に行えるようになると、その分職種を越えたやり取りもスムーズに行えるようになりました。OverrideといったSketchの新機能への対応についてもやろうと思い立ってすぐにチームメンバーでそれぞれブランチを切って、今では短期間で爆速対応できる環境が整いました。今まで利用していた仕様書についても、今後はAbstractに一本化することで更に効率化を進めていく予定です。おわりにいかがでしたでしょうか。職種横断的な協働が求められるサービス開発の現場において、Abstractのようなバージョン管理システムはコラボレーションを加速させるための選択肢としてとても魅力的で、今後ますますの進化に期待せざるを得ません。本記事が一人でも多くの人の参考になれば幸いです。今後も引き続き、デザイナーのサービス開発における情報を発信していきますのでSNS等フォローお願いいたします。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。