iPhone 向けソシオメディアサイト構築の裏話（設計編）2

iPhone 向けソシオメディアサイト構築の裏話（設計編）1の続きです。

iPhone Safari で見た通常のウェブサイト

iPhone に最適化されたウェブサイト

iPhone らしいユーザーインターフェースにする

iPhone 向けのウェブサイトを作る上では、まず iPhone らしいユーザーインターフェースにすることが重要だと考えました。そのためには、主に次のふたつの設計作業が必要になります。

• UIの要素を減らす
• iPhone の標準的なデザイン言語を使う

UIの要素を減らす

iPhone に組み込まれたウェブブラウザである Safari は、いくつかの制約はあるものの基本的にデスクトップ版の Safari と同等のレンダリング／スクリプト実行が可能なので、PC向けに作成されたウェブサイトをそのまま閲覧することができます。ただし 480 x 320 ピクセルのスクリーンでは通常のウェブサイトの横幅が入りきらないので、ユーザーは随時画面を拡大縮小したりドラッグ操作で表示領域を移動させながら閲覧する必要があります。

ウェブサイトを iPhone に最適化するということは、480 x 320 ピクセルのスクリーンでも拡大縮小の操作をせずに閲覧できるようなレイアウトにするということです。ネイティブアプリを操作するのと同じようにサイトを閲覧することができるのです。

既存のウェブサイトを最適化して小さなスクリーンにおさめるためには、表示する要素を厳選して最小限にする必要があります。

通常のPC向けソシオメディアサイトのデザインは、いくつかのテンプレートによって構成されていますから、それらのテンプレートを検証し、注意深く「残す要素」と「取り除く要素」を決めていきました。

同時に、指でのタップ操作に最適化するために、クリック（タップ）可能なすべての要素に一定以上の面積を持たせるといった変更も加えることにしました。

また iPhone の流儀に従い、説明調のラベルや補足情報としての文章は取り除き、操作に最低限必要な要素だけを、より簡潔な表現、より記号的な表現に変更して残すようにしました。

iPhone の標準的なデザイン言語を使う

一方、ユーザーインターフェースを iPhone らしいものにするには、小さなスクリーンに最適化するだけでなく、iPhone らしさとは何かということを知っている必要があります。Apple は iPhone 開発者向けに『iPhone Human Interface Guidelines』（以下 iPhone HIG）を提供していましたから、それをよく読んで理解に努めました。（iPhone HIG は、ネイティブアプリケーションとウェブアプリケーションを同等に対象としています。）

iPhone アプリケーションのUIにはいくつか特徴的な共通部分があります。例えば、スクリーン上部のナビゲーションバーやスクリーン下部のツールバー／タブバー。その間をリスト表示にするテーブルビュー。スクリーン下部からせり上がって表示されるアクションシートなどです。これらの視覚表現や振る舞いを適度に取り入れていきます。

ただし、ウェブアプリケーションではどうしても再現が難しい部分もあるので、無理に「ネイティブアプリそっくり」にしようとはせず、ウェブサイトとしての自然な操作感も残すことにしました。例えば、ネイティブアプリでは普通、テーブルビューを使って階層をドリルダウンする時、リスト上のある項目をタップすると下位階層のリストがスクリーン右側からスライドしてきて、同時に元のリストは左側に押し出されていく表現が用いられます。このようなイフェクトを JavaScript で真似ることはできますが、どうしても動きがぎこちなくなってしまうので、取り入れませんでした。

iPhone 向けソシオメディアサイト構築の裏話（設計編）3