どのようにして高速に iOS アプリの UI を作り上げるか：動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ
Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか？もしくはモックアップを作成せずにすぐに実装に入るでしょうか？私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直しました。iOS アプリ開発の過程で、モックアップ作成や実装をどのように捉えるか、具体的にどう行うか、ということが自分なりに見えてきたので、それらについてご紹介します。 目的は、価値のあるプロダクトを速くユーザの手に届けること Web アプリやモバイルアプリの開発過程においてモックアップなどを作る目的は、あくまでも ユーザに届く プロダクトの価値を高めてそれを速くリリースすることです。適切な前準備は
ペーパープロトタイピングで画面遷移をiPhone上でシミュレートするアプリ『POP』 | 川崎裕一 | yukawasa.com
ペーパープロトタイピングで画面遷移をiPhone上でシミュレートするアプリ『POP』。ペーパープロトタイピングはアイデアを膨らませるのに便利ですよね。要素を切ったり貼ったりしながら、自由に要素をレイアウトできる。 ただそうして作ったページにリンクを貼ったり、このページからこのページに移動するんだというのを示すのは中々難しく、そこにアプリとのギャップがあったりしました。 それに紙なのでかさばったり、一枚ページがどこかに行ってしまった。。。ということもありました。 このペーパープロトタイピングの悩みにアプリで答えようとしたのが『POP』です。 『POP』では ・紙でデザインする。 ・写真でとる。 ・取った写真にリンク要素を付ける。 ・リンクで別な紙に移動する。 ということができます。 実際の画面です。 立ち上げるとプロジェクト画面がでてきます。 サンプルをクリックしてみます。 撮影したペー
mobjectify - Mockup your mobile website prototype in minutes
Target a wide range of devices Need a design that looks good across smartphones, tablets or even desktops? Your designs in mobjectify are generated using jQuery Mobile to target a wide array of available devices Easily target the latest generation of smartphone and tablet devices across multiple platforms and operating systems Prototype, Now! Simply select from a range of available controls to hav
【AIRコレ】味のあるUI設計ツール『Balsamiq Mockups For Desktop』 | ネット | マイコミジャーナル
『Balsamiq Mockups For Desktop』はWebサイトやWebアプリなどの開発において、UI(ユーザインタフェース)の設計に役立つアプリケーションです。その名のとおり、画面のモックアップを作成するツールで、Web画面の各種バーやボタン、マップなどの部品を置いて完成画面のイメージを作成することができます。各オブジェクトは手書きされたような味わいがある点も特徴でしょう。 「Balsamiq Mockups For Desktop」は数あるモックアップ作成ツールの中でも非常に操作しやすい。メニューバーからエディット、ビューなどの各種設定、ファイルへのエクスポートなどが行なえる メニューバーの下にはボタンや入力フォームなどの各種部品がカテゴリ分けされている。この中から部品を選び、画面中央に部品を置いて完成イメージを作成するのでちょっとしたお絵かき気分が楽しめる。部品はグリッドに
開発現場のUIトラブルを解決!? 画面プロトタイプ入門
開発現場のUIトラブルを解決!? 画面プロトタイプ入門：いまさら聞けないリッチクライアント技術（16）（1/3 ページ） UIを取り巻く開発現場の問題点って何？ システム開発におけるUI（ユーザーインターフェイス。本稿では、画面系の話題をすべてUIといいます）には、大きく2つの問題があります。 ■ユーザーいわく「使いにくい、分かりにくい」 1つは、システムの使いやすさについての問題です。システムをリリースしても、エンドユーザーから「使いにくい、分かりにくい」などのクレームが発生し、システム導入後の運用コストが低減できなくなるなどの問題が発生します。 ■ユーザーいわく「やっぱり画面にアレが欲しいな」 もう1つは、製造工程以降で、動くシステムが出来上がったときに、顧客から追加の要件が頻発する問題です。これは、システム開発共通の大きな問題ですが、特に顧客の目に付きやすいUIの部分は、その指摘が多
Web制作に超便利！無料のプロトタイプ作成ツール
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flinto - The App Design App
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
IDEA * IDEA