スマートフォンは、PC向けのWebサイトをほぼそのまま閲覧できる「フルブラウザー」を搭載しています。しかし、画面解像度や回線速度の制限、タッチパネル操作が主流といった特性から、PC向けサイトのままでは見づらく、使いづらい場合も少なくありません。

　そこで、スマートフォンに最適化された「スマートフォンサイト」を用意する企業も増えています。

スマートフォンサイトとPCサイトの違い

　スマートフォンにはさまざまなプラットフォームがありますが、スマートフォンサイトでは国内シェアが高いiPhone／Androidが対象になることがほとんどです。

　iPhone／Androidの標準ブラウザーは、どちらもPC用のSafariなどと同じ「WebKit」というレンダリング（描画）エンジンを採用しています。このため、iPhoneとAndroidの表示結果は似ており、PCのSafariとも近い表示結果になります。

　一方で、PCとの違いもあります。スマートフォンのブラウザーは常に全画面で表示され、ウィンドウサイズは変更できません。そのため、ボタンや文字は全画面で表示されることを前提に、読みやすく、タッチ操作しやすい大きさに調整します。

　1ページに使用できるファイルの容量やJavaScriptの処理時間にも制限があります。iPhone／Android端末ともにサイズの大きなページを開くと動作が遅くなりますし、PCに比べて通信速度も遅いので、ケータイサイトと同様、できるだけ軽量に作る必要があります。

　また、ほとんどのスマートフォンのブラウザーでは、プラグインが使用できません。iPhoneはFlash Playerに対応していないので、Flashは再生できません。AndroidにはFlash Playerがありますが、すべての端末に搭載されているわけではありません。

　プラグインが利用できない代わりに、iPhoneやAndroidではHTML5やCSS3といった最新技術が利用できます。リッチな表現が求められる場合は、こうした代替技術の利用を検討しましょう。

スペックや仕様変更にも注意しよう

　スマートフォンは、PCに比べてハードウェアの性能が低いので、PCでは問題なく動作していたサイトでも、スマートフォンでは処理能力が追いつかず、適切なパフォーマンスが得られないこともあります。

　OSのアップデートや新機種投入のサイクルが早く、ハードウェアの性能や仕様、制限事項もその都度変わっています。ここで触れたポイントも、本書が発行された時点ではすでに過去のものとなっている可能性もあります。Webディレクターは常に最新の情報を得るようにして、サイト制作に反映するよう心がけましょう。

カテゴリートップへ

ソーシャルリアクション

この連載の記事

• 第91回  事例でみる大規模サイトの運用ディレクション
• 第90回  Webディレクター向け　文字コードとフォントの基礎知識
• 第89回  CMSテンプレートによるWebサイトの制作
• 第88回  Webサイトの品質を保つ制作仕様書の作成
• 第87回  Google検索を変えるマイクロフォーマットとは？
• 第86回  RSSフィードの作成と活用
• 第85回  ワイヤーフレームのツールと作り方
• 第84回  進行管理に便利なディレクトリマップの作成方法
• 第83回  サイトマップの種類と作り方
• 第82回  Webサイトの使い勝手を決めるナビゲーション設計
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• Webディレクション最新キーワード

はてブ注目ランキング

1. 世界を変える方法は山川の教科書に書いてある638 users

2. 10分でわかる！ jQuery Mobileのキホン103 users

3. iBooks AuthorでHTML5の電子書籍作ってみた77 users

4. HTML5要素のブラウザー実装状況を調べてみた39 users

5. コンテンツを依頼するときのSEOチェックリスト1738 users

6. 40分で覚える！jQuery速習講座2225 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2151 users

8. もう配色には困らない！「Adobe Kuler」1683 users

9. 30分でできる！Webサイトを高速化する6大原則1498 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1217 users

最新記事

• 「サイトアドバイザー」でネットの危険を神回避！

  

• iTunes in the Cloudだけじゃない 担当者が教える5つの新機能

  

• au版iPhoneのキャリアメールが3/13からリアルタイム受信対応

  

• REGZAサーバー録画中の「できること」と「できないこと」

  

• 「Pogoplug」で超簡単マイクラウドストレージを構築する技