fc2ブログ

Home > ユーティリティ > ワイヤーフレーム(モックアップ)を作るアプリがすごい進化してた

ワイヤーフレーム(モックアップ)を作るアプリがすごい進化してた

justimind.jpg

ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって
私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。
手描きでレポート用紙に描いて、
スキャンしてプロジェクトフォルダへ入れておくことも多いのですが
デザインの前に「こういう配置でいいですよね?」って共有したいとき
清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。

最近調べてすごいなーとおもったアプリや、無料でもざくざく使えそうなものまでご紹介。

最近まで使っていた「moqups」

Moqups
Free Plan (offers 2 active projects and 5MB of storage)
Monthly:Standard active project 10 で $9〜


ログインしなくても無料で組めます。
960gsグリッド表示可能です。
ほぼコンポーネント揃ってます。ほぼ装飾なしなステンシルなので、
余計な情報を伝えなくて済みます。
ページ機能・テンプレート機能・画像アップロード機能あり。
TOPページを開いたらそのまま編集開始できるので、サクサクやってる気分になれます。

書き出しは、png(normal / retina ) , pdf 出力ができます。
コラボレーションモードというか、アドレスで共有してコメントのやりとりなどができます。

※フリープランだとprivateモードにできません。
※ログインしなくても無料で組めますが、保存や書き出しができません。

moqups new beta

moqups new beta
先に紹介した「moqups」の最新版。価格は同じ。ID/passも共通。
retinaな感じになったのと、動きがよくなってるように感じました。以前のに比べてストレスないですねー。
アイコンが増えていて今風になっていて、fontなどさらに細かな設定ができるようです。

Justimind Prototyper 6.x

Justimind Prototyper 6.x
Subscriptions plan $29/monthly
Perpetual Licences $499

DL時に登録するアカウントは無料期間あり。カード登録なしなので安心かな。

こちらは、PC上にアプリを落として利用するタイプのもの。
なんというか、全部がフラットでおしゃれです。それだけでアガりますね。

DL時に、

Enjoy our 30-day free PRO trial.
After the trial, we'll you to our FREE forever edition


と書いてあったのでプロのトライアル後、フリーエディションに自動で切り替わるのかな。まだ30日経ってないのでわからないですが。

・ページ管理、テンプレート管理、960gs系のグリッド
・基本のオブジェクト+レイヤー管理
・パララックスなイベントや、マウスホバーなナビゲーション
・さらに追加ウィジェットにfont awesomeやbootstrapのエレメントも入れられます。
・flashやhtmlも直書きできるっぽいです。
・Events管理で、さらに細かなイベントを作成できます。
・iOS & android, Web,responsive,google glass の枠が作れます。
・たぶんアカウントのサーバーにアップロードしてコメントのやりとりもできそう。
・html,word,png描き出し可能

と、至れり尽くせり、機能だけみたらphotoshopもhtmlもいらないんじゃないか、と思うくらい作り込めますね。いや、もうそこまで作りこむなら、htmlで組んだほうが早いんじゃないかっていうくらい。

なんとなく、これが今の本命なんですけど、フリーエディションに変わって何ができなくなるのかがわからないので、様子見です。
使ってみた感はサクサクです。グラフィカルな込み入ったものをつくるのではなく、単純なワイヤーフレームをつくるのにも十分向いています。
もちろん、がっつり作りこんでユーザビリティテストしたい時にも使えるかと。

UXPin

UXPin
30日間 free trialあり。
Basic $15 per user /month〜


もうひとつ、おしゃれ系プロトタイピングアプリ。ウェブベース。
とにかくかっこよくワイヤーを作りたいひとにはいいかもしれないです。

ただ、エレメントというか、ステンシルが結構作りこまれている印象なので
これを持って来られたら、この通りデザインしたくなっちゃうなーと思いました。
で、「ワイヤーのままですよね?」って言われるとこまで想像しました。

*Prototyperもおしゃれなんですけど、ステンシルは癖がないんですよね。
逆にこちらは癖(他の情報がたくさん入ってるデザイン)のあるステンシルな印象なんです。
ワイヤーフレームにはできるだけ情報をいれず、
目的をはっきりさせたほうがいいと思うんですよね。

完全無料がいい、サブスクリプションもやだ、って方に。「Pencil Project」

Pencil Project
たぶん、keynoteやpowerpointでやっていることをスタンドアロンなローカルアプリでやりたい方にいいかもしれないPencil。Omni graffleにお金を払いたくないひとの駆け込みにもなりそう。
もともとfirefoxのエクステンションだった気がします。
その頃から人気があったような。

Betaっぽいのですこし動作に不安がありますが、簡単なワイヤーを組みたい、ワイヤフレーム組みをはじめてやるって人にはいいかもしれません。win,mac,linux用があります。今ももちろんFirefox用エクステンションもあるようです。


四角と簡単なUIオブジェクトだけがあればいいと探し始めたのに
今は動きのあるサイトが多いからかinvisionのように、ウェブで共有してコメントできたり、動きのアニメーションまでつけれて共有できたり、
ページのナビゲーションをテストできたり(リンク周りは前からありましたが)
アニメーションを独自のautomator的なフローチャートで組めたりと
それだけできちんとテストできるようなアプリに進化しておりました。
未来感じてわくわくです。

おしゃれなUIがおおいので単純にUIエレメントのデザインの参考にもなりますよー。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/143-2886d8da
Listed below are links to weblogs that reference
ワイヤーフレーム(モックアップ)を作るアプリがすごい進化してた from バニデザノート

Home > ユーティリティ > ワイヤーフレーム(モックアップ)を作るアプリがすごい進化してた

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items