今すぐデザインにSketchを使うべき理由
＜このブログはFrogアドベントカレンダー17日目の記事です。＞
みなさんはデザインにSketchを使っていますか？Photoshopですか？
日本に住むデザイナーさんたちに聞いてみたところ、Sketchはまだ日本でそこまで浸透していないとのこと。UIデザインやWeb、AppデザインをするならSketchはマストなのかと思います。
なぜ日本ではSketchがまだ浸透していないのでしょうか？
おそらく、「日本語版がない」これがほとんどの理由ではないのでしょうか。さらに日本語で技術的な情報を検索しても、なかなか見つからないようです。
そんな「Sketchに移行したいけどまだ迷っている」「Sketchを導入しているけれど、なかなか情報を得られない」といったデザイナーさんたちに、
Sketchの良さ
AMAZINGなシンボル機能
オススメのライブラリ、素材
などをシェアしたいと思います！
＜Sketchのよさ＞
１）シンプル、早い
余計なものがないインターフェイスがわかりやすく、簡単に使える。ベクターデータなので軽くて早い！
２）コーディングしやすい
画像やCSSの書き出しが非常に簡単。
画像の書き出しはSketchがどのツールよりも優れています！
CSSもなかなか忠実にコピーできます。
３）シンボル、ライブラリ機能で個人＆チームワークの作業を効率化
シンボルについては下記に詳しく説明しますので、ご覧ください。
ファイルをライブラリ登録することで同じデザインパーツをチームでシェアできます。実際のデザインファイルにそのデータはないので、データサイズを軽くできます。
４）様々なプラグインでカスタマイズ！
プラグインをインストールすることで、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
５）InVisionとのダイナミックな連携でチームでプロジェクトをシェア
InVisionと連携することで、ディレクターやデベロッパーなど色々な人とプロジェクトをシェアできます。InVisionのいくつかの優秀なモードをご紹介。
<COMMENT MODE>
コメントモードで修正やフィードバックのやりとりができます。
<BUILD MODE>
ビルドモードではボタンなどに他のページへのリンクをつけることができ、サイトやアプリ内の動きを正確にシェアすることができます。
＜INSPECT MODE＞
インスペクトモードでは精密なCSSをコピーできます。
その他に、Sketchで書き出した画像をダイレクトにInVisionにアップロードできるので、デベロッパーとの連携にもグッドです。
スーパー素晴らしい機能
"SYMBOL"
＜スタンダードな使い方＞
各ファイルにシンボルページを生成でき、シンボルページ上でシンボルのデータを一括管理します。
１つのシンボルをデザインページで複製すると、１回の修正で複製された全てのシンボルが反映されます。
アイコンだけでなく、ヘッダーやフッターにも向いていますね。
と、ここまではPhotoshopの機能とそこまで大差のない感動レベルですが、Sketchは一味違います。
＜少しアドバンスな使い方＞
アイコンと文字など複数の情報を含むバナーやボタンごとシンボル化することができ、アイコンをシンボルとして用意しておくことで、デザインページ上で使いたいアイコン＆テキストを変更することができます。
文字だけで説明しても「？」なので、画像を交えて。
例えば、このように同じスタイルで異なる情報のバナーが並んでいたとします。
それぞれのバナーは同じシンボルでできています。これで１つのシンボルです。
画面右側の"Orverrides"でシンボルページに用意しておいたシンボルが表示されるので、それぞれ変えるだけ。
テキストもオーバーライド内で打ち変えられます。
反復するデザインに最適です！
１つポイントとしては、全てのアイコンのアートボードを同じ大きさにする必要があります。大きさが違うものと置き換えると、比率など変わってしまうので注意です。
＜お気に入りをシェア＞
英語ですが、素晴らしいデザイナーさんたちのYoutubeチャンネルをシェアします！英語が分かる方は是非チェックしてください。
その他、素材など。
・テンプレートなどのSketch素材
・Sketchショートカットキーリスト
それでは、素敵なSketchライフをお送りください。
＜告知＞
dribbble、使っていますか？まだdribbblerでない方に朗報です！
２つの招待枠をかけてコンペティションを開催します。
近いうちに私のdribbbleページにて詳細を発表しますので、dribbblerになりたい方は是非参加してくださーい。
＜海外就職・留学を検討中のクリエイターの方＞
＞Frog