mixiアプリ for touchを考える (4.5)【デザイン】

デザイン iPhone

前回のエントリーのデザイン周りの補足。
ちょっとより突っ込んだニッチな情報です。

iPhone固有のおはなし

フォント


iPhoneには嬉しいことにMac OS Xと同様にヒラギノがインストールされてます。
特に何も指定しなければ日本語は全てヒラギノ角ゴで表示されます。
ただ、残念ながらウェイトがW3とW6の二種類。せめてW8も欲しかった。。。
Helvetica／Futura／Times／Georgiaといった定番の英文フォントも入っているので、英字コンテンツの場合は積極的に利用したい。
こちらのサイトでiPhoneの搭載フォント一覧が紹介されてます。iPhoneフォントの一覧画像 - 小酒井輝の断片2

また、TypefacesというiPhoneアプリでインストールされているフォントの一覧を確認できます。日本語のフォントもcssで指定する際は全て「HiraKakuProN-W3」の様に英語名で指定します。
これ、Safari（webkit系）の独自仕様なのでお気をつけください。

Android固有のおはなし

解像度とスクロールバー

もしかしたらXPERIAのみかもしれないですが。
XPERIAの横の解像度は480ピクセル。しかしコンテンツ幅を480ピクセルで指定する、なぜか横に少しあぷれている状態になり横にスクロールがわずかにできてしまう状態に。
んーと思って調べてみると、どうやらスクロールバーの幅はWebの描画ができないようです。ふぁっくだネ！

これはモバイルのコーディングをしている方にはauでよくある現象。
auは240ピクセルの画像を配置すると勝手にスクロールバーの分縮小しやがりましたが、XPERIAの場合は横スクロールが発生するということに。まだauの方がましや。

弊社のフレームワークではユーザーエージェントから振り分けることもできるのようになっているのですが、どうもmixi Touchがこのスクロールバー問題に対応してません。
つまりはそのmixi Touchのフレーム内で展開されるアプリでいかに対応をしても無意味、と。
だもんで気にしないでいきましょう。頭の片隅に置いておく程度で。

共通のおはなし

操作方法

スマートフォンを使うときってどっちの手でどうやって操作してます？

  • 両手派
    • 左手で持って右手人差し指で操作
    • 右手で持って左手人差し指で操作
    • 両手で持って両手親指で操作
  • 片手派
    • 左手で持って左親指で操作
    • 右手で持って右親指で操作

ぱっと思いつくのはこんなもん。社内で聞いてみたところ結構みんなバラバラでした。右利きでも案外「左手で持って左親指で操作」派もいましたね。


ただ共通して考えたいのは、画面の下の方から指を出して操作しているということ。つまり画面上の方のボタンを押すと、絶対に自分の手で下の方のコンテンツは隠れてしまいます。
だからiPhoneのタブバー（前回エントリー参照）は画面下に張り付いているんだな。とはいえmixiアプリ for Touchの場合、下に張り付きのタブバーを作りにくい事情があるのも前回のエントリー通り。


そう考えると右端 or 左端にメニューを持ってくるのも無しではないと思います。
図はポータルサイトexciteのiPhone版Web。左側にメニューリンクを縦に並べています。

これだと「右手で持って左手人差し指で操作」派、「両手で持って両手親指で操作」派、「左手で持って左親指で操作」派の場合は、右側の切り替わるコンテンツが自分の手で隠れることはありません。
もちろん右手で操作派の人はコンテンツ隠れちゃいますが、どうせ上だとみんな隠れてしまうので、少しでも救われる方法を選ぶのも一つ。

今回のみんなでケンテイ(´∀｀)では採用しませんでしたが選択肢の一つしてはよさげです。