CodeZine(コードジン)

特集ページ一覧

「家庭用ゲーム機向けWebページ」の作り方

そこが知りたい!Web標準サイトの活かし方(8)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/07/26 14:00
目次

まとめ

 Wii「インターネットチャンネル」は、「リビングでインターネット」というコンセプトで開発されています。おじーちゃんやおばーちゃんも、みんなで気軽に、直観的に使えるように、シンプルな機能となっています。一方のPS3「インターネットブラウザ」は、PCのモダンブラウザに匹敵する豊富な機能を持っています。

 まったく異なる仕様となっていますが、テレビ画面で閲覧されるという点は同じです。テレビ画面用のインターフェイスは、離れた所からでも文字が読みやすいように、「10フィートUI(10 feet UI/ 10 foot UI)」と呼ばれるUIを意識することが大切です。

 文字サイズや画像など、全体的に表示を大きくしたり、ゲーム機の画面デザインと馴染むような色調にしたりするなどの工夫をしましょう。例えば、Wiiのインターネットチャンネルは、背景は白で、ボタンはグレー、リンクは青の枠線という、シンプルで軽いイメージのする色調です。PS3は、背景は黒やグレー、文字は白といった、モノトーンでクールなイメージのする色調です。それぞれのオフィシャルサイトや、ブラウザで実装されているUIが参考になります。

 また、Wiiの「インターネットチャンネル」では、検索エンジンとして、Yahoo!とGoogleを利用できますが、Yahoo!は、10フィートUIを採用し、Wii用に最適化されています。リンクなどポイントしやすいように、文字をボタンにするなどの工夫がされているので、参考にすると良いでしょう。

図4 Wii用に最適化されたYahoo!の表示
図4 Wii用に最適化されたYahoo!の表示
図5 googleはPCと同じ表示
図5 googleはPCと同じ表示

 以上、本連載では、さまざまなデバイス向けページの作り方を紹介してきました。CSSのテクニックそのものは簡単です。それよりも、画面サイズや閲覧される距離、操作の仕方など、それぞれのデバイスの特性を踏まえたうえで、分かりやすく使いやすいインターフェイスを提供することが大切です。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:そこが知りたい! Web標準サイトの活かし方

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5