モックアップの記事一覧プレミアムユーザー限定記事MOONGIFTプレミアムは、月額500円の有料サービスです。プロトタイプをさくさく作るためのWebアプリケーションWebサイトやアプリなど、プロトタイプをさくっと作ってUIを検討するというのはよくある進め方です。そんな時にはデザイナーしか使えないソフトウェアよりも、誰でも編集できるものを使った方が素早く進められるでしょう。今回紹介するUXBOXはオープンソースのプロトタイピングソフトウェアです。Vue開発で役立つプロトタイピングツールVueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。Red製のモックアップデザインツールRedというプログラミング言語があります。REBOLという言語にインスパイアされており、プロトタイプベースでマクロシステムを持っています。コーディングベースのプロトタイプシステムWebサイトのプロトタイプを作成する際には、こだわり過ぎないくらいのデザインに留めておくのが大事です。文字の大きさや画像の内容など、本来関係ない部分までデザインしてしまうと余計な議論に繋がりかねません。そこで使ってみたいのがbruckです。HTMLタグベースでプロトタイプをさくさくと作れます。手書きのスケッチからHTMLデザインを生成アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。APIを使わない手はなくなっています。APIを使うことで即座に手に入れることができます。開発中にもネットワークが必要になったり、負荷テストはしづらいといった欠点もあります。そこで参考にしたいのがstripe-mockです。ラフなデザインになるカスタムタグワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。Elementsです。Vue.jsプロジェクトの画面を作成ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。UXを試せるプロトタイピングデザインツールスマートフォンのデザインで面倒なのが、UIは確認できてもUXが確認できなことです。タップした時にどういったアニメーションをしながら表示されるのか、どういう画面遷移をするのかが画面ごとに分かれたデザインではピンとこないかも知れません。Webベースのモックアップ作成ソフトウェアWebサービスやアプリをはじめようと思ったらまずモックアップを作るところからはじめましょう。モックアップを使って色々考える中で、アイディアに磨きがかかっていくはずです。quickMockupはそんなモックアップを作成するためのソフトウェアになります。Web上で動くのでより手軽に使い始められるでしょう。凄く利便性の高そうなワイヤーフレームキット手早く、かついい感じにワイヤーフレームが作れそうですよ!Webサイトやスマートフォンアプリを作成する際にはワイヤーフレームを作ることが多くなってきました。そこで一旦アイディアをまとめて、それから実際に形にしていく訳です。そのためのツールもたくさんあります。License)です。スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。ファイル...2013/05/23HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう!「Fries」FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回のテーマはスマートフォンアプリのモックアップ開発についてです。最近では多彩なモックアップ開発サービス、ソフトウェアが出ていますが、それらを使う利点について取り上げてみたいと思います。2013/01/07イメージに合わせてどんどんプロトタイプを作れるフレームワーク「Framer」Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。今回はWeb/スマートフォン双方に対応したFramerを紹介します。Designerはローカルストレージを使ったWebベースのモックアップ開発ツールです。Webサイトを作ったり、iOSアプリを開発したりする際にまず作っておきたいのがモックアップ(ワイヤーフレーム)です。シンプルで飽きのこないデザインです。配置はドラッグアンドドロップでできます。色の変更や配置順の変更も可能...2012/11/29HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク「Ratchet」RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。OSXやSparrowといったソフトウェアのUIを模したモックアップアプリです。OSXアプリの中にもそのエッセンスを取り込んだソフトウェアが登場してきています。今回はTwitterやSparrowといったアプリのUIを模したEDSideb...2012/03/15Clear風の操作を一部実現したモックアップアプリ「Opaque」OpaqueはClear風のUIを再現したモックアップアプリです。今、iPhoneで話題になっているアプリと言えばClearです。あんな独特なUIを再現したモックアプリがOpaqueです。雰囲気がClearっぽいです。下にプルすると新しいタスクが追加されます。適当な場所をピンチしても追加されます。2.0というiOSアプリのメニュー表示機能を模したモックアップアプリです。デザインやコンポーネントの工夫で人気に雲泥の差が出るのがiOSアプリです。人気のあるアプリはそのコンポーネントが真似されます。QuadCurveMenuもその一つです。起動した直後の画面です。${article.post_date_view}${article.post_title}${article.except_content}プレミアムでしか読めない記事が730あります。blockworks。