開発者にもうれしい! SketchとInVisionで作るUIデザインのワークフロー

2017/04/25

Daniel Schwarz

131

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

デザインしたUIを実装してもらうとき、開発者とはどうやってコミュニケーションしていますか? SketchとInVision、Craftを使ってワークフローならデザインのやり取りを効率化できます。

デザインのハンドオフとは、デザイナーが作成したWebやアプリのデザインをコード化する開発者に引き継ぐことですが、そう簡単にはいきません。開発者はPhotoshopやSketchなどのデザイン系ソフトを使いこなしているわけではありませんが、デザインについてすべて知っておく必要があるからです。

具体的にどのような色、フォントが使われているのか、要素間のスペースはどのくらいかなど、開発者なら正確に把握しなければなりません。

そこで大活躍するのがInVisionのInspectです。

いまInVisionがデザイナーに熱望される理由

InVisionは共有作業に便利なツールを備えたブラウザーベースのプロトタイピングツールとして登場し、デザイナーのワークフローに大変革をもたらしました。デザイナーが使いやすいように、InVisionチームは昨年、PhotoshopとSketchで使える拡張機能Craftをリリースしました。

  • デザインに実際のデータを素早く追加
  • 水平・垂直方向にオブジェクトを複製
  • アセットやスタイルの共有ライブラリーを作成

そのあと、次の機能も加わりました。

  • プロトタイプを直接Sketchに流し込む
  • エクスポート可能なアセットをInVisionと同期

さらにデザインをInVisionと同期できるようになったので、開発者はInVisionでデザインを点検して実際のコードを生成できます。プロトタイピング、共有作業、デザインハンドオフの一連の作業がInVisionですべてできるのです。デザイナーにとって夢のようなアプリだと思いませんか。

InVisionやCraftについてあまり知らない人は、デザイン & UXエディターのAlex Walkerが昨年執筆したCraftについての記事を参考にしてください。オリジナル機能についても触れています。

Craftのサービスをすでに知っているなら、Sketch、Craft、InVisionのInspect機能を使って、デザイナーから開発者にハンドオフする際の便利なワークフローについて説明します。

Craftをインストールする

Sketch版のCraftをダウンロードし(Photoshopユーザーも同様にインストールできますが、記事ではSketch版のスクリーンショットで説明します)、DeveloperTown が作成したAndroid N GUI KitのSketchファイルもダウンロードします。

Downloading Craft

Sketch版Craftをインストールすると、Command+PでCraftツールバーの表示が切り替えられます。

Showing/hiding the Craft toolbar

レイヤーを整理する

デザインを焦ってハンドオフせずに、デザインの整理から始めます。開発者はSketchのデザインツールを使わずにデザインを確認する可能性があることを意識してください。たとえば、「長方形41」といったあいまいな名前は「背景ボタン」などに変更し、余計なレイヤーや使っていないレイヤーは削除します。

以下は知っておくと便利なSketchのショートカットです。

  • レイヤー名の変更:Command+R
  • レイヤーのグループ化:Command+G
  • レイヤーのグループ解除:Command+ shift +G
  • レイヤーを前面に移動:Command+ option + ↑
  • レイヤーを背面に移動:Command+ option + ↓

レイヤーを前面や背面に移動すると、デザインに表示される順番が変わり、どのような形式でも開発者にとって分かりやすくなります。関連するレイヤーをグループ化するとレイヤーリストがかなりすっきりと整理できます。

Organising layers

画像アセットをエクスポート可能にする

レイヤーの整理が終わったら、次に画像アセットをエクスポート可能な状態にします。実際に画像のエクスポート操作をしなくても、どの画像をInVisionと同期したいかCraft内で指定する必要があります。開発者はInVisionで画像アセット、フォント、ソースファイルを探すことになります。

画像アセットとしてエクスポートしたいオブジェクトを選んで、インスペクタから「Make Exportable(エクスポート可能にする)」をクリックしファイル形式と解像度を指定します。

Making layers exportable

共通カラーを保存する

