海外を中心にシェアを伸ばしつつあるUIデザインツール「Sketch」の魅力と可能性
Webサイト制作においてデザインカンプの制作はPhotoshopで、というデザイナーが現在でも主流な傾向にあります。
最近では、「Sketch」が海外で徐々に人気を集め、日本でもプロジェクト・チーム単位でSketchを採用するケースが増えてきています。(企業単位ではSketchがMac専用であることやデータ受け渡しの問題から見送られることもあるようです)。
Sketchは、オランダのBohemian coding社によって開発されたUIデザイン・Webデザインツールです。料金が$99と安く、月額制のAdobe Creative Cloudよりも長い目で見ると手頃。Photoshop単体と比較すれば1年以上使えば元がとれることになります。
注目を集めるSketchですが、費用が安いだけではなく活用できるポイントはいくつかあります。今回はSketchの優れたところ、PhotoshopやIllustratorとの比較も交えた情報をご紹介します。
SketchがPhotoshopやIllustratorよりも優れているところ
Sketchが海外でシェアを広げつつあり、日本でも話題になるポイントとして挙げられるのは、SketchがWebにおけるUIデザインに特化し、扱うデータがすべてベクターデータである点です。
Photoshopとの比較
近年Apple社のRetinaディスプレイをはじめ、スマートフォンでもデバイスピクセル比(device-pixel-ratio/1ピクセルを描画するドット数)が1.5〜3.0以上のものが増え、Photoshopでのデザインカンプが100%ディスプレイで再現されることが難しくなりました。
左にアートボードとレイヤー、上部にツール、左に各種プロパティとなっています。感覚的に操作でき、動作は非常に軽快。画面はiPhone6用のアートボードを広げたところです。
Sketchは一度に複数のアートボードを作ることができます(PhotoshopではCreativeCloud 2015からできるようになった)。
Illustratorとの比較
Illustratorは、ベクターデータを扱いますが、完全なWeb対応はしていないため、小数点以下の数値に対してピクセル表現としての若干のブレは免れません。対してSketchはWeb標準で作られたベクターツールですので、画像解像度を意識することなくデザインカンプの制作ができます。
そして、Sketchは最新のUIデザインツールとして、デフォルトでデザインテンプレートが用意されています。Illustratorにはデザインテンプレートがないので、この辺もSketchは「ベクターでのUI制作ツール」として徹底しています。
Sketchは全てベクターデータなので画像解像度に依存しないレスポンシブサイト制作に向いている
このような利点からSketchの活躍が期待できるのは、複雑な図形を扱わないアプリケーションのUIデザインやフラットデザインを取り入れたWeb制作のときでしょう。
デバイスピクセル比1.0が崩れたRetinaやスマートフォンで画像を綺麗に見せようとするとき、デザイナーは都度大きな画像を用意してそれを縮小して表示することを前提にデザインカンプを作っています。
複雑な画像を多用しないデザインであれば、デザイナーはSketchで画像解像度のことをほとんど意識せず、デザインカンプを作ることができます。必要に応じてリサイズしたデザインカンプを書き出すこともできるほか、一度に複数枚の画像を書き出すことも可能。ベクターデータなのでSVGとの相性もいいです。
繊細な画像作成ではPhotoshopの方が優れている
Sketchでは、ビットマップの加工能力がPhotoshopと比較すると低いです。テキストの細かいアンチエイリアスの設定ができないため、ロゴやタイトルなどテキストをメインとする画像を作ることは不向き。トーンカーブやレベル補正など、色調補正の機能もないので、繊細な画像作成には向いていないでしょう。
検討したい方に / 無料で体験版が使える
Sketchを導入したい、検討したいという方には、30日間限定の試用版がダウンロードできます。
現在Sketchのバージョンは3ですが、バージョン4から1年間の無償アップグレードに1ライセンス$99が必要になることがBoheman Coding社からアナウンスされています。
つまり、1から3まで無料でバージョンアップしていたのですが、バージョン4以降は1年間の無償更新期間を確保するために$99ドルを支払う必要があります。
Adobe CCのようなサブスクリプション制(一定期間使える権利を買う)ではないため、利用者にバージョンアップする意思がなければ現状のバージョンを使い続けることができます。
しばらくはSketch3のマイナーアップデートが続き、Sketch4のリリースの予定はまだ立っていないようです。購入予定者は公式アナウンスを見守りましょう。
まとめ
完全Web対応のツールFireworksがCS6で開発終了になりましたが、Sketchはその時期に頭角を表しています。
今後のWebデザイン・アプリデザインの動向を見ていると、精細なフォトレタッチ・ツールがすぐに不要になることはないと思いますが、SketchのようなシンプルなUIデザイン・Webデザインツールは勢いを感じます。
デザイナーの求められるスキルが多様化する中で、仕事道具でもあるツール選びも含めて柔軟な姿勢が今後重要になっていくのかもしれません。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- シェア
- シェアとは、インターネット上で自分が見つけて気に入ったホームページやブログ、あるいは、Facebookなど自分自身が会員登録しているSNSで自分以外の友達が投稿した写真、動画、リンクなどのコンテンツを自分の友達にも共有して広めたいという目的をもって、SNSで自分自身の投稿としてコンテンツを引用し、拡散していくことをいいます。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング