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

単一ファイル毎に管理できる ファイルマネージャー CLI「coppeno」 v0.7.2リリース!

2021.11.20

Macのデータ復旧を簡単に! EaseUS Data Recovery Wizard for Mac Pro を使用してみた。

2021.08.24

パーティション管理ソフト「MiniTool Partition Wizard」を使ってみた。

2021.08.18

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

2020.06.02

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

2019.05.06

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

CATEGORY LIST

LATEST NEWS

単一ファイル毎に管理できる ファイルマネージャー CLI「coppeno」 v0.7.2リリース!

tool

2021.11.20

M1 Macで作る、ファミコンソフトプログラミング。 アセンブラでハローワールド編

Game

2021.11.08

う、動くぞ! M1 Mac(Big Sur)で PS2ソフトを遊ぶ。PCSX2 Mac版を起動

Game

2021.11.07

ゲオ 驚異の80%オフセール開催中! 中古ソフト大量購入!! まだ間に合う急げぇ〜!

Game

2021.10.24

【M1 Mac】dotnet ef ツールで、MySQLを scaffoldする。

C#

2021.10.17

『2Dスマホゲームにおける圧縮テクスチャ』『膨大になったDBを何とかする』9月30日(木)【オンライン開催イベント】

イベント

2021.09.24

バキバキ画面割れ、バッテリー膨張している iPhoneXを修理した話

iPhone

2021.09.05

Macのデータ復旧を簡単に! EaseUS Data Recovery Wizard for Mac Pro を使用してみた。

tool

2021.08.24

パーティション管理ソフト「MiniTool Partition Wizard」を使ってみた。

tool

2021.08.18

【2021】ゲオのサマーセール 980円以下のゲームソフトが半額!8月16日(月)まで。で購入したもの。

Game

2021.08.08

M1 Macで始める「ゼロからのOS自作入門」- 第1章

自作OS

2021.07.24

2021年6月 Amazonプライムデーで購入したもの。(今更)

イベント

2021.06.30

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US