先日の DemoJam 参加の際、 iPhone アプリのモックアップを作成するために Sketch を使いました。（本番の3日前に解説本とライセンスを購入…）

ブラウザベースの SAP Build とは異なり、macOS 限定のツールにはなるのですが、なかなか便利だなと感じたので、紹介します。

Sketchとは

Bohemian が開発・販売しているデザインツールです。Web/モバイルアプリのUIデザインを作ることに特化した機能が揃っています。

https://www.sketch.com/

（私が便利だなと思った）特徴

• 買い切りで低価格（99ドル）※1ヶ月の無償トライアルあり
• 解像度別のアートボードがプリセットされていて画面管理しやすい
• Sketch Mirror を使ってすぐに手元のデバイスでデザインを確認できる
• ライブラリでコンポーネントを管理することでファイルを横断して再利用できる
• シンボル機能による作業効率の向上
• 豊富なプラグインによる作業の効率化

Fiori for iOS Design Guidelines

Fiori ベースの iPhone アプリを作成するためには、Fiori for iOS Design Guidelines という、iOSの厳しいデザインルールに則ったガイドラインが存在します。

ちゃんとそれに沿った Floorplan と呼ばれるサンプル画面が用意されていて、こちらから Sketch データとしてダウンロードできます。

https://experience.sap.com/fiori-design-ios/article/stencils/

SAP Build との違い

良かったこと

• デザイナーさんがPhotoshopやIllustratorを使ってやるような描画のための機能がある
• 即時にiPhone実機上に表示できる（ホットスポットを使った画面遷移を実装した状態で）

Build のほうが良さそうなこと

• Web IDEへの連携など、開発につながる機能はない

ただ、Floorplan と同等のデザインが SAP Fiori Mentor アプリにそろっているため、うまく活用すれば、Sketch で組み立てたデザインを、簡単に Xcode に移植する、ということができそうです。