【Sketch3入門】最近注目されているsketch3を使ってみました。

2014.08.30

皆様、こんばんは清田です。

最近、勉強会等で耳にするようになってきたsketch3をプロジェクト内使用してみる機会があったのでご紹介します。

iOSエンジニア・UI/UXデザイナー勉強会のセッションでも紹介されたり、いろいろな企業でも採用され始めているとのことです。 実際 sketch3 の存在を知ってはいたのですが、実際に案件内で使用してみて結構いい感じでした!

sketch3とは

sketch3-vol001-blog-001

sketch3公式サイト

sketch3はオランダののアムステルダムのBohemian Coding社が開発しているとのこと 現在はMac専用のツールみたいです、Window版をリリースしなさそうな予感。。。 価格は8月29日現在で¥7,800円で、App Storeから購入ができます。 たまに半額セールをしている時があるみたいなので、そのタイミングが狙いめですね。

また無料で14日間使えるのフリートライアルもあるので興味のあるかたはインストールしてみてはいかがでしょうか?

sketch3のUI

sketch3起動してみると、メインの画面構成が以下のキャプチャーになります。

sketch3-vol001-blog-002

ツールバー

sketch3-vol001-blog-003

画面上にあるツールバーには、新しいオブジェクトの追加、シンボルの作成等が可能です。 作成したシェイプの編集、書き出しなどsketch3内での操作系のメニューが表示されています。

レイヤーリスト

sketch3-vol001-blog-004

レイヤーリストは、アートボードや、オブジェクトの一覧が表示されます。 レイヤーリストには、大きく三つで構成されています。

ページ Fireworksのページ機能に似ていて、ドキュメント内に無限に広がるキャンバスをページとして分けて管理できます。

アートボード アートボードは、デバイスや印刷時に表示可能な領域です。1画面1アートボードといった感じでしょうか。 ページ内に複数のアートボードを設置することが可能。

オブジェクトやフォルダ イラストレータで言う、レイヤーやグループ該当する項目です。

インスペクター

sketch3-vol001-blog-005

選択しているアートボードやオブジェクトに対しての操作可能なプロパティー項目がが表示されます。 こちらのパネルの値を操作して細かな指定が可能です。

簡単にワイヤーフレームが作れた。

簡単にアートボード作成し、WFを作ってみたいと思います。

sketch3-vol001-blog-002-2

画面左上のInsertボタンをクリックし、リストの中かArtboardを選択します。

sketch3-vol001-blog-018

インスペクターエリアに作成したいアートボードのサイズ指定リストが表示されます。そのリストから選択することでページエリアにアートボードを追加することができます。今回はiPhoneのPortraitサイズを選択してみます。

sketch3-vol001-blog-008

キャンバスエリアに、指定したサイズのアートボードが表示されました。

sketch3-vol001-blog-009

上記を繰り返して、各アートボードを追加していきます。今回は3個追加してみました。

素材をゲットして配置

sketch3-vol001-blog-010

Sketch App Sourcesというサイトで、 WFやビジュアルデザインに使用するリソースをゲットすることができます。

sketch3-vol001-blog-011

Sketch App Sourcesから、素材をゲットしてきて各オブジェクトをレイアウトしてみると、 それなりに見えるWFが作成できまました。

Sketch Mirror

Sketch3 だけでも優秀なツールなのですがSketch Mirrorと言う iPhoneアプリと連携するとかなり良かったです。

Sketch Mirrorとは?

Mac と iPhoneをusbケーブルで繋いだ状態で、Sketch3で作成したアートボードの画面をiPhoneに描画できるツールです。

logo-skech-mirror

アプリ名 : Sketch Mirror 価格 : ¥500円 Sketch Mirror ストアページ

実際にSketch Mirrorの動作を確認

画面右上にMirrorアイコンが表示されているます。

sketch3-vol001-blog-012

次に、iPhoneをUSBケーブルでつなぎ、Sketch Mirrorアプリを起動します。以下のような青い画面が立ち上がります。

sketch3-vol001-blog-015

アプリを立ち上げ後、Sketch3の画面右上のアイコンがConnectに変わりました。

sketch3-vol001-blog-013

Connectをクリックすると、iPhoneの画面にSketch3のアートボードで作成しているWFが表示されます。 いい感じです。

sketch3-vol001-blog-016

さらに、アートボードを選択した状態で内部のテキストを編集してみます。

sketch3-vol001-blog-014

Sketch3で編集した、テキストが瞬時にiPhone側へ反映されました!すごい!ちょっと感動しました!

sketch3-vol001-blog-017

まとめ

今回、ざっくりSketch 3の使用感をご紹介してみました。 最後にご紹介したSketch 3Sketch Mirrorは、 実際に案件で初期の情報設計フェーズで、チーム間やお客様とのイメージを共有する際に、すごくいい働きをしてくれました。

まだまだ Sketch 3の便利な機能をキャッチアップできていないので、これからこちらのブログにてご紹介していければと思います。

最後に、FacebookにSketchJapanというグループが発足されていて有用な情報が投稿されています。ご興味があるかたは覗いてみてはいかがでしょうか?

おすすめサイト