今すぐデザインにSketchを使うべき理由
<このブログはFrogアドベントカレンダー17日目の記事です。>

みなさんはデザインにSketchを使っていますか?Photoshopですか?
日本に住むデザイナーさんたちに聞いてみたところ、Sketchはまだ日本でそこまで浸透していないとのこと。UIデザインやWeb、AppデザインをするならSketchはマストなのかと思います。
なぜ日本ではSketchがまだ浸透していないのでしょうか?
おそらく、「日本語版がない」これがほとんどの理由ではないのでしょうか。さらに日本語で技術的な情報を検索しても、なかなか見つからないようです。
そんな「Sketchに移行したいけどまだ迷っている」「Sketchを導入しているけれど、なかなか情報を得られない」といったデザイナーさんたちに、
Sketchの良さ
AMAZINGなシンボル機能
オススメのライブラリ、素材
などをシェアしたいと思います!
<Sketchのよさ>
1)シンプル、早い
余計なものがないインターフェイスがわかりやすく、簡単に使える。ベクターデータなので軽くて早い!
2)コーディングしやすい
画像やCSSの書き出しが非常に簡単。

画像の書き出しはSketchがどのツールよりも優れています!
CSSもなかなか忠実にコピーできます。
3)シンボル、ライブラリ機能で個人&チームワークの作業を効率化
シンボルについては下記に詳しく説明しますので、ご覧ください。
ファイルをライブラリ登録することで同じデザインパーツをチームでシェアできます。実際のデザインファイルにそのデータはないので、データサイズを軽くできます。
4)様々なプラグインでカスタマイズ!
プラグインをインストールすることで、Sketchを更に便利にできます。
オススメの無料プラグインをいくつかご紹介します。
<プラグイン一覧>
一番のオススメ!シンボルを整理
・Symbol organizer: https://github.com/sonburn/symbol-organizer
・テキストを検索、置き換え
Find and Replace: https://github.com/thierryc/Sketch-Find-And-Replace
・レイヤー名を一括変更
Rename It: https://github.com/rodi01/RenameIt
・空のグループを削除してデータ整理
Cleanup Useless Groups: https://github.com/bomberstudios/Cleanup-Useless-Groups
・使っていないスタイルを削除
Remove All Disabled Styles: https://github.com/ErikFontanel/sketch-remove-all-disabled-styles
・チームに最適!テキストスタイルをシェア
Text Style Share: http://www.textstyl.es/?ref=sketchhunt
5)InVisionとのダイナミックな連携でチームでプロジェクトをシェア
InVisionと連携することで、ディレクターやデベロッパーなど色々な人とプロジェクトをシェアできます。InVisionのいくつかの優秀なモードをご紹介。
<COMMENT MODE>
コメントモードで修正やフィードバックのやりとりができます。

<BUILD MODE>

ビルドモードではボタンなどに他のページへのリンクをつけることができ、サイトやアプリ内の動きを正確にシェアすることができます。
<INSPECT MODE>
インスペクトモードでは精密なCSSをコピーできます。

その他に、Sketchで書き出した画像をダイレクトにInVisionにアップロードできるので、デベロッパーとの連携にもグッドです。
スーパー素晴らしい機能
"SYMBOL"
<スタンダードな使い方>
各ファイルにシンボルページを生成でき、シンボルページ上でシンボルのデータを一括管理します。

1つのシンボルをデザインページで複製すると、1回の修正で複製された全てのシンボルが反映されます。
アイコンだけでなく、ヘッダーやフッターにも向いていますね。

と、ここまではPhotoshopの機能とそこまで大差のない感動レベルですが、Sketchは一味違います。
<少しアドバンスな使い方>
アイコンと文字など複数の情報を含むバナーやボタンごとシンボル化することができ、アイコンをシンボルとして用意しておくことで、デザインページ上で使いたいアイコン&テキストを変更することができます。
文字だけで説明しても「?」なので、画像を交えて。
例えば、このように同じスタイルで異なる情報のバナーが並んでいたとします。

それぞれのバナーは同じシンボルでできています。これで1つのシンボルです。

画面右側の"Orverrides"でシンボルページに用意しておいたシンボルが表示されるので、それぞれ変えるだけ。

テキストもオーバーライド内で打ち変えられます。

反復するデザインに最適です!
1つポイントとしては、全てのアイコンのアートボードを同じ大きさにする必要があります。大きさが違うものと置き換えると、比率など変わってしまうので注意です。

<お気に入りをシェア>
英語ですが、素晴らしいデザイナーさんたちのYoutubeチャンネルをシェアします!英語が分かる方は是非チェックしてください。
その他、素材など。
・テンプレートなどのSketch素材
・Sketchショートカットキーリスト
それでは、素敵なSketchライフをお送りください。
<告知>
dribbble、使っていますか?まだdribbblerでない方に朗報です!
2つの招待枠をかけてコンペティションを開催します。
近いうちに私のdribbbleページにて詳細を発表しますので、dribbblerになりたい方は是非参加してくださーい。
<海外就職・留学を検討中のクリエイターの方>
>Frog
Comments