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

2024年 狙っているモバイルノートPC

2024.01.07

MacOS XcodeにSDL2を追加

2023.12.26

NordVPNを使ってみた感想は?評判や口コミを徹底的に解説

2022.07.26

誰でも簡単に「ホームページ制作」が行える。というWix のサービスが進化しているという事で、あれから久しぶりに触ってみた!

2022.04.12

Macで簡単画面録画「EaseUS RecExperts for Mac」を使ってみた。

2022.01.15

単一ファイル毎に管理できる ファイルマネージャー 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

CATEGORY LIST

LATEST NEWS

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US