イケてるUIデザインツールのSketchを0からマスターしよう
こんにちは。
今回はUIデザインツールとして人気を博しているSkechについてです。
Sketchを0からマスターしたい！という方に向けて、読んでおくべき記事を７本紹介していきます。
これからご紹介していく記事を順番に沿って進めていくと、記事を読み終わる頃にはSketchをある程度使いこなしていることでしょう。
Photoshopでデザインしていたあなたも、今日からSketch使いのデザイナーです。
では、早速始めていきましょう！
目次
準備
まずは、Appの用意からです。
Sketchをまだ手に入れていない人は、今すぐこちらからダウンロードしてみましょう。（SketchはMac Appのみになっています。）
Sketchって何？基礎知識編
Sketchは、Mac用のベクターグラフィックソフトです。
その軽い操作性やシンプルなインターフェースからWeb制作者に支持されています。
海外で大ブームし、最近では国内でもSketchを使ってデザインしている方が増えてきたように思います。
とはいえ未だに根強いファンがるのがPhotoshop。
CCになって、最近ではアートボード機能などもついてどんどん便利になってきています。
しかし、多くの機能がついているPhotoshopですが、web制作に最適化されていないところが難点でもあります。
この記事では、UIデザインツールとしてSketchがPhotoshopの機能よりすぐれているなと感じた点を紹介しています。
▷Sketchでデザインをして気付いたPhotoshopより優れているポイント
Sketchのインターフェースを理解しよう！
Sketchの魅力を知ったら、いよいよソフトを使ってみましょう。
Sketchを使うときに絶対に使うレイヤーの概念から、それに関するインターフェースの解説をしていきます。
デザインソフトで重要な概念である「レイヤー」とは何か理解し、その管理方法をSketchではどうやっているのかがわかります。
Sketchを使って作業をしていこう！
実際にデザイン作業でよく使うあの機能、Sketchだとどうやるの？Photoshopだとわかるけど・・。
こんなことがあると思います。
その代表格をそれぞれ記事にしているので順番に進めていきましょう。
マスク機能を理解しよう
上のレイヤーをしたのレイヤーに当てはめる「マスク機能」を説明していきます。
Sketchはベクターのソフトですが、使い方で画像の加工も少しできます。そのやり方をこの記事で解説しています。
ガイド機能を理解しよう
デザインしたりアイコンを作るときの、レイアウトのルールを設計するときに使うガイドについてです。
デザインするときに絶対に引くべきガイド機能についてです。
マス目のグリッドと、自分で引くガイドの両方を説明します。
今更聞けない「なぜガイドを引くのか？」ということまで含めて詳しく解説していきます。
スライスを理解しよう
デザインをしたあと、素材として画像を書き出す作業がありますよね。
そのときのスライス作業を状況のパターンにわけて解説していきます。Sketchでは簡単に画像の書き出しができるので、どういう場合にどういった方法でのスライスが適切かも学んでいきましょう。
ショートカットキーを理解しよう
作業を効率化するときに1番てっとり早いのがショートカットキーの暗記です。
はじめは遅くても、実際に使いながら作業をしていくとだんだんと指が覚えていきます。
慣れが重要ですが、まずはこの記事に載っているショートカットキーを作業に取り入れていきましょう。
作業が早くなった！と感じるはずです。
プラグインを入れて快適カスタマイズしよう
作業するときの「これができたらな」ができるようになるのがプラグイン。
Sketchは機能がシンプルなので足りないと感じることもありますが、そういう機能はプラグインで補いましょう。
この記事では筆者がとくに便利だと思ったプラグインを紹介していきます。
最後に
いかがでしたか？
この記事を読めば、一通りSketchの機能を使えるように設計してみました。
新しいソフトを触ってみることもUIを作るうえで大切な体験です。実際に作業をしながら使ってみるとだんだん慣れていくかと思います。
この機会に少し使ってみてはいかがでしょうか。Sketchで快適なデザイン作業をしていきましょう！