はじめに

前回、デザインモードでワイヤーフレームを作ってみたので今回はその移行の設定をしてみたいと思います。
複数ページのデザインが欲しいので前回のデータに幾つかのワイヤーフレームを追加したものを準備しました。
数ページのアートボードを作ってみた感想としては、かなり使いやすく、ベクターデータの挿入ができたことがありがたかったです。
それでは、プロトタイプモードを触っていきたいと思います。

1.プロトタイプモードへ切り替える

画面上部にデザイン/プロトタイプ/共有とあります。
今回はこのプロトタイプを選択してプロトタイプモードを操作していきます。

2.任意のオブジェクトを選択

任意のオブジェクトをクリックすることで>のアイコンが現れます。
>をドラッグ&ドロップすることで、ユーザーがそのオブジェクトをクリック(タップ)するとどこに繋がるのかを指示することができます。
ここでは、複数ページが存在するのでそれぞれのボタンがどこに繋がるのかを設定していきました。

この段階では、全てのページデザインを行っていないので一方通行の矢印が進んでいますが、実際はもっと複雑に行ったり来たるする矢印が飛び交うこととなります。

このイメージをまとめて確認できるだけでなく、シェアという形で擬似的フローを実際に見れるのでかなり便利なイメージの共有が可能になります。

まとめ

今までは細かなサイトマップを書いて共有していたのがデザインの共有と共にシェアできるようになり、かなりの時短に繋がります。
また、見る側もイメージと共に確認できることからわかりやすくストレスなくデザインの確認ができるようになりました。

著者：MainYard Design（メーンヤードデザイン） 北野敦子

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。

※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
→北野敦子さんによる寄稿記事を読む