SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

まとめ

 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のテクニックそのものは簡単です。それよりも、画面サイズや閲覧される距離、操作の仕方など、それぞれのデバイスの特性を踏まえたうえで、分かりやすく使いやすいインターフェイスを提供することが大切です。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
そこが知りたい! Web標準サイトの活かし方連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5319 2010/07/26 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー