広告の限界を超える|セールス
広告の限界を超える|セールス
2015.01.13

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

マチルダ

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

前述したように、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対策の基本をマルッと教えます