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

デザイン iPhone

さて、前回のエントリーで色んな制限を学んだので、ようやくデザインに入ります。


今回デザインするみんなでケンテイ(´∀｀)は、モバイル版／PC版共に提供をしていますが、PC版を見ていただくとわかるように、モバイル版を力いっぱい流用したデザインです。決して手抜きじゃないよ

なので「PC版／モバイル版、どっちを参考にする？」という悩みは無いのですが、基本的にはもし両方のデザインが既にあるのならば、PC版のデザイン＋モバイル版のレイアウトが無難ではないでしょうか。

みんなでケンテイ(´∀｀)は、基本的にテキストコンテンツの

  • リスト（一覧）表示
  • 回答フォーム
  • 結果表示

で構成されており、iPhone標準アプリの「連絡先」のような構成です。



ただ、「連絡先」で利用されている「A simple list in a plain table view（プレーンテーブル）」（iPhone ヒューマン インターフェイス ガイドライン参照）は、基本的に画面いっぱいを占領してしまうため、ロゴ等を掲載するスペースが一切ない、かつみんなでケンテイ(´∀｀)で見られるような、複数項目のリストを一画面に収めるためのUIではありません。



そこで「設定」アプリで見られる「A grouped list in a grouped
table view（グループ化テーブル）」というグループ化されたTableスタイルを基準として考えます。

グループ化されたTable Viewは任意の数のグ ループを含むことができ、各グループは任意の数の行を含むことができます。各グループの先頭に はヘッダテキストを付けることができ、フッタテキストを後に付けることができます。
（参照：iPhone ヒューマン インターフェイス ガイドライン）

とあるように、グループ化した複数のリストを1ページ内で同居させるためのUIです。うん、みんなでケンテイ(´∀｀)向きだね。



あと、一番今回デザインをする上で一番悩んだのが、いわゆるグローバルナビゲーションの処理。
Webサービスでは上の方に配置するのがセオリーですが、iPhoneやAndroidのネイティブアプリでは、「タブバー」（図 枠線部）と呼ばれるもの常に下に張り付き、同様の動きをはたしています。
このタブバーはコンテンツをスクロールしても動きません。
Webでいうcssの{position:fixed;bottom:0;}の状態です。

技術的な問題でも結構実は難解なのですが、それ以上に「グローバルナビ」として利用しようとすると、必ずファーストビューに収まることは必須！
そのためには前回のエントリーで書いたmixiアプリ for Touchのファーストビュー、320ピクセル×317ピクセルにタブバーを収める必要があります。

参考までにiPhone標準アプリのタブバーの高さは49ピクセル。
そうなるとmixiヘッダーを除いた実質的アプリファーストビューは、iPhoneの場合、縦表示だと320ピクセル×268ピクセル、ランドスケープモードにしちゃうと480ピクセル×120ピクセル。120ピクセルってっおい！
てなわけでタブバーの表示は断念。



その後も色々とゴニョゴニョしながら作ったデザインがこちら
グローバルナビゲーションはWebでは一般的なタブ表示。iPhoneライクなタブバーのデザインも考えたんですが、みんなでケンテイ(´∀｀)はポップなアプリなので空気読んでかわいめの角丸タブ。
また、またグループ化テーブルも、よりポップにするために枠を増やしたり色を変えたりアイコンつけたりゴニョゴニョ。でもリスト表示やリンクがあるものには「>」を付けるなど、最低限のセオリーは守れば、案外「っぽい」ものはできるものです。

ちなみにこれは実機でテストして初めて感じたことですが、iPhone／Android端末は思いのほかフリックでのスクロールが快適で、長いページ（1000ピクセル超）のページでもストレスを感じないということ。
代わりにファーストビュー以降のコンテンツは流し読みをしてしまうために、かなり目に止まりにく印象を受けます。ぶっちゃけファーストビュー以降はもう一番下のコンテンツまであまり順位付けが変わらないんじゃないか、つまりは「見て欲しい」順番に並べても効果が薄いという懸念が。

そこでフリックしてスクロールしながらも、少しはブレークポイントになって欲しいと思い、コンテンツの枠の色を随時変更したりしています。

一番下に上部と同じグローバルナビのタブを配置したのも、あっという間に斜め読みしてスクロールしきってしまったユーザーへの配慮です。

ただ、これでもまだコンテンツに目を留めるという施策にはなってないのかなぁ。まだまだUIの検討は続けていきますが今日はここまで。

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

デザイン mixi

前回のエントリーで「iPhoneっぽい」UIをつくろうということで方向性は決めました。
なので、さっそく楽しいデザイン作業！の前に、、
スマートフォンならでは、mixiアプリ for Touchならではの、デザイン上の制限を先に調べます。

解像度の問題

iPhoneの場合

