Webページやアプリのデザインをする際、PhotoshopやIllustratorを利用されている方も多いかと思います。
しかし、PhotoshopやIllustratorはWebページやアプリのデザインのために作られたソフトではありません。
一方、Sketch 3はWebデザインのために作られたソフトウェアです。
Webデザインでよく使う機能が満載で、海外では多くのUIデザイナーが利用しています。
今回はそんなSketch 3についてご紹介します。
Sketch 3はベクター形式のツール
Sketch 3はPhotoshopと異なりベクター形式でグラフィックを作成します。
Illustratorと同じ形式ですね。
ベクター形式ですので、SVGのように希望するサイズで画像を書き出すことができます。
最終的にWebページやアプリの画面の素材を作成する際は、pngなどの形式で画像を書き出すわけですが、Sketch 3はサイズの異なる複数のpngファイルを一気に書き出し、各サイズに@2xなどのファイル名が自動的に付くなど、Webデザイン制作に嬉しい機能がついています。
※ Sketch 3は基本的にベクター形式のツールですが、ビットマップの編集ツールもついているので、一部Photoshopのような画像編集を行うことができます。
UIデザイナーに嬉しい機能が満載のSketch 3
UIをデザインする際、ボタンなど複数のページで共通するUIのコンポーネントを、各ページでいちいち作成していたら手間で手間で仕方ありません。
Sketch 3では、スタイルといったものを定義することができます。
スタイルは、オブジェクトの線や色の組み合わせに名前をつけて保存できる機能で、スタイルを変更すれば、同じスタイルが当たっているオブジェクトが一気に更新されます。
CSSのプロパティを変更すると、適用されている要素が全て変更されるのと同じ動き方をするので、とても便利な機能です。
また、共通するコンポーネントをシンボルとして保存し、他のページで使いまわすことができます。シンボル化したコンポーネントは、1つのシンボルを更新すれば、全てのページに変更を適用させることができます。
シンボル化を適切に行えば、デザインのガイドラインとしてSketchファイルを使うことも可能です。
また、Sketch 3のデザインはCSSとして書き出すこともできるので、まさにUIデザイナーに嬉しい機能が満載のツールといえます。
Sketchに興味を持たれた方は、下記の90秒の無料動画でSketchについて学んでみましょう！
コメント