アイデアをすぐカタチに残せて便利!画面遷移を伴うモックアップが簡単にオンラインで作成できる -PLOGLESS
Post on:2015年2月26日
さっき思いついたアイデアなんだっけ?メモしとけば、、ということはありませんか。
デスクトップでもスマホからでも簡単に作成・編集・閲覧ができる、プロトタイプのモックアップを簡単に作成できるオンラインサービスを紹介します。
基本機能は無料で利用でき、有料だと更に便利機能が利用できます。
下の方に、有料プランが無料で利用できるコリス限定クーポンがあります(先着50名様)。
※14時すぎにクーポン、50名様分終了しました。
※15時30分、おかわりクーポンを発行しました。
※おかわり分も終了しました。
※3/31までに登録された方にはクーポンが発行されると思うので、そちらをご利用ください。

PLOGLESSの特徴

PLOGLESSで画面遷移を伴うアプリのプロトタイプを作成するのに専用アプリやコーディングの知識は不要、手書きのラフがあれば5分で簡単に作成できてしまいます。
- 画面遷移を伴うアプリのプロトタイプが簡単に作成できます。
- 作成・編集・閲覧は、デスクトップ・スマホのどの端末からでも可。
- 画面遷移のトランジションには豊富なアニメーション。
- フレームはiPhone, Android, iWatchに対応。
- 作成したプロトタイプは共有可(パスワード設定有り)。
- 限定URLを使用してポートフォリオとしても公開可。
PLOGLESSのプランには無料・有料があり、無料はプロジェクト数が少なく機能が制限されます。
PLOGLESSでプロトタイプを作成
サンプルページを見ながら、PLOGLESSでスマホアプリのプロトタイプを作成してみます。
まずは、手書きのラフやアプリで作成した画像をアップロードし、順番に配置します。

サンプルページ
※サンプルは登録なしでも見ることができます(編集は要登録)。
次の画面へ遷移するための箇所をクリックし、編集パネルを開きます。

編集パネル
遷移先のアイテム、トランジション(アニメーション)を設定します。

遷移の設定
作成が終了したら、画面遷移をビューモードで確認します。

ビューモード
ビューモードでは、デバイスにiPhone(White/Black), Android(White/Black), iWatchを選択できます。
PLOGLESSの登録方法・コリス限定クーポン
PLOGLESSを利用するには登録が必要で、無料です。
※クーポンを利用するには登録が必要
下記ページの「無料登録」をクリックします。

メールアドレスとパスワードを入力し、「無料登録」ボタンをクリック。

登録ページ
しばらくすると、確認メールがくるので、確認用のURLにアクセスすると登録が完了します。
PLOGLESSでは、無料プランと有料プランの2種類があります。

3/31までにPLOGLESSに登録すると、もれなくPro版のクーポン(90日間有効)がゲットできます!
コリス限定クーポン
コリスのビジター限定で、Pro版180日間のクーポンがあります!
- PLOGLESS コリス限定クーポン
- 配布は終了しました。
- 先着50名様限定+おかわり。
- 当ブログ(//coliss.com/)からの利用のみ有効。
- 利用は一回のみ、複数回は適用されません。
クーポンを利用するにはPLOGLESSへの登録を完了した後、設定画面にアクセスします。

設定画面
設定画面の下の方「クーポンコード入力」にコード」を入力してください。

クーポンの入力
クーポンが適用されると、適用サービスが「クーポン」欄に表示されます。
利用数の上限を超えた場合は、「クーポンコードの発行が終了しています。」と表示されます。
sponsors