スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
明日友達に自慢できる！隠れUIデザインまとめ8つ | Goodpatch Blog
以前からネットでiOSのデフォルトミュージックアプリを傾けると音量調節スライダーの光のあたり方が変わるという記事をよく見ます。 （参考: 【豆知識】本体の傾きに合わせて音量スライダの光沢が変化する（iPhone/iPod touch/iPod nano）） そこで上記のような細部に凝ったUIはもっとあるんじゃないのかと思い探してみました！これらを知っているとUIの勉強にもなるし、友達にも自慢できるのではないでしょうか？笑 iOS 計算機 iOSにデフォルトで入っている計算機アプリ。iPhoneなどをロックを解除して横にすると足し算やかけ算以外の複雑な計算ができるボタンが出てきます。僕はπしかわかりませんでした。 Foursquare その1 有名なチェックインアプリFoursquare。写真付き投稿の写真を左にスワイプすると隠れキャラが登場します。実はこの隠れキャラ、Foursquareの
iOSのデザインをするときに利用しているツールいろいろ | ナナメウエblog
こんにちは、いつかiOSのデザインのみで食べていきたい鈴木(@suzukisan__)です。 まだまだ若輩ですがiOSのデザイン環境について紹介させて頂きます。 画面設計 iPhone Idea Sheet あまり紙でやることはないのですが、使う場合はこちらのiPhone Idea Sheetです。 うちではむしろエンジニアさんのほうが使っています。 三階ラボ | iPhone Idea Sheet ver.01 あまりに使いやすいのでiPhone5用にiPhone5 Idea Sheetなるものをうちで作成しました。 iPhone5のワイヤーフレームに使えるアイデアシートをイラレで作りました | ナナメウエblog POP 本来は紙に書いたワイヤーフレームから画面設計をイメージするためのものだと思いますが、普通にデザインだけしてコーディング前の画像を取り込んで画面推移を説明す
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
商用利用可能なタッチデバイス向けのジェスチャーアイコンセット・TOUCH GESTURE ICONS
タッチデバイス独特の操作方法を明示 するジェスチャーアイコンが商用利用 も可能で、セットで配布されていたの でご紹介。他にもあった気はしますが、 汎用的なデザインで利用しやすそうだ ったのでメモ。 タッチデバイス用のジェスチャーアイコンです。万国で通じそうな汎用的なアイコンで個人的には気に入っています。 指で操作している所をアイコンにしたもの。他にも見かけますけど、このアイコンは結構分かりやすい気がします。商用でも利用出来るそうです。 用意されているファイルはPSD、EPSに加えてPNGがいくつか。 加工もしやすいですし、アプリ開発者さんは利用されてみては如何でしょう。 TOUCH GESTURE ICONS
iPhone/iPadアプリデザインで使っているツール
企画やらUIを考えるツール iPhone Idea Sheet（PDF） 三階ラボさんのアイデアシート（PDF）。 iPhoneの枠だけじゃなく、ナビゲーションバーやタブバー、ステータスバーが書きやすいように、うっすら線が入っていてGOOD。 印刷して何枚か持ち歩いている。何か作りたいなーどうかなーと思ったら、手書きでワーっと書く。このシート自体が美しいので、いいもの作れそうな気がしてくる。 紙なので、対面でのブレストやら打ち合わせしながら書き込みやすい。 Cacoo（Web） UIの構想がまとまってきたら、Cacooで清書してチームで共有。 iPhoneの各パーツのステンシルが揃っているので、きれいに、わかりやすく作れる。SkypeミーティングのときにみんなでCacoo触りながら話したりとかしている。 Interface HD（iPad App） iPad上で、iOSパーツを組み合わせて
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！
http://www.mobiledesignpatterngallery.com/mobile-patterns.php
http://smartappscreative.com/iphone/%E3%82%A8%E3%83%AD%E5%BA%83%E5%91%8A%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8Biphone%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E5%A2%97%E3%81%88%E3%81%9F%E7%90%86%E7%94%B1/