Sketchに保存されたドキュメントカラーはデザインと一緒に、InVisionのInspectに渡されます。情報を移したい色のレイヤーを選択し、インスペクタからカラーピッカーを開き、小さなアイコンをクリックしてカラーを保存します。

Documenting commonly used colours

Craft SyncでInVisionにエクスポートする

整理したカラーデータ付きのデザインをInVisionと同期します。このあと開発者はInVisionで点検して実装しますが、最初にInVisionで新しいプロトタイプを作成します。

新しいInVisionプロジェクトの始め方

  1. invisionapp.comを開く
  2. ピンクの丸い+アイコン(スクリーンショット参照)をクリックする
    Heading to invisionapp.com
  3. 「Create New Prototype(新しいプロトタイプを作成)」をクリック
    Creating a new prototype
  4. プロジェクト名を付ける
  5. リストから「Android Phone」を選択
  6. 「Get Started(開始)」をクリック
    Getting started with a new prototype

InVisionプロジェクトにスクリーンをエクスポートする

Sketchに戻って、CraftツールバーのSync(同期)タブをクリックし設定をすれば、すぐに同期ができます。たとえば、「Android」という広告用背景のアートボードではなく、スクリーンのアートボードをすべて選択したあとで、「Only selected artboards(選択したアートボードのみ同期する)」を選びます。

最後に、選択ボックスからプロトタイプを選びます。

「Sync to InVision(InVisionと同期する)」をクリックします。変更したい場合は次のショートカットが使えます。

  • 選択したアートボードのみ同期する:control + shift + S
  • アクティブページのアートボードすべてを同期する:control + shift + A

Syncing the design into InVision

デザインを検査する

InVisionアプリに戻ります。デザインを点検する開発者はInVisionを自由に利用できます。

  • 「Screens(スクリーン)」タブからスクリーンを1つ選択
    Selecting screens in InVision
  • 「Inspect Mode(検査モード)」に切り替える
    Switching to Inspect Mode

Inspect Modeを使いこなす

Sketchとほとんど変わらないと感じましたか。その通りです。左にレイヤーリスト、右にインスペクタがあり、レイヤーをクリックするとスマートガイドが表示されます。Sketchとの違いは、インターフェースが少しだけデザインを点検しやすいように最適化されていることだけです。早速、確認してみましょう。

First look at Inspect

スタイルとコンテンツの抽出

インスペクタからスタイルをクリックすると、自動的にクリップボードにコードでコピーされて使えるようになります。クリックするだけでテキストレイヤーからコンテンツも抽出できます。

Inspecting styles

ヒント: CSSコードも抽出できます。

Extracting CSS

画像アセットをダウンロードする

先ほどSketchで画像アセットをエクスポートできるように設定にしました。デザインの画像をクリックして、インスペクタにあるダウンロードのアイコンをクリックするとダウンロードできます。または、右上の端にある「Download all project assets(すべてのプロジェクトアセットをダウンロードする)」のアイコンからもダウンロードできます。プロトタイプのほかのスクリーン同様、現在のスクリーンからすべてのアセットがzip形式で圧縮されます。

Downloading image assets

色とフォントの一覧

レイヤーからインスペクタに目を移すと(キャンバスのスクリーンエリアの外側でクリックします)、このスクリーンで使われているすべての色、フォント、先に指定したドキュメントカラーが表示されています。

これもクリックだけでコピーできます。

Color and font overview

最後に

InVisionは特に、うまく共同作業をしないとデザインがすぐに滅茶苦茶になってしまうような、大きな制作チームにとって革新的なツールです。Inspectを使えばワークフローがスムーズになるので、デザイナーと開発者間の連携がうまくいきます。

(原文:How to Handoff Designs with Sketch and InVision

[翻訳:和田麻紀子/編集:Livit

Copyright © 2017, Daniel Schwarz All Rights Reserved.

Daniel Schwarz

Daniel Schwarz

フルタイムのデザインライター、デジタルノマドです。デザインやコードに関する執筆以外には、自身が立ち上げたクリエイティブスタジオ「Airwalk Studios」で作業することもあります。ロンドン出身の24歳。

Loading...