ajike switch

【Sketch初心者必見!#03】UIデザインならSketch!の理由

こんにちは!アシスタントディレクターの野村です。

前回はSketchとPhotoshopとの比較で、Sketchをわかりやすくご紹介しました!
(前回の記事はこちらから→【Sketch初心者必見!#02】Sketchとは?

今回はSketchのプラグインツールをご紹介するとともに、UIデザインならSketch!の理由をお話ししたいと思います。

プラグインツール一覧

Sketch Toolbox

スクリーンショット 2015-10-07 14.11.53
Sketchのプラグインマネージャーです。
プラグインのインストール・アンインストールが簡単にでき、非常に便利なツールです。
検索もできますので、ここから便利なプラグインツールをたくさん入手しましょう!

Sketch Measure

スクリーンショット 2015-10-07 14.21.01
Sketch内で作成した様々なオブジェクトのサイズ・カラー・形・エフェクト・フォントの種類やサイズなどの情報をワンクリックで書き出すことができるツールです。
コーダーさん大助かりなツールなんですね!

Style Inventory

スクリーンショット 2015-10-07 14.23.35
ドキュメントのカラー・テキストスタイル・シンボルをアートボードやスタイルシートに書き出すことができるツールです。
デザインからコーディングへの流れがスムーズになりますね!

Sketch Commands

スクリーンショット 2015-10-07 14.24.29
選択しているオブジェクトを、等間隔で再配置したり、指定した数値分だけ回転させたり、角丸にしたり、サイズを揃えたりとっても便利なツールです!

Sketch Distributor

スクリーンショット 2015-10-07 14.25.26
選択しているオブジェクトを水平・垂直に配置します。
これで簡単にガタガタした部分や、バラバラに作成したオブジェクトでも綺麗に素早く整えることができますね!
「なんだそれだけ?」と思うなかれ。
UIデザイン時に水平・垂直に整えたい部分ってたくさんあると思うんですよね、ボタン配置やメニューなどなど。
四角い画面に収めないといけないので、このツールは非常に役に立ちます!

Sketch Flex Layout

スクリーンショット 2015-10-07 14.26.33
スタイルシートとプロトタイプを使用してレイアウトを作成・変更できるツールです。
コーダーさんに変更してもらう際にはとっても便利なツールですね!
それに、デザイナーさんも一つ一つ直すのではなく、photoならphotoの部分で全部変更できるし、widthやheightの数値を変えるだけで全ての変更ができるので、コーディング段階からの戻しにも素早く対応できますね!

Day PlayerとContent Generator

スクリーンショット 2015-10-07 14.28.58

スクリーンショット 2015-10-07 14.29.42
ダミーデータを簡単に入れることができるツールです。
「ダミー画像やテキストを一つ一つ入れるなんて面倒くさいー!」って時に大助かりなツールです!

Dynamic Button

スクリーンショット 2015-10-07 14.31.05
背景色とPaddingを設定するだけでフレキシブルなボタンを素早く作成することができます!
テキストの大きさを変えたら枠の大きさも変えないといけない・・・なんて面倒なときありますよね。
しかし。このツールならPaddingを設定するだけで中身をいくら変えても自動で変更してくれるんですね〜。
便利です!

AElconizer

スクリーンショット 2015-10-07 14.32.17
アートボードに作成したアイコンのオブジェクトを、必要な可能性のある様々なサイズのアイコンに作成してくれるツールです。
色々なサイズのアイコン欲しいなってときありますよね?
そんなときに便利です!

Divine Proportions

スクリーンショット 2015-10-07 14.32.50
黄金比・黄金螺旋・1/3ルールなど、レイアウトや写真の構図に重要なパスを描いてくれるツールです!
これ、デザイナーさんにしたらホント便利ですよね!

Sort Lauyers

スクリーンショット 2015-10-07 14.34.24
選択したレイヤーや、アートボードを簡単にソートできるツールです。
UIデザインをすると、アートボードがいつの間にか大量に・・・なんて事態にもなるはずです。
そんなときに役立つのがこのツール!
素早く簡単に揃えることができます。

Material Design Color Palette

スクリーンショット 2015-10-07 14.35.12
彩度ごとに各色のパレットを作り出してくれる日本産のプラグインツールです!
「微妙にこの色じゃないんだよね〜」なんてときやカラーを見比べて決定したいときに便利なツールですね。
よりぴったりな色合いでサイトを作成することができます!

Color Palette Builder

スクリーンショット 2015-10-07 14.36.55
こちらは明度ごとにパレットを作成してくれるツールです。
同じく、よりぴったりの色でサイト作成をする際お手伝いをしてくれるツールです!

いかがだったでしょうか?

こんなにも便利なプラグインツールが豊富にあるんですね!
しかも、全てUIデザインを行う際にとっても役に立つツールばかり!

Sketchブログ後半では、
スピーディー・スマートをキーワードに効果的なプラグインツールの使い方や
便利な連携ツールのご紹介もしちゃいます!
お楽しみに!

【関連記事】
【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー
【Sketch初心者必見!#02】Sketchとは?
【Sketch初心者必見!#04】テンプレート活用で素早くUIデザイン
【Sketch初心者必見!#05】シンボル化でスピーディーに作成
【Sketch初心者必見!#06】Sketchでスマートな会議に
【Sketch初心者必見!#07】Sketchは書き出しを簡単に
【Sketch初心者必見!#08】Sketchで簡単指示書作成

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×