(この記事は大分で開催中の高校生ハッカソン・アイデアソン向けの内容です)
UIプロトタイピングツールの一種。画像自体は、別アプリケーションで作成してアップロードする形態なので、ペーパープロトタイピングから本格的なものまで、幅広く使えます。アニメーションに関しては、単純な遷移に限られるものの、使い方は簡単。次の3点で構成されています。
- Web版 https://marvelapp.com/
- iOS / Android 版 (高校生各自がインストール)
- Sketch / Photoshop プラグイン (Sketchとプラグインは、会場のMacにインストール済み)
準備
- 高校生はiPhone/AndroidにMarvelをインストール。アプリケーションはApp Store / Play Storeで探しましょう。
- Marvelのユーザ登録はすでに済ませてあります。MacBookの電源アダプタに書かれているメールアドレスとパスワードを使って、アプリケーションからSign Inしておきましょう。
使い方 - 手書き編
- iPhone / Android版のMarvelで、「+」ボタンを押してプロジェクトを追加
- プロジェクト名は日本語でもOK
- 画面サイズも選びます (iPhone6にしておくのがひとまずは良いと思います)
- デザインスプリントで選ばれた画面スケッチを、Marvelで撮影
- 他の画面に遷移させたい場所にリンクをつける
- 「ADD」ボタンをクリックして、写真の中にリンクを作成
- 遷移先の画面スケッチを選択
- Playボタンを押して、試してみましょう!
使い方 - Sketch編
MacのSketchで画面をデザイン
- Sketchを起動して、
File > New From Template > iOS UI Designを選択 - Insertボタン(「+」アイコン)から、
Artboardを選択 - 右側の一覧から
iPhone 6をクリック - Insertボタンから、
Symbolの中の好きな要素を選択 - 配置された要素の位置を調整
- くりかえし
- Symbolにないものは、図形ツールで自分で描くか、Sketch App Sourcesなどのサイトで探す
Marvelにアップロード
Marvelプラグインは、Sketchにインストール済みです。
- Sketchで
Plugins > Send or Update All Artboard to Project...を選択 - MarvelのWebサイトで確認
- iPhone / Android版と同様のリンクをつけられる他、アニメーションの設定もできます
端末でチェック
iPhone / Android版のMarvelを開くと、Sketchからアップロードしたプロジェクトが登録されているはずです。Playボタンを使って、使い勝手/手触りを試してみましょう。