【初心者向け】Sketch(スケッチ)の使い方を徹底解説menuデザインマーケティングプログラミングWebサービス・アプリSaaS・業務効率化ノウハウCLOSEデザインマーケティングプログラミングWebサービス・アプリSaaS・業務効率化ノウハウCLOSEHOMEデザインSketch【初心者向け】Sketch(スケッチ)の使い方を徹底解説UIデザインツールとしてメインに使用しているデザイナーも多い「Sketch(スケッチ)」。IllustratorやPhotoshopよりもシンプルで手軽にUIデザインを作成することができるので、Webデザイナーだけでなく、ディレクターやエンジニアなどの非デザイナーにも愛用されています。このページでは、「Sketchに興味があるけど使い方がよくわからない」「Sketchってどんなことができるの?」「他のデザインツールと何が違うの?」という方向けに、Sketchの基本的な使い方から、カスタマイズ方法、さまざまな小技などを紹介しています。初心者の方だけでなく、中級者の人にもぜひ読んでいただければと思います。※SketchはMacのみの対応となっています。Windowsでは動きませんのでご注意ください。Sketchとは?基礎知識と特徴あらためて、Sketchがどういうツールなのかを軽く紹介します。Sketchは、Mac向けに開発されているWebやアプリのUI(ユーザーインターフェイス)デザインに特化したベクターグラフィックソフト。プレゼンテーションスライドや企画書を作成するのにもオススメです。その軽い操作性やシンプルなインターフェースからWeb制作者に支持されています。海外で大ブームし、最近では国内でもSketchを使ってデザインしている方が増えてきたように思います。いえ未だに根強いファンがるのがPhotoshop。CCになって、最近ではアートボード機能などもついてどんどん便利になってきています。多くの機能がついているPhotoshopですが、web制作に最適化されていないところが難点でもあります。この記事では、UIデザインツールとしてSketchがPhotoshopの機能よりすぐれているなと感じた点を紹介しています。Sketchでデザインをして気付いたPhotoshopより優れているポイントSketchのダウンロード方法まずは、Sketchの公式サイト(※英語)をひらきます。日本円で約1万円ちょっとなので月額に換算すると1000円を切ります。Trial」をクリックしましょう。するとすぐにzipファイルがダンロードされます。PCにダウンロードが完了したらダブルクリックして解凍、あとはアプリケーションフォルダに移動させるだけですぐに利用できます。Sketchのインターフェースを理解しよう!Sketchの魅力を知ったら、いよいよソフトを使ってみましょう。Sketchを使うときに絶対に使うレイヤーの概念から、それに関するインターフェースの解説をしていきます。デザインソフトで重要な概念である「レイヤー」とは何か理解し、その管理方法をSketchではどうやっているのかがわかります。【Sketch初心者必見!】レイヤーリストの解説いろいろSketchを使って作業をしていこう!実際にデザイン作業でよく使うあの機能、Sketchだとどうやるの?Photoshopだとわかるけど・・。こんなことがあると思います。その代表格をそれぞれ記事にしているので順番に進めていきましょう。マスク機能を理解しよう上のレイヤーをしたのレイヤーに当てはめる「マスク機能」を説明していきます。Sketchはベクターのソフトですが、使い方で画像の加工も少しできます。そのやり方をこの記事で解説しています。Sketch初心者が知っておきたい。画像の切り抜きに使えるマスクの解説ガイド機能を理解しようデザインしたりアイコンを作るときの、レイアウトのルールを設計するときに使うガイドについてです。デザインするときに絶対に引くべきガイド機能についてです。マス目のグリッドと、自分で引くガイドの両方を説明します。聞けない「なぜガイドを引くのか?」ということまで含めて詳しく解説していきます。Sketch初心者が知っておきたい!ガイド機能についてスライスを理解しようデザインをしたあと、素材として画像を書き出す作業がありますよね。そのときのスライス作業を状況のパターンにわけて解説していきます。Sketchでは簡単に画像の書き出しができるので、どういう場合にどういった方法でのスライスが適切かも学んでいきましょう。Sketch初心者が知っておきたい!画像のスライス機能についてショートカットキーを理解しよう作業を効率化するときに1番てっとり早いのがショートカットキーの暗記です。はじめは遅くても、実際に使いながら作業をしていくとだんだんと指が覚えていきます。慣れが重要ですが、まずはこの記事に載っているショートカットキーを作業に取り入れていきましょう。作業が早くなった!と感じるはずです。無駄な作業時間を節約!Sketchの便利なショートカットまとめプラグインを入れて快適カスタマイズしよう作業するときの「これができたらな」ができるようになるのがプラグイン。Sketchは機能がシンプルなので足りないと感じることもありますが、そういう機能はプラグインで補いましょう。この記事では筆者がとくに便利だと思ったプラグインを紹介していきます。前回はSketchの画像の書き出しについてご紹介しました。今回はSketchをより快適に使うためのプラグインを、ご紹介したいと思います。前回はSketchのガイド機能についてご紹介しました。今回はSketchの画像のスライス機能について解説していきます。前回はSketchのマスク機能についてご紹介しました。→Sketch初心者が知っておきたい。今回はSketchのガイド機能について解説していきます。ガイド機能とは、デ...SketchSketch初心者が知っておきたい。前回Sketchのレイヤー機能についてご紹介しました。これから定期的にSketchの使い方について紹介していくので、読んでみてくださいね。前回はSketchのショートカットキーについてご紹介しました。今回はSketchのレイヤーの仕組みについて解説していきます。Sketch大好き・デザイン大好きのデザイナーです。作業を効率化すれば時間をぐっと短縮することができます。Sketch3にPhotoshopから乗り換えて1年が経つデザイナーです。使っている人が多数かと思いますが、慣れ親しんだPhotoshopを止められない!という方もいるのではないでしょうか。