Prototyperでスマホ画面のワイヤーフレームを簡単作成

2013/08/01

Prototyperで画面設計

概要

スマホ向け画面のワイヤーフレームを簡単に作成できるPrototyperというソフトウェアを紹介します。
iPhone画面向けの背景やボタンなどの部品がたくさん用意されていてとても使いやすいです。
しかも無料で使えるんです!これが無料なんて凄いですね。

目次

  1. インストール・設定
  2. ワイヤーフレーム作成

ワイヤーフレーム作成手順

インストール・設定

justinmindのサイトよりインストーラーをダウンロードします。
今回は、フリーで使える「Prototyper_Free_Windows.exe」を使用します。

インストーラーをダブルクリックしてインストールを開始します。

[Next]をクリックします。
Setup Wizard

[I Agree]をクリックします。
License Agreement

フォルダを指定して、[Next]をクリックします。
Install Location

[Install]をクリックします。
Start Menu Folder

[Next]をクリックします。
Installation Complete

[Finish]をクリックします。
Finish

以上でPrototyperがインストールされました。

ワイヤーフレーム作成

さっそく使ってみましょう。
Prototyperを起動してください。

左上の[New Protorype]をクリックします。
New

左右のボタンで、画面タイプを指定します。
今回は、「iPhone 5」を指定して[Next]をクリックします。
New

[Create]をクリックします。
New

ここから、画面を作成していきます。
右上の[Screens]タブの「+」をクリックすることで、新しくスクリーンを追加します。
左の[Widgets]、[My Widget]タブ内のツールをドラッグして、画面を作成していきます。
Edit

いろいろ設置して画面を作成してみましょう。
Make

作成したものは、HTML・PDF・Imageとして出力することができます。
今回はImageとして出力してみます。
Export

出力された画像はこちらになります。
Image

このようにして、簡単にスマホ画面のワイヤーフレームが作成できるのです。
初めて使う人でも直観的に使用できるため、すぐに慣れることができます。
ちなみに私も今日初めてこのツールを使いました。
是非皆さんもお試しください。

Related

Vagrant+Docker+PHP環境で「session.save_path」指定時に、セッションファイルが空になるエラー

ファイル共有でのフォルダの所有者を設定 結論 PHP5.4.28 からセッションファイルのownerはrootもしくはWebサーバのユーザに限るという制限が...

LINEと連携したテイクアウト事前注文システム徹底比較!

目次 テイクアウト予約・注文受付システムのトレンド LINEと連携したテイクアウト事前注文システムの価格表 L.B.B.Cloud テイクイーツ ...

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...
トップへ戻る