【1】WebデザイナーがSketchを使う理由

こんにちは。FASTCODINGデザイナーの七転び八重子です。

今回は、Web制作のUIデザインツールとして有名な「Sketch」の便利な機能を紹介します。

目次
1）　Sketch（スケッチ）とは？
2）　Sketchと他のツールを比較してみる
3）　Sketchの便利な機能
　－ １サイトを１ファイルで作れる軽さ
　－ ワークスペースをページで分けてスッキリ
　－ ちょこっとしたデザインが全てに反映されるシンボル機能
　－ ボタンや見出しの装飾にはスタイルで共通化
　－ デザインの共有もクラウドで楽々
4）　まとめ

Sketch（スケッチ）とは？

Sketchは、Bohemian Codingというオランダの会社によって開発されたベクターグラフィックソフトです。ベクターソフトでありながらピクセル基準で作成することが前提のつくりになっており、WEB制作やUIデザインに特化しています。

さまざまな機能が詰まったAdobe PhotoshopやIllustratorと比較すると、UIデザインに特化している分、無駄な機能が削ぎ落とされているため学習コストが低いです。また、効率的にUIデザインができるだけでなく、プロトタイプ検証、プロジェクトメンバーやクライアントへの共有といった、デザイン制作前後のフェーズでも活用できる機能を兼ね揃えています。

＊Sketchは現在はMac版しか出ていません。

Sketchと他のツールを比較してみる

みなさん、WEBデザインの制作する際、どのツールを使っていますか？
少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。最近では、AdobeXDやSketchが支流となっています。確かに、WEBデザインやUIデザインにおいてはSketchが便利ですが、Illustrator、Photoshopにしかできない作業もあります。そこで、それぞれのツール特徴を筆者独自目線でまとめてみました。

筆者の場合は、写真加工はPhotoshop、文字デザイン・アイコンデザインはIllustratorを利用し、それらの素材を利用してWEBデザインをSketchで行なっています。
このように、目的や状況において、それぞれのツール特徴を生かしてデザインしていくことで、作業効率を上げ時間短縮に繋がるだけでなく、エンジニアや関係者とのコミュニケーションを円滑にすることもできます。

Sketchの便利な機能

Sketchを使っている方にとっては当たり前かも知れませんが、筆者が実際に利用して「ヌォォォォオ」と唸った便利な機能を紹介します。

１サイトを１ファイルで作れる軽さ

これまで、IllustratorでWEBデザインをしてきた筆者は、２０ページに及ぶデザインをPC1,PC2,Tablet2などファイル分けしていました。それは、ただただ重たいからです。
ところが、Sketchはとにかく軽い！！２０ページを１つのファイルで軽々制作できるんです。

ワークスペースをページで分けてスッキリ

Sketchは１つのワークスペースに複数アートボードが作れ、デバイス別にデザインができます。そして、ワークスペースをページで切り分けることができます。
例えば、「TOP」「WORKS」「COMPANY」などページ毎に一つのワークスペースで作業ができます。

ちょこっとしたデザインが全てに反映されるシンボル機能

Sketchにはシンボルという機能があります。
ヘッダーやフッターなど、各ページで共通するパーツをシンボルとして登録しておけば、ちょこっとデザインを変更しても全てのページに反映されるという機能です。

ボタンや見出しの装飾にはスタイルで共通化

シンボルと似た機能ですが、こちらはボタンや見出しなど共通のスタイルを適応する場合に便利です。例えば、ボタン事にテキストが違うといった場合です。

デザインの共有もクラウドで楽々

スケッチは、デザインをクラウド上で共有でき、コメントを残すこともできます。クライアントへのデザイン確認やエンジニアとの共有も簡単です。また、クラウドからデザインファイルをダウンロードすることもできます。

まとめ

長年WEBデザインに携わっている方は、PhotoshopやIllustratorを使用されてきたと思います。
操作が慣れていることから、新しソフトを使い始めるのに抵抗があるかも知れません。ですが、Sketch一度使い始めると、その便利さに必ず唸るはずです。
なぜなら、筆者もその一人だからです。