こんにちは。シフカです。
今回は、iOSアプリの使い心地そのままのプロトタイプを簡単に作ることが出来るデザインツール「Play」を使ってみたレポートです。Playだけでは名前が検索にヒットしないので正式名称はCreate With Playかも。
ともかくPlayと名前に掲げるくらいなので遊びや体験重視に違いないということで早速体験していきたいと思います。

Playとは？

Playは、iOSとSwiftUIの能力を最大限に活用して、モバイルアプリのデザインとプロトタイピングが出来るソフトウェアです。実際のiOSコンポーネント使ったデザイン、デバイスハードウェア機能へのアクセス、AppleのCore Animationなどネイティブ素材を組み合わせることで強力なインタラクションを実装できるツールとなっています。

Mac版とiPhone版がある

PlayにはMacとiPhone両方にアプリが存在しています。モバイルアプリデザイン専用となっているためか、インタラクションのプレビューはiPhone実機でしか確認できないようなのでMacでデザイン作業をする場合にもiPhoneアプリは必要です。また、iPhoneアプリ単体でもほぼ同じ機能が使えてデザイン設計が十分出来たのでこれには非常に驚きました。外出先で9割進めておいて帰ったらMacで微調整ということもありえそうです。

ただしユニークなインタラクションの設定ができるのはMac版だけのようなので今回はMac版での解説にしたいと思います。

レイアウトはスタック重視

Playのメインツールは左から、ネイティブ iOS要素の追加・スタック・テキスト・画像・SF Symbols・自分のアセットやコンポーネントを呼び出すライブラリーとなっています。

このメインツールの段階でスタック機能が整列のオプションではなくオブジェクト追加系と一緒に肩を並べて用意されているのは珍しいですよね。Playではスタックツールで矩形を作成すると、一般的なツールでの長方形作成と似た状態に見えますが、中身がまだ何もない状態のスタック親エリアとなるようです。

少し触ってみて感じたことはスタックの考え方がかなり強めです。こういったツールは一般的に⌘Gでグループ化されるかと思いますが、Playでは⌘Gで自動スタック化されました。どんなにバラバラに置いてあってもスタック化されます。全ての要素は縦か横どちらかの方向にスタックするだろうという考え方なんだと思います。

例えばこの図だと、タイトルと文章は縦方向に8px間隔でスタック化、画像と文字は横方向に8px間隔でスタック化、そして横方向のスタックに16pxのパディングを付けて角丸や背景色を設定といった作り方になっています。

ちなみに、スタック方向の設定を重なりにすると整列なしの一般的なグループ化のような状態にも一応出来ました。

他にも気が利くメインツール

ここからはスタック以外のメインツールもとても便利だったので紹介していきたいと思います。まず最初に「SF Symbols」ではAppleが提供するアセットの中からアイコンを追加することが可能です。配置したアイコンは4800個ほどの候補から検索して差し替えることができ、アイコンごとの9段階のウェイトやフォントサイズの変更にも対応しています。

「画像の追加」では、自分で用意した画像以外にも商用利用可能なUnsplashから検索機能付きで瞬時に適当な画像を用意できるのでモック作成には快適そうでした。画像クリック時のツールバーにもうUnsplashのロゴボタンが付いているのでそこを押してもランダムに画像が充てがわれます。

「テキストの追加」では、ダミーテキストの機能が充実していて気が利くなと感じました。日付・人物名・見出し・長文などいくつかの種類の中からこのテキストはどういったものか設定しておくことで用意されたダミーテキストに変わります。シャッフルを押してもその種類内で内容を変えてくれるので便利でした。シャッフルを連打した感じはテーマごとに5〜10の内容がありそうです。地味な機能ですが内容を考えるひと手間が省けてありがたいシーンが多そうですね。

置くだけで完成したモバイルアプリと同じ挙動

Playは実際のSwiftUIと同じ仕組みで構築しているため、設計したデザインやネイティブ iOS要素は、スクロールやボタン機能の設定などを特に何もしなくても挙動や感触がネイティブのiOSアプリと既に同じ状態になっています。

試しにコントローラー系のiOS要素を5分程で簡単に並べてキャプチャを撮ってみました。ボタンごとの性質にあったよく見る挙動になっていることが分かるかと思います。ユニークなインタラクション設定を一つもしなくてもここまで完成するのは驚きました。

インタラクションはノードで簡単設定

Playの公式チュートリアルを参考に簡単な遷移やアニメーション付きの画面を作ってみました。まずはキャプチャした動画をご確認ください。

遷移やモーダル起動、スワイプで戻るなど様々なインタラクションを難しいコーディングの必要も無く、用意されている専用ノードを繋ぐことでビジュアルコーディングのような形で設定することが出来ました。

動画冒頭のスクロール位置に応じてヘッダーが隠れるインタラクションは、事前にヘッダーコンポーネントに通常状態と隠れる状態のステートを用意しておき、スクロール位置を取得してヘッダーのステートを切り替えるといった組み方になっています。

セグメント選択に紐づいて自動スクロールするインタラクションは、セグメント専用の選択ノードを使って、ターゲットのcardコンポーネントのスタック順で対象を選んで自動でその位置にスクロールさせるといった組み方になっています。

ホームのカードなどに触れた時の押し込みインタラクションは、触れている時にスケールを95%に変更、指を離すとリセットオールプロパティで全ての状態を元に戻しています。スケールを100%に変更でも今回は同じ結果を得られますが、スケール・位置・回転など複数の変形をかけた場合に元に戻す設定項目が多くなってしまうのでリセットオールは覚えておきたいところです。また、動画では伝わりませんがタップした時にハプティクス設定で振動させています。これが上手く機能した時は結構感動しました。

ホームのトップ画像押下後のカードの傾きインタラクションは、最近のアップデートで追加されたばかりのジャイロスコープを使っています。下2つのノードでは軸に対して反射している表現を描いたReflectionレイヤーを傾きと反対方向に動かしています。上2つのノードではオブジェクト自身を傾きに合わせて3D回転させています。これも一般的なプロトタイプ作成では出来ない表現だと思うので作っていて非常に楽しかったです。

ちなみに今回は無料プランで試しているので制限されていますが、有料プランからはSwiftUIコードのエクスポート機能がありXcodeでも簡単にそのままのレイアウト組み立てることが出来るようです。

Playの使用感まとめ

デザイナーで非エンジニアの人でも紙芝居を超えた単調ではない表現を簡単に実装出来る点が特に素晴らしいなと感じました。かなり素早くリッチなアニメーション付きプロトタイプを作成出来るので、プロジェクト初期の段階でのユーザービリティ検証にとても役立ちそうという印象です。

今後のアップデートでFigmaライブラリのインポートや、Appleのアプリ共有機能App Clip対応などいくつかの機能追加も予定されており、今よりもっと使いやすくなりそうです。現在も活発にYouTubeでの情報更新もされているので今後の成長にもかなり期待大です。