考えるブログ(仮)

プロトタイピングする時に使うツールは、簡単な遷移を確認するときはPOP。作りこむときはProto.ioと使い分けています。 ということで、Proto.ioでつくる簡単なUIをまとめてみました。

ボタンをつくる。

まずは基本中の基本、ボタンを作ってみます。 ボタンをタップしてホールドしている間は、ボタンが拡大します。 離すと元のサイズにもどるようにします。

ボタンをタップして別のオブジェクトを操作する。

先ほどのボタンは、押されたボタン自身を操作していましたが、次は別のオブジェクト操作するものを作ってみます。

スクロール

オブジェクトをスクロールするようにしてみます。 オブジェクトをcontainerに変換するのがポイントです。

スクロール時にナビゲーションバーを隠す

スクロールしている間はナビゲーションバーを隠すUIをつくってみます。 スクロールをやめるとナビゲーションバーを表示させます。 ナビゲーションバーを隠すトリガーをスクロールさせるオブジェクトに設定することがポイントです。

今回は以上です。 画面遷移だけのプロトタイピングに飽きた方はProto.io試してみてはいかがでしょうか。

こんにちは。最近iPhoneアプリをいじっていると新たなユーザーインターフェイス(以下UI)の流れに気が付きました。

それはナビゲーションバータイトルにある種のファンクションとなるボタン要素が加わっていることにです。

例をあげると最新Ver.のVine、Sound Cloud、Sumallyとどれも近しい役割を持っています。

このUIはiOSに準拠したUIではありませんので、最近目につくということにつながっているんですが、なぜこういった流れになってきているか。

それはハンバーガーアイコンからの進化とAndroidとの統合性、Androidに備えているUIコンポーネントのActionBarの機能でもあるドロップダウンメニューの踏襲ではないでしょうか。

機能をまるめるにはもってこいのハンバーガーボタンですが、基本的にはビューを隠してしまい、遷移も発生するのでユーザーには本当に必要な要素と理由がない限り余計なコストを生みストレスが発生してしまいます。

そこへの解決策とAndroidアプリとの統合性からこのドロップダウンメニューの流れがあるのではないかと考えました。

根気が続けばですが、origamiを使ってインタラクション・モーションを作る、というのをシリーズでやっていきたいと思います。

そもそもorigamiとはなんぞやということを今回のポストでは簡単に紹介したいと思います。

OrigamiとはFacebook Design teamによって作成されたQuartz composer用のtoolkitです。（Quartz composerはAppleがMac OS用に作成したVisual programming languageで、主にVJとかに使用されているとか。ということで、この時点でWindowsユーザーにすでに使えないという悲しいことになってしまうのです。）

このOrigamiを使って、Facebookはかの有名はFacebook paperのプロトタイプを作ったという触れ込みであり、これはぜひ試す価値がありそうです。しかも、コーディングは不要で、デザイナーがインタラクションを作成するためのツールということで、試してみない手はなさそうな感じです。

ということで早速試してみましょう、といきたいところですが、まずはセットアップが必要ですね。

セットアップは、Origamiのサイトにあるように以下の３ステップです。

1. アップルにデベロッパー登録する

2. Quartz Composerをダウンロードする

3. Origamiをダウンロードする

一応ここまでできたらもう使えるのですが、より便利に使えるように以下のツールも同時にインストールすることをオススメします。

1. Avocado

2. JQC

3. V002 Blur

です。このあたりを入れるとスマホ用アプリのインタラクションは結構いろいろとできそうです。簡単に上記を説明しておくと、AvocadoはorigamiにインスパイアされたIDEOが作成したtoolkitでCarouselのインタラクションだったり、ちょっとしたモーションがプリセットされています。

JQCはquartz composerのコミュニティで作成されたorigamiと親和性の高いUI frameworkです。ここで用意されているPatchを使うと結構な作業が短縮できます。

V002 BlurはiOS7から頻繁に使われるブラーのエフェクトが結構良いパフォーマンスで作成できるものなので、入れておくとなにかと使いそうです。

ちなみに、これらのインストール方法はそれぞれのページを見てもらえればいいですが、基本的にはダウンロードしたものを

Macintosh HD/Library/Graphics/Quartz Composer Patches

におけば良さそうです。

これで、ようやくorigamiでインタラクションを作る作業ができそうです。

次回からは、すこしずつorigamiでこんな風に作りますを紹介していきたいと思います。

英語になってしまいますが、このあたりが始めるにあたって参考になるので、トライしてみるのをいいかもしれません。

https://vimeo.com/jaythrash

https://hackdesign.org/lessons/40

https://www.facebook.com/groups/origami.community/members/

まとめサイト

アプリをデザインする時、初期段階で行うペーパープロトタイピングで便利な道具を紹介します。

紙にペンで画面を書く、でもいいのですが、紙に書いてしまうと移動させるのが難しいので、付箋を使ってプロトをつくるのがオススメです。

すこし前の話になりますが、 iPhone4の画面の実寸サイズは76x51mmの付箋とほぼ同じだったので、このサイズの付箋をよく使っていました。

iPhone5になってからサイズが変わってしまったので、 この付箋だと縦の長さが足りません…。

iphone5の実寸画面サイズはだいたい90mm*50mmです。 このサイズの付箋って売ってないんですよね。需要がないのか？ 売っていないならこのサイズの付箋をオーダーメードするか！ くらいも考えたんですがコスパがよろしくない。

