デザインの進捗とバージョン管理のススメ

 

こんにちは。デザイン担当のLQヒロシです。

 

WEB開発ではGitというアプリケーションを用いてプログラムファイルなどの更新状況管理をしているのですが、ファイルの更新状況を上書き時に業務ログも残しています。
この業務ログは、ひとつのプロジェクトを複数人で作業することの多いエンジニアさんにとって、他のメンバーがどのような進行状況なのか、どういったところで詰まっているのかを知る目安になっています。
プロジェクトの管理担当者も作業者を評価する指標として活用しているケースもあるかと思います。

 

もちろんデザイナーもコーディング作業であればGitを使ってファイルの進行状況を管理したり業務ログを残しますが、デザイン、特にビジュアル作成フェーズの業務ログを残すのってなかなか大変で、デザイナーの管理が難しいと言われる要因の一つかもしれません。

 

弊社ではデザインデータのバージョン管理アプリを利用して業務ログを残すようにしています。今回はその取り組みについて少しご紹介したいと思います。
Gitの仕組みを利用したものになるのでバージョン管理もできるのでおすすめです。

 

デザインデータの管理アプリについて

 

よく利用されているアプリケーションは以下の2種類になるようです。

 

Kactus(カクタス)

 

Githubベースのアプリで弊社ではこちらを利用しています。
基本的にはSource treeみたいな感じで使えます。詳しくは後ほどご紹介します。

【概要】

  • 標準のバージョン管理方法はGit。
  • 対応データ形式はSketchファイルを推奨。aiファイルやpsdファイルも利用できます。Sketchファイルの場合は、png画像を自動で書き出し差分が確認できます。

 

 

Abstract(アブストラクト)

 

デザインデータのバージョン管理アプリではこちらの方が新しく評価も高いです。

【概要】

  • Gitを介さずにできるのでスムーズな導入が可能(Git連携可能)。
  • UIが特に使いやすく、Sketchとの親和性が高い。
  • Kactusよりストレスフリーで使い勝手は良いのですが、Sketchファイルにしか対応していないのが残念。

Abstractの最大の利点はデータを保存するだけででてくるコミット入力ウィジットです。Sketch限定ですがすべての作業がSketch上で完結します。これが非常に便利!!Sketch主体で業務を行っているならこちらの方が良いと思います。

 

 

弊社ではUIデザイン以外にもロゴやイラスト作成などSketch以外で作成する業務もありますのでKactusを選びました。

 

そもそもなぜデザイン業務はログが残りにくいのか?

デザイン業務、ビジュアル作成のフェーズではIllustratorなどのソフトを使ってレイアウトを組み立てていきます。

 

手書きラフなどを先に作成する場合もありますが、基本的には画面上でオブジェクトを動かしながら組み立てていくことが多いです。
色の設定から少しづつ整っていくこともありますし、漫然とした状態からアイデアがカチッとはまって次の瞬間には出来上がることもあります。
このようなところが業務ログを残すことが難しいと感じるのではないでしょうか。

 

完璧なログを残すのではなく、保存のタイミングなどで簡単な状況説明をする、もっと砕いて言えばボヤキぐらいでもいいのでアプリを活用してちょっとしたメモを残す。「誰がどんな感じで業務にタッチしているのかがわかる」ことが重要なのではと思います。
Sketchであればpng画像として自動的に残すこともできるので尚良しですね!

 

それではKactusの利用方法について

 

KactusもAbstructも使い方は検索すれば割と見つかると思います。いくつかピックアップしましたので参照ください。

Kactus – 変更点が見て分かるデザイナーのためのバージョン管理ツール
デザインデータのバージョン管理ができるAbstractを試してみた

 

書かれている内容は概ね、新規にディレクトリを作成して対象リポジトリにするという感じですので、本記事ではKactusで実際のプロジェクトとの紐付方について少しご紹介できればと思います。

 

弊社の場合はプロジェクト毎にgithubリポジトリに紐付いているため(Web開発であれば大抵そうじゃないのかなと思います)、gitクローンするところから始めます。

 

左上メニューの File > Clone Repository を選択

