![000 15 -](http://actualweb.ru/wp-content/uploads/2009/11/000.jpg)
モバイルデバイスに適したWebサイトの15の例を選択しました。 モバイルデバイスユーザーの数は、コンピューターから接続するユーザーの数を超えており、モビリティが将来であることは明らかです。
驚くべきことに、ネットワーク上にモバイル版があるサイトはほとんどありません。 一部の大規模なサイトにはそのようなバージョンがありますが、これは標準ではありません-今日のほとんどのサイトはモバイルデバイス用に設計されていません。
モバイルサイトのデザインは、非常に単純なテキストからリッチなグラフィックの使用までさまざまです。 今日、ほとんどのモバイルデバイスは高速インターネットで動作し、HTML、JavaScript、およびサイトをAJAXテクノロジーで正しく処理できます。
モバイルWebサイトの迅速な開発が期待されており、その後、サイトの品質とその双方向性が向上します。
今日、携帯電話向けのシンプルなモバイルWebサイトを作成する傾向があり、iPhoneにもっと浸透しています。 古い電話モデルでもHTMLを十分に表示でき、その数はiPhoneの数倍も多いため、この傾向がすぐに変わることを願っています。
優れたモバイルWebサイトを本当に優れたモバイルWebサイトにする理由は何ですか?
1)互換性。
サイトは、最も一般的な画面に正常に表示されるはずです。 現在最も人気のあるサイズは240x320です。 480x320(iPhone)などのより大きなサイズは、大きなディスプレイと大きな解像度を備えた新しいモデルのデバイスが登場するにつれて、ますます人気が高まっています。 モバイルデバイス用のサイトを開発している場合は、そのサイトが最も一般的なサイズの画面に正しく表示されていることを確認してください。
サイトはxhtmlをサポートする必要があります。 JavaScriptの使用は避けてください。ただし、必要に応じて、ナビゲーションやリンクなどの重要な要素では使用しないでください。
2)コンテンツを最適化する必要があります。
画像は、サイズとキロバイトの両方でサイズを小さくする必要があります。これにより、画像をすばやく読み込み、最も一般的な画面サイズに対応できます。
3)ユーザビリティ
このサイトは使いやすいものでなければなりません。 多くのモバイルサイトでは、Webサイトの向きが悪夢に変わるようなナビゲーションを使用しています。
4)良いデザイン。
デザインは非常に重要です。 優れたモバイルデザインは、見栄えが良いだけでなく、cr屈に見えるべきではありません。 ナビゲーションはシンプルで、サイトはすばやく読み込まれる必要があります。
例:
![001-digg Digg](http://actualweb.ru/wp-content/uploads/2009/11/001-digg.png)
ディグ
http://m.digg.com/
シンプルなデザイン-見栄えが良く、すぐにロードします。 スペースが合理的に使用されるリッチコンテンツを使用したWebサイトデザインの良い例。 彼らは広告する場所さえ見つけました!
![002-ブライトカイト-002 Brightkite](http://actualweb.ru/wp-content/uploads/2009/11/002-Brightkite-002.jpg)
ブライトカイト
![002-ブライトカイト-001 Brightkite](http://actualweb.ru/wp-content/uploads/2009/11/002-Brightkite-001.jpg)
ブライトカイト
http://i.brightkite.com
色とスペースを使用した人気のあるデザインを使用した素晴らしい例です。 小さなアイコンを巧みに使用して、デザインと大きなナビゲーションリンクをアニメーション化します。
![003-Taptu-001 Taptu](http://actualweb.ru/wp-content/uploads/2009/11/003-Taptu-001.jpg)
タプトゥ
![003-Taptu-002 Taptu](http://actualweb.ru/wp-content/uploads/2009/11/003-Taptu-002.jpg)
タプトゥ
http://www.taptu.mobi/
シンプルなデザイン、優れた簡単なナビゲーション。 画面不足の場合にサムネイルを使用する良い例。
![004-YellowPages-001 YellowPages](http://actualweb.ru/wp-content/uploads/2009/11/004-YellowPages-001.jpg)
イエローページ
![004-YellowPages-002 YellowPages](http://actualweb.ru/wp-content/uploads/2009/11/004-YellowPages-002.jpg)
イエローページ
http://m.yellowpages.com/
デザインとブランドプロモーションを活性化するための色の素晴らしい使用。 スペースの有効活用。
![005-Amazon.com Amazon.com](http://actualweb.ru/wp-content/uploads/2009/11/005-Amazon.com.png)
Amazon.com
http://www.amazon.com/gp/aw/h.html
最も人気のあるデバイスに表示されるシンプルなデザイン。
![006-mailchimp Mailchimp](http://actualweb.ru/wp-content/uploads/2009/11/006-Mailchimp.jpg)
メールチンプ
http://m.mailchimp.com/
グラフィックを使用したインターフェース。 バランスのとれたデザインの大きく明確なナビゲーション。
![007-ビジェ Viget](http://actualweb.ru/wp-content/uploads/2009/11/007-Viget.jpg)
ビジェ
http://i.viget.com/
豊富なコンテンツを備えたと同時に、わかりやすいデザインのサイトの良い例です。
![008-アメリカ銀行 Bank of America](http://actualweb.ru/wp-content/uploads/2009/11/008-Bank-of-America.jpg)
アメリカ銀行
http://bofa.mobi/
良いデザイン、明確なナビゲーション。
![009-facebook-001 Facebook](http://actualweb.ru/wp-content/uploads/2009/11/009-Facebook-001.png)
フェイスブック
![009-facebook-002 Facebook](http://actualweb.ru/wp-content/uploads/2009/11/009-Facebook-002.png)
フェイスブック
http://m.facebook.com/
おそらく最もリッチなユーザーインターフェイスを備えたサイト。 リッチコンテンツ、優れた操作性、すぐに読み込まれ、見栄えの良いサイトの良い例です。 改善するものすらありません!
![010-Singlehop-001 Singlehop](http://actualweb.ru/wp-content/uploads/2009/11/010-Singlehop-001.png)
シングルホップ
![010-Singlehop-002 Singlehop](http://actualweb.ru/wp-content/uploads/2009/11/010-Singlehop-002.png)
シングルホップ
http://singlehop.mobi/
優れたデザイン、モバイルデバイスの管理管理の優れた例、サイトはすばやく読み込まれ、ほとんどのデバイスに表示されます。
![011-coosh Coosh](http://actualweb.ru/wp-content/uploads/2009/11/011-Coosh.png)
クッシュ
http://coosh.com/iphone/
iPhone専用に設計されており、豊かなデザインと使いやすさを融合した代表的な例です。
![012-WebdesignerDepot Webdesigner Depot](http://actualweb.ru/wp-content/uploads/2009/11/012-WebdesignerDepot.png)
Webdesignerデポ
http://m.webdesignerdepot.com/
コンテンツはほとんどのブラウザで表示され、ページは読みやすく、制約の感覚はありません。
![013-マットバンゴ Matt Bango](http://actualweb.ru/wp-content/uploads/2009/11/013-Matt-Bango.png)
マット・バンゴ
http://mattbangophotography.mobify.me
色、スペース、大きな写真の適切な使用。
![014-NikeLab NikeLab](http://actualweb.ru/wp-content/uploads/2009/11/014-NikeLab.png)
ナイキラボ
http://www.nike.com/nikelab/i/app.html#e<wbr /> n_GB / home
このサイトはiPhoneユーザー向けに作られており、リッチなユーザーインターフェースを備えた素晴らしい例です。
![015-flickr-001 Flickr](http://actualweb.ru/wp-content/uploads/2009/11/015-Flickr-001.png)
Flickr
![015-flickr-002 Flickr](http://actualweb.ru/wp-content/uploads/2009/11/015-Flickr-002.png)
Flickr
http://m.flickr.com/
インタラクティブなモバイルWebサイトの素晴らしい例。 大きなテキストと入力フィールドはうまく機能します。 多くの情報を表示し、混雑感を生じさせない方法の最良の例の1つ。
「 モバイルウェブサイトデザインの15の美しい例 」の翻訳