このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

SketchファイルをGitHubで管理。簡単デザイン差分表示!「git sketch plugin 」利用法

tool

2016.11.07

この記事は最終更新日から1年以上が経過しています。

どもです。

すっかり寒くなってきましたが、皆さん体調の方は大丈夫でしょうか。

私は風邪をひきました。

と言う訳で、今回は「Sketch」ファイルをGithubで管理して、デザイン修正分を差分表示して業務を捗らせようって内容です。

Skecth

Sketch

https://www.sketchapp.com/

スクリーンショット 2016-11-07 21.38.28

Sketchに関しては、もうすっかり有名なのかと思いますが、知らない方の為にざっと説明させて頂くと、

Sketchは、Mac専用のWebとモバイルUIデザインの専用ツールで、多くの機能を取り入れないことによって、かなり軽量なツールとなっております。

「何かこの機能を使いたいなぁ。」と言った時は「plugin」を追加することでカスタマイズしていけます。

また、デザインはベクターデータなので、解像度に関わらず必ず綺麗なデザインが作れます。

操作もシンプルで、多くのことを覚えず、直感ですぐに使えます。

書き出されるファイルは「.sketch」ファイル形式で、軽量なファイルサイズで書き出されます。

何といっても、簡単、動作が軽い!!

ということで、海外を中心にかなり流行っているツールで日本でも多くの方々に使用されているツールとなります。

(とはいえ、まだまだPhotoShopの利用率が高いのでしょうね。)

と言った、UIデザイン作成ツールの「Sketch」なのですが、もちろんデザイナーさんだけではなく、

デザイナーさんとの架け橋でもある「フロントエンドエンジニア」の方々も使用する機会が多くなって来る訳で、

もちろん私も利用しております。

デザイン共有

「フロントエンドエンジニア」としてデザイナーさんとの作業で、切っても切れないフローがやっぱり「デザイン共有」のフローかと思います。

「あそことあそこを編集しました。適応してください。」

と言ったデザイナーさんとのやりとりは、多々発生するかと思います。

そういったフローの中で、

「ここも修正していたんですよ。。」

と、適応漏れが発生する事も多々あるのではないでしょうか。。

また、デザイナーさんの立場になると、

「前のデザインってどんなでしたっけ?」

と聞かれて、

あれは確か。。_v2ファイル。。いや_v3ファイル?

と、過去のデータを取り出すのに苦労した経験はないでしょうか?

 

それを無くすためにも、Gitなどでバージョン管理しようとしても

psdファイルなどはデータ容量が重くて、とてもバージョン管理に向いているとは言えなかったのですが、

簡単、軽量、クールな「Sketch」なら、それも可能になってきたようですね。

 

と、いうことで、「Sketch」のファイルデータを、Gitで管理していきたいのですが、「Sketch」のファイルデータはバイナリファイルな訳で、Githubで管理してみても、このようにデザインや差分を確認することができません。。

スクリーンショット 2016-11-07 21.02.24

スクリーンショット 2016-11-07 21.06.29

スクリーンショット 2016-11-07 21.07.05

これでは、まだまだ不便なので、Github上で「デザイン確認」や「修正差分の確認」が出来るように、

Sketch」にプラグインを導入していきましょう。

 

Git Sketch Plugin インストール

その名も「Git Sketch Plugin」です。

Git Sketch Plugin

http://mathieudutour.github.io/git-sketch-plugin/

image

ダウンロードは、上記のリンクからダウンロードページに移動し、「Download.zip」をクリックでダウンロードできます。

 

image (1)

ファイルダウンロード後、解凍し、 Git.sketchpluginをダブルクリックでインストールできます。

簡単ですね!

sketchのメニュー 「plugin > Git 」が追加されていて、それぞれメニューが表示するのが確認できます。

image (2)

それでは、早速使っていきましょう!

 

利用方法

利用方法も至って簡単です。

Sketchでデザイン編集後、 「plugin > Git > Commit」

スクリーンショット 2016-11-07 21.07.55

Commit メッセージを入力。

Generate files for pretty diffs」にチェック。

Generate files for pretty diffs」にチェックすることで、
.exportedArtboards/ に差分のpngファイルが生成されますので、チェックを忘れずにしましょう。

スクリーンショット 2016-11-07 21.08.16

Commit完了した後は、「plugin > Git > push 」で完了。

 

実に簡単ですね!w

addもしなければ、コマンドも叩かないでいいので、デザイナーさんにも容易に利用できるプラグインだと思います。

 

Githubを確認

では、実際「Github」を確認していきましょう。

Githubを確認すると、.exportedArtboards/ にアートボード名の付いた pngファイルが出力されているのが確認できます。

 

.exportedArtboards/ファイル名/アートボード名

 

で、pngファイルが出力されるようです。

スクリーンショット 2016-11-07 21.09.09

ですが、ここで困ったことに「iPhone 7」のファイルしか出力されませんでした。

どうやら、同名のアートボードがあると、最後のアートボードのみが出力されてしまうようです。。

なので、それぞれ、「アートボード名」を変更しました。

スクリーンショット 2016-11-07 21.16.23

すると、新たに書き出されました!

スクリーンショット 2016-11-07 21.19.01

これで、プルリクなどを送ると、このようにデザイン修正の差分が明確になってきます!

スクリーンショット 2016-11-07 21.21.49 スクリーンショット 2016-11-07 21.21.58

いやぁ。簡単、便利!

と言う訳で、導入も簡単でバージョン管理を行いつつ 差分も表示できるので、

Sketch」をお使いの方は、Githubで管理しつつ、「Git Sketch Plugin」を導入しっては如何でしょうか。

今回、Demoで使ったレポジトリはこちらとなります。

GitHub Demo レポジトリ

https://github.com/webcyou/skecth_demo

何か、参考になればと。

ではではぁ〜!

Comment

Related Article

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

2018.11.17

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

2018.03.27

無料でホームページ作成できるWixに新機能「Wix Code」 が追加!

2017.10.02

ドラクエ11(PS4)もプレイ可能!モバイルディスプレイ Diginnos DG-NP09D 8.9インチ を購入してみました!

2017.09.03

【簡単】iPhone Androidの画面をPCに表示や録画するアプリ。 Reflector2の使い方

2017.09.03

nginx location ディレクティブの優先度

2017.03.19

忙しい人向けの Docker Composeで作る nginx + PHP7-fpm + mysql + phpMyAdmin の環境構築

2017.02.13

誰でも簡単に「ホームページ制作」が行える!というWix のサービスを使ってみました。

2017.02.07

CATEGORY LIST

LATEST NEWS

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US