スマートフォンサイト制作Androidのはまりどころ

たにぐち　まこと

本日発売

本日の内容

✓ 2009年　スマートフォン誕生✓ Androidの現実✓ 対処法✓ イバラの道のスマホサイト✓ あなたの答え✓ レスポンシブ・Webデザイン✓ ハイブリッド・レスポンシブ✓ モバイルファースト✓ わたしの答え

2009年　スマートフォン誕生

夢のスマホサイト

夢のスマホサイト

HTML5、CSS3が使える！

WebKitだけ確認すればOK

JavaScriptも動作する

フォントがキレイ

タッチイベントが使える！

夢のような世界です！

見えてくる現実

Androidの現実 powered by

作ってみたhttp://www.x-fit.jp/demo1/

国内で販売されている全端末でテストした

トラブル１：重ねた下のボタンが反応する

原因：レイヤーを重ねたため

トラブル１：カルーセルが動かない

原因：Android 1.6だから

トラブル１：こんな端末も

飛んでっちゃう

トラブル2：謎のマージン原因：CSSの解釈が異なる？

トラブル2：不可解な発生機種パターン

トラブル3：タップした場所が変

原因：Android 3.xだから？

トラブル4：スクロールバーが出てしまう

Xperiaと、HT-03Aのみ。謎。

なぜ？

Androidの複雑な事情

✓ ハードが、Android側の意図にしたがっていない✓ 他のインストールソフトなどによる干渉？✓ Androidのソースをハードメーカーが改造している？

最終的には謎

対処法

対処の手順

✓ 実機で確認する✓ アタリをつけて、実験を繰り返す✓ 対処する

つまりは、決め手の方法がない

実機確認の方法

✓ 全部買う✓ ヤマダ電機メソッド✓ 検証センターを利用する

特にクセの強い端末

XPeria REGZA Phone Aquos Phone

国産端末など、コア部分をいじっている端末がクセ者

イバラの道のスマホサイト

多様化するデバイス

多様化するプラットフォーム、ブラウザ

多様化するプラットフォーム、ブラウザ

Yahoo! JAPANの答え

Yahoo! JAPANの答え

時代に逆行！？

リニューアルのポイント

体験から、実用へ

Appleの答え

Appleの答え

作らない

あなたの答え

１：がんばる

2：CMSサービスなどを使うhttp://smart4me.net

3：ライブラリ、ツールを使うhttp://x-fit.jp

※音が出ます

3：ライブラリ、ツールを使う

3：ライブラリ、ツールを使う

4：作らない

ここまでのまとめ✓ Androidはクセがありすぎる✓ 今後も増え続けるAndroid、出てきた Windows Phone

✓ PCサイトに加えて、スマホサイトもメンテ？地獄のような世界です！ほんとすいません！

レスポンシブ・Webデザイン

レスポンシブ・WebデザインTeam PAWS Chicago ¦ Brian Drumhttp://briandrum.net/team-paws/

レスポンシブ・WebデザインHello Fisherhttp://hellofisher.com/

レスポンシブ・Webデザインの利点

✓ 複数のレイアウトを作らなくて良い✓ ワンソースでPC、スマホを管理できる✓ 利用者もレイアウトが大きく変わらず使える

レスポンシブ・Webデザインの問題点

✓ PC・スマホのどちらに対しても中途半端なレイアウトになる

✓ デザインに制限が出る✓ 設計・構築が非常に煩雑

ハイブリッド・レスポンシブ

勝手に言葉 作りました

ハイブリッド・レスポンシブPC+スマホは別サイトスマホは、レスポンシブWeb

ハイブリッド・レスポンシブ4月上旬公開予定http://cocoa-music.com

ハイブリッド・レスポンシブ

✓ PCサイトに制限がない✓ スマホでさまざまな画面サイズに対応

✓ 設計は多少煩雑✓ スマホサイト制作の面倒さは変わらず

モバイルファースト

モバイルパーツ・ファースト

もちろん勝手に作りました

モバイルパーツ・ファースト

モバイルパーツ・ファーストスマホのパーツを、PCサイトに流用

モバイルパーツ・ファースト

モバイルパーツ・ファースト

PCサイトのパーツが大きいタブレットも視野に入れている？

モバイルパーツ・ファースト

✓ ボタンなどの制作の手間が減る✓ タブレット端末でも見やすくなる

✓ PCサイトが大味なサイトになる✓ 1画面の情報量が減る

わたしの答え

変化が求められるスマホサイト

リッチ

エクスペリエンススマート

飽きた

重い

見られない

new iPadの登場Retinaディスプレイの採用画面表示能力は、現状のPCよりも上

Appleの iPadへの対応

ipad_hero_2x.jpgipad_hero.jpg

iPad、iPhone 4(S)用

Retina Display搭載 Androidの登場？

サイトの主役はタブレットへ？

サイトの主役はタブレットへ？

タブレット、スマホを意識したサイト制作

✓ テキストリンク→ボタン✓ ボタン・ナビの大型化✓ バナーでの表現の増加

PCサイト、スマホサイトではなく、「Webサイト」がデバイスを問わない時代

5月頃公開http://h2o-space.com

まとめ

まとめ

✓ Androidのすべての端末に、クリエイタのがんばりで対応するのは、ほぼ不可能

✓ 今後も増え続けるプラットフォーム✓ スマホサイト制作の考え方自体を変える必要がある

サイトの特性やトレンドを見極めて

h2o space 検索