モバイル版Webサイトの完成度はなぜ低い？ 79
ストーリー by headless
問題 部門より
問題 部門より
本家/.「Ask Slashdot: Why Do Mobile Versions of Websites Suck?」より
モバイルデバイスからのアクセスが大幅に増加しているにもかかわらず、できの悪いモバイルサイトが多いことが素人の私には理解できない。これには何か正当化できる理由があるのだろうか。/.erの会社のモバイルサイトの完成度はどの程度だろう。モバイルサイトの開発が遅れたり、進めることができていないなら、何が障害となっているのだろう。プラットフォーム間の互換性が問題なのだろうか。
PC向けのサイトがそのまま閲覧できることが携帯とは違うんだよ。 (スコア:5, すばらしい洞察)
とか、言ってたことがありましたね。
企業は携帯向けのサイトを別途用意しなくてもよいとかね。
アプリもHTML5で作ればブラウザ以外にソフトも不要とかね・・・。
階層メニューからアプリを探すとかウンコとか言っていたのに
それが今や、ネイティブアプリだらけ、そのアプリも何がどこにあるのかさっぱりで
アプリ紹介記事を参照しないといけないくらいごちゃごちゃ。入れたアプリも
シンプル機能なので微妙に違ったことをするのに別のアプリが必要になり、どこに
しまったのか忘れるような状態。
もちろんPC向けサイトをみるとか拷問にも等しいので専用サイトが・・・。
これが革新的に再定義された「直感的なスマートフォン」ということですか
Re: (スコア:0)
w3mにすら劣るガラケーのブラウザめいたゴミプログラムよりは、
セキュリティ的にも表現的にも遙かにマシですし、別にいいじゃないですかそこは…
Re:PC向けのサイトがそのまま閲覧できることが携帯とは違うんだよ。 (スコア:1)
表現的には兎も角、セキュリティ的には脆弱性が発生しにくい（発生しても他の機種に波及しない）ガラケーのほうが頑丈だと思うんだが
Re: (スコア:0)
そりゃガラケーを端末で見た場合の話であって、HTTP的に見ると凄まじく酷いんだぞアレ
Re: (スコア:0)
インターネット接続機能のあるワープロ専用機とかマジオススメだよね
Re: (スコア:0)
ガラケーも共通化されている部分多いし一概に言えないかと
脆弱性に気づかない、気づいても放置ってことが多々ありますし
Re: (スコア:0)
PC向けサイト、iPhoneで普通に見てるけどねぇ...
あ、そうか、WP7とかで見ると拷問とかいう話はあったな
タイムリーにもこんな記事が (スコア:5, 興味深い)
楽天がこれからヤバイ!! もうひとつの理由をKeynote MITEで証明してみましたよ
http://www.landerblue.co.jp/blog/?p=10371 [landerblue.co.jp]
測定技術や「amazonでは、表示速度が0.1秒遅くなると売上が1％ダウンする」みたいな知見があっても、
それを実践するのは色々と難しいんでしょうねぇ。
Re: (スコア:0)
楽天はPCでも酷いからなあ。ヤフーもだけど。
その記事にも書いてあるけど、もはや手の付けようがないんだろうな。
その辺がモール型のしんどいとこなのかな。
使い勝手ならアマゾンは抜群だもんな。
日本のスマートフォンサイトの問題点 (スコア:5, 興味深い)
日本のスマートフォンサイトをこの3年ほど計測してデータを見てきました。
以下に、現状の問題点をまとめてみました。
・コンテンツを盛り込み過ぎ
かなりの割合で、1ページ1MBを超えるスマートフォンサイトがあります。
スマートフォンサイトを見るのは、大抵が、日常の細切れ時間、5～10分の範疇です。
あれこれ、コンテンツを盛り込んでも、見てはもらえません。
PCサイトで出来ることを全てスマートフォンサイトに盛り込むのは止めた方が良いと思います。
スマートフォンで閲覧する目的やスマートフォンから利用されるページ・機能をよく調査して絞り込む必要があります。
1MBも容量がある場合、1時間に1回の間隔で一ヶ月定点観測したデータから見ると、95%の確率でダウンロードに22～96秒かかります。
・携帯網のスピードを盲信し過ぎ
どんなにTVコマーシャルで、「繋がりやすさNo.1」とか、あれこれ各社が宣伝していたとしても、携帯網の仕組みから来る限界というのがあります。例えば、人口密集地の基地局は、200～300mの範囲をカバーし、更に過密な地域では、最近では更に電波を弱くして20～30mの範囲をカバーして基地局を増やすことで、繋がりやすくしています。基地局の設置の仕方は、きちんと専用のシミュレーションソフトを使って配置しているキャリアもあれば、単純にコンパスで地図上に円を描いて設置しているキャリアもあります。
一つの基地局あたり、大体100人ぐらい繋がります。問題は、100人以上が一つの基地局にアクセスした場合です。
その場合は、ユーザの通信の公平性を担保するために、時分割で通信時間が割り当てられ、自分が通信できない間はパケットがドロップします。
電波が繋がるということと、通信できるという事は同義ではないです。
3G回線の場合、大体1ページあたり100KBを超えると、パケットドロップに巻き込まれやすいのがデータからわかっています。
5秒以内にページを表示したいなら、100KB以内に1ページのサイズを抑えるべきです。
そうすれば、自ずと、コンテンツの絞込もしなければならないでしょう。
RBB TODAY SPEED TESTを、3GやLTEのスピードテストで使って、マーケティングデータとして発表している所が多いですが、スマートフォンサイトの場合は、TCP/IP 3Way Handshakeや、TCP Slow Startなどのオーバーヘッドの影響がありますし、HTML、CSS、JavaScript、画像のファイルサイズも小さく、Keep-aliveを設定していないサイトも多いため、スマートフォンサイトの配信における実際のスループットはかなり低いです。20～100KB/秒ぐらいしか出ません。
・サードパーティーコンテンツを盛り込み過ぎ
自社ドメイン以外のコンテンツをサードパーティーコンテンツと呼びますが、それを盛り込み過ぎです。
遅延の要因で多いのは、
・Facebookのいいねボタン
・TwitterのTweetボタン
・広告配信
・Google Analyticsなどの解析ツール
などです。
夜9～12時の時間帯は、30～60秒以上かかってダウンロードされることが多いです。
もちろん、Google Analyticsのデータは、「偏って」います。ダウンロードに成功した、もしくは素早くダウンロードできた場合しかデータが取得できていないからです。
・タグマネージャは有効ではない
こういったサードパーティーのタグをまとめて配信してくれるサービス、タグマネージャを利用しているサイトもありますが、タグマネージャ自体が配信が遅いので、有効ではありません。
・レスポンシブデザインは有効ではない
レスポンシブデザインが流行っていますが、レスポンシブデザインにしているサイトは容量が大きいため遅いです。
尚且つ、レスポンシブデザインは管理すべき事項がどんどん多くなってしまうので、サイトの規模が大きくなるほど破綻しやすいです。
・スマートフォンコンバーターの処理の遅延
PCサイトをスマートフォン向けに作り変えるサービスを使っているところが多いですが、殆どがサービス事業者側の処理遅延によって、非常に遅い配信になっています。
・CDNは有効ではない
スマートフォンサイトの場合、基地局から携帯網のネットワークを通り、ゲートウェイからインターネットに出るまで約10ホップぐらい余分にかかります。携帯網のネットワークの中にキャッシュサーバーを置いている事業者はほぼ皆無なので、CDNは高速化には効かないです。
・FEO(Front End Optimization)も有効ではない
ページサイズや、CSS、JavaScriptなどを最適化してくれるFEOサービスを使っているサイトがありますが、確かに軽量化してはくれますが、そのための処理のオーバーヘッドとネットワークのラウンドトリップの方が大きく、効果が認められません。
・Ajaxは携帯網では遅延する
スマートフォンサイトでAjaxを使うと致命傷です。携帯網のレイテンシはLTEで35～45ms、3Gで100msです。
日本での有線回線では、大抵5～15msぐらいですから、レスポンス面でかなり遅いというのがわかると思います。
尚且つ、パケットドロップもあります。Ajaxでデータを取得しようとして、Request Timeoutになる確率がかなり高いです。
・DNSのTTLを短くし過ぎ
DNSのTTLを5～15分に設定しているサイトが多いです。そういう所に、TTLが短い理由を訊くと、サイトの内容を素早く切り替えるためとか、障害対策のためとかおっしゃるのですが、通常のデスクトップ向けのWebサイトは、ユーザが使っているISPや会社などのDNSを名前解決に利用するため、DNS Lookupのトラフィックが分散されますが、携帯網の場合は、NTT DoCoMo、KDDI、SoftBankの3社のDNSに集約されます。
大規模アクセスのあるサイトがTTLを5分に設定すると、一気に数百万台のスマートフォンが携帯会社のDNSに対して名前解決に来るため、一気に負荷が上がります。昨年末ぐらいから、DNSの名前解決の遅延によるスマートフォンサイトの表示の遅延現象が発生しています。
BINDで、ホスト単位とか、サブドメイン単位でTTLが設定できるので、スマートフォンサイトの配信サーバについてのTTLは長めに設定すべきです。
以上をまとめると、Webサイトというのは「美術」ではなく、「機能」を提供するものなので、もっとシンプルに、まるでボクサーがギリギリまで減量するように、スマートフォンでアクセスする際に必要な「表示」と「機能」のみに絞り込むべきです。
あと、フロントエンドの部分だけを学ぶのではなく、携帯網の仕組みそのものを勉強されてから、スマートフォンサイトを作った方が良いのではないかと思います。
Re:日本のスマートフォンサイトの問題点 (スコア:2)
レスポンシブを携帯網経由のブラウザに見せるのはどうかという本題はおいといて、
PCwith光回線において、レスポンシブデザインは有効だと思う
せっかく柔軟な表示ができるのがHTMLのいいところだとおもうのに
固定幅でセンタリングされたり、左寄せされたサイトをみると
なんか、もったいない感じがするのですよ
だいたいがPCのブラウザが特定幅で表示していない(ユーザによって幅が違う)のに
呼応するための技術ですし…
あと
レスポンシブか否かと
デザイナーのデザイン力に相関性はないと思う
まぁ、デザイン力とレスポンシブでクロス分類すると
偏りがあることは否定しない…
〜〜 姫 〜〜
Re:日本のスマートフォンサイトの問題点 (スコア:1)
フェラーリはずっとながいことフェラーリがエンジン付きシャシー制作→ピニンファリーナやベルトーネのような
カロッツェリアにデザイン依頼→スカリエッティでボディ制作の分業制でまず機械部分が決まってからそれを
覆うボディがデザインされるという流れだった。
技術があるメーカーだと先にデザインしてから機械部分を載せることもできるけど、そのせいで整備性や
居住性が劣悪になったりすることもあるし。
他のコメントにあるAmazonと楽天もAmazonがデータを用意してから見せ方を考える“データファースト”な
設計に見えるのに対し、楽天はデザインをきめてからデータをはめ込む“デザインファースト”で作ってるように
見える。
実際の内部構造は知らないけどね。
プログラマが好むのはAmazonじゃないかなあ？
フェラーリもデイトナは元々のシャシーはもっと幅が狭くてデザイナーの提案に合わせてシャシーの側を
設計変更したし、水平対向ミッドシップレイアウトはピニンファリーナ側からフェラーリへ提案したとか。
そういう柔軟さも大事だね。
Re:日本のスマートフォンサイトの問題点 (スコア:3)
パフォーマンスの平均値、ファイル容量、オブジェクト数のデータは公開しているので、こちらをどうぞ。
私は、日本担当なので、他の地域はよく知りません。しかし、ACMの記事とか、Website Magazineの記事などを読んでいると、扱っている問題は日本と同じなので、似たようなものらしいです。
アメリカ リテールモバイルサイト
www.keynote.com/keynote_competitive_research/performance_indices/mobile/retail/index.html
アメリカ ニュース&ポータルモバイルサイト
www.keynote.com/keynote_competitive_research/performance_indices/mobile/news/index.html
アメリカ ファイナンスサービスモバイルサイト
www.keynote.com/keynote_competitive_research/performance_indices/mobile/financial_services/index.html
アメリカ スタートアップ企業3スクリーン(PC、タブレット、スマートフォン)
www.keynote.com/keynote_competitive_research/performance_indices/startup/index.html
一昨年ぐらい会議で・・ (スコア:3, 興味深い)
ガラケーに対応しようとして (スコア:2)
おかしくなるパターンには何度か遭遇したことはあるな・・・
スラドのことか (スコア:1)
おっと、モバイル版Webサイトなんかなかった
そもそも、スコアの選択をスライドでやらせるような改悪をする奴らだし、期待するだけ無駄か
(プルダウンのままになぜしなかったし)
Re: (スコア:0)
スライドひどいよね、不可解。
ID取れば別の方法があるという噂もあるけど、ACが良いし。
ちゅーか、こういうスライド部品をどうにか操作する方法って無いのかしら。
Win8のタブレットとかではどうやってるんだろ？ 手段無し？
Re:スラドのことか (スコア:1)
IE11ではスライド動くらしいよ。
Re: (スコア:0)
Win8は押さえたままスライドさせればドラッグできるんじゃなかったっけ？
店頭でちょっといじっただけで、今手元に無いから保証できないけど。
そうそう、スラドの変なところといえばモバイル版Chromeで見るとフォントサイズがめちゃめちゃってのがあったっけ
(Chromeが悪いという説も否定しない。標準ブラウザではフォントサイズちゃんとしてるし)
Re:スラドのことか (スコア:2)
Re:スラドのことか (スコア:1)
そもそもサイト側がフォントサイズをコントロールしようとするのが間違い。
ユーザーが自分で見やすいサイズをブラウザに設定してるんだから弄るんじゃねえよまったく。
Re: (スコア:0)
D1使えばいい。ID取ってもACで書き込めばいいだけの話だし。
デフォでACにする設定もある。自分はそうやって使ってる。
D2なんて、スレッド無視の新着コメント順に表示できない時点で論外だ。
Re: (スコア:0)
Opera Mobileのシングルコラム表示でなら見られないこともないですよ。
リンクのクリックはしづらいですけどね。
Re: (スコア:0)
中間点がボタンとかとして機能すればまだマシなんだがな。
ドラッグ操作のないタッチパネルと相性悪い。
昔は端末の容量制限が (スコア:1)
昔は端末がレンダリング可能な容量の制限が厳しかったなぁ(思い出)
Re:昔は端末の容量制限が (スコア:4, 興味深い)
モバイル向けに、そんなに何種類もページ作るのは難しいから、
『対象環境で、最もプアなものに合わせて作ろう』 という方針で作った結果、
新しめのデバイスで見ると、ものすごく低レベルなページに見える。
みたいなことはありましたね。
現在ならどうか、と考えてみると、
モバイルデバイスは、昔より遙かに高性能になってますが、
端末やユーザによって、状況が全然異なってる。という点はどうしようもないので、
画面構成にしてもUIにしても、結局、最大公約数的で無難なものに落ち着いちゃって、
結果として、誰が見ても中途半端でイマイチなものに見える。
とか、そういうパターンはありそう。
Re: (スコア:0)
それでもPC版が見えるならそっち見るからいいんだが、
PC版を選択してるのに何かの拍子に無理やりモバイル用のしょぼいサイトに
誘導するようなのはかなりイライラするんだが
Re:昔は端末の容量制限が (スコア:1)
しょぼいサイトならまだともかく、
スクロールしてもついてくる広告バナーとか、静止状態にしておくと出てくる広告バナーのせいで
PC版より重いサイトとか
PC版の見え方＋ついてくるバナーとかいうあわせ技なところとかだともう何がなんだか
安かろう、悪かろう (スコア:1)
そりゃ金払いが悪いんじゃ、その分品質が下がるのは当然のことでしょ。
＃なに当たり前の話をしてるんだ?
＞スマホやタブレットなどのモバイル機器では、PCと同じWebサイトが見れるんじゃないの？
可能か不可能かなら可能。
ただ可能なだけで、それ以上でも以下でも無い。
ＰＣ用でさえも、大画面専用にデザインされたサイトを、13インチくらいの
ノートＰＣで見るのは苦痛以外の何物でもなかったりするのに、
それより小さい画面で平気なわけないじゃん。
有料 (スコア:0)
モバイル向けのサイトは有料とか登録が必要
けど、 PC向けサイトは無料で登録もいらないってサイトが多い
まあ、俺が使うサイトがそっち系なのかも知れんけど
そもそも (スコア:0)
情報の中身や遷移を詰めるより、余計なお世話機能を増やすことに精力を傾けるから。
モバイル版ってなに？ (スコア:0)
いまだガラケー使いでスマホ乗り替えに多少興味のある私ですが、モバイル版のWebサイトってどういうこと？
スマホやタブレットなどのモバイル機器では、PCと同じWebサイトが見れるんじゃないの？
Re:モバイル版ってなに？ (スコア:3)
普通は見られるし (ブラウザーに依存する作りのウェブページは別)、注意して作れば同じウェブページでパソコンでもスマートフォンでもタブレットでも快適に見られる。けれど、たいていのウェブページは横幅がある程度以上あることを前提に作っているので、スマートフォンでは拡大したり縮小したりしないといけなくて使いにくい。なので、画面が小さいスマートフォン用のバージョンを用意しているサイトが多数ある。そのバージョンのことをモバイル向けと呼んでる。
タブレットは画面サイズがあまり問題にならないからパソコンと同じ版を使うことが多いと思う。けど、タブレットは持っていないから知らない。
画面サイズ以外に、操作方法もマウスとタッチで違う (例えば、マウスカーソルを合わせるだけでクリックしない、という操作に対応する操作がタッチデバイスにはない) から、もしもそれが問題になるならタブレット版を用意する場合もあるかもしれない。
詳しくはぐぐるべし。
Re:モバイル版ってなに？ (スコア:2)
> 注意して作れば同じウェブページでパソコンでもスマートフォンでもタブレットでも快適に見られる。けれど、たいていのウェブページは横幅がある程度以上あることを前提に作っている
モバイルページをCSS切り替えで何とかしようという話もあったけど、通常ページをシンプルかつ見やすく作って、完全にワンソースで対応した方が楽だし健全、と（個人的に）結論し、現在に至る。
Re:モバイル版ってなに？ (スコア:2)
モバイル版ってなに？という疑問ももっともと思が、
それ以前に「できの悪い」の一言では何を言いたいのかがわからないよね。
画面とか入力方法の話を始めたら「モバイル」と呼ばれる形態がそもそも間違いと思う。
例えば、公衆電話なら高品質の会話ができるのに、モバイルフォンになったから格段に品質おちたように。
情報や通信手段が欲しいだけなのに、コンピューター本体を持ち歩くのは辛いよね。
Re:モバイル版ってなに？ (スコア:2)
Androidは見れますよ。
デフォルトだとモバイル用になるけど、2タッチでPC版サイトも見れる。
（iPhoneは知らない）
モバイル用≠ガラケーでみるサイト です。
ちなみに自分は激安SIMのスマホとガラケーの2台持ちです。今はこれが一番良いんじゃないかと思って満足してます。
Re:モバイル版ってなに？ (スコア:1)
いわゆるガラケーでもフルブラウザ搭載のならPC版と同じサイトが見られましたけどね。
スマホ用といわれるサイトが結局あれこれ隠してしまって使いづらいだけになっていることはよくあります。
ψアレゲな事を真面目にやることこそアレゲだと思う。
Re: (スコア:0)
いわゆるガラケーでもフルブラウザ搭載のならPC版と同じサイトが見られましたけどね。
ソフトバンクにもPCサイトブラウザ [softbank.jp]があったけど、そんなに互換性高くないすよ。
Googleの携帯ゲートウェイ通している方がよっぽどあちこち見られる。
おまけにパケ放題の上限料金が上がるんだ、これ使うと・・・・。
「モバイル向けサイト」なんて必要ない (スコア:0)
スマートフォンにしてもタブレットにしても十分な描画領域とユーザーによるスクロール・ズーム機能があるのだからわざわざそんなものを作る必要がそもそもない。
バカみたいに文字だけでかくして情報量を減らした「モバイル向けページ」を強制的に見せられるほうの身にもなってみろ。
Re:「モバイル向けサイト」なんて必要ない (スコア:1)
描画領域が広がっても描画サイズが小さくなっていたら見づらいのは当たり前。
いくら解像度が同じ1920*1080でも、画面サイズが15cm程度のスマホでは、
その3倍以上のスケールである17インチや24インチのディスプレイで見るのと同じ表示をしていたら無理があります。
問題はそこではなく、「モバイルで見るためのデザイン＝情報量削ぎ落とし」という方向性になっていることではないでしょうか？
ψアレゲな事を真面目にやることこそアレゲだと思う。
Re: (スコア:0)
実際そぎ落としてるのは「広告スペース」だけどね。
だからスマホ/タブレット向けページは単価が低く見られがちで、
手間かけて作り込もうとするモチベーションが上がらない。
Re:「モバイル向けサイト」なんて必要ない (スコア:4, すばらしい洞察)
広告がなくなってるだけなら「ﾓﾊﾞｲﾙ向けサイト」の評判が悪い理由などない
Re:「モバイル向けサイト」なんて必要ない (スコア:1)
それは違う｡
出来の悪いバナー広告を貼り付けるために中身を削ってるんだ｡
Re: (スコア:0)
にもかかわらず依然存在していると言うことは、単一サイトは万人が納得できるものではないと言うことですなぁ。
Re:「モバイル向けサイト」なんて必要ない (スコア:1)
モバイル向けであろうとPC向けであろうと、
利用者の納得できるサイトって少数派じゃなかろうか。
過半数(個人の印象です)のサイトは作り手というかウェブデザイナーの自己満足で利用者軽視であると思う。
たとえば、無意味なフラッシュで構成されていて、必要な情報にたどりつけなかったり、テキストをコピペできなかったり・・・
Re:「モバイル向けサイト」なんて必要ない (スコア:1)
プレーンなHTMLで書いて、くだらんデザインとか余計な装飾とかしなければ、何で見ても問題ない見やすいページになるはずなのにねえ。
Re: (スコア:0)
そういった明らかな解決策を一切受け付けない人たちがいて
HTML5とか言い出したんですよ。
わきまえてください。
Re: (スコア:0)
スラドのことですねわかります
Re: (スコア:0)
そういう人たちが偉そうな顔をしてるのが根本的な問題ということですな
そういう人たちってどっからやってきたんですか？
開発環境 (スコア:0)
スマホで書いて、スマホで上げたページは、スマホで見やすかったですよ？
ＰＣで見たら手抜きに見えましたが。