iPhone用のWebサイト制作本なんかを見ますと、「ステータスバー（電波状況や時刻の出ているバー」、「ボタンバー（Safariブラウジング時に「進む」「戻る」ボタンを表示しているバー）」を除いて320ピクセル×416ピクセル、場合によってはURLテキストフィールドを含めて320ピクセル×356ピクセルと書かれています。

しかしmixiアプリ for Touchはそんなに優しくありません。その中にさらにmixi先生のヘッダーが入ります。
そうなると右の通り、320ピクセル×317ピクセルと、とうとうほぼ正方形になります。
URLテキストフィールドが表示されている場合はもう横長の長方形です。これがいわゆるファーストビュー。
結構狭いですね。

んで、ここでお気づきの方もいるかと思いますが、従来比2倍解像度をほこるRetinaディズプレイを積んだiPhone4。

基本的にはほうっておけば勝手に画像などはiPhone 3GSで表示できるるようにしておけば、勝手にiPhone 4の側で拡大してキレイに表示してくれば。なので、とりあえずは気にしないでOK。

余計なもんを出してくれたもんだと思いつつも、こちらの詳細対応はまた別のエントリーで。

縦横の問題

iPhone／Android共に「ランドスケープモード」という、横に傾けて横長のモードがあります。
残念ながらWebブラウザベースだとネイティブアプリとは違い「必ず縦表示かつ回転はしない」などの制御はできません。
なので基本的には横幅が広くなっても問題のないリキッドデザインにしておくのが鉄則。
デザインによっては縦：1カラム／横：2カラムみたいな切り替えをしてみてもいいかもです。

ちなみにXperiaは横にすると854ピクセルもありますが、実はmixi Touchは、cssで480ピクセル以上には広がらないようになっています。（それ以上の分は余白が空くだけ）
そのためアプリのコンテンツの最大幅は480ピクセルとなります。
mixiが今後仕様変更を行わないとは限りませんが、とりあえず当面は横幅は最大で480ピクセルまでを想定しておきましょう。

ただ、前述の解像度の項での通り、mixiのヘッダーも加算すると、iPhoneの場合右記の通り480ピクセル×169ピクセルと、極端に縦が短くなってしまい、これを前提とするデザインってかなり難しい。個人的にはランドスケープモードは無視の方向で考えます。


発色の問題

iPhoneの場合

Android端末よりは端末数が限られていますが、やっぱりiPhone 3GSとiPhone4では発色の仕方が激しく違う。
どっちに合わせるかは好みで。ただ、一つだけ重要なのは携帯電話なので当然外で太陽の下でも見るということ。
淡い色の組み合わせは認識できない可能性があるため、コントラストは若干強めの配色が良いかもです。
あとmixiのヘッダーはせっかく淡い色で作ってくれています。
それに同化してしまうよりも、きちっと「ここからがアプリ」ということがわかるようなデザインがおすすめ。

開発環境について

iPhone Android mixi

サーバーサイドのことはわからんので、mixiアプリ for TouchのUI周り（デザイン／コーディング）を制作するときに揃えた環境をちらほら

絶対必要

mixiデベロッパーアカウント

言うまでもなく基本です。ただ、モバイル版と同様、法人のアカウントでないと、公開ができない可能性はあります。

Safari

ご存知webkitベースのブラウザ、Safari。同じwebkitベースのGoogle Chromeでも、、と思われるかもですが、CSS3の対応状況等がやはりSafariの法が進んでいてよりiPhoneに近いです。
「開発」モードをONにすれば、ユーザーエージェントをiPhoneに変更できるようになります。（参考：Webアプリ開発環境としてのSafariを知ってますか？）
これでmixi Touchにもアクセスできるし、各iPhoneサイトのソースを読めるようになるので、モバイル版よりもかなり開発の助けになります。
ちなみにWindows版Safariを使う場合は「設定」→「表示タブ」から「フォントの滑らかさ」を「弱」か「中」に設定しておくと、文字にアンチエイリアスが効くのでよりiPhoneっぽいです。

iPhone or Android実機一台

実機で見てみるとやっぱり雰囲気違います。詰めはやはりユーザー視点で実機で。

あったらいいな

iPhone Simulator

Apple Developer登録（無料）をすればダウンロードできるようになります。
ただ、やはりまずmac専用。かつどうやら最新版のMac OS Xでないと対応しないポリシーのようです。自分自身は常にmacを使っているのでいいですが、普段winの人には最大の障壁ですね。
※Windows用に「iBBDemo」という非公式シミュレーターがあるようですが未確認。

Android Emulotor

こちらは各OS（Win/Mac/Linux）に対応。さすが先生。
ただ、起動が恐ろしく不安になるほど遅いので、要忍耐。

ぜいたく品

  • iPhone OS3を積んだ実機（iOS搭載機種とは挙動と速度が違います）
  • Xperia実機 Android1.6 （iPhoneのSafariよりもwebkitバージョンがかなり低い）