コスパの他に、 ペーパープロトタイピングツールとして求める条件はこんなかんじ。

簡単に手に入る

今後もずっと売りつづけられる

そんなことを考えながら画面サイズをながめてたら、 90mm*50mmは名刺サイズと近いってことに気が付きました。 付箋では見つからないので、ここは発想を変えて名刺サイズの紙を探すことにしました。

で、見つけました。

◆LIFE情報カード　名刺サイズ無地 100枚 ￥194(税込み)

ちょっと大きめの文房具屋さんに行けば売っていると思います。

バラつくので入れ物を用意しましょう。

その２

コクヨ　チビット　70*110mm  80シート ￥300 (税抜き)

コクヨデザインアワード受賞作品を商品化したものらしいです。 束ねられているので先程の情報カードのようにバラつきません。 こちらもちょっと大きめの文房具屋さんに行けば売っています。

5mm 方眼で切れ目が入ってます。 この方眼にそって横２行、縦４列でカットします。

はい、これで90*50mmになりました！ ほぼ実寸サイズです！

方眼もデザインするとき便利です。

気になる点としては、値段が少々高めなのと、今後も売られ続けられるのかちょと心配なところでしょうか。プロトタイピングするひとはこれをたくさん買って、定番商品にしましょう！

ということで、こちらのチビットがオススメです。

バラバラの紙を付箋のように使うには

情報カードもチビットも付箋ではないので、貼ってはがせる糊を使うと付箋のように使うことができます。

ペン

初期段階のデザインは直しがよくあるので、フリクションボールを使います。太・中・細の３種類を使い分けます。

色は濃いほうがいいんですが、フリクションボールは黒色でもインクが薄いです。でも書いて消せて消しカスが出ない利便性は、制作スピードアップに貢献してくれます。

まあ、文字が書ければなんでもいいので、ペンはお好みでどうぞ。

それではエンジョイ・プロトタイピング！

プロトタイピングアプリ POP prototyping on paper が2.0にバージョンアップしたのでさっそくいじってみました。簡単な使い方も紹介します。

POPって何よ?

iOS・Android向けに提供されているペーパープロトタイピング支援ツールです。無料なので、とりあえずダウンロードしておきましょう。

2.0でバージョンアップしたところ

- Dropbox 同期 - 横画面モード対応 - ジェスチャー操作対応 - iPad, iPhone, Nexus アプリの作成 - 一括複数画面撮影 - スクロール可能なモックアップの作成 - プロジェクト、モックアップ、ホットスポットの複製 - モックアップのタグによるグループ分け - 既存のモックアップとのリンク

とのことで、Dropbox同期、スクロール対応やジェスチャー操作対応は、かなーりいいかんじのバージョンアップだと思われます。

使い方

今回はiphoneアプリで説明します。 アプリを立ち上げると、ほとんどの画面のナビゲーションバーに

この？マークボタンがあるので、操作がわからない時はとりあえずこのボタンを押しましょう。

すると…

こんなかんじで、その画面のボタン説明が表示されるので、これを見て操作をしましょう。たぶん使い方がわかると思います。笑

画面をスクロールさせる

さて、新機能の画面スクロールを設定してみます。 カメラで撮影、もしくはアルバムから画像を読み込みます。

画面が読み込まれました。 画面下のツールバーの真ん中の

このボタンをタップしましょう。 スクロール設定モードになります。

設定モードに入ったらスクロールさせたい領域に枠をフィットさせます。

こんなかんじ。 はい、これで完了です。

ジェスチャー操作を設定する

もうひとつの新機能、ジェスチャー操作を設定します。

リンク領域を設定すると、 吹き出しの右側に ”ジェスチャー” の文字が出てきます。 ここをタップします。

はい、こんなかんじでジェスチャーの設定ができます。 デフォルトはタップになっているので、お好みのジェスチャーに変更しましょう。

ちょっと複雑なジェスチャーの設定をほどこす

画面全体をスワイプすると遷移して、ボタン部分はタップジェスチャーで、というようなことができます。

POPではリンク領域を重ねることができるのでこれを応用します。 画面全体にスワイプジェスチャーを設定して、部分的にタップジェスチャーを設定します。

まずは画面全体にリンク領域を設置します。 そしてこのリンク領域にスワイプのジェスチャーを設定します。

つぎに新しいリンク領域を追加します。

このリンク領域にタップジェスチャーを設定します。 はい、これで完成です。

まとめ

今回のバージョンアップで、最終的なアプリの再現度が高いプロトタイプが作れるようになりました。アプリ制作の最初のペーパープロトタイピングとしては十分ではないでしょうか。

とはいえ、微妙に使いづらいところもあります。

途中で画面サイズを変更できない。 ex)  iphone4サイズで作るとiphone5のサイズに変更できない。

縦長のページで画面を覆うようにヒットエリアを置いてしまうと、スクロールさせづらい。

スクロール範囲を修正できない。 画面を取り込んだ時のみ設定できる模様。スクロール範囲を変更したい場合は、モックアップを置き換えるから画像を入れ替えないと無理っぽい。

部分スクロールが出来ない。 ナビゲーションバー、ツールバーを固定して真ん中だけをスクロールするということができない。できるようになったら最高なんだけどな。

今後のバージョンアップに期待です。

以上、POP 2.0をいじってみた！でした。