Blog

iPhone6とUI(ユーザインターフェイス)デザイン

Penseur

2014.09.08

Xile

9月9日(日本時間10日)にiPhone6が発表されると噂され、リーク情報からは画面の大きさが現在のiPhone5の4インチから4.7インチ・5.5インチの2種類になると言われています(4インチも残りそうではありますが)。



左から、今の4インチ、新型・4.7インチ、5.5インチ、iPad miniです。 参照元 MacRumors

 

 

実際に発売されてからシェア率がどの様に推移していくかにもよりますが、画面の大きさは我々制作会社にはスマホ向けのサイトやアプリの画面設計をする上で重要な要素になり、特に気を付けなければいけないのが、ターゲットによってUIデザインは異なるということです。

スマホの持ち方・操作方法は大きく以下の3種類に分類されます。

  1. 片手で持ち、持っている手の親指で操作。

  2. 利き手ではない方の手で持ち(または平らな場所にデバイスを置いて)、利き手の指で操作。

  3. 両手で挟むように持ち、両方の親指で操作。


尚、アップルからは人間工学に基づいた資料も配布しています。

iOS ヒューマン インターフェイス ガイドライン
iOS 7向けの設計

 

 

画面の大きさごとに考察すると

現状のiPhone(4インチ以下)


①の片手持ちのユーザが多いのではないでしょうか。※ただ、女性や若年層は手の大きさ的にも両手持ちの割合が増えます。

片手持ち親指操作の中でも、利き手で持つか、逆手で持つかにも分類されます。

調査の結果、20代は利き手で持ち、30代以上は逆手で持つ傾向が強いようです。

※理由としては昔、電話といえば家の固定電話で、受話器を逆手で持ち、利き腕でダイヤルしていたことが大きいのではないでしょうか。

共通して言えることは、

  • 操作する親指の動かしやすい範囲にボタンを配置する。

  • 画面上部は操作する指で隠れないので特に重要。


今後、大型ディスプレイのシェアが拡大した場合


②や③の両手操作の比率が高まり、タブレットサイトに近い感覚になると考えられます。

タブレットサイト制作では特に以下の項目に着目

  • 両手持ちの場合は、画面上部に指が届きにくい。

  • ユーザの使用シーンを良く想像し、ポートレートモード(縦画面)、ランドスケープモード(横画面)を更に意識する。

  • ECサイトでは商品画像を大きくするだけでコンバージョンを数%上げることが可能。


などが挙げられます。

 

まだ、発表もされていない内からこんな妄想をしてますが、9/10が待ち遠しいです!