プログラマーだってSketchでUIデザインしたっていいじゃない

  • 91
    いいね
  • 4
    コメント

About

プログラマーの皆さんだってたまにはUIをデザインしてみたくですか。
デザインまではいかなくても、もらったデザインをちょっといじったりしたいときありませんか?
最近人気のSketchについてプログラマーがどう覚えていけばよいのか、自分の事例をもとに紹介します。

この記事でやること

  • Sketchをインストールしてまずは動かしてみる
  • Sketchってこんなものなんだあ、というのを知ってもらう

この記事でやらないこと

  • Sketchの使い方についての説明
    • 例えばシンボルについての説明
    • そういうのを書くとキリがないので
  • よいUIデザインのやり方

Sketchとは

SketchとはオランダのBohemian Codingという会社がつくっている主にUIやロゴをデザインするためのツールです。
以下の様な特徴があります。

  • ベクター形式なのでファイルサイズが軽くて拡大縮小してもきれい
  • アートボードが便利
  • デザインを共有する機能が充実している (SKetch Mirror)
  • シンボルとテキストスタイルで共通化

簡単に言うと、サクッとUIをデザインしてサクッと共有できるツールです。

まずはインストール

https://www.sketchapp.com/

公式サイトからアプリをダウンロードします。
Free Trialからはじめましょう。
お気づきかもしれませんがSketchはMac版しかありません。
Windowsの人とは残念ながらここでお別れです。

動かしてみる

インストールしたら起動してみましょう。

スクリーンショット 2016-07-12 0.15.54.jpg

ここでは簡単なiPhone向けのTodoアプリをつくってみます。

テンプレートを読み込んで新規作成

New From Template -> iOS UI Designを選びます。

image

するとiOS向けのコンポーネントを初期セットとしてセットアップしてくれます。

image

左上のPagesと書かれたバーの右側にある「+」をクリックして新しいページを作成してください。
Page 2という真っさらなページができたと思います。

タスク一覧画面をつくる

それではTodoアプリとしてタスクの一覧画面をつくってみます。

アートボードを配置する

Sketchではアートボードを配置してUIを配置していきます。
ツールバーのInsert -> Artbordもしくは a とタイプしてアートボードのメニューを出します。

image

とりあえず iPhone 6 を選択してみましょう。

image

画面上にiPhone 6と書かれたアートボードが挿入されます。
この枠組のなかでUIデザインしていきます。

ステータスバーを配置してみる

まだ枠しかないので見た目がiPhoneアプリのそれっぽくなるようにステータスバーを配置してみます。

image

画像のようにInsertからStatus BarのBlackの100%のステータスバーを選択してアートボード上に配置してください。
場所は後で調整するのでテキトーでよいです。
配置できたら右側のインスペクタのPositionを入力しましょう。x, yを0にします。

image

するとステータスバーが画面上ぴったりに収まったと思います。
もしくは中央寄せや上寄せにする機能もあるのでそっちを使っても大丈夫です。

image

こっちのが使う機会は多いかもしれません。
Sketchではコンポーネントを配置するときにマウスで場所を調整するよりも座標を直接うちこんだ方が正確に配置できます。
ちなみに 800/2375+25 といった四則演算もできるのであと23px動かしたいといったときも +23 とインスペクタに打つだけで移動してくれます。覚えておきましょう。

ナビゲーションバーとツールバーの配置

ステータスバーと同じ要領でナビゲーションバーとツールバーも配置してみましょう。

image

こうなります。ちょっとiPhoneアプリっぽくなってきましたね。

アプリのタイトルを変えてみる

アプリのタイトルを設定してみます。
そのためにはシンボル化を解除します。(やっと後に気付いたけど本当は解除しなくてもできます。まあせっかくなので解除しましょう)
シンボル化とは何かと疑問に思われるかもしれませんがとりあえずそれは後回しにして先に進みます。(その気になったら本を読むなりして勉強してください)
まずはナビゲーションバーを右クリックして Detach from Symbol をクリックします。

image

そうするとテキストを編集できるようになるので Title と書かれているところをダブルクリックしましょう。(もしくはCmd+クリックでもいけます)

image

テキストの編集モードになるのでテキトーなタイトルを入力します。ここではTodoアプリと入れました。

image

同じ要領でCancelとDoneのアクションリンクもテキトーな名前に変えるか消すかしてしまいましょう。
ここではdeleteキーを押して消しました。

image

タスクの一覧を配置する

タスクを一覧表示させてみたいと思います。
SymbolsからCellというのを選択してアートボード上に配置してください。

image

