このページの本文へ

iOSを越える実力!? インテル主催「Tizen」セミナーレポート

2013年06月24日 22時00分更新

文● 小山安博

  • この記事をはてなブックマークに追加
  • 本文印刷

Tizenアプリで推奨されるデザイン

 Tizenは、オープンソースであり誰でもソースコードにアクセスして開発でき、Tizen側からも各種の資料が提供されている。インテルはiOSアプリからHTML5アプリに変換する「Intel HTML5 App Porter Tool」も提供するなど、Tizen陣営のメーカーもHTML5アプリ開発をサポートしている(関連リンク1関連リンク2)。

 単なるHTML5アプリではなく、Tizen向けのHTML5アプリを開発するにあたっては注意事項もある。それが「Tizen UX Guide」だ。Tizenアプリ開発に際して、ほかのプラットフォーム向けのアプリと差別化し、UIの統一感を維持するためのガイドラインとなっている。一部を除いて強制ではなく推奨だが、ほかのアプリから浮いたり、全く異なる操作性でユーザーの混乱を招かないように配慮されている。

 UX Guideには、3つの原則が提示されている。「Tailored」「Content Driven」「Focused」の3つだ。

TizenのUX Guideにある3つの原則

 「Tailored」は、ユーザーが自分の好みにカスタマイズしたりパーソナライズしたりできる、という原則。Tizenのホーム画面は「Dynamic Box」といい、ここにウィジェットを張り付け、サイズや位置を変更できる。ブラウザでは、過去の履歴を提示するレコメンドを表示したり、アプリではフォントの調整ができたり、といったユーザーが設定できることを重視している。

カスタマイズ可能なDynamic Box

ユーザーがフォントを調整できる

 「Content Driven」は、アプリが提供するコンテンツが重要という考え方で、「楽しいということを特に追求すべき」(ピーシーフェーズ技術本部アプリケーション開発部UI/UXアプリグループ皆川広毅氏)という考え方だという。

 例えばアドレス帳なら、それぞれの連絡先がメインコンテンツとなるが、フォントや色、画像を使ってコンテンツを目立つようにしたり、Dynamic Boxのウィジェットも、表示サイズを変えたらレイアウトを変えて、コンテンツが目立つようにすべき、とされている。

コンテンツを目立たせるデザインが要求される

表示サイズに合わせて内容も目立つようにレイアウトを行なう

 「Focused」は、コンテンツの重要度を考え、重要な情報はより上に、主要な機能は最初の画面に、といったように、必要なものにフォーカスするUIが求められている。例えば、「削除」を行う場合、削除ボタンを画面に明確に表示し、それ以外の機能はメニューボタン(Tizenでは「More」)内に配置する、といった具合だ。Tizenの画面上部にある通知領域(ステータスバー)は、通常は時計だけ表示されているが、タッチすると通信状況などの情報が表示され、これも「重要な情報のみを表示し、リクエストに応じて追加情報を表示する」というUX Guideの考え方にのっとっている。

重要な情報を上に、目立つように配置する

主要な機能を目立たせ、それ以外は「More」にまとめるなどの配慮が必要

 こうした3つの原則は、まとめると「情報を適切に提供する」(同)という考え方だという。

 こうした原則に加え、カラーの配色なども推奨項目としてあげられている。Tizenは「雑誌を意識している」(同)ということで、メインカラーは「白」ではなく「アイボリー」で、アプリのコンポーネントは「ベージュ」か「暗めのグレー」の2色から選べる。フォントカラーなども「Tizenカラー」として指定されており、ヘッダーとフッター、メインコンテンツで区別して使うようにされている。

「雑誌」を意識したTizenカラー

コンポーネントは2色から

Tizenのフォントなどで使われるカラーパレット

ヘッダーとフッターでの色配置なども推奨されている

 こうした原則やカラーは「推奨」だが、メインのアプリアイコンのデザインは強制されている。アイコンは円形で、PNG形式、108×108pxであり、上部から90度の方向の照明効果を適用するといった具合だ。これは、Tizenのアプリストア「Tizen Store」に登録する際に必須となるようだ。

こちらは必須のアイコンデザイン

カテゴリートップへ

注目ニュース

ASCII倶楽部

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン