「prott」を使ったワイヤーフレーム作成手順を解説していく

prottとは、webサービス、アプリのワイヤーフレーム・デザインカンプといったプロトタイプをソースコードが書かずに簡単に作ることができるツールです。作ったワイヤーフレームを実際に自分のスマホで表示させて、画面遷移することもできます。また、手書きのワイヤーフレームを元に各パーツをマウスで組み立てていくことができます。コードを書かずに作れるワイヤーフレームが作れて、複数人で共有してレビューすることもできるので、プロジェクトにエンジニア以外のメンバーがいる場合は特に便利です。

あらためて、今回は「prott」を使ったワイヤーフレーム作成手順について解説していきます。

 

【前提条件】

・prottのPROプランの無料トライアル登録

・PROプラン以上登録

 

まだの方は、公式ホームページより登録。

https://prottapp.com/ja/plans/

 

 

では、ワイヤーフレーム作成手順を解説していきます。

 

完成物

https://prottapp.com/p/17b90f

これは、僕が最初に作ったワイヤーフレームです。使い方覚えるのも含めて3時間程で作れたので、使い方はとても簡単。

 

 

新しくプロジェクトを作る

[+マーク]をクリックして、新しくプロジェクトを作成

 

プロジェクト設定画面がポップアップ表示される。

 

 

 

 

 

 

 

プロジェクト名:任意で記入

デバイス:作りたい画面サイズを指定できます

デバイスの向き:縦画面か横画面か指定できます(PC画面、AppleWatchは指定不可)

 

 

ワイヤーフレームを作る

「ワイヤーフレームを書く」を選択する

 

作成画面へ遷移する

【左メニュー】

シェイプ機能:検索メニューなどwebサービスで使うパーツがたくさん用意されています(スライドで簡単に配置可能)

コンポーネント機能:画像・アイコン機能:画像フォルダから画像を注入できます(手書きのワイヤーフレームなど)、たくさんのアイコンが用意されています(スライドで簡単に配置可能)

【右メニュー】

テキストや各パーツの大きさや位置、色を変更できます。

 

PowerPointの要領で作りたいページ分作ります。

※作成のコツ:最初に共通のサイトデザインを作ってそのページを複製していくと楽に作れる。

 

 

リンク付けしていく

下のようにカーソルで要素を作ると、つなげる糸が出現するので、これをリンク先のページに持っていくだけ。

 

タッチ式からスライド式などたくさん種類があります。一番左は1タッチでページ遷移できます。

 

このようにして、すべてのページを以上の容量でつなげていけば完成です。

 

 

まとめ

今回は、ワイヤーフレーム作成ツール「prott」の作成手順の解説を行いました。この記事が皆さんの活動を手助けになれば幸いでございます。