この記事を書いた人:

イケてるUIデザインツールのSketchを0からマスターしよう

こんにちは。

今回はUIデザインツールとして人気を博しているSkechについてです。

Sketchを0からマスターしたい!という方に向けて、読んでおくべき記事を7本紹介していきます。

これからご紹介していく記事を順番に沿って進めていくと、記事を読み終わる頃にはSketchをある程度使いこなしていることでしょう。

Photoshopでデザインしていたあなたも、今日からSketch使いのデザイナーです。

では、早速始めていきましょう!

準備

まずは、Appの用意からです。

Sketchをまだ手に入れていない人は、今すぐこちらからダウンロードしてみましょう。(SketchはMac Appのみになっています。)

▷SketchApp

Sketchって何?基礎知識編

sketch3

Sketchは、Mac用のベクターグラフィックソフトです。

その軽い操作性やシンプルなインターフェースからWeb制作者に支持されています。
海外で大ブームし、最近では国内でもSketchを使ってデザインしている方が増えてきたように思います。

とはいえ未だに根強いファンがるのがPhotoshop。

CCになって、最近ではアートボード機能などもついてどんどん便利になってきています。
しかし、多くの機能がついているPhotoshopですが、web制作に最適化されていないところが難点でもあります。

この記事では、UIデザインツールとしてSketchがPhotoshopの機能よりすぐれているなと感じた点を紹介しています。

▷Sketchでデザインをして気付いたPhotoshopより優れているポイント

Sketchのインターフェースを理解しよう!

Sketchの魅力を知ったら、いよいよソフトを使ってみましょう。

Sketchを使うときに絶対に使うレイヤーの概念から、それに関するインターフェースの解説をしていきます。

1dc1112e314030a159d46d42390ef809

デザインソフトで重要な概念である「レイヤー」とは何か理解し、その管理方法をSketchではどうやっているのかがわかります。

▷レイヤーリストを理解しよう

Sketchを使って作業をしていこう!

実際にデザイン作業でよく使うあの機能、Sketchだとどうやるの?Photoshopだとわかるけど・・。
こんなことがあると思います。

その代表格をそれぞれ記事にしているので順番に進めていきましょう。

マスク機能を理解しよう

d6738d654f7f0d18f1dac11e828f85a3

▷画像の切り抜きに使えるマスクの解説

上のレイヤーをしたのレイヤーに当てはめる「マスク機能」を説明していきます。

Sketchはベクターのソフトですが、使い方で画像の加工も少しできます。そのやり方をこの記事で解説しています。

ガイド機能を理解しよう

スクリーンショット 2016-02-14 17.37.12

▷ガイド機能について

デザインしたりアイコンを作るときの、レイアウトのルールを設計するときに使うガイドについてです。

デザインするときに絶対に引くべきガイド機能についてです。

マス目のグリッドと、自分で引くガイドの両方を説明します。

今更聞けない「なぜガイドを引くのか?」ということまで含めて詳しく解説していきます。

スライスを理解しよう

複数サイズ・形式で書き出す

▷画像のスライスを機能について

デザインをしたあと、素材として画像を書き出す作業がありますよね。

そのときのスライス作業を状況のパターンにわけて解説していきます。Sketchでは簡単に画像の書き出しができるので、どういう場合にどういった方法でのスライスが適切かも学んでいきましょう。

ショートカットキーを理解しよう

thumbnail

▷Sketchの便利なショートカットのまとめ

作業を効率化するときに1番てっとり早いのがショートカットキーの暗記です。

はじめは遅くても、実際に使いながら作業をしていくとだんだんと指が覚えていきます。

慣れが重要ですが、まずはこの記事に載っているショートカットキーを作業に取り入れていきましょう。
作業が早くなった!と感じるはずです。

プラグインを入れて快適カスタマイズしよう

toolbox

作業するときの「これができたらな」ができるようになるのがプラグイン。

Sketchは機能がシンプルなので足りないと感じることもありますが、そういう機能はプラグインで補いましょう。

この記事では筆者がとくに便利だと思ったプラグインを紹介していきます。

▷便利なプラグインまとめ

最後に

いかがでしたか?

この記事を読めば、一通りSketchの機能を使えるように設計してみました。

新しいソフトを触ってみることもUIを作るうえで大切な体験です。実際に作業をしながら使ってみるとだんだん慣れていくかと思います。

この機会に少し使ってみてはいかがでしょうか。Sketchで快適なデザイン作業をしていきましょう!

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

なおはやし
フォントが大好きなデザイナーです。フリーフォントの投稿サイトフォントフリーを運営しています。@n_a_o_96

関連する記事

Recommended by