Design デザイン・UI

 
デザイン・UI調査・データ

【web業界の人必見】おすすめ制作ツールがさらに便利になったので使ってみた!

hands_laptop_hires
みなさん、「prott」というサービスをご存知でしょうか?
ディレクターやweb担当者であれば、一度は名前を聞いたことがあるかと思います。モバイルラボでも過去に「スマホ制作ディレクター向け 便利ツールまとめ」で紹介しましたが、先日新しい機能が実装されて、より便利になったので、実際に使ってみての感想を紹介したいと思います。

そもそもprottってなに?

prottは、株式会社グッドパッチが提供しているweb上でプロトタイピングモデルが作れるツールです。

クライアントが動作確認を行うタイミングは、基本的にテストアップされた段階がほとんどだと思いますが、このツールを使うことによって、ワイヤーフレームの時点で画面遷移などの確認を行うことができるようになります。

これまでも、prottでは手書きや他ツールで作成した構成案の画像をアップして遷移の確認などができましたが、今回のアップデートで、ゼロからweb画面上でワイヤーフレームを作成する機能が実装されました。

現在、web上でワイヤーフレームを作れるツールは国内外でいくつかリリースされていて、それぞれ特徴もありますが、私が使った中では、prottが一番使いやすい印象です。

新規作成からアカウントを作ろう

スクリーンショット 2015-06-01 12.25.44
 

スクリーンショット 2015-06-01 12.24.23

1つのプロジェクトであれば30日間無料で使うことができます。まず右上の「無料で始める」に進みます。

すると、左のようなアカウント作成画面に切り替わりますので、普段使っているメールアドレスでも、プロジェクト用に作成したメールアドレスでもいいので、登録を進めてください。
 
 
 
 
 
 
 

ワイヤーフレームを作ろう!

アカウントを作成すると、このような画面に変わりますので、右上にある「+新規プロジェクト」をクリック。

スクリーンショット 2015-06-01 11.57.42

 

すると、ワイヤーフレーム制作のベースとする端末選択、デバイスの向きなどの設定画面に変わります。

スクリーンショット 2015-06-01 11.57.11

プロジェクト名を入力したら、【デバイス】と【詳細】から、ワイヤーフレームを作成するプロジェクトにあったものを選びます。
ここで、スマートフォンか、PCサイトかを選ぶと、ワイヤーフレームを作成する画面のベースサイズが変わるので、とても便利!

 

スクリーンショット 2015-05-29 17.22.37

編集画面は、左側にUIパターンなどのパーツ類、右側に位置やサイズ、色など細かい設定の画面に分けられていて、真ん中に編集領域があります。

パーツ類はドラッグ&ドロップで編集エリアに配置し、編集エリア上でサイズや位置を変えることができます。右側の詳細編集エリアでも位置やサイズなどが変更可能。

パーツを繰り返す場合は、ページ上部にある【編集】の中にあるコピー&ペースト機能を使って行ったり、画面上でショートカットキー操作で行うこともできます。

そのほかにも、配置の重ね順の変更、要素の整列などもページ上部の【重ね順】【整列】から設定できます。

 

配置など

テキストを打つ場合は、左側のUIパターンからテキストを打つUIをドラッグして配置したら、右側の編集エリアの上部にテキスト入力ブロックが出るので、そこへテキストを入れていくと分かり易いです。

 

テキスト

また、要素をページ上に配置していき、ページの縦幅が足りなくなってきたら、【スクリーンの設定】からページの幅や高さを任意で変えることができます。

クライアントから、あの要素やこの要素を付け足したい!と言われた時も、パワーポイントで制作していると、要素を詰めたりページを分割して再度再配置したりと結構時間がかかりますが、この機能を使えば簡単にページの高さを変更することができるので、迅速な対応が可能になります。

ワイヤーフレームが完成したら、ページ右上にある保存をクリックで完了です。

プロットとして仕上げよう!

ワイヤーフレームをいくつか作成したら、サイトリリース時にどのようにリンク遷移するのかを設定していきます。
リンクの設定はとても簡単。プロジェクトの一覧ページで、ワイヤーフレームのリンクエリアを、囲うように選択します。すると、尻尾のついた黄色の枠が表示されるので、その先端をリンク対象ページにくっつけます。

たったこれだけで、リンク設定の完了です。

 

スクリーンショット 2015-06-01 13.01.09

提出前にセキュリティの確認

プロットが完成したら、残るはクライアントへの提出です。

このprottでは、作成したプロジェクトに閲覧用パスワードを設定することができるので、セキュリティ面でも安心です。

方法は下記左側の画像、ページ上部に赤枠で囲った【設定】をクリックすると、右側にあるポップアップが開きます。ポップアップに表示される左側のメニューから、セキュリティを選択するとパスワード設定を行うことができますので、プロットごとにパスワードを設定しましょう。

 

セキュリティ

パスワード設定が完了したら、【シェア】をクリックすると完成したプロットを送ることができます。

受け取った側は、指定した対象のデバイスでどのように表示されるかを確認することができます。
プロットが、PCサイトを指定している場合は、フルスクリーンで確認でき、スマートフォンを対象デバイスに設定していれば、画面上にスマートフォンデバイスが表示され、より実際の見た感じに近い状態で確認することができます。

これは、以前から実装されていた機能ですが、構成(ワイヤーフレーム)の段階で、実際の操作感に近いものが確認できると、最終段階で大きな変更が入ってデスマーチ…といったことを減らせるのではないかなと思います。

効率アップで本当に力を入れるべきところに注力しよう!

サイト制作に携わっていると、ワイヤーフレームを作ることに注力してしまい、本当に力を入れるべき、企画やユーザビリティの向上などがおろそかになってしまう場合があると思います。

今回紹介したようなオンラインツールは誰でも使い易いように設計されているので、制作サイドだけでなくクライアント側でも取り入れることができれば、進行もスムーズになり双方ハッピーな結果を得られて、更にいいコンテンツ作りができるかもしれません。

皆さんも、どんどん進化しているオンラインツールを使って、本当に力を入れるべきところを再度見つめ直してみてはいかがでしょうか。

株式会社グッドパッチ

https://goodpatch.com

prott

https://prottapp.com/ja/

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事