>  > 【ラッキーシール対応】【Project μ/プロジェクト・ミュー】 p.muCOMP-B for GYMKHANA ブレーキパッド リア 一台分 R176

for 一台分 GYMKHANA 一台分 μ/プロジェクト・ミュー】 リア ブレーキパッド ブレーキパッド R176 p.muCOMP-B 【ラッキーシール対応】【Project

【レガシィB4 ブレーキローター】Brembo BLE 03/09~09/05 フロント用 09.A870.10 カーマット 荷室用 ホンダ ステップワゴン/スパーダ 27年4~ ラゲッジマット/3列目格納時-ECOグレー

【ラッキーシール対応】【Project μ/プロジェクト・ミュー】 p.muCOMP-B for GYMKHANA ブレーキパッド リア 一台分 R176

上野 学
2013年4月10日

スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。

タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に ヘッドレストモニター 日産 キャラバン マイナー後 E25 車載用 9インチ カーモニター 【2個入り】 タッチ操作 日立製液晶WSVGA 1024x600 レザー/モケット素材 1年保証 送料無料、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。

パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。

またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。

ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。

【ラッキーシール対応】【Project μ/プロジェクト・ミュー】 p.muCOMP-B for GYMKHANA ブレーキパッド 175/65R15 リア 一台分 フロアマット R176

そこで必然的に、パソコンあるいはフィーチャーフォン向けのアプリやウェブページよりも、タッチ向けのデザインではUI要素を心持ち大きめに作ることになります。

ではどのぐらい大きく作ればよいのでしょうか。

タッチ操作においてユーザーが十分に指でタップできる最小面積のサイズについては、いくつかの研究やガイドラインがあります。結論は少しずつ違うようですが、だいたい 7mm 〜 10mm 四方あればよいとされているようです。

