パソコン・メモメモ備忘録

気の向くままパソコン関係等で気になることを書き記す。毎日更新を目指す!

プロトタイピングツール Atomic

トップページ。職場で、スマホアプリの開発をしていたりするが、GUI のデザインについて提案したいときに、どうすればいいか、という問題がある。画面上のオブジェクトの動きを口で説明するのはかなり大変だ。もちろん、プロトタイプのプログラムを開発して、実際それをスマホ上で動かしてみるのが最善ではあるが、なかなかそれは大変。

そういう場合に使うのが、プロトタイピングツールで、色々なものが世の中には出ている。大きく2種類に分類されて、アプリが複数のページの画面から構成されているような場合、それらの遷移をわかりやすくデザインするためのもの。どこをクリックすれば、この画面に行って…みたいな。

もう一方は、画面内のパーツが、ユーザーの操作によってどう変化するか、をプロトタイピングするツールである。画面遷移も含まれるが、主な機能は、アニメーション的なものの設計が多い。画面操作がわかりやすいか、気持ちよくできるか等が確認できる。

後者のツールとして、小生が試したのは、ProtoPie と Atomic だが、前者は、基本有料ソフトで、お試し期間が過ぎると、お金が必要。後者は、チーム内の連携機能(コメントを付けたり)が無ければ、無料で使い続けられるっぽい。これはありがたい。

ということで、一つ作ってみた。スマホの画面の右の方に、複数カテゴリにわかれたメニューを表示するもので、カテゴリー内で複数項目がスクロールする、というもの(言葉で書いてもよくわからん)。

ProtoPie は、画面上のオブジェクトそれぞれが、トリガーによって所定の動きをする、みたいな感じで、画面上のアニメーションを設計するイメージ。それに対して、Atomic は、複数の安定(全オブジェクトが静止している)状態が、複数あって、その間をアニメーションで滑らかに遷移するイメージ。結構、根本的な思想が違う感じだ。

ただ、複数状態間を遷移する際に、タイムラインチャートで、各オブジェクトの動きを細かく指定できる。リニアに変化するのか、ぼわんと移動するのか、など。それぞれのオブジェクトの変化する時間も変えられるので、使いこなせば、結構色々な表現はできそうではある。

GUI の編集操作でき出来そうなものは、ProtoPie の方が自由度が高く、直感的な気はする。好みの問題かもしれないが。ただ、スクリプトで色々作り込めそうな所はある。小生、まだそこまで突っ込めていないので良くは分からないが。ただ、結構たいへんそうではある。

Atomic は、エディタもプレビューもブラウザ上で動くのが凄い。ただ、PC 上の Chrome でプレビュすると、スクロールするコンテナにスクロールバーがつくし、スクロールバーじゃないとマウスドラッグでスクロールできない。iOS 用のアプリが一番良く動くように思う。

もう少し色々使いこなせると、GUI のデザインに非常に役立ちそうだ。