Webデザインに特化したグラフィックツールSketch 3を使ってみよう

Webページやアプリのデザインをする際、PhotoshopやIllustratorを利用されている方も多いかと思います。

しかし、PhotoshopやIllustratorはWebページやアプリのデザインのために作られたソフトではありません。

一方、Sketch 3はWebデザインのために作られたソフトウェアです。
Webデザインでよく使う機能が満載で、海外では多くのUIデザイナーが利用しています。

今回はそんなSketch 3についてご紹介します。

sketch_3_page

スポンサーリンク
インド式英語のオンライン講座
10時間で英語脳育成プログラム マンガENGLISH100 フルセット版

Sketch 3はベクター形式のツール

Sketch 3はPhotoshopと異なりベクター形式でグラフィックを作成します。
Illustratorと同じ形式ですね。

ベクター形式でデザインを作成するので、最終的にWebページやアプリの画面の素材を作成する際は、pngなどの形式で画像を書き出すわけですが、Sketch 3はサイズの異なる複数のpngファイルを一気に書き出し、各サイズに@2xなどのファイル名が自動的に付くなど、Webデザイン制作に嬉しい機能がついています。

※ Sketch 3は基本的にベクター形式のツールですが、ビットマップの編集ツールもついているので、一部Photoshopのような画像編集を行うことができます。

UIデザイナーに嬉しい機能が満載のSketch 3

UIをデザインする際、ボタンなど複数のページで共通するUIのグラフィックを、各ページでいちいち作成していたら手間で手間で仕方ありません。

Sketch 3では、スタイルといったものを定義することができます。

スタイルは、オブジェクトの線や色の組み合わせに名前をつけて保存できる機能で、スタイルを変更すれば、同じスタイルが当たっているオブジェクトが一気に更新されます。

CSSのプロパティを変更すると、適用されている要素が全て変更されるのと同じ動き方をするので、とても便利な機能です。

また、Sketch 3のデザインはCSSとして書き出すこともできるので、まさにUIデザイナーに嬉しい機能が満載のツールといえます。

スポンサーリンク
English Boot Camp 〜たった1日で英語が得意になる基礎講座〜
インド式英語のオンライン講座

シェアする

  • このエントリーをはてなブックマークに追加

フォローする