Sketchでのデザイン作業効率化テクニックまとめ【Webデザイン・UIデザイン】

「SketchでWebデザイン・UIデザインしたいけど、出来るだけ効率的に作業がしたいなぁ〜
シンボルとか、テキストスタイル、シェアスタイルを使いこなしたい。」

こんな人に向けて、Sketchでの作業効率化テクニックをいくつかまとめました。

それぞれ別記事で細かく解説していますので、是非そちらを最初にチェックしてみてください^ ^

この記事の内容

デザイン開始前の下準備で後の作業効率化
実際にシンプルなUIをデザインしてみる

あくまでも一例ですので、良いと思ったら参考にしてみてください。

デザイン開始前の下準備

基本的な操作が遅かったら、作業効率も上がらないので、まずは【爆速デザイン】Sketchでよく使うショートカットキーまとめを見てみてください(^^)

そして、以下の３つの記事で紹介している下準備をして、後の作業効率がアップさせましょう〜(^^)/

色の選択：色のパレットを作成【シェアスタイル】

以下の記事でシェアスタイルのを使って自作のカラーパレットを作る方法を紹介しています。

色はあとから変更できるので、だいたいでオッケーです。
元の色のシェアスタイルを変更するだけで、そのスタイルが使われている要素全てを一気に変更できるので、後々色の変更があっても大丈夫。

テキストスタイルを作成：pからh1・大文字まで作成

以下の記事では、テキストスタイルの作成方法と使い方を紹介しています。
フォントのサイズを決めるのに便利なサイトも紹介していますので、参考にしてみてください。

作業していく中で、他のテキストスタイルが必要になった場合は、その都度、「Create New Style」から追加すればオッケーです。

ボタンの作成：ボタン・シェイプ・カラーのシンボル作成

この記事では、主にシンボルの作成方法と、その使い方を紹介しています。

シンボルを使うと、簡単にパーツを使いまわせるし、後々の変更も簡単です。
今回は、「ボタン / ヘッダーナビゲーション」のシンボルだけ作成しています。

実際にデザインしてみる

上の記事で「シェアスタイル・テキストスタイル・シンボル」が準備できました。

Style Guideページ(シェアスタイル・テキストスタイル)

Symbolのページ(シンボル)

これらを使いながら、簡単なUIデザインを数パターン作っていきます。
＊英語フォントを使っているので英語のサイトです。日本語サイトの場合は日本語フォントでテキストスタイルを設定すればオケーです。

アートボードの作成

新しいページを作り、aでアートボードを作成し、Desktop HDを選びます。

まず、View→Canvas→Layout Settingsからレイアウトのセッティングをします。

今回の設定はこんな感じ

bootstrap(フレームワーク)のデフォルトGutter Widthは30pxですが、今回は32pxのままでいきます。
＊必要に応じて変更してください。

「OK」を押すとこんな感じになります。

これを参考にレイアウトしていくと、コーディングする時も楽になります。

テキスト・ボタンの挿入

文章もテキストスタイルを作っているので簡単にサイズ変更・設置できます。

こんな感じでカラム数を気にしながら、文章をポンポン入れていきます〜

初心者でも簡単に使えるSketchのおすすめ時短プラグイン５選で紹介しているCraftを使うと、文章やヘッドライン、名前などを簡単に入れることができます。＊英語のみ

文章が長すぎる場合は必要に応じて削除してください〜

ボタンもシンボルを作っているので、簡単に配置できます。

この手順でナビゲーションメニューもすぐにできます。
こんな感じ

ここでナビゲーションメニューのシンボルも作っておくと、下層ページのデザインを作る時に使いまわせるので便利です。
黒テキスト/透明背景・白テキスト/透明背景のシンボルを作りました。

＊白テキストの方は、文字が見えないですが、ちゃんと配置してあります。

自作したiPhoneを右側に追加してみました。

いい感じですね(^^)
＊iPhoneのスクリーンの画像もCraftで適当に入れています。

いろんなパターンの作成

シンプルですが、これを基準にいろんなパターンが一瞬で作れます。

iPad風バージョンを作ったり
＊command d でアートボードを複製してから、違うパターンを作りましょう(当たり前かww)

中央揃えバージョンを作ったり

iPhoneとiPadを追加したバージョンもすぐにできます。

Craftを使うと以下のように画像を背景に一瞬で入れることができます。
また、背景画像によっては画像を編集しないと、テキストが見えなくなることがあるので注意です。
＊以下では、背景画像の上にopacity50%の黒いレイヤーを追加しています。

＊ちょっとgifの画質荒い、、、すみません、、、

これで、あっという間に４種類のデザインのトップの完成です。
例ですのでかなりシンプルですが、応用することで様々なデザインが効率的に作れます。

以上の流れや、テクニックを使うと以下のようなコンテンツ部分も簡単に作れます(^^)/

コンテンツ部分の例

＊以上のコンテンツ部分は、全部で5分もかかってないです笑
シンプルですが、いい感じですね(^^)

まとめ：準備段階がつまらないけど、後々楽になる

準備段階は、カラーパレット作ったり・シェアスタイル設定したり・テキストスタイル設定したり・シンボル作ったり、、、正直つまらないです。

でも、その作業をすることで後々楽になります。

ただ、色んな方法があるので、あくまでも一つの例として参考にしてみてください。

また、この流れ・テクニックは僕の好きなデザイナーPablo Stanleyさんが使用しているメソッドです。

２時間のライブ動画で解説もしていますので、英語がわかる人は見て参考にしてみてください。

Sketchの参考書があまりないので、下の本かググったりYouTubeのチュートリアルを見て勉強しましょう。

Sketchの参考書はこちら

UIデザイナーのための Sketch入門&実践ガイド

posted with ヨメレバ

吉竹遼ビー・エヌ・エヌ新社 2017-05-23

サラーっと読んで辞書的に使うといいかと思います。

では良いSketchライフを〜(^^)/

Posted

2017年12月3日

in

Tags:

sketch, Webデザイン