このサイトは、只今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

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

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

2016.11.07

CATEGORY LIST

LATEST NEWS

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

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

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

tool

2018.03.28

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

tool

2018.03.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US