UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう

マチルダ


UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう

はじめまして。LIGでデザイナーをしています、マチルダです。
最近、前職でお世話になったデザイナーの先輩から「アラサーは品が命」という格言をいただいたので、全体的に生き方を見直そうと思っています。
今後とも末永くよろしくお願いいたします。

数年前から、スマートフォンサイト制作のお仕事が多くなりました。
そんなこんなで、「スマートフォンでの使いやすさ」とはなんぞや?を考える日々を送っているのですが、使いやすさって、実際に使ってみないとわからない…でも、自分で実装する技術も時間もない…!
今回はそんなデザイナーさんでも簡単で素早くプロトタイプを作成できるツール「Prott(プロット)」の使い方をご紹介したいと思います。

※今回は分かりやすいよう、LIGのスマートフォンサイトをサンプルにして作成手順をご説明いたします。

「Prott(プロット)」とは?

ligblog_ma-01

Prott(プロット)はUIデザインで有名な株式会社グッドパッチさんがリリースしているプロトタイピングツールです。

Prottは、プロトタイプを素早く作る「ラピッドプロトタイピング」と、必要なコミュニケーションを的確に行う「ラディカルコミュニケーション」をコンセプトに作られた、デザインチームのためのプロトタイピングツールです。
紙とペンを使ってスケッチした画面をiOSアプリから撮影、トランジションやジェスチャーをつけて、その場で確認することができます。ProttのiOSアプリを使って、もっと簡単にプロトタイプを作成しましょう。

ligblog_ma-02

現在、スマートフォンアプリはiOS、PCアプリはMac、Windowsに対応したブラウザ版がリリースされています。

「Prott(プロット)」で手書きラフをモックアップにしてみよう

はじめる前の準備

まずははじめる前の準備です。

「Prott(プロット)」へのアカウント登録

まずは「Prott(プロット)」でのアカウント登録を行います。1プロジェクトまでは無料で使用できます。すばらしいですね。

プロジェクトの新規作成

アカウント登録が完了したら、早速使ってみましょう。

右上の+で新規プロジェクトをクリック。
なんと!スマートフォンだけではなくいろいろなデバイスが選択できるので、さまざまなシーンで活用できそうです。
今回はスマートフォンサイトを作成するので、iPhone5を選択しました。

プロジェクト名を設定すれば、準備は完了です。
画像アップロードでプロジェクトアイコンも変更できるところが嬉しいですね。

プロトタイピングスタート!

HTMLの実装スキルがなくとも、4ステップで作成することができます。

  1. ラフの作成
  2. iPhoneで撮影 or 画像をアップロードする
  3. リンクとアクションを設定する
  4. プレビュー・共有

1. ラフの作成

モックアップ作成の方法もいろいろありますが、自分が実践しているのは、紙に書いたスケッチを実際に操作できるように実装する「ペーパープロトタイピング」です。
左右の余白やボタンのサイズに気をつけつつ、まずは書いてみましょう。
荒技ですが、隣に参考サイトを表示したiPhoneを置くとサイズ感がわかり、手早く書けます。

ligblog_ma-03

より分かりやすくしたい場合は、ペンでなぞる、ボタン部分に色を付けるなどの作業をします。
※ボタン部分は「コピック」のグレーを使用しました。水性ペンの上から塗ってもにじまないので◎

ligblog_ma-04

2. 撮影する

カメラアイコンを押すと「カメラで撮影」と「ライブラリから選択」の2つの選択肢が出てきます。

今回は「カメラで撮影」を選択し、作成したラフを撮影しましょう。
連続撮影・トリミングができるのでスムーズに進みます!

ligblog_ma-06

完了を選択すると撮影した画像が読み込まれ、一覧に追加されます。
PC(自分はブラウザアプリ使用)にも瞬時に同期されます。すごいよグッドパッチさん。

補足

操作感だけではなく、構成要素の確認も同時に行いたい(縦に長いページを作成したいときなどの)場合は、「画像のアップロード」を活用すると便利です。
自分の場合は、長いオリジナル用紙を作成、スキャン&トリミングして画像アップロードをしています。

ligblog_ma-05

3. リンク先を設定する

撮影後は、スマートフォンアプリでも操作できますが、ここからはPC(ブラウザアプリ)で操作します。※画面が広いので、リンク先を選びやすい!
リンクを設定したいページを選んで、画面をクリックするとリンク範囲となる黄色い四角が出現します。

ligblog_ma-07

リンクの場所を決めたら、以下3点を設定します。

  • ターゲット:押したときに移動したいページ
  • トランジション:ページに移動するときの動き
  • ジェスチャー:どんな操作をしたときにアクションが発生するか

さらにリンクの移動先をつなぎます。

ligblog_ma-09

トランジションとジェスチャーは、どんな動きをするかアイコンがアニメーションで教えてくれる、ナイスなUIです。

「画像の差し替え」機能もあるので、設定したリンクはそのままに、画像を再撮影(またはアップロード)して差し替えができるのが非常にありがたいです!

4. プレビュー・共有

ページを選択して、再生アイコン(またはspaceキー)を押せば。。。

ligblog_ma-11

あっという間にUIデザインのモックが完成しました^^

プロジェクト設定では、ステータスバーの色が選べるという嬉しい機能も付いています。

プロジェクト設定画面の中にある「シェア」を選択すると、作成したプロジェクトをシェアできるURLが!
このURLにアクセスすれば、作成したモックを自分以外の人にも共有することができます。

ligblog_ma-12

アクセスした際のパスワードも設定できるので安心です。

デザインデータをモックアップにしてみよう

前述したように、Prott(プロット)は撮影した画像だけではなく、画像をアップロードすることも可能です。
今まではpsdで作成したデザインをjpgに書き出して送っていましたが、最近はPrott(プロット)でモックアップにしたものを共有しています。
実際にスマホで確認できて、画面遷移も伝えることができるので、デザインチェックが非常にスムーズになりました^^

ligblog_ma-13

Prott(プロット)は電池や時計などのステータスバーも再現してくれるので、+40px余白を設けると◎

ligblog_ma-14

長い画像はヘッダー、フッター固定も指定できるので、ヘッダーに入れたメニューの使用感も確認できます。

Prott(プロット)をもっと活用する

  • もっとたくさんのプロジェクトを作成したい
  • チームでPrott(プロット)を活用したい

というユーザ向けに有料プランも用意されています。

https://prottapp.com/app/#/users/edit/plans

特に料金プランの「Team」は、作成するプロジェクト数に制限がなくて、また最大5人で編集できる上、気になった箇所にコメントを記入できるなど便利な機能がついています。

次回は、Prott(プロット)のチーム活用方法をご紹介できればと思いますので、今しばらくお待ちくださいませ…。

まとめ

いかがでしたでしょうか?

自分自身、スマートフォンサイトの作成は悩んでしまうことが多かったのですが、Prott(プロット)を使用して、手書き→試す→直す→デザインという制作フローを取り入れたことで一歩前進できた気がします。

もし、スマートフォンサイト作成で悩んでいるデザイナーさんがいらっしゃったら、一度試してみていただけると幸いです^^

最後までお付き合いいただきありがとうございました!

それでは、また次回!

 

【スマホサイト作成中のあなたに】

これはハマった!スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】

レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ

最近お世話になったWEB制作に関するお役立ちツール&プラグイン

Web制作者向け便利ツール・参考デザインなどLIGブログ記事まとめ

スマホ専用の検索ランキングってあるの?スマホSEO対策の基本をマルッと教えます

マチルダ
この記事を書いた人
マチルダ

デザイナー

関連記事