エンジニアだってデザインしたい!プロトタイピングツールを使ってみる

このエントリーをはてなブックマークに追加
こんにちは!ueharak  です。
以前モックアップツールについて紹介しました(こちらの記事)。今回はプロトタイピングツールを紹介したいと思います。

今回紹介するのは proto.io です。プロトタイピングツールにはいくつか種類があって

  • デザインを作成する
  • 画像を取り込んで画面遷移を作成する
  • 画像を取り込んでインタラクションを作成する
といったものがあります。これにアセット管理やコラボレーションなどが付加されることで、製品ごとの特徴になっています。

多くの製品は上記の一つないし二つをカバーするものが多いなか、proto.io は全てをこなせる大変便利なツールです。

今回は proto.io の Container と State という機能を使って、効率の良い画面作成の方法を紹介したいと思います。
(14 日間のフリートライアルがあるので気になった方はぜひ試してみてください!)

信号機を作る

ではサンプルに信号機を一つ作ってみましょう。
こんな感じでマルを置いて…

完成です!




ではこれを二つにしてみましょう。
とりあえずオブジェクトを全選択してコピー&ペースト!


ちょっと修正したい

ここでふと、「青の灯火を緑にしたいな」と思いました。
しかしこのまま修正しようとすると、信号機の数だけ作業が必要です。

Container

そこで Container という機能が便利です。Container は複数のオブジェクトを一つのまとまりとして登録をすることで、再利用可能なパーツにすることができます。
さっそく信号機のオブジェクトを選択して "Convert to container" してみましょう。


Container にするとこれまで複数のオブジェクトとして見えていたものが、一つの Container になります。


作った Container は CONTAINERS ウィンドウからドラッグ&ドロップできるようになります。先ほど複製した二つ目の信号機を消して、Container としての信号機をドロップしてみましょう。


見た目は変わりませんが、二つの信号機は Container になっています。では Container を編集して、灯火を緑にしてみましょう。


Container の編集は Container の中身だけが表示された編集画面で行います。ここでの編集はスクリーンに即時反映されます。

 → 

完成!

やりました!これで信号機を 100 個配置しても修正は一度で済みます。

State

では続いて State を使ってみましょう。
State は一つのオブジェクトに状態を持たせ、画面遷移やアニメーション時に特定の状態を指定することで画面の変化を生じさせるものです。クリックすると文字が変わるなど、そのオブジェクトの中に状態を持たせたい場合に便利です。

もちろんボタンと文字を別々に管理してそれぞれを連携させることもできますが、ボタンで生じることはボタンの中で完結させた方が簡潔でしょう。この考え方はプロブラミングにも通じるものがありますね!

では灯火が遷移する様子を State で定義してみましょう。

緑を定義

Container 編集画面で黄色と赤を消灯状態にして、最初の State を作ります。続いて NEW CONTAINER STATE をクリックして、新しい State を作ります。


同じやり方で赤も作ります。


これで Container ごとに State を設定できるようになりました!

インタラクションを設定する

ここまでで Container と State を設定することができました。せっかくですのでボタンを押したら信号が切り替わるようにしてみましょう。

ボタンを配置してアクションを信号機に繋ぎ、Change to next state に設定します。


"next state" だけだと最後の state で状態変化が終わってしまうので、Loop を有効にします。


最後にこれらを両方の信号機に設定して、プレビューしてみましょう。

完成!


いかがでしたでしょうか?信号機を例に Container、State とインタラクションについて紹介しました。画面が増えてくると同じオブジェクトを複数の画面に配置することが出てくると思います。そうした時に Container を使えば、オブジェクトの修正が漏れなく簡単にできます。またオブジェクトの状態を表現したい時に State を使えば、こちらも全てのオブジェクトに同じ状態を定義できます。さらに State は画面ごとに異なる State を設定できますから、ログイン前・ログイン後といったことも簡単に表現できます。

プロトタイピングツールはたくさんあってどれが良いか決めるのが難しいこともあると思います。この記事が選定の参考になれば幸いです。

それでは!










次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...