モカの腹: CSSNite LP13（スマートフォン特集）

Since 2004.3.20 Total

/Today

/Yesterday

初物空豆、ステーキに赤ワイン | メインに戻る | ステーキ、豆腐ピザ、シジミクラムチャウダー

2011年01月22日土曜日

CSSNite LP13（スマートフォン特集）

　昼から、九段下で開催されたウエブのイベント「CSSNite」に行ってきました。
　今日のテーマは「iPhone/iPadでのブラウザでのサイト設計と実装」。

　どんどん増えつつあるスマートフォン。
　実際、電車の中でもiPhoneやアンドロイドを使っている人がかなり目立つようになってきました。
　スマートフォン対応のサイトを作る必要性を私も日々痛感しています。
　
　今日もそんな意欲を持った人達240人（定員）で会場は超満員。
　セミナーは8人によって行われましたが、どれもとても内容の濃いものでした。（詳細はCSS Nite LP, Disk 13公式サイト）
　
　セミナーを聞きながら私なりにいろいろと考えました。

１）スマートフォンの専用サイトを作るべきか

　スマートフォンでもPC用のサイトをそのまま見ることは出来ます。
　しかし表示が小さいく、実際問題として使いにくいです。
　これを解決するためには

（１）スマートフォン専用サイトを作る。

作り方：PC用、スマートフォン用（iPhone、iPad、アンドロイド）を別々に作り、ユーザーエージェントで振り分ける（PHP、htaccessなどを利用）
メリット：スマートフォンに最適化されるため利用者が使いやすい。（見やすさ、ナビゲーション、入力など）
デメリット：別々に更新する必要があり、大変。

（２）同じHTMLソースでCSSを使ってデザインを変える

作り方：メディアクエリを使い、デバイスによってCSSを切り変える
メリット：一つのHTMLソースを更新するだけでよい。→更新頻度が多かったり、マンパワーが少ない場合に良い。
デメリット：利用者は使いにくい（見やすさ、ナビゲーション、入力など）
アンドロイドはメディアクエリが反映されない場合がある。
IE8以下ではCSS3非対応なのでメディアクエリは使えない（つまりWindowsXPなどでは使えない）
例：こちらので、ブラウザの幅を変えてみてください。デザインが変わります。（IE8以下はダメなの）

２）どのようなスマートフォンサイトを作るべきか

　サイト制作は制作者の独りよがりではなく、利用者とサイトオーナーの両方の利益にならなくてはいけません。
　そのためには、まずスマートフォン利用者がどのような使い方をしているかを知る必要があると思いました。
　
　私自身、iPhoneでのウエブブラウジングはあまり好きではありません。
　その理由は

iPhoneでPCサイトを見るには、小さすぎる（見づらい、操作しにくい）
重い
ナビゲーションが分かりにくい、使いにくい

　その点、携帯サイトは携帯の画面や速度に最適されているため使いやすいのです。
　つまり、スマートフォンサイトを作るには

専用サイトを作る
文字は大きく、ページの容量は少なくする
ナビゲーションを分かりやすくする

　ことが大切だと思いました。

３）スマートフォンサイトのユーザビリティ、アクセシビリティ

　上でも書いたのですが、スマートフォン専用サイトのユーザビリティーやナビゲーションはとても大切だと思います。
　今回のセミナーではこのあたりの話がほとんどなかったので、自分なりに研究してみたいと思いました。

４）まずはやってみたいこと

iPhoneサイトのUIやナビゲーションの実態調査
メディアクエリによるスタイ振り分け
htaccessによるページへの振り分け
iOSシミュレーター（iOSSKD）の導入
CacooのiPhoneのステンシルを使ってみる

セミナーの後は懇親会に参加しました

　以前はCSSNiteの懇親会は毎回参加していたのですが、最近ずっとご無沙汰していました。

　普段接することの出来ないウエブ関係の人とたくさん知り合えるチャンス。
　しかし周りは私よりも二回りくらい若い人ばかりで、知っている人はほとんどいません。
　若い人達の乗りについて行けるかと思うと気持ちが重くなります。
　
　今回は九段下駅前の「さくら水産」で懇親会は開かれました。
　周りの人達と、なんとか話をしましたが、以前のような勢いが自分自身になかったのはやはり気後れしていたからだと思います。
　でも何人もの人と知り合いになれました。
　
　今回のセミナーでも、新しいことにチャレンジする気持ちがたくさんわきました。
　スマートフォンサイト制作は今年の抱負の一つ（抱負ナンバー5）。
　楽しみながらやっていたいと思っています。

メールで大失敗

　懇親会が終わる頃、Ｃさんから電話が。
　なぜか憮然とした口調なので理由を聞くと私がセミナー修了前に送ったメールが
　「懇親会には参加しません」
　となっていたというのです。
　まさかと思って送信したメールをチェックすると、確かにそうなっていました。
　iPadの予測変換でそう入力されたのに気づかなかったみたいです。
　
　がーん、そのためＣさんは居酒屋で私をずっと待っていたそうです。
　たくさん電話の不在着信とメールが来ていました。
　ごめんなさいごめんなさい！！
　大失敗でした。

おでん屋の屋台で体をアルカリ性に

　セミナーからの帰り道、家に近づくとおでん屋の屋台が見えてきました。
　中に入ると、いつものおじいさんではなく、もう少し若い人がやっていました。
　昨年末でおじいさんは引退したとのこと。
　ヨタヨタとやっている風情が良かったのですが。
　でも人が代わって、屋台の囲いなどがきちんと整備されていました。
　
　缶ウーロンハイとおでん（卵、こんにゃく）でちょっとお話しをし、セミナーで酸性に片寄った体をアルカリ性にもどして帰りました。