初心者のためのSketch入門〜基礎編〜

Sketch

初心者のためのSketch入門〜基礎編〜

目次

  • はじめに
  • Sketchとは
  • 今回使用する用語
  • 今回使用するバージョン
  • Sketchをはじめる
  • 感想

はじめに

背景

  • 今回は業務でSketchを使う機会があり、初心者として1からの学習しました。
  • その上で、初心者に向けて「初心者のためのSketch入門〜基礎編〜」という記事にまとめていきます。

目的

  • Sketch初心者が、Sketchで成果物を作成できるようになること。

Sketchとは

概要

  • Sketchはベクタードローイングツール(※)で、主にUIデザインのツールとして使用されていて、WebやUIデザインの代表的なツールとして挙げられている

他のツールと比較した図

Sketch Photoshop Illustrator
パフォーマンス
スタイル機能
解像度に応じた書き出し
日本語対応 ×
プラグイン
外部連携 ×

吉竹遼(2017)「UIデザイナーのためのSketch入門&実践ガイド」ビー・エヌ・エヌ新社より引用

  • Sketchのメリット(抜粋)
    • パフォーマンス => 作業中重くならない
    • スタイル機能 => フォントや色を、異なるテキストや図形で、
      同じ設定のまま適用・管理できる機能
       
  • Sketchのデメリット
    • 日本語対応 => 日本語対応していないため、
      有志で意訳されたものを参考にしなければならない

      • 日本語の記事も少ない

今回使用する用語

  • Shape(シェイプ) => 図形のこと
  • オブジェクト => キャンバス上のテキストやShapeのこと

今回使用するバージョン

44.1

Sketchをはじめる

今回作るもの

成果物として下記のようなボタンを作成する

サイズ:150×50
用途:Webページにて配置するボタン


  1. Sketchを起動する
    Sketchを起動します

    ここでは、最近作成しているファイルやテンプレートが選択できる
    今回はWebページのボタンを作成するため「New Document」を選択し、作業を開始する

    • 画面構成紹介

    青. レイヤー => ここで制作物の管理を行っている
    黄. キャンバス => 作業をする場所
    赤. インスペクタ => 作成したものの数値など細かい設定を行える

  2. ページ作成
    新規ファイルを作成すると1つのページが作られるため、展開する
    (最初は折りたたまれている状態)

    展開するには赤い部分を押下する

    (ちなみに新しいページを作りたい場合は「+」を押下すると作ることができる)

    • オブジェクト作成
      次にボタンとなるオブジェクトを作成する
       
  3. Insertを押下する

  4. Shape内のRounded(角丸)を押下する

  5. キャンバス内でドラッグして作成する
    今回はボタンを作成するため 150×50 のサイズで作成する

    (ちなみに[shift]を押しながらだと、正方形のオブジェクトが作成できる)

    • 作成したオブジェクトの色を変更
      下記のようにオブジェクトを選択し、キャンバス右隣にあるインスペクタで
      カラーの調整を行う

    • テキスト挿入
      続いてボタン上に表示するテキストを作成する
       
  6. メニューのテキストを作成し、ボタン内でドラッグを行う

  7. テンプレートの文字を編集し、今回は下記のように「ボタン」という文字を入れる
    デフォルトでは「Type something」が入力されているため書き換える

    • 文字の調整を行う
      文字がボタン上の中心でない位置に配置されている
      これを成果物の通りにボタン中央に配置したい
       
  8. テキストのサイズを20に変更する
    テキストを選択し、下記のようにインスペクタの「Size」を20にする(カラーはHex:07AEF7)

  9. オブジェクトとテキストに余白からドラッグを行い、下記のように両方選択された状態にする

  10. インスペクタ上部(上記右側の赤枠)の横に並んだマーク(Align Objects)の
    「Align Horizontally」で横軸中央に「Align Vertically」で縦軸の中央に移動し、
    文字が中央に配置される

    • グループ化
      作成したオブジェクトとテキストをグループ化させる
      このグループ化をしていないと、Export(書き出し)を行った際に、
      オブジェクトとテキストが別々のファイルで書き出されてしまう

    上記のように別々にExportされてしまう

  11. オブジェクトとテキストを余白からのドラッグで両方選択された状態にする
     

  12. メニューバー左の[Group]を押下する

    • Export
      最後に作成したボタンのExportを行う
      Exportはインスペクタ下部のMake Exportableで設定できる
       
  13. Make Exportableの「+」を押下する

  14. 下記のような設定になっていることを確認

    (ちなみに「+」を押下することで、同時に異なる設定のファイルを書き出すことが可能になる)

    • 解説
      • Size => 書き出しサイズの設定
        (1x なら1倍、1w=Widthのピクセル数、1h=Heightのピクセル数)
      • Prefix/Suffix => 書き出すファイルの接頭辞と接尾辞を追加
      • format => 書き出すファイルのフォーマット設定

  15. Export Groupを押下する

完成!!

感想

  • パワーポイントでこれまでデザインの作成を行っていたが、オブジェクトの管理ができるようになり、作業の手間が減って大変助かりました。
  • デザインツールと聞くと、動きが重いイメージがあったが、Sketchは重くなることがなく、作業もサクサク進められたので、ストレスが無く取りかかれました。
  • 苦労した点は、Sketchは日本語版が無く、記事も日本語のものが少ないため、日本語の参考サイトや意訳されたものをチェックしながら作業を進めました。
  • Sketchと聞くとデザインツールは難しいと思い、敬遠してしまう人も多くいると思いますが、例えるとするとポワーポインとのような手軽さがあるので、入り口としてはとてもおすすめです!!(最初の1週間?(もしくは30日)無料で試すことができます)→ Sketch

この記事を書いた人

山里啓一郎
山里啓一郎
1993年東京生まれ。2016年入社。

UI/UXやHTML/CSS、JavaScriptなどフロントエンドに関心。

Sketch