viewportの動作検証（iPhoneのみ）
描写のプロセス initial-scaleを指定した場合 初期値補充：viewport width = 0（viewport height = 0）（それぞれ指定がない場合） 表示域を算出：表示域 = ウィンドウサイズ / initial-scale ドキュメントサイズ決定：表示域・コンテンツサイズ・viewportの中で最大の値 描写：決定したドキュメントサイズとinitial-scaleで描写 initial-scaleを指定しない場合 初期値補充：viewport width = 980px, viewport height = 1091px（それぞれ指定がない場合） ドキュメントサイズ決定：コンテンツとviewportで大きい方の値 倍率算出：ドキュメントがウィンドウ内にぴったり収まるようにinitial-scaleを計算（縦と横で大きい方のinitial-scaleを適用） 描写
スマホUI考3 ～ ジェスチャ入力について | fladdict
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
30 Beautiful iPhone Application Websites - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
スマホのUI考２ 〜 フィードバックについて | fladdict
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
iPhoneアプリ設計の極意
TOPICS Mobile 発行年月日 2011年06月 PRINT LENGTH 320 ISBN 978-4-87311-502-3 原書 Tapworthy FORMAT PDF おもしろいiPhoneアプリのアイデアが思いついたとしてもカタチにできなければ意味がありません。ただ単にカタチにしただけでは他のアプリと差別化できません。App Storeという巨大な市場で成功するためには、洗練されたデザインと効果的なユーザビリティをもつ個性的なアプリにする必要があります。本書では初期段階の構想から磨きぬかれたインタフェースをつくり出す方法を、端的で明解な原則と豊富な例で解説します。Facebook、USA Today、Twitterrificといった秀逸なUIをもつiPhoneアプリの開発舞台裏を知り、思わずタップしたくなるアプリを作成するためにデザイン、心理、文化、人間工学、ユーザビリ
Viewport [iPhone生活]
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ（サイズ） HTMLに設置したコンテンツのサイズ ドキュメント（サイズ） 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプトWebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titanium
iPhone アプリと Web デザイン Part.5 - soundscapeout (仮)
「iPhone アプリと Web デザイン」第５弾です。 今回もちょっと多めなので、２日に分けて淡々と紹介します。 過去に紹介したものについては、 iPhone アプリと Web デザイン iPhone アプリと Web デザイン Part.2 iPhone アプリと Web デザイン Part.3 iPhone アプリと Web デザイン Part.4 をチェックしてみてください。 Diacarta Diacarta Tourist Tourist, The WikiTravel iPhone App Light-O-Matic Light-O-Matic: The Awesome LED Flashlight App for iPhone 4 Typoclock Typoclock | Design Clock & Alarm for iPhone StringMania String
Mobile App Gallery｜tappgala.com
Mobile App Galleryは各種アプリのデザインギャラリーサイトです。カテゴリごと、色ごとに分けて分かりやすく表示しています。
もし日本のメーカーが iPhone を発売していたら..
iPhoneは会社から支給されて使っていますが、非常に使い勝手がいいです。 ただ、これでは、いまほど欲しくならないことはたしかですね。 他の機種と同じ土俵の上に上がってしまっているので、「なんかいろいろ機能がごてごて付いてる中の携帯の一つ」というところでしょう。 つまり、「売れるモノも売れなくなる」、「売り方次第」ということを今更ながら思い知らされました。
iPhone アプリと Web デザイン Part.3 - soundscapeout (仮)
「iPhone アプリと Web デザイン」というタイトルで、淡々と美しいサイトを紹介していくシリーズ。 今回は３回目なのですが、数が多かったので、Part.4 もすぐにアップする予定です。 iPhone アプリと Web デザイン Part.1 iPhone アプリと Web デザイン Part.2 もあわせてチェックしてみてください。 Wallpaper* City Guides Wallpaper* City Guides | Phaidon Store Pro Football News IndyStar.com | Indianapolis Colts iPhone Application | The Indianapolis Star Currencies Currencies - Currency conversion with style! Flickit Pro Flic
AppleタブレットのUIはズバリこうなる！（動画＆予想図）
AppleタブレットのUIはズバリこうなる！（動画＆予想図）2010.01.26 23:00 satomi ｢タブレットはMac OS XのUIがいいな｣という声、｢今までにないエキゾチックなUIになるよ｣という声、どちらも間違い。Appleタブレットは単に、iPhoneで始まったUI革命の第2ステップです。 ここでは、その理由を並べてみましょう。 ハードウェアの話なら、いくらでも予想が立ちますが、ことUIに関しては3派に分かれて、三つ巴の戦いになってます。 ひとつ目は、タブレットもGUI（ウィンドウ、フォルダ、昔ながらのデスクトップのメタファー）しかないと思ってる人たち。あのWindowsタブレットや最近のタッチ対応ノートみたいな。 ふたつ目は、アップルのことだから3Dインターフェイスとかなんか実験的なこと、誰も想像もつかないインターフェイスを用意してるんじゃないか、という夢追い派。愛と
北欧のデザイナー企業、iPhoneの超カッチョいいUIを提唱（動画）
北欧のデザイナー企業、iPhoneの超カッチョいいUIを提唱（動画）2009.10.20 18:00 タブレットで悩むよりも、iPhoneでがんばってほしいよね... せっかくMac OS XがベースのiPhone OSなんですから、Exposéのホームスクリーン整列だってアリなんだと思いますよ。増えまくったアプリの起動に、もう何度も指をフリックして動かしまくる必要がなくなりますから。使いようによっては、Spotlightでアプリランチャーなんて起動方法よりは快適かもしれません。ついでにウンとアプリを同時起動して並べてみたいものですよね...。 北欧はスウェーデンから数々の秀逸なデザインでモバイルアプリケーションを世に送り出してきたOcean Observationsからは、もう1つのiPhone向け新ユーザーインターフェース（UI）コンセプトデザインといたしまして、こちらのCover F
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-eblog.com
rottel.net
Web Design & CSS Inspiration for the iPhone — CSS iPhone
【Ktai】PCやiPhoneで携帯のレイアウトを模倣するTips | ECWorks Blog