この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
皆様、こんばんは清田です。
最近、勉強会等で耳にするようになってきたsketch3をプロジェクト内使用してみる機会があったのでご紹介します。
iOSエンジニア・UI/UXデザイナー勉強会のセッションでも紹介されたり、いろいろな企業でも採用され始めているとのことです。 実際 sketch3 の存在を知ってはいたのですが、実際に案件内で使用してみて結構いい感じでした！
sketch3とは
sketch3はオランダののアムステルダムのBohemian Coding社が開発しているとのこと 現在はMac専用のツールみたいです、Window版をリリースしなさそうな予感。。。 価格は8月29日現在で¥7,800円で、App Storeから購入ができます。 たまに半額セールをしている時があるみたいなので、そのタイミングが狙いめですね。
また無料で14日間使えるのフリートライアルもあるので興味のあるかたはインストールしてみてはいかがでしょうか？
sketch3のUI
sketch3起動してみると、メインの画面構成が以下のキャプチャーになります。
ツールバー
画面上にあるツールバーには、新しいオブジェクトの追加、シンボルの作成等が可能です。 作成したシェイプの編集、書き出しなどsketch3内での操作系のメニューが表示されています。
レイヤーリスト
レイヤーリストは、アートボードや、オブジェクトの一覧が表示されます。 レイヤーリストには、大きく三つで構成されています。
ページ Fireworksのページ機能に似ていて、ドキュメント内に無限に広がるキャンバスをページとして分けて管理できます。
アートボード アートボードは、デバイスや印刷時に表示可能な領域です。１画面1アートボードといった感じでしょうか。 ページ内に複数のアートボードを設置することが可能。
オブジェクトやフォルダ イラストレータで言う、レイヤーやグループ該当する項目です。
インスペクター
選択しているアートボードやオブジェクトに対しての操作可能なプロパティー項目がが表示されます。 こちらのパネルの値を操作して細かな指定が可能です。
簡単にワイヤーフレームが作れた。
簡単にアートボード作成し、WFを作ってみたいと思います。
画面左上のInsertボタンをクリックし、リストの中かArtboardを選択します。
インスペクターエリアに作成したいアートボードのサイズ指定リストが表示されます。そのリストから選択することでページエリアにアートボードを追加することができます。今回はiPhoneのPortraitサイズを選択してみます。
キャンバスエリアに、指定したサイズのアートボードが表示されました。
上記を繰り返して、各アートボードを追加していきます。今回は3個追加してみました。
素材をゲットして配置
Sketch App Sourcesというサイトで、 WFやビジュアルデザインに使用するリソースをゲットすることができます。
Sketch App Sourcesから、素材をゲットしてきて各オブジェクトをレイアウトしてみると、 それなりに見えるWFが作成できまました。
Sketch Mirror
Sketch3 だけでも優秀なツールなのですがSketch Mirrorと言う iPhoneアプリと連携するとかなり良かったです。
Sketch Mirrorとは?
Mac と iPhoneをusbケーブルで繋いだ状態で、Sketch3で作成したアートボードの画面をiPhoneに描画できるツールです。
アプリ名 : Sketch Mirror 価格 : ￥500円 Sketch Mirror ストアページ
実際にSketch Mirrorの動作を確認
画面右上にMirrorアイコンが表示されているます。
次に、iPhoneをUSBケーブルでつなぎ、Sketch Mirrorアプリを起動します。以下のような青い画面が立ち上がります。
アプリを立ち上げ後、Sketch3の画面右上のアイコンがConnectに変わりました。
Connectをクリックすると、iPhoneの画面にSketch3のアートボードで作成しているWFが表示されます。 いい感じです。
さらに、アートボードを選択した状態で内部のテキストを編集してみます。
Sketch3で編集した、テキストが瞬時にiPhone側へ反映されました！すごい！ちょっと感動しました！
まとめ
今回、ざっくりSketch 3の使用感をご紹介してみました。 最後にご紹介したSketch 3とSketch Mirrorは、 実際に案件で初期の情報設計フェーズで、チーム間やお客様とのイメージを共有する際に、すごくいい働きをしてくれました。
まだまだ Sketch 3の便利な機能をキャッチアップできていないので、これからこちらのブログにてご紹介していければと思います。
最後に、FacebookにSketchJapanというグループが発足されていて有用な情報が投稿されています。ご興味があるかたは覗いてみてはいかがでしょうか？
14
