Webレポート「ケータイサイトとCSSデザイン」（XHTML1.0とCSS2.1のサイトをケータイで閲覧）

勉強会の記録：
※ご注意、未完成エントリーです

テーマ：
「アンワイアード、IWの時代へ／ケータイ編」

• 2010年のケータイをイメージする
• PC、ケータイを分けないWebサイトの構築について考える
• ケータイの特性を生かしたサイトについて考える

デモの内容：

• XHTML1.0とCSS2.1でコーディングしたサイトをケータイで閲覧します
• Web標準に準拠した設計（ドコモのiモード仕様には準拠しない）
• サンプルサイトはXGAフォーマット（可読性を確認します）

注意：

• 最新の3Gケータイを使います（NTT DoCoMo FOMA F905i）
• 2年後のケータイは、安価な機種であっても、現在の最新機種以上のスペックになるという想定

今回のプレゼンテーションの流れを大まかにメモしておきます

（１）
ケータイのPC化とブラウザの機能強化によって、PC用のサイトも閲覧できるようになってきました。
これは、FOMA F905iに搭載されているフルブラウザの画面です。

（２）
今日は、パケット定額に対応した「jigブラウザ」を使います。
これが、jigブラウザの画面です。

（３）
サンプルサイトについてご説明します。5つの外部CSSファイルで構成されています。
※ここは割愛します

（４）
ケータイ（FOMA F905i）にインストールしたブラウザを起動します。
続けて、［CSS設定］を［有効］にします。

（５）
サンプルサイトにアクセスします。
全てのCSSファイルが適用され、floatプロパティによる2カラムレイアウトも問題なく表示されています。floatプロパティを多用していますが、レイアウトに問題はありません。

（６）
尚、［CSS設定］を［無効］にすると、最初に読み込まれる「basic.css」だけ適用されます。
背景色と文字色の指定に注意が必要です（そもそも、basic.cssのスタイル指定が良くないのですが‥）。

ポイント：

• ケータイのPC化によって処理能力が向上
• ケータイのディスプレイがSVGAに
• パケット定額に対応したフルブラウザ登場
• CSSのレンダリングも向上
• 使いたいブラウザを利用者が選べる、誰でも簡単にインストールできる
• アンインストールもメニューから選ぶだけ
• QRコードでインストール画面に誘導
• ブラウザにプラグインをインストールして機能を拡張できる
• RSSリーダーとブラウザが一体化しており、PCと同じ利便性
• 音声読み上げ機能は標準搭載されるかもしれない
• 市場が大きいので、ユニバーサルデザインに関してはPCよりもお金を投下できるかもしれない
• 映像のクローズドキャプション技術は、ケータイの分野で培われるかもしれない（参考サイト「いくお～る」）

「テレビがなくても困らないでしょ？ワンセグを見たいという人の気が知れない」という人、けっこういます。
ただ理解してほしいのは、それは聴者の視点だということです。
聴覚障害者の視点では、ワンセグが登場するまで、テレビの情報を戸外で享受する方法は（運良く字幕デコーダ付きテレビか、オープンキャプションの番組がない限り）ほとんどなかったのですから。
～「いくお～る」より引用

まとめ：

• PCとは異なる、ケータイの特性を生かしたサイトにすることが重要
• ただし、PC用のサイトが閲覧可能になってきていることも意識しておきたい
  （Web標準に準拠して設計されたサイトであれば、PCサイト、ケータイサイトを分ける必要がなくなるかもしれない）
• 重要なポイントは、ビジネスユーザーが多い「スマートフォン」だけではなく、一般層に普及している携帯電話でPCサイト閲覧が可能になっていること
• Apple iPhoneを女子高生が使うとは思えないが、女子高生が持っている普通のケータイが現在のiPhone並になる可能性はある
• 2010年、2年後のケータイをイメージしてほしい、どのようなイノベーションが起こるのか

補足：

• 今回使用したF905iのディスプレイは、864×480ピクセルですが、XGA（1024×768）で一覧できるPCサイトなら、ズームなしでそこそこの可読性を確認できました。
• ただし、最近のPCサイトはXGAでも一覧できなくなっていますので、ケータイのPCサイト閲覧には限界があります。
• ユーザーが何をどう選ぶのか？　2年後はどうなるのでしょう？
• 4月1日からドコモのiメニューがリニューアルされて、Flashらしいリッチ画面になりましたが、トップに「GUCCI」スペシャルサイトのバナーがあったのでクリックしてみました。
  すると、美しいフルFlashのページがケータイの画面一杯に‥。Flashなどのベクターデータは、ケータイのディスプレイ解像度に依存しないので効果的です。
• ケータイでも、キャンペーンサイトなどはフルFlashサイトが増えてくるかもしれません。
• 今回、最新版のフルブラウザを6,000円（年間使用料）で買ったわけですが、決済の手続きが恐いくらいお手軽で驚きました（ドコモの電話料金と一緒に支払う選択をしたので）。
  クレジットカードを持っていない学生さんは、この方法で買っていますね。
• ケータイのネットサービスは有料ばかりですが、ボタン一つなのでつい‥（期待外れだったサービスは次々と解約していますが‥）
• ネットオークションにハマっている会社員などは（休憩時間であっても業務以外のPC利用はマズイので‥）、ケータイを手放せない

追記（質問を受けて、今回のテーマの肝）：

• 美容室に置いてあるファッション雑誌を見ながらケータイで買い物するお客さんたちのレポートは後ほど。
• 最後のプレゼンは、「場所」とケータイ、「イベント」とケータイ、「OOH」とケータイ、お財布になったケータイは、家の外でみるWebサイトで活用される‥というお話でした。
• 「アウト・オブ・ホーム」ネットワークとケータイの関係性に注目
• 「PCサイトは、PCで見ればいいじゃないか」（と言う人も多いので）、「家の外でみるサイト」、「家の外で使うサイト」の価値について考えてみよう
  例：GPS機能が付いたGoogle Mapsはすごく便利

デモの映像は、YouTubeにアップしています［ビデオの関連エントリー］。
もちろん、映像はケータイでも視聴できます。お時間のない方は、移動時間にでも（音声は入っていないのでマナーモードでかまいません）。

次回のテーマ：
「高齢者向けのケータイ」という発想の限界、ドコモショップという「場」から学ぶ生活のデザイン

20080401