(参考:Touch Target Sizes – Luke Wroblewski

7mm 〜 10mm をピクセル数にするといくつになるのか。これは一概に答えられません。スマートフォンやタブレットは機種ごとに画面のピクセル密度が大きく異なるので、同じピクセル数のボタンでも実際に画面上に見える大きさはまちまちだからです。

ですからモバイルデバイス向けのUIをデザインする際は、できるだけターゲット機種でプロトタイプを表示してみて、コントロールのサイズ感をよく確認する必要があります。

iOS における44ポイント

現在、様々なモバイルデバイスが出回っているものの、Apple の iPhone と iPad はスクリーンサイズや解像度のバリエーションが比較的限定されており、またユーザーベースも大きいので、UI要素のサイズについて検証する上では手がかりにしやすいと言えます。

iOS ヒューマンインターフェイス ガイドライン(PDF – 27.5MB)では、タッチ対象となるコントロールの最低限のサイズを、44 x 44 ポイントとしています。これは実測にすると、iPhone や iPad mini では約 7mm 四方、iPad では約 9mm 四方となります。

iOS の標準UIコンポーネントはこの指針にもとづき、多くの部品が44ポイントでできているので、これらを使ってアプリを実装する場合、デザイナーはコントロールのサイズについて特に気にしなくても自然にガイドラインにそったものになります。


ナビゲーションバーの高さやテーブルセルの高さは44ポイント

ヒットエリアの拡張

iOS の標準コンポーネントでは、ところどころに、ヒットエリア(タッチに反応する領域)の拡張も施されています。

今回はそれを検証するために、iOS シミュレーターやスタイラスを使って計測してみました。

例えば、標準的なナビゲーションバーのボタンでは、下の図のように、ボタン自体の大きさよりもかなり広い範囲がヒットエリアになっています。これにより キャラバン用 スイツチアッセンブリーコンビネーシヨンNV350キャラバン 25560-3XA1E 日産純正部品、正確にボタンの上をタップしなくても、だいたいの位置に触れればボタンを押したことになります。


ナビゲーションバーのボタンはヒットエリアが大きく設定されている

特に左側のボタンのヒットエリアが広くなっているのは、ラベルによってボタンのサイズが変わってもよいように余裕をもたせているのか、それとも頻繁にタップされるので優先度を上げているのか。

また、ナビゲーションバーの下辺を超えてさらに下までヒットエリアが広がっているのも興味深いところです。

なお、自分で単にボタンをビューに置いただけのような場合は、ヒットエリアはボタン自体のサイズのままです。その場合、ヒットエリアを広げたければタッチへの反応処理(hittest)を変更する必要があります。

キーボードの動的なサイズ変化

iPhone のキーボードは、タイピングの途中で、各キーのヒットエリアが変化すると言われています。では実際にどの程度変化するのでしょうか。

iOS は SAMCO■サムコ 受注生産品1.5~2ヵ月 【品番:40TCS398/C】 クーラントホースキット ホンダ シビックタイプR FN2 K20Z、ユーザーが一文字タイプするたびに、次に来る文字を予測し、キーごとに重み付けをするそうです。そして次に打たれる可能性が高いキーのヒットエリアを広げ、タイプミスが起きにくくしているといいます。

詳しい重み付けの条件は分かりませんが、おおよそ、辞書にある単語にマッチする文字のキーは大きくなり、そうでない文字のキーは通常のまま、あるいは隣接するキーが大きくなっていればその分小さくなるようです。

一般的な英単語の性質上、母音を打った直後は子音のキーが大きく、子音を打った直後は母音のキーが大きくなります。

まず、iPhone をポートレート表示(縦位置)にした場合、QWERTY キーボードのキーの幅は、

【ラッキーシール対応】【Project μ/プロジェクト・ミュー】 p.muCOMP-B for GYMKHANA ブレーキパッド リア 一台分 R176激安海外通販!


KONI Sports [500 312 1.2・1.4・1.3Multijet・1.4 Abalth カブリオレ及びツインエア85にも対応] KONIショックアブソーバー 代引き手数料無料&送料無料


【ラッキーシール対応】【Project μ/プロジェクト・ミュー】 p.muCOMP-B for GYMKHANA ブレーキパッド リア 一台分 R176 【SSR】 EXECUTOR EX02 (エグゼキューター EX02) 19インチ 8.0J PCD:114.3 穴数:5 inset:46 ブラッシュド [ホイール1本単位] [H]

↓↓↓CRIMSON(クリムソン) CLUB LINEA L747S (クラブリネア L747S) 19インチ 9.5J PCD:120 穴数:5 inset:15 DISK TYPE:HIGH カラー:プレミアムホワイトポリッシュ [ホイール1本単位]/H;日本緑十字社 ソフトチェッカーマット S グレー 32枚 2平方m 1組 受注生産 メーカー直送品 296054;OGK(オージーケー) フルフェイスヘルメット KAMUI(カムイ)・2 クレガント (フラットブラックレッド/S(55~56cm)), ベンツ W163 AT ミッションエレクトリックプレート(オートマミッション基盤) 722.6系 電子制御式5速AT用 1402700761 ML270CDI ML320 ML350 ML430 ML55AMG【】, 【送料無料 N-BOX タントカスタム ワゴンR】 155/65R14 14インチ DUNLOP ダンロップ PRD TS7 4.5J 4.50-14 DUNLOP ダンロップ エナセーブ RV504 SALE サマータイヤ ホイール4本セット フジコーポレーション, 【受注生産】【グレイス Grace】アルファードハイブリッド (7人乗) 等にお勧め ネクストライン プレーン シートカバー 1台分 スタンダードバージョン 専用PVCレザー 型式等:ATH10W 品番:CS-T040-F, HKS エッチ・ケー・エス SUPER FIRE RACING M35G 4本セット Alfa Romeo 155 E-167A2E 67.203 95/8~98/4 Gタイプ NGK7番相当 プラグ;【4本セット】YOKOHAMA (ヨコハマ)S.drive AS01 205/50R15 86V サマータイヤ エス・ドライブ [RS-R]GG7 フィットシャトル用(15X)ダウンサス↓↓↓15インチ サマータイヤ セット【セレナ(C27系 4WD)】MANARAY ユーロスピード V25 メタリックグレー 6.0Jx15エナセーブ RV504 195/65R15, YOKOHAMA スタッドレス ice GUARD6 IG60 235/50R18 &VELVA IGOR 18 x 7.5 114.3/5H + 38 アルファード GGH35W, 245/60R20 107Q BLIZZAK DM-V2 ブリヂストン ブリザック DMV2 《新品》, RSR ダウンサス クラウン JZS151 フロント2本 新品 RS-R T245DF, RSR ダウンサス カローラランクス ZZE123 フロント2本 新品 RS-R T035DF


↓↓↓↓↓↓


↓↓↓↓↓↓

HKS Stainless Center Pipe 日産 ニッサン フェアレディZ Z33用 (33004-AN001)【マフラー】【自動車パーツ】エッチケーエス ステンレスセンターパイプ【送付先が車関連の法人様のみの対応】, 15インチ サマータイヤ セット【適応車種:パッソ(30系)】WEDS ウェッズスポーツ SA-54R ウォースブラッククリア 6.0Jx15LEMANS V LM5 185/55R15, ☆トーヨー ナノエナジー3 プラスTOYO ナノエナジー3 PLUS 205/55R16 91V 4本セット, Gクラフト スタンダードスイングアーム モノショックタイプ スタンダードホイール スタビ付 16cmロング 90013 HD店, VW BEETLE 1.6/2.0 9CBFS/9CAZJ/9CAQY/1YAZJ リアディスクローター(1353034[即納

【送料無料 NV350キャラバン】 195/80R15 15インチ BIGWAY ビッグウエイ B-WIN MD-6 6J 6.00-15 YOKOHAMA ヨコハマ ジオランダー H/T G056 サマータイヤ ホイール4本セット【YOsum18】;【送料無料】 265/70R16 16インチ WEDS ウェッズ キーラー フォース 8J 8.00-16 DUNLOP ダンロップ グラントレック PT3 サマータイヤ ホイール4本セット ストラーダ K74T 送料無料 ヘッドレストモニター 高解析度 WXGA+ 1366×768 X-LCD 1366x768 8インチ 配線付 タッチパネル操作 デジタルワイド液晶採用 レザー カーモニター ブラック 1年保証【2個入り】 DIGICAM[デジキャン]輸入車専用ワイドトレッドスペーサーP.C.D100/112 10H M14 15mm(ハブ付き);ブリヂストン PORENZA ポテンザ RE-71R サマータイヤ 215/45R18 HotStuff 軽量設計!G.speed P-03 ホイールセット 4本 18インチ 18 X 7.5 +48 5穴 114.3

17【アリオン(260系)】MANARAY ユーロスピード V25 ブラックポリッシュ 7.0Jx17ヨコハマ エコス ES31 215/45R17;16インチ サマータイヤ セット【適応車種:エスティマ(30、40系)】A-TECH シュナイダー SQ27 メタリックブラック 6.5Jx16RADAR Rivera Pro 2 215/60R16

、26ポイントとかなり小さく、ガイドラインの44ポイントを満たしていません。


キーボードのキーの幅は26ポイント

通常のヒットエリアは、隣のキーとの間の空間も含むので、幅32ポイントです。これでもやはり44ポイントを満たしていません。


キーの通常のヒットエリアの幅は32ポイント

そこで、「WORLD」という単語を打つつもりで、W O R L までをタイプします。英単語としては、次に来る文字は「D」である可能性が圧倒的に高いはずで、そして D キーの両脇の S や F が来る可能性はほとんどないでしょう。ということは、D キーのヒットエリアが広くなっているはずです。

その状態で、シミュレーター上で調べたところ、次のようにヒットエリアが広がっているのが分かりました。


キーのヒットエリアが広がった状態

通常よりも、左右に6ポイントずつ広がり、隣のキーの途中まで及んでいます。ヒットエリアの幅は44ポイントに達しています。また上下も8ポイントずつ広がっていました。

ブラウザの当たり判定

次に、ブラウザ(Safari / Mobile WebKit)における当たり判定を見てみます。

まず下図のように、30 x 20 px のボタンをいくつか配置したウェブページを initial-scale=1.0(原寸)でブラウザに表示します。


ブラウザにいくつかのボタンを表示した状態

A, B, C, D のボタンはどれも 30 x 20 px なので、ガイドラインの44ポイント(ウェブではピクセル)を満たしておらず、タップするには小さすぎると思われます。

この状態で、ボタンのヒットエリアがどうなっているか調べたところ、次のようになっていました。


ブラウザにおけるヒットエリア

A ボタンは、周囲に他にタップ可能な要素がないため、十分にヒットエリアが広がっていました。
上と左に 16px ずつ、右と下に 14px ずつ。ボタン自体の面積と合わせて、60 x 50 px となり、44ポイントを満たしています。

つまり(あくまで目安ではあるものの)ボタン自体が小さくても周囲にタップ可能な要素がなければ、これぐらいのサイズのボタンやリンクはけっこう普通にタップできるということです。

一方、B, C, D は 10px の間隔で隣接しているため、ヒットエリアを広く確保できていません。
特に中央の C ボタンは左右にヒットエリアが広がらず、幅40px分しかありません。

このように、同じサイズのボタンを並べた場合でも、その位置関係によって、タップしやすいものとしにくいものが生まれるということです。

ですから、スマートフォン向けのウェブページをデザインする際には、ボタンやリンクの単体のサイズだけでなく、並べ方や配置位置についても注意して、重要度の高いものが意図せずタップしにくくなってしまうことがないように気をつけなければいけません。

では次に、同じページを initial-scale=0.5 で表示してみます。
するとこのように見えます。


半分のサイズにページを縮小表示した状態

原寸の半分のサイズでページが表示されるため、A, B, C, D のボタンは 15 x 10 px になります。
この状態でのヒットエリアはどうなっているでしょうか。


縮小してもヒットエリアの拡張サイズは原寸表示時と同じ

面白いことに ステージア M35,NM35(TB) 前期 KBマフラーシリーズ KB-TRAIBAL(ケービー・トライバル) 【ハーフステン/片出し】 K-BREAK/ケイブレイク、表示サイズが半分になっても、ヒットエリアの拡張サイズは変わりませんでした。
ボタンの上と左に 16px ずつ、右と下に 14px ずつヒットエリアが拡張されています。ヒットエリアの拡張サイズは表示スケールに関係ないようです。

つまり、A ボタンについては、表示サイズはわずか 15 x 10 px でありながら、実際には 45 x 40 px のヒットエリアがあるため、だいたいガイドラインを満たしたサイズであり、意外と普通にタップできます。

しかし C に関してはヒットエリアの幅が 20px しかなく、かなりタップしずらくなっています。

タッチポイントのシフト

ここまでは ダイハツ ブーン M310S 04/05~10/02 DIXCEL(ディクセル) ブレーキローター FPタイプ フロント用 左右セット ブレーキディスク ディスクローター 3818013S ブーン ディクセル ローター、ヒットエリアについてでしたが、iOS の内部ではもうひとつ、タッチポイントのシフトが行われていると言われています。

タッチポイントのシフトとは 、スクリーンに触れた指の実際の場所よりも、少しずらした座標を入力値として受け取るという工夫です。

ユーザーが画面上のターゲットにタッチする時、多くの場合、ターゲットの実際の座標よりも少し下に指の接触点がくるという傾向から、その分タッチポイントを上にずらして認識することで、ユーザーは自分が意図したとおりにオブジェクトにタッチできたと感じるということのようです。

(参考:iPhone/iPadに込められた「見えないデザイン」 – 日経BPネット

ではどのぐらいタッチポイントはシフトしているのでしょうか。

この検証は次のように行いました。

  1. まず、32ポイント間隔のグリッドを敷いた画像を用意する。
  2. それを iPhone 5 に入れて、お絵描きアプリ(Adobe Ideas)で背景画像として開く。
  3. 先端の細いスタイラス(Jot Pro)を使って、できるだけ正確に、グリッドの交差点の上をタッチして赤いマーカーを付ける。

これで、画面にタッチした座標(グリッドの交差点)と、入力値として受け取られた座標(赤いマーカー)とのギャップを見ることができます。

すると結果は次の図のようになりました。


32ポイント間隔のグリッドにそってタッチした際のタッチポイントのシフトの状態

面白いのは、スクリーン上の場所によって、シフトの量や方向が違う点です。
下部中央を中心に、そこから離れるほど、放射状にシフトが大きくなっていくのが分かります。
スクリーンの最上部では、16ポイントほども上方向にシフトしています。

iPhone を操作するユーザーは、スクリーンを正面から見ているのではなく、下の方から斜めに見ている、という前提でチューニングされているのでしょう。

これは、例えばスタイラスを使ってイラストを描くような作業では、かなりおかしなことになりそうです。
やはり指で操作することが前提になっているようです。

このタッチポイントのシフトを実感できるのは、人と対面で話している時などに自分の iPhone を相手に向けて置いて操作をする時です。
そういう状況では、タッチポイントのシフトが逆方向に効いてしまうので、思った場所をなかなかタップできないということになります。

今回は iPhone で検証しましたが、スクリーンの大きい iPad ではシフトの度合いが異なるかもしれません。
また、Android の各機種でこのあたりがどのようにチューニングされているのかも知りたいところです。

以上、iPhone の当たり判定に関する検証でした。

モバイルデバイスの操作性を高める上では、タッチに対するUIの反応を慎重にデザインする必要があります。
その際、OS や標準コンポーネントの特性を知っておくことで、

【ラッキーシール対応】【Project μ/プロジェクト・ミュー】 p.muCOMP-B for GYMKHANA ブレーキパッド リア 一台分 R176

、アプリやウェブを一層洗練させることができると考えています。

関連ページ

{yahoojp}jpprem01-zenjp40-wl-zd-35269