ITエンジニア/デザイナ向けにオープンソースを毎日紹介

開発 - モックアップの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2019/08/16

OverVue - Vue開発で役立つプロトタイピングツール

Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。## OverVueの使い方立ち上げ...

List

  • 2019/02/24

mockup - Red製のモックアップデザインツール

Redというプログラミング言語があります。REBOLという言語にインスパイアされており、プロトタイプベースでマクロシステムを持っています。詳しくはRed Programming Language: About

List

  • 2019/01/24

bruck - コーディングベースのプロトタイプシステム

Webサイトのプロトタイプを作成する際には、こだわり過ぎないくらいのデザインに留めておくのが大事です。文字の大きさや画像の内容など、本来関係ない部分までデザインしてしまうと余計な議論に繋がりかねません。そこで使ってみたいのがbruckです。HTMLタグベースでプロトタイプをさくさくと作れます。## bruckの使い方左...

List

  • 2018/09/16

Sketch2Code - 手書きのスケッチからHTMLデザインを生成

アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。##...

None

  • 2018/08/28

stripe-mock - Stripe製のWeb APIモックサーバ

今やシステム開発時においてWeb APIを使わない手はなくなっています。開発を効率化したり、自分たちが持っていない技術もWeb APIを使うことで即座に手に入れることができます。しかし、開発中にもネットワークが必要になったり、負荷テストはしづらいといった欠点もあります。そこで参考にしたいのがstripe-mockです。...

List

  • 2018/06/12

Wired Elements - ラフなデザインになるカスタムタグ

ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...

List

  • 2018/06/07

vuegg - Vue.jsプロジェクトの画面を作成

ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。## v...

List

  • 2016/12/08

Origami Studio - UXを試せるプロトタイピングデザインツール

スマートフォンのデザインで面倒なのが、UIは確認できてもUXが確認できなことです。タップした時にどういったアニメーションをしながら表示されるのか、どういう画面遷移をするのかが画面ごとに分かれたデザインではピンとこないかも知れません。そこで使ってみたいのがOrigami Studioです。Facebook製のプロトタイピ...

List

  • 2016/02/01

quickMockup - Webベースのモックアップ作成ソフトウェア

Webサービスやアプリをはじめようと思ったらまずモックアップを作るところからはじめましょう。モックアップを使って色々考える中で、アイディアに磨きがかかっていくはずです。quickMockupはそんなモックアップを作成するためのソフトウェアになります。Web上で動くのでより手軽に使い始められるでしょう。## quickM...

List

  • 2014/03/18

Wireframe & UI Kit - 凄く利便性の高そうなワイヤーフレームキット

手早く、かついい感じにワイヤーフレームが作れそうですよ!Webサイトやスマートフォンアプリを作成する際にはワイヤーフレームを作ることが多くなってきました。そこで一旦アイディアをまとめて、それから実際に形にしていく訳です。そのためのツールもたくさんあります。しかしそういったワイヤーフレームツールの多くが画像を四角とバツ印...

List

  • 2013/08/31

Webの技術でスマホアプリのプロトタイプを作成「Clank」

ClankはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。ファイル...

List

  • 2013/05/23

HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう!「Fries」

FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを...

List

  • Premium_s 2013/05/14

業務で使えるオープンソース(77)「スマートフォンモックアップ」

今回のテーマはスマートフォンアプリのモックアップ開発についてです。最近では多彩なモックアップ開発サービス、ソフトウェアが出ていますが、それらを使う利点について取り上げてみたいと思います。

List

  • 2013/01/07

イメージに合わせてどんどんプロトタイプを作れるフレームワーク「Framer」

Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。今回はWeb/スマートフォン双方に対応したFramerを紹介します。例。単純にビューを表示...

List

  • 2012/12/02

試そう!Webブラウザ上でモックアップを作れる「Mockup Designer」

Mockup Designerはローカルストレージを使ったWebベースのモックアップ開発ツールです。Webサイトを作ったり、iOSアプリを開発したりする際にまず作っておきたいのがモックアップ(ワイヤーフレーム)です。シンプルで飽きのこないデザインです。配置はドラッグアンドドロップでできます。色の変更や配置順の変更も可能...

List

  • 2012/11/29

HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク「Ratchet」

RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使っ...

37302?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f03%2fscreenshot-2012-03-25-10.50.57_thumb

  • 2012/04/07

Twitter for Mac OSXにも使われているメッセージ系ソフトウェアにぴったりなUI「EDSidebar」

EDSidebarはTwitter for Mac OSXやSparrowといったソフトウェアのUIを模したモックアップアプリです。iOSの隆盛に伴って、Mac OSXアプリの中にもそのエッセンスを取り込んだソフトウェアが登場してきています。今回はTwitterやSparrowといったアプリのUIを模したEDSideb...

List

  • 2012/03/15

Clear風の操作を一部実現したモックアップアプリ「Opaque」

OpaqueはClear風のUIを再現したモックアップアプリです。今、iPhoneで話題になっているアプリと言えばClearです。あんな独特なUIを再現したモックアプリがOpaqueです。雰囲気がClearっぽいです。下にプルすると新しいタスクが追加されます。適当な場所をピンチしても追加されます。以前にも同様のアプリと...

32776?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot_2011_12_02_03_32_37_thumb

  • 2011/12/13

タップして表示される華麗なメニューモックアップ「QuadCurveMenu」

QuadCurveMenuはPath 2.0というiOSアプリのメニュー表示機能を模したモックアップアプリです。デザインやコンポーネントの工夫で人気に雲泥の差が出るのがiOSアプリです。そして人気のあるアプリはそのコンポーネントが真似されます。QuadCurveMenuもその一つです。起動した直後の画面です。赤いマーク...

32725?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot_2011_12_01_03_03_23_thumb

  • 2011/12/10

Facebook Graph APIを使ったiOSアプリを開発するなら参考にしたい「SCFacebook」

SCFacebookはFacebookの提供するiOS SDKの使い方をモックアプリを通じて教えてくれるソフトウェアです。iOSアプリを開発していてFacebookのGraph APIを利用したいと思ったならばFacebookが提供しているSDKを使いましょう。さらにSCFacebookを見ればその使い方について参考に...