iPhone OS3を積んだ実機
正直最終確認しかしてないです。ただ、アニメーションの速度が結構違うし、古い端末だとなおさら謙虚
  • Xperia実機 Android1.6
    Xperiaは特にAndroidのバージョンが他端末より低い、のに日本で一番出回っているAndroid端末。結構手強いです。秋にAndroid2.1にバージョンアップすうようです。

また別の頁で書きますが、iPhoneとは液晶の縦横比が異なるため、そのあたりの検証にも。



エディターなどは結局htmlなのでお好きに。
ただ、html5を使いたい場合はコードヒントやエラー検出が余計なお節介をして、
ずっとhtml5のタグに対してエラーを履き続けたりします。

デザインの参考しにしたサイト

iPhone デザイン

ちょっと蛇足ですが、iPhone Webをデザインの参考にしたサイトをつらつらと。

まずはやっぱり本家Apple公式

デザインまとめ（のまとめ）サイト

個人的に見つけたステキデザイン（iPhoneから見てください）

Webサービス
企業サイト

他にも多分たくさんありそうです。こんなのいいぜ！があったら教えてください。

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

デザイン mixi

前回「みんなでケンテイ(´∀｀)」をmixiアプリ for Touchの弊社第一弾アプリとして移植することが決まったわけですが、さてどんなデザインにするべきか。

自分自身がiPhoneしか持っていなかったため、DoCoMo XPERIAを会社で購入してもらってiPhoneとAndroid市場調査。
※Android端末として個人的にはSoftbank HTC Desireが使ってみたかったんだけど、無難に一番売れているXPERIAをチョイス。サービス屋としては仕方無し。

iPhone

iPhone向けWebは全般的に標準のiPhoneアプリ（iPodや電話）に沿ったデザインが多い。iPhoneアプリもツール系はほとんどがそう。いわゆる「iPhoneっぽい」デザイン。ただ、ゲーム系は割合独自のUIで展開することが多い。
一部で「リンクは青字で下線付き」というような「Webっぽい」デザインもあるけれども、きちんとiPhone用サイトを作っているサイトとしては少数派。

Android

iPhoneにAndroidはかなり自由な印象。「Android」と一言で言っても各種メーカーから発売されているために、プリインストールされているソフトがそもそも端末ごとに異なり、ホームのUIすらもカスタマイズしている。
あまり「Android」っぽいというUIが存在しないために、アプリやWebもそれにしばられないみたい。

それではどちらにmixiアプリはどちらに依るべき？

個人的には「iPhoneっぽい」iPhoneのネイティブアプリに近いUIがいいのかなと思います。

  • そもそもmixi TouchがiPhoneアプリを意識したデザイン
  • なんらかのデザイン指標があった方がスムーズ
  • iPhoneユーザーの方がAndroidユーザーよりもずっと多い
  • 基本的には（当たり前だけど）iPhoneユーザーはiPhoneリテラシーが高いから、慣れているUIならば悩まない

ちょっと保守的？ですが、mixiアプリはmixiユーザーがそもそもITリテラシーが低めなために、あまり突飛なデザインを作ってもユーザーが迷ってしまうことが多いようで。
またデザインに懲りすぎ無くてもはやるアプリはたくさんあります。〇〇牧場とか

それならばまずはレイアウトはiPhone標準アプリを参考にしつつ、そこから独自性を出していいんじゃないかな。
ただ、もちろんケースバイケース、サンシャイン牧場のようにFlashバリバリのゲームUIの場合は無理に当てはめることは無いでしょう。設定画面くらいは合わせてもいいかも？くらいな気持ちで。

実際のデザインについてはまた次回。

mixiアプリ for touchを考える (1)

デザイン mixi

会社の関係上若干他社さんよりも早くmixiアプリのスマトーフォン版、mixiアプリ for Touchのお話が舞い込んできました。
以前より社内で「iPhoneやらせろや」という話をしていたので、ここぞとばかりに「俺ヒマ」「俺やりたい」オーラを出しまくってプロジェクトに参加。

そこでmixiアプリ for Touchでできることを考えてみる。

まずはプラットフォームであるmixi Touchのおさらい。

さらに追加でmixiアプリ for Touchの特徴

  • mixi Touchと同様Webベースのアプリ
  • PC版／モバイル版のmixiアプリと同様にmixiのヘッダ／フッタが付与される
  • フィード／メッセージ／位置情報API対応
  • PC版と同様のiframe内で展開

ま、色々と予想通りです。


コミュニティファクトリーとしての第一弾アプリは、一番好評を博しているみんなでケンテイ(´∀｀)の移植にあっさり決定。
400万人以上に利用されている弊社きってのヒットアプリ、新しいプラットフォームの市場調査にはうってつけです。

ということで「みんなでケンテイ(´∀｀)」をどうやって移植していくのかはまた次回。