こちらのダイアログが表示されるので  URLタブ内、A欄に Clone 対象リポジトリーURLを B欄にClone先のディレクトリパスを入力して Cloneボタンで完了です。
※クローンするとコーディングファイルなども落ちてくるので管理には注意してください。

 

  1. 管理ディレクトリ内でデザインファイルを作成、または更新すると、ファイル変更情報が A に表示されます。
  2. A をクリックすると ※Sketch 利用時のみ B に画像が表示されます。
  3. まずはCの Fetch origin からリモートの最新バージョンを取得します。
  4. Dの Summary欄にコミットメッセージを入力。弊社の場合はRedmineと連動しているので最低限チケット番号を入力。
  5. 細かいメモはEのDescriptionに残せば良いと思います。
  6.  Commit to master をクリックすればコミット完了。

 

最後に右上の Push origin からリモートを更新して完了です。
余談ですがhtmlなどのファイルの管理もこちらからできたりします。
※プライベートリポジトリを利用するには有料の登録が必要です。

 

 

他にもHistoryからコミットログのテキストやSketchであれば差分画像を確認できます。
Redmineと連携していればそちらでもリポジトリの履歴確認が可能になります。
ブランチの作成もできますので複数人で管理することもできます。

 

 

以上、最後が駆け足になってしまいましたが、今後もKactusのナレッジなどより良い使い方をご紹介していければとおもいます。

 

 


Slackからイベントを受信

社内でのチャットツールはSlackを利用しています。
でもメッセージを見ていなかったり気づかなかったりすることがあるので、社内では確認したという反応が欲しい時は@つきでメッセージを送り、Slackのリアクション機能を使うことで確認したかどうかを判断する運用を行なっています。

 

さてここで問題です。
連休やメッセージのやり取りが流れすぎた時@つきのメッセージを追えるのか?というところです。
どうしてもメッセージが流れすぎるとリアクション漏れが発生してしまいます。
そして誰が確認していないかを確認するのも手間です。他に方法を探しましたがSlackのShow Activityの機能では求めていることが満たせません。

 

自分の職種はなんでしょうか?プログラマーです。なければ作ればいいじゃない?
幸いSlackには色々なAPIが用意されています。
そして色々触って試行錯誤した末たどり着いたのは、こちらからリクエストを投げる形式ではなくSlackからイベントを全部受け取るという方法。

概略のみになりますが、

1. メッセージを受け取って@つきのもののみ保存
2. メッセージに対してリアクションがあればリアクション情報を保存
3. メッセージに対して対象の全員がリアクション完了するとメッセージを消す

 

上記の流れでまだ自分がリアクションしていない自分宛のメッセージ一覧を残すことができるようになりました!合わせて自分が発言したメッセージに対してリアクションしていない一覧もリアクションしていない人に対して再度通知することも!

今回は使っていませんが他にも色々とできるイベントがあるようです。
Slackのアプリ作成からEvent Subscriptionsで設定できます。


 
Slackはチャット以外にも何かしらの通知や連携など色々できて便利です。
そして足りなければ自分で色々機能を追加することも用意されている。
まだ利用していなければどうぞ業務に活用することをオススメします!


ISMS認定証を自慢してみる

マエダです。
 
