top of page

今すぐデザインにSketchを使うべき理由

＜このブログはFrogアドベントカレンダー17日目の記事です。＞

みなさんはデザインにSketchを使っていますか？Photoshopですか？

日本に住むデザイナーさんたちに聞いてみたところ、Sketchはまだ日本でそこまで浸透していないとのこと。UIデザインやWeb、AppデザインをするならSketchはマストなのかと思います。

なぜ日本ではSketchがまだ浸透していないのでしょうか？

おそらく、「日本語版がない」これがほとんどの理由ではないのでしょうか。さらに日本語で技術的な情報を検索しても、なかなか見つからないようです。

そんな「Sketchに移行したいけどまだ迷っている」「Sketchを導入しているけれど、なかなか情報を得られない」といったデザイナーさんたちに、

  • Sketchの良さ

  • AMAZINGなシンボル機能

  • オススメのライブラリ、素材

などをシェアしたいと思います！

 

＜Sketchのよさ＞

１）シンプル、早い

余計なものがないインターフェイスがわかりやすく、簡単に使える。ベクターデータなので軽くて早い！

２）コーディングしやすい

画像やCSSの書き出しが非常に簡単。

画像の書き出しはSketchがどのツールよりも優れています！

CSSもなかなか忠実にコピーできます。

３）シンボル、ライブラリ機能で個人＆チームワークの作業を効率化

シンボルについては下記に詳しく説明しますので、ご覧ください。

ファイルをライブラリ登録することで同じデザインパーツをチームでシェアできます。実際のデザインファイルにそのデータはないので、データサイズを軽くできます。

４）様々なプラグインでカスタマイズ！

プラグインをインストールすることで、Sketchを更に便利にできます。

オススメの無料プラグインをいくつかご紹介します。

<プラグイン一覧>

一番のオススメ！シンボルを整理

・テキストを検索、置き換え

・レイヤー名を一括変更

・空のグループを削除してデータ整理

・使っていないスタイルを削除

・チームに最適！テキストスタイルをシェア

５）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

Comments

bottom of page