3つほど置いてみました。

image

さて、さきほどはここでシンボル化を解除していましたが今度はOverridesを使ってみようと思います。インスペクタからOverridesという文字列を見つけてみてください。
そこにLabelというのがあるはずです。そこにテキトーなタスク名を入力してみましょう。

image

テキトーなタスクを設定しましょう。

image

タスクの一覧ができましたね。

タスク追加画面もつくってみる

タスク一覧を表示する画面ができたのでタスクを追加する画面もつくってみたいと思います。

新しいアートボードを追加

さきほどと同じようにアートボードをつくってください。

image

ステータスバーとナビゲーションバーを追加

同じようにステータスバーとナビゲーションバーを追加します。
今回はSubtitleというテンプレートのパーツを使いました。

image

さきほどと同じようにシンボル化を解除して良い感じのテキストに置換えます。

image

タイトルとメモを入力するテキストフィールドを配置

タイトルとメモを入力するためのフィールドを配置します。
Cell with Input を使います。

image

できたらインスペクタのOverridesからテキストを変更します。

image

メモは複数行打ちたい

タイトルは一行でよいけど、メモは複数行入力したいですよね。なのでそれに対応させましょう。

※ ちょっと難易度が上がる操作になるのでめげずにやってください(諦めても大丈夫です)

まずはシンボル化を解除してください。
その後にメモのフィールドをCmdキーを押しながらクリックしてください。
そうすると左側のレイヤーリストがこうなって Cell が選択された状態になると思います.

image

その状態でインスペクタでHeightが44となっているところを88と変更します。

image

そうすると枠が縦に広がるのがわかると思います。

image

これでフィールドとしては広がったのですが下線がまだ移動できていません。
左側のレイヤーリストからSeparatorCellを複数選択状態にしてください。

image

2つのレイヤーが選択された状態で下揃えにします。

image

すると、下線がきれいに下に移動します。

image

これで複数行のテキストエリアをつくれました。

テキスト以外のパーツも入れてみる

テキスト以外の入力パーツもいろいろあるので試しにちょこちょこ触ってみましょう。
ここではタスクの期限とリマインドの有無を設定するためのパーツを配置してみました。

image

いろいろ置いてみて自分なりに画面をつくってみましょう。

とりあえず完成

これで完成です。

image

使いやすいアプリかどうかは別として、Sketchを使ったUIのデザインの取っ掛かりにしていただけたら嬉しいです。

今後の展開

画面を増やしていく

一覧と追加の画面だけつくりました。
後はタスクを完了させるUIだったり、リマインドを設定するUIを追加していってみてください。
タスクを検索するUIがあってもいいですね。

プロトタイピング

Sketchだけでは静的なUIをデザインすることしかできません。
できたら実際に動かして見てみたいですよね。
そのためのツールはこんなのがあります。
どれも簡単に使えるので試しに使ってみて合うツールを選んでください。

  • Prott
    • 日本のグッドパッチ社が作成している
    • Webベース
    • 主にはワイヤーフレーミング用のツールっぽい
  • inVision
    • 世界的に使われてるっぽい
    • Webベース
    • プロトタイプの共有方法が便利っぽい
  • Flinto
    • Sketchとの親和性が高い
    • MacアプリとWebがある
    • グリグリ動きを付けられる

個人的なおススメはFlintoです。
作者はrebuild.fmで有名なnaanさんです。
Sketchのデザインをそのまま取り込めて色んなトランジッションをビジュアルに設定できて使っていて非常に気持ちのいいツールです。
ProttやinVisionはクリックを範囲を自分で切り出さないといけないのがちょっと面倒です。(個人の感想)

今後の学び方

ツールはあくまでもツールなので使って覚えるのが一番の近道です。
使っている過程でいろいろわかんないことが出てくると思うのでそういう時のために参考までに自分が参考にした情報をあげておきます。

書籍

Sketchの使い方について
https://leanpub.com/basicofsketch-ja/read

オンライン講座

こっちもSketchの使い方について。
動画なのでこっちのが理解しやすいかも。
https://www.udemy.com/skeれんしゅh3-for-beginners/learn/v4/

Webの記事

  • プラグイン
    • Sketch プラグイン でググると便利なプラグインが色々紹介されています。
  • 実践的な練習
    • http://noga0419.hate nablog.com/entry/trace-sketch
      • TwitterのUIをトレースして勉強しよう、という記事です
      • すみません、ぼくはまだやってないです。。

まとめ

Sketchはプログラマーでも簡単に使えるからもっとみんな気軽に使ってみるといいよ!