Sketch49のプロトタイピング機能を実際に試してみた
カウルTechBlogをご覧のみなさん、こんにちは。カウルでプロダクトデザイナーを勤めている稲井です。主にUIデザイン〜フロントエンドコーディングまでを担当しています。詳しい業務内容は以前寄稿した記事にまとまっておりますのでそちらをご覧ください。
今回のTechBlogは、デザインツールSketchのアップデート(Sketch49)でプロトタイピング機能がリリースされたので使用感を確かめてご紹介しようと思います。はてさてプロトタイピングの戦国時代に終止符を打つ決定的な機能となり得るのか？
※2018/03/08執筆時の感想になります。これからアップデートされていくと思いますので詳しくはSketchの機能リリースページをウォッチしてください。 https://sketchapp.com/docs/prototyping/
Sketchって何よ？
今回の主役であるSketchはUIを作成するグラフィックツールの中でTOP３の中に必ず入ってくるツールです。動作の軽快さ操作のシンプルさなどの特徴により開発スピードを求められるUI作成の現場でよく使われています。
しかし去年AdobeXDの正式リリースに続き、InVisionも独自のデザインツール「InVision STUDIO」のリリース予定を発表するなどデザイン+プロトタイピング一体型プラットフォームを巡って激しい開発競争が繰り広げられております。
そもそもプロトタイピングツールとは？
WebサイトのUIデザインを作成する時に静的なデザインカンプを作成し、それに基づいてHTMLにコーディングするやり方が一般的でした。スマートフォンの爆発的な普及に伴ってこういったデザインプロセスが合わなくなってきました。
スマートフォンでの画面デザインでは一画面に表示できる情報量が少なく画面遷移が数多く発生するようになります。画面遷移を実装前に確認し、製品の品質をあげるために生まれたのがプロトタイピング（試作品）を作って試すという手法です。
現在多数のプロトタイピングの作成ツールがしのぎを削っており、まさに戦国時代と言えます。大名に例えるなら、業界の風雲児的なInVisionは織田信長、数少ない国産ツールProttは豊臣秀吉、遅れてやってきたAdobeXDは徳川家康、独自路線のFigmaは伊達政宗みたいな感じでしょうか。
上記のプロトタイピングツールの中でInVisionやProttはデザイン作成ツールSketchファイルを自動読み込みすることでユーザー数を伸ばしてきました。デザイン作成はSketchで行い、プロトタイピングは別のツールでというのが一般的になりつつあったように思います。
今回のSketchのプロトタイピング機能はその流れに大きな一石を投じるリリースであり、今の時代にUIデザイン周りで飯食ってる人間として、実プロダクトへの運用を念頭に色々試していきたいなと思います。
今回試すこと
基本操作の確認と実際のサンプルデザインデータを作成して使用感を確かめていきます。 Sketchの最新版へのアップデートを行うと File > New from Tmplete > Prototyping Tutotrialが選択できますのでそのファイルを見ながら基本操作を確認できます。
- リンクの貼り付けと確認
- リンク設置の仕方、実機プレビュー
- シンボル対応などもうちょっと突っ込んで調べてみる
- シンボル内でのリンク設置と挙動、Libraryファイル化して呼び出した時の挙動など
- 共有できるか(Sketch Cloud,Zeplin,InVision)
リンクの貼り付けと確認
リンクはふた通りの貼り付け方法があるようです。オブジェクトを選択して”W”を押すとリンク用の矢印が出てくるのでリンクしたいアートボードまで引っ張って設定します。簡単ですね。しかも複数のオブジェクトを選択して一気にリンクをつけることもできるようなので結構便利ですね。
もう一つの方法としてはホットスポットリンクを設定できるようです。シンボルの中に含まれているアイコンの上から個別にリンクを設定したいときやインラインのリンクなどに利用できそうです。
リンクの矢印をアートボードの近くに表示されるアイコンに重ねることで移動先のアートボードを指定できるようです。画面が増えてきたときに使いやすそうです。
リンクの画面遷移時のアニメーションの変更や遷移先の再編集は右パネルから行うことができます。
アニメーションの種類にディゾルブが含まれていないこと、アニメーションのイージング秒数などの細かい設定ができないのが若干のマイナスですが画面遷移の確認としては十分な機能を備えていると言えそうです。
作成したプロトタイプは画面右上のプレビューボタンを押すか、”Cmd + P”で確認できます。
iOSの場合、Sketch Mirrorというアプリを使えばそのまま実機で確認もできるのですが今回のプロトタイプもバッチリ動いていました。リンク変更のプロトタイプへの更新も爆速なのでかなり捗りそうです。
※Androidの場合はCrystalというアプリで確認できるようですが、こちらに関しては 今回のアップデートに対応できているかどうかまだ未確認です。
もうちょっと突っ込んで試してみる
ヘッダーやタブバーなど共通で使い回すシンボル内でのリンクの動きはどうなるのでしょうか？ 前述のPrototyping Tutotrialデザインサンプルだと少し分かりづらいので、自前でサンプルのデザインを作成し試してみました。
細かいチェックポイントは4つ
- シンボルの中でのリンクの設定できるか？
- シンボルをLibrary化したときリンクはどう動くか？
- フッタのボタンなどをフロートで固定表示できるか？
- メンバーへの遠隔共有はどこまでできるか？
シンボルファイル内でのリンクの設定はできるか？
ホットスポットリンクを設定した場合
シンボルの中でもリンクを設定することは可能です。しかもシンボル内にホットスポットリンクを作成し場合は、プロパティパネルからリンク先のオーバーライドができるようです。 やばいですね。この完成度。ベータつけてない理由わかりました。ただし画面遷移時のアニメーション方向のオーバーライドはまだできないようです。
オブジェクトから設定する場合
オブジェクトを選択してリンクを設定することは可能でしたが、この場合はリンク先のオーバーライドができないようです。
タブバーとかヘッダーとかグローバルな固定リンク設定にはこちらのやり方も利用できそうですね。
Library化した場合にはリンク設定はどうなるのか？
ホットスポットで設定したリンクは読み込まれていました。リンク先はNoneとして表示され、オーバーライドで再設定可能でした。ただしリンクの遷移先は同じファイル内のアートボードに限られるようです。
タブバーやヘッダなどフロートで固定表示できるか？
InVisionではタブバーやヘッダーなどを固定表示できるのですがSketchの現バージョンでは表示できない模様です。ここら辺は少し残念ですね。誰かできる方法を教えてくれたら、うまい棒あげます。
メンバーへの遠隔共有はどこまでできるか？
デザインの共有はUI作成において重要なファクターの一つです。せっかく作ったプロトタイプをどうやって共有してメンバーに見てもらうのかも確認して見ました。Sketch Cloudを使う方法と、Zeplinを使う方法があるようです。そして普段使っているInVisionも試して見ました。
Sketch Cloudからの共有
右上のSketch Cloudのボタンを押しアップロード。
URLが発行されるのでリンクをクリックするとSketch Cloudのプロジェクトページが作成されています。 共有したいユーザーのメールアドレスを打ち込むことでプロジェクトへの招待ができるようです。ここら辺はまさにInVisionと同じ流れですね。
面白いなと思ったのはアートボードだけでなく、シンボルなども全てアップされている点で、シンボルに対するコメントなども個別にできるのでいいなと思いました。
逆にちょっと残念だったのはアートボード内でのコメント機能。InVisionにあるようなポインターでの指定ができずどの箇所への指定なのかはコメントで補足しなければいけないようです。
Zeplinでの共有
ZeplinはSketch49のバージョンアップに対応しているようです。ZeplinのSketchプラグイン経由で今まで通りアップロードをすることが可能です。 Shiftを押しながらクリックするか、右側のパネルからリンク先アートボードへの遷移確認が可能でした。
InVisionでの共有
CraftというSketchプラグイン経由でInVisionのプロジェクトファイルとしてアップできるかどうか。さらに設定したリンク情報が引き継がれるかどうかを確認して見ました。
アップロードはもちろん問題なくできましたが、Sketchで作成したホットスポットリンクやオブジェクトリンクなどは取り込まれませんでした。あくまで現時点（2018/03/08）ですので今後は対応していくのかどうかは注目していきたいところです。
まとめ
よかったところ
- ホットスポットリンクのオーバーライド機能
- 動作安定性、実機確認までのスピード
シンボル内でのホットスポットリンクのオーバーライドが使えることでLibraryファイルを活かしつつ子ファイルでプロトタイプを作成するという流れがやりやすくなっていると思います。サードパーティ製のプラグインと違いSketch本家が出しているのでバージョンアップなどで使えなくなる心配がなくサンプルファイルを用いたテストの段階では非常にサクサク動いていました。
もうちょっとなところ
- SketchCloud側の機能
- プロトタイプのプレビュー時に固定ヘッダ表現などができない
Sketch Cloudはフィードバックや作業進捗用の確認機能がまだ充実していないのでInVisionの代わりにデザイン共有ツールとして使うにはまだ早い気がしましたが、このまま進化を続けていってほしいなと思いました。ヘッダ、フッタなどで使う固定表示機能は今後のアップデートで対応していって欲しいところです。
こう使うかな
カウルではデザイナーとプログラマーが面と向かって開発してるので、UI画面遷移を作成しながらのMTGやユーザーテストなどで力を発揮しそうです。ただ遠隔での確認にはSketch CloudよりもInVisionやProttにまだまだ分がありそうなので、いきなり入れ替わるということもなく状況に応じてプロトタイピングツールを使い分けしていくことになりそうです。
InVision + Sketchという流れでプロトタイプを作成していたのですが、画面をSyncさせる際の時間やInVisionでのリンク設定の煩わしさから「そろそろAdobe XDも試してみるか」と思っていた頃だったのでこのアップデートは助かりました。
Sketch、AdobeXD、InVision Studioと様々なプロトタイピングツールが出てきますがどれが覇権を握るのかはさらに混沌として来るものと思われます。選り好みすることなく試してみて自分の働いている状況にあったツールを選んで見てください。