iPadならではの特徴的なユーザ行動について (ユーザビリティ実践メモ)
iPadのようなタブレット型のタッチＵＩ端末では、PCでは見られなかった特徴的なユーザ行動が見受けられます。今回は、弊社の調査で見られたiPadにおける特徴的なユーザ行動と、デザイン上のポイントについてご紹介します。 【ポイント１】 ユーザはスクロールが苦ではない 弊社のユーザ調査にて、iPadで画面が切り替わる度にスクロールしてみようと画面をドラッグするユーザがよく見受けられました。ユーザは画面をスクロールしたがる傾向があるようです。 確かにiPad上で画面をスクロールすると、指に吸い付くようにスムーズに画面が動くため、直感的で心地よい感じがします。iPad上での快適なインタラクションは、ユーザにとってポジティブなフィードバックを与え、スクロールも苦になりにくいと考えられます。 情報は極力たくさん並べよう 調査で用いたショッピング用のアプリでは、iPadの縦１画面内におさまるだけの商品し
はてなブックマーク for iPhone 公開！
みんなの関心が作り出す、国内最大規模のソーシャルブックマーク。 「注目の盛り上がり」や「関心事の最新ニュース」を、アプリでも簡単に見つけよう。
iPhoneやiPadにも対応・モニターサイズに合わせて拡大表示するLightbox風jQueryプラグイン
iPhoneやiPadにも対応した、モニター サイズに自動的に合わせて拡大表示 してくれるjQueryプラグイン、Touch- Galleryのご紹介です。Lightbox系の スクリプトは沢山ありますが、こちらも 一つの選択肢として思えておくといつか 役に立つかも、と思ってエントリー。 PCは勿論、iPhoneやiPadでも、そのモニターサイズの幅に合わせてLightbox風にフルスクリーン表示してくれます。特に設定も不要なのは楽で良い感じ。というか、iPhoneやiPad向けに作られたっぽいですね。 Touch-Gallery ↑ モニターのサイズに自動で合わせて拡大表示してくれるjQueryプラグインです。 ↑ PCで見るとこんな感じ。基本的には普通のLightbox系の拡大表示です。 ↑ iPhoneで見てもモニターサイズに合わせて拡大表示します。 ↑ 横にしても自動的に横幅に合わ
iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework
iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。 Less Framework 2 ベースとなるカラムは下記のようになります。 iPhoneなどのモバイルデバイス 320px、2カラム iPadやネットブック 768px、5カラム デスクトップなどのブラウザ 1280px、8カラム 三種類のレイアウトは同じグリッドを使用しており、カラム幅：120px、溝幅：24pxとなっています。 異なる点はカラムとマージンの量です。 レイアウトの変更にはCSS3のMedia Queriesが使用されています。 body {width: 696px;} @media only screen and (max-width: 767px) { body
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
iPad向けのリッチなサイトが超簡単に作成できるフレームワーク「jqpad」:phpspot開発日誌
jqpad - Project Hosting on Google Code iPad向けのリッチなサイトが超簡単に作成できるフレームワーク「jqpad」。 iPad向けのネイティブアプリケーション風のUIでWEBサイトを構築することが容易になります。 iPhone用のiUIのiPad版といったところでしょうか。 こちらのページをiPadで見てみましょう 少しクセがあるみたいですが、使いこなせば１から作るよりははるかに楽に作れそうです。 まだ不備もあるみたいなので今後に期待です。 関連エントリ iPhone向けWebアプリを作ろう これは注目のHTML5を使ったモバイルアプリケーション構築用フレームワーク「Sencha Touch」
デザイナー必見！ポータルのポータル【モバイルデバイス編】
歴代人気記事でも上位の ポータルのポータル。 今回は、iPad・iPhone・携帯サイトなど モバイルデバイスのデザインギャラリーを集めてみました！ それでは続きからどうぞ。 iPad・iPhone Landing Pad ー an iPad App Gallery 綺麗なiPadアプリがたくさん掲載されています。 iOSpirations iPad/iPhoneのアプリやサイトデザインが紹介されています。 ishowcase 国内のiPhone / iPad最適化対応サイトが掲載されています。 iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト 国内/海外のiPhoneサイトがたくさん掲載されています。 mobile AWESOMENESS 綺麗なモバイルデザインがたくさん。 Web Design Inspiration for the iPhone iPhoneに
blog｜解像度に依存しないモバイルユーザーインターフェース(2010/08/24) | Ext Japan Blog
この記事は8/23に掲載された「Resolution Independent Mobile UI」を訳したものです …または… ピクセルはピクセルじゃないんです。 「SASSとCSS3のメリット（the benefits of SASS and CSS3）」（英語、未訳）という記事の中で、解像度に依存しないユーザーインターフェースを実現するためにSencha Touch内で活用しているテクニックについて簡単に解説しました。今回の記事では、読者がUI開発を行う際に役に立つように、そのテクニックについてもう少し詳しく解説してみたいと思います。 概要 この記事はアダプティブなレイアウトや、レスポンスの良いWebデザインについてのものではありません。この記事は、デザイナーにとって比較的新しい関心事となった、「ピクセル密度」に注目したものです。モバイル環境において、画面の解像度は急速に進化しています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ワイヤーフレームやユーザーインターフェイスのデザイン用のフリーの素材集
iPadで気になるサイトがどう見えるか確認できる『iPad Peek』 | 100SHIKI