今すぐデザインにSketchを使うべき理由
<このブログはFrogアドベントカレンダー17日目の記事です。>
![](https://static.wixstatic.com/media/53a61d_2034f5e159bb4d8bad723eb2dab3a29f~mv2.png/v1/fill/w_800,h_500,al_c,q_90,enc_avif,quality_auto/53a61d_2034f5e159bb4d8bad723eb2dab3a29f~mv2.png)
みなさんはデザインにSketchを使っていますか?Photoshopですか?
日本に住むデザイナーさんたちに聞いてみたところ、Sketchはまだ日本でそこまで浸透していないとのこと。UIデザインやWeb、AppデザインをするならSketchはマストなのかと思います。
なぜ日本ではSketchがまだ浸透していないのでしょうか?
おそらく、「日本語版がない」これがほとんどの理由ではないのでしょうか。さらに日本語で技術的な情報を検索しても、なかなか見つからないようです。
そんな「Sketchに移行したいけどまだ迷っている」「Sketchを導入しているけれど、なかなか情報を得られない」といったデザイナーさんたちに、
Sketchの良さ
AMAZINGなシンボル機能
オススメのライブラリ、素材
などをシェアしたいと思います!
<Sketchのよさ>
1)シンプル、早い
余計なものがないインターフェイスがわかりやすく、簡単に使える。ベクターデータなので軽くて早い!
2)コーディングしやすい
画像やCSSの書き出しが非常に簡単。
![](https://static.wixstatic.com/media/53a61d_6f30626e2c784de79492b0864b07fc58~mv2.jpg/v1/fill/w_212,h_137,al_c,q_80,enc_avif,quality_auto/53a61d_6f30626e2c784de79492b0864b07fc58~mv2.jpg)
画像の書き出しは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>
コメントモードで修正やフィードバックのやりとりができます。
![](https://static.wixstatic.com/media/53a61d_396fa65ed3f24a229643c13065039740~mv2.png/v1/fill/w_456,h_346,al_c,q_85,enc_avif,quality_auto/53a61d_396fa65ed3f24a229643c13065039740~mv2.png)
<BUILD MODE>
![](https://static.wixstatic.com/media/53a61d_e7f0fc4ff0864c2e8610749bf4d90ff3~mv2.png/v1/fill/w_228,h_85,al_c,q_85,enc_avif,quality_auto/53a61d_e7f0fc4ff0864c2e8610749bf4d90ff3~mv2.png)
ビルドモードではボタンなどに他のページへのリンクをつけることができ、サイトやアプリ内の動きを正確にシェアすることができます。
<INSPECT MODE>
インスペクトモードでは精密なCSSをコピーできます。
![](https://static.wixstatic.com/media/53a61d_cd290b867341442eb9762dbf67f93057~mv2.png/v1/fill/w_539,h_274,al_c,q_85,enc_avif,quality_auto/53a61d_cd290b867341442eb9762dbf67f93057~mv2.png)
その他に、Sketchで書き出した画像をダイレクトにInVisionにアップロードできるので、デベロッパーとの連携にもグッドです。
スーパー素晴らしい機能
"SYMBOL"
<スタンダードな使い方>
各ファイルにシンボルページを生成でき、シンボルページ上でシンボルのデータを一括管理します。
![](https://static.wixstatic.com/media/53a61d_f9c6ec7c106a4663a0441961be0ddda9~mv2.png/v1/fill/w_717,h_163,al_c,q_85,enc_avif,quality_auto/53a61d_f9c6ec7c106a4663a0441961be0ddda9~mv2.png)
1つのシンボルをデザインページで複製すると、1回の修正で複製された全てのシンボルが反映されます。
アイコンだけでなく、ヘッダーやフッターにも向いていますね。
![](https://static.wixstatic.com/media/53a61d_33a39c6120a04eb88313bef6e1eec748~mv2.png/v1/fill/w_338,h_79,al_c,q_85,enc_avif,quality_auto/53a61d_33a39c6120a04eb88313bef6e1eec748~mv2.png)
と、ここまではPhotoshopの機能とそこまで大差のない感動レベルですが、Sketchは一味違います。
<少しアドバンスな使い方>
アイコンと文字など複数の情報を含むバナーやボタンごとシンボル化することができ、アイコンをシンボルとして用意しておくことで、デザインページ上で使いたいアイコン&テキストを変更することができます。
文字だけで説明しても「?」なので、画像を交えて。
例えば、このように同じスタイルで異なる情報のバナーが並んでいたとします。
![](https://static.wixstatic.com/media/53a61d_ad18b8ad8da542f18483dcc1bd520fb2~mv2.png/v1/fill/w_980,h_290,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/53a61d_ad18b8ad8da542f18483dcc1bd520fb2~mv2.png)
それぞれのバナーは同じシンボルでできています。これで1つのシンボルです。
![](https://static.wixstatic.com/media/53a61d_f897b39ce51743558566f0fc9d4bda47~mv2.png/v1/fill/w_317,h_146,al_c,q_85,enc_avif,quality_auto/53a61d_f897b39ce51743558566f0fc9d4bda47~mv2.png)
画面右側の"Orverrides"でシンボルページに用意しておいたシンボルが表示されるので、それぞれ変えるだけ。
![](https://static.wixstatic.com/media/53a61d_c2f0f61fc0da4113b694071f35f0f5f4~mv2.png/v1/fill/w_734,h_332,al_c,q_85,enc_avif,quality_auto/53a61d_c2f0f61fc0da4113b694071f35f0f5f4~mv2.png)
テキストもオーバーライド内で打ち変えられます。
![](https://static.wixstatic.com/media/53a61d_f21119e3d8f140b8ae256bcd57be895d~mv2.png/v1/fill/w_633,h_209,al_c,q_85,enc_avif,quality_auto/53a61d_f21119e3d8f140b8ae256bcd57be895d~mv2.png)
反復するデザインに最適です!
1つポイントとしては、全てのアイコンのアートボードを同じ大きさにする必要があります。大きさが違うものと置き換えると、比率など変わってしまうので注意です。
![](https://static.wixstatic.com/media/53a61d_12765276a7d04952a9f9ad85bef6baaa~mv2.png/v1/fill/w_922,h_120,al_c,q_85,enc_avif,quality_auto/53a61d_12765276a7d04952a9f9ad85bef6baaa~mv2.png)
<お気に入りをシェア>
英語ですが、素晴らしいデザイナーさんたちのYoutubeチャンネルをシェアします!英語が分かる方は是非チェックしてください。
その他、素材など。
・テンプレートなどのSketch素材
・Sketchショートカットキーリスト
それでは、素敵なSketchライフをお送りください。
<告知>
dribbble、使っていますか?まだdribbblerでない方に朗報です!
2つの招待枠をかけてコンペティションを開催します。
近いうちに私のdribbbleページにて詳細を発表しますので、dribbblerになりたい方は是非参加してくださーい。
<海外就職・留学を検討中のクリエイターの方>
>Frog
Comments