開発 - モックアップの記事一覧
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。今回紹介するWireflowはWeb上か簡単にワイヤーフロー...
Placeholder service - 自分で立てる画像のプレイスホルダーサーバ
画像のプレイスホルダーはWebサイトやアプリのモックアップを作るときに重宝します。情報量が多い画像を使うと本質を見失いがちです。グレー表示などの画像であれば、サイトの構成など、必要な場所だけに目を配れます。今回紹介するPlaceholder serviceは自分で立てるプレイスホルダーサーバです。自由な大きさに画像を生...
Screenshot.Rocks - スクリーンショットを使ってWebブラウザのモックアップを作成
スクリーンショットをそのまま貼り付けるだけでは芸がありません。そこには余計な情報も入ってしまっているかも知れませんし、アイコンなどを消したいと思うこともあります。そんな時に使ってみたいのがScreenshot.Rocksです。Webブラウザのモックアップを使ったスクリーンショットを作成します。## Screenshot...
Animockup - iOS/macOSデバイスに動画を当てはめてモックアップ作成
言葉で説明しても分かりづらいことであっても、絵にすると分かりやすくなります。さらに、イラストではなくアニメーションなら、もっと伝わりやすくなることもあるでしょう。例えばアプリはUXも大事なので、アニメーションさせることで把握しやすくなります。そんなアニメーションを伴うモックアップを作れるのがAnimockupです。映え...
UXBOX - プロトタイプをさくさく作るためのWebアプリケーション
Webサイトやアプリなど、プロトタイプをさくっと作ってUIを検討するというのはよくある進め方です。そんな時にはデザイナーしか使えないソフトウェアよりも、誰でも編集できるものを使った方が素早く進められるでしょう。今回紹介するUXBOXはオープンソースのプロトタイピングソフトウェアです。## UXBOXの使い方まずプロジェ...
OverVue - Vue開発で役立つプロトタイピングツール
Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。## OverVueの使い方立ち上げ...
mockup - Red製のモックアップデザインツール
Redというプログラミング言語があります。REBOLという言語にインスパイアされており、プロトタイプベースでマクロシステムを持っています。詳しくはRed Programming Language: About
bruck - コーディングベースのプロトタイプシステム
Webサイトのプロトタイプを作成する際には、こだわり過ぎないくらいのデザインに留めておくのが大事です。文字の大きさや画像の内容など、本来関係ない部分までデザインしてしまうと余計な議論に繋がりかねません。そこで使ってみたいのがbruckです。HTMLタグベースでプロトタイプをさくさくと作れます。## bruckの使い方左...
Sketch2Code - 手書きのスケッチからHTMLデザインを生成
アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。##...
stripe-mock - Stripe製のWeb APIモックサーバ
今やシステム開発時においてWeb APIを使わない手はなくなっています。開発を効率化したり、自分たちが持っていない技術もWeb APIを使うことで即座に手に入れることができます。しかし、開発中にもネットワークが必要になったり、負荷テストはしづらいといった欠点もあります。そこで参考にしたいのがstripe-mockです。...
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...
vuegg - Vue.jsプロジェクトの画面を作成
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。## v...
Origami Studio - UXを試せるプロトタイピングデザインツール
スマートフォンのデザインで面倒なのが、UIは確認できてもUXが確認できなことです。タップした時にどういったアニメーションをしながら表示されるのか、どういう画面遷移をするのかが画面ごとに分かれたデザインではピンとこないかも知れません。そこで使ってみたいのがOrigami Studioです。Facebook製のプロトタイピ...
quickMockup - Webベースのモックアップ作成ソフトウェア
Webサービスやアプリをはじめようと思ったらまずモックアップを作るところからはじめましょう。モックアップを使って色々考える中で、アイディアに磨きがかかっていくはずです。quickMockupはそんなモックアップを作成するためのソフトウェアになります。Web上で動くのでより手軽に使い始められるでしょう。## quickM...
Wireframe & UI Kit - 凄く利便性の高そうなワイヤーフレームキット
手早く、かついい感じにワイヤーフレームが作れそうですよ！Webサイトやスマートフォンアプリを作成する際にはワイヤーフレームを作ることが多くなってきました。そこで一旦アイディアをまとめて、それから実際に形にしていく訳です。そのためのツールもたくさんあります。しかしそういったワイヤーフレームツールの多くが画像を四角とバツ印...
Webの技術でスマホアプリのプロトタイプを作成「Clank」
ClankはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。ファイル...
HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう！「Fries」
FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを...
2013/05/14
業務で使えるオープンソース（77）「スマートフォンモックアップ」
今回のテーマはスマートフォンアプリのモックアップ開発についてです。最近では多彩なモックアップ開発サービス、ソフトウェアが出ていますが、それらを使う利点について取り上げてみたいと思います。
イメージに合わせてどんどんプロトタイプを作れるフレームワーク「Framer」
Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。今回はWeb/スマートフォン双方に対応したFramerを紹介します。例。単純にビューを表示...
試そう！Webブラウザ上でモックアップを作れる「Mockup Designer」
Mockup Designerはローカルストレージを使ったWebベースのモックアップ開発ツールです。Webサイトを作ったり、iOSアプリを開発したりする際にまず作っておきたいのがモックアップ（ワイヤーフレーム）です。シンプルで飽きのこないデザインです。配置はドラッグアンドドロップでできます。色の変更や配置順の変更も可能...