Skip to Content
Personal Insights

Sketchを使ってiPhoneアプリのモックアップを作成する

先日の 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 に移植する、ということができそうです。

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.