先日インフォメーション記事でご報告させていただきましたISMSについてご紹介です。(自慢!?

ISO27001(ISMS)認証を取得しました


 

情報セキュリティマネジメントシステム(ISMS)とは

https://isms.jp/
リスクマネジメントプロセスを適用することによって情報の機密性、完全性及び可用性をバランス良く維持・改善し、リスクを適切に管理しているという信頼を利害関係者に与えることにある。そのためには、ISMSを、組織のプロセス及びマネジメント構造全体の一部とし、かつ、その中に組み込むことが重要である。
出典 https://isms.jp/isms/

認定証

認定証はこんな感じです。

バーン!

中を開けると。

ババーン!!

認定審査にあたって

今回認定にあたってお世話になりましたのはBSIグループジャパン株式会社様。
な、なんと本社はイギリスで英国王室認可の英国規格協会(British Standards Institution)をルーツとする伝統的な企業。
https://www.bsigroup.com/
https://www.bsigroup.com/ja-JP/
 
BSIグループジャパン株式会社は以下を大切に審査に取り組んでくださり、いくつか改善の機会をいただきつつ無事に弊社をISMS認証に推薦いただくこととなりました。多謝。
・パートナーシップ
・建設的審査
・付加価値サービス
・顧客満足
 
そんなISMS認証に向けて右も左もわからない僕たちのサポートをしてくださったのはLRM株式会社様の吉村さん。
https://www.lrm.jp/
※ 上記サイトに吉村さんの写ってるお写真がチラホラ
 
吉村さんはPC特にめちゃめちゃApple製品に詳しくて、楽しみながら情報セキュリティマネジメントの仕組み導入に取り組めます。(マジ本当
 
今後も、情報セキュリティ基本方針を全社員が認識し、情報セキュリティマネジメントの維持・向上に努め、お客様の信頼をより一層高めることができるよう取り組んでまいります!


Swift4でARKitを触ってみた

TikTokでホコリよけダンスを披露するため日々脳内トレーニングしてるけどダンス経験がないことを理由にビビってTikTokできていません。
マエダです。
 

 
みんな大好きiPhoneアプリ開発で必要となるプログラミング言語Swiftも気づけばバージョン4になり月日が経っていることをしみじみ実感しております。
 
前にコーポレートブログに自分が書いた記事のときはSwift2だったなんて。。。

Swift2でUISearchBarの背景透過


 
さて、そんな進化したSwiftの中でもARKitを触ってみました。

以下参考サイトです。(ありがとうございます!
https://github.com/shu223/ARKit-Sampler
https://github.com/kboy-silvergym/ARKit-Emperor
 
感想としてはAR機能をシンプルに追加できる強力な機能でした。(普通の感想すぎる・・・)
 
この強力な機能をどう活かすかで話題となっておりました3Dスキャナ。
https://www.3dscannerapp.com/
ARを身近にしたポケモンGOはデジタルと自然を調和させる楽しみ方が話題に。
http://nlab.itmedia.co.jp/nl/articles/1810/23/news113.html
 
今後もARの活用事例をチェックしながらいろいろと妄想したいと思います!
 
#TikTokerと繋がりたい


デザインでよく使う配色ツール5選

デザイナーのMです。
日頃UIデザインなどを担当しているのですが、メインのカラーやキーカラーなどが決まっていないときによくどう配色すればいいか悩みます。

そんなとき参考になるのが「配色ツール」です!
今回は私がデザインする際や、デザイントーンを決めるときに使用する色に悩んだ際に利用する「配色ツール」をご紹介したいと思います。

原色大辞典

WEBでよく使われる色などが一覧で見ることができる配色ツール(サイト)です。
すべての色にコードが記載されているので、すぐに使うことができます。

https://www.colordic.org/

Adobe Color CC

Adobeが提供する配色ツール。
類似色や補色などのテーマを選んでカラーをドラッグするだけで、そのカラーに応じた5色が自動で選択されます。
Adobeのサービスなので、パレット登録しておくとIllustratorやPhotoshopと連携することができます。

https://color.adobe.com/

Coolors.co

スペースキーを押すと素敵な配色がランダムに表示されます。
色のロックやパレットの作成、またURLが選んだカラーコードになっています。


https://coolors.co/

Color Hunt

毎日更新されている配色紹介サイト。美しい配色例などをカラーコードと一緒に確認することができるギャラリーのようなサイトです。
人気順で配色を並び替えると、今流行りの色や配色のトーンを見ることができてとても勉強になります。

https://colorhunt.co/

HUE/360

黒から白への明暗差に対応して色相を確認することができる配色ツールです。
色相の数やRGB、彩度などを細かく指定しながら色相をシミュレートできます。
操作も簡単で、とても使いやすいツールなので私もよく使っています。

https://hue360.herokuapp.com/

 

とても多くの配色ツールがありますが、自分の使いやすい配色ツールを見つけるのはけっこう大変で手間だったりします。
今回は私が日頃使用するツールを紹介させていただきましたが、少しでも誰かの役に立てればと思います。