iPhone/Android Webサイト制作セミナー
11月20日、MONSTERAさん主催のiPhone/Android Webサイト制作セミナーに参加しました。講師はCSS niteやUSTREAM等でご存知のH20 Spaceのたにぐちまことさん。
内容はと言いますとiPhone、Androidのスマートフォンサイト制作を行う基礎知識からアプリ制作時の注意点までのほぼ全般を網羅。どちらかと言うと制作者向けと言うよりも、制作を企画するにあたってどのような事を考えていかなければならないかを知ると行ったニュアンスが強い内容でした。まだiPhone/Androidのスマートフォンサイト制作を行った事のないディレクターさんなんかにはもってこいの内容だったと思います。
今回参加して重要だなと思ったことを羅列していきます。
Section1 iPhone、Androidサイト制作の基礎知識
- 現在のスマートフォンのシェアは20%程度
- iPhoneのSafariはPC版Safari4とほぼ同じレンダリング。ただしプラグインに非対応。
- 文字の拡大・縮小は不可能（ピンチイン/アウトで操作する必要がある）
- 文字エンコーディングを手動で変更する手段がない（HTMLがUTF-8でテキストファイル等にリンクを貼った場合、テキストファイルがShift-JISでエンコーディングされていたら文字化けする）
- サードパーティーのブラウザのレンダリングエンジンはWebkitだがOperaだけ独自
- ポップアップは使うな
- ファイルのアップロード/ダウンロードに非対応
- フォントはヒラギノ角ゴW3/W6のみ
- iPadはPCのサイトを見せたほうが良い
- Androidは画面解像度が端末によってバラバラで横表示に非対応の端末もあり
- Androidもプラグインには非対応だが、2.2でFlashを標準搭載。2.1は裏技でFlashを搭載できるが、1.6は不可能
- Androidはポップアップ、文字エンコーディングの変更に対応している
- AndroidのブラウザはChromeベース。Operaもあり、現在FIrefoxも開発中
Section2 制作準備をする
- 確認はiPhone/Androidともにシミュレーターを利用すると良いが、最後は実機で確認
- iPhoneシミュレーターはiPhoneデベロッパープログラムに登録すれば利用可能（有料）
- AndroidのシミュレーターはEclipseと組み合わせて利用可能。無償配布されているがインストールに手間がかかるのが難点
Section3 設計作業
- 携帯のようにQRコード非対応、URL入力も考えづらいため、流入は検索エンジンがメインと予測
- iPhone/Androidともにデフォルトの検索エンジンはGoogle
- PCサイトのSEO対策がしっかり行われていればスマートフォンサイトに特別な注意を払う必要はあまりない
- フォーム周りの使いかっては非常に悪い。特にiPhoneはlabel要素を無視する
- テキストフィールドで多くの字を入力させると確認大変だが、JavaScriptを利用してテキスト内容に合わせてテキストフィールドを広げてあげると格段とユーザービリティが上がる（mixiが参考になる）
- 横スクロールが出るようなサイトはアウト。親指に隠れて横スクロールがあることに気づかないケースがある
- 階層を浅く作り、タブを利用したりしてコンテンツは一気に読み込ませる
- iPhone UIは研究しつくされて作られているので出来る限りそのまま利用した方が良い
Section4 デザイン
- 横幅100%で作るので、横に伸びることを考慮したデザインにする
- 画像を少なく、出来る限りCSS3で表現
- ボタンは親指で操作されることを念頭においたデザインにする（当然ロールオーバー表現は不可）
- 太陽光を意識し、コントラストが強いデザインに
- コーディングする際、どこが画像かをデザイナーとコミュニケーションをきっちりとる（ただし多くはCSS3で表現出来る）
Section5 HTML5+CSS3
- Webkitベースの為、-webkitの接頭辞を付ける必要があるが、border-radius/text-shadowはそのまま利用可（ただしborder-radiusにて3G/Sは-webkit-border-radiusでないとダメ）
- 来年に出るAndroid版Firefoxに-mozの接頭辞を付けなければならないかは今のところ不明
- Viewportをしっかり設定する
- iPhoneは電話番号に勝手にhref="tel:〜"を貼るが、郵便番号などにも貼ってしまうなど誤動作が多いため、機能を無効にする方が良い
- ホームアイコンは57pxX57pxのPNGで作成。
<link rel="apple-touch-icon" href="~">で指定するが、光沢がいやなら<link rel="apple-touchi-icon-precomposed" href="~">で指定する
Section6 JavaScript
- JavaScriptのデバッグはFirebugが便利。ごくまれにシミュレーターでは動作するが実機で動作しない場合があるので実機で必ず確認
- 現在jQuery Mobileはα版。テーマを簡単に変えられる仕組みが用意される予定
- jQTouchやSenchaはデザインを変更しづらい
Section7 マルチデバイス
- UserAgentで振り分けるが、初期に出荷されたiPadのUserAgentにはiPhoneの記述があるため、iPhoneを特定する場合はiPhoneの文字列の中でiPadがなかったら...とする
- メディアクエリでPCページをCSSでiPhone/Android用にするのも手
- Viewportと違う縮小率にしなければならない画像などがある場合、JavaScriptを利用してsrc属性を差し替えるなどをする必要がある
- 電話番号にtel:~を貼りたい場合もJavaScriptを利用して付け加えると良い（初期で貼られる機能を無効にしておく）
Section8 アプリケーションとWebアプリ
- アプリの開発には莫大な費用がかかる(ニッチな言語のためリソース確保が高額）
- リリース後に重大なバグが見つかった場合、修正したあとApp Storeの審査に再び2週間かかる（その間に信頼を落としてしまう可能性）
- iPhone/Androidの開発言語が異なるため、両対応させるとさらに費用が高額に
- Webアプリも視野に入れる
- PhoneGap...Webアプリをネイティブアプリにコンパイルしてくれるサービス
以上これだけの内容を4時間でとてもわかりやすく解説してくださった、たにぐちさんに感謝です。また、主催してくださったMONSTERAのCassis_mintさん、ありがとうございました！
