スマホサイト制作

スマートフォンサイト案件が来たときのために、スマホサイト制作についてまとめておきます。
※このページは、たにぐちまこと著「iPhone+Androidスマートフォンサイト制作入門」から抜粋しております。

スマートフォンの特徴・仕様

まずはスマホのことを知っておきましょう。

■iPhone

解像度：320×480px（4は640×960だがブラウザでは320×480で表示する仕様になっている）
ブラウザ：Mobile Safari（WebKitベース）

「Mobile Safari」の制限

・プラグインに非対応→「Flash Player」が使えない、等
・文字コードの変更ができない→meta要素で文字コードを忘れず指定する
・ウィンドウの制御ができない→常に全画面
・ファイルのアップロード、ダウンロードもできない→アプリで対応
・ファイルサイズなどの制限→「Safari Web Content Guide」参照

■Android

解像度：320×480px～640×960px
ブラウザ：ブラウザ（WebKitベース）

「ブラウザ」の制限

・プラグインに非対応→「Flash Player」は標準搭載（Android2.2以降）
・ファイルのアップロードはできない（ダウンロードは可能）

基本的なマークアップ

Viewportの設定

これにより、仮想ウィンドウサイズを設定することができます。
デフォルトだと「Mobile Safari」の場合は980pxに設定されているので、スマホ専用サイトは見づらくなってしまいます。
それを解消するため、画面の横幅に合うよう設定します。基本的に以下のように記述しておけば大丈夫でしょう。
<meta name="viewport" content="width=device-width, user-scable=no, initial-scale=1, maximum-scale=1">

width＝横幅
user-scable＝ユーザーによる拡大・縮小の許可の有無
initial-scale＝初期の倍率
maximum-scale＝拡大可能な最大の倍率

リセットCSSの読み込み

リセットCSSは、HTML5用のものを用います。HTML5 Doctorが配布している「html5reset.css」を利用するとよいでしょう。

HTMLマークアップ

基本的にはHTML5／CSS3でマークアップします。

参考リンク

• ■実践！iPhone＆Androidサイト制作ガイド

http://ascii.jp/elem/000/000/543/543575/

• 第1回 スマートフォン対応サイトの作り方、教えます：http://ascii.jp/elem/000/000/533/533011/
• 第3回 サイト制作の前に知りたいiPhone/Androidの仕様：http://ascii.jp/elem/000/000/545/545325/
• 第4回 スマートフォン対応サイトを設計するときのノウハウ：http://ascii.jp/elem/000/000/547/547283/
• 第5回 スマートフォンサイトをデザインする7つのポイント：http://ascii.jp/elem/000/000/549/549206/

---

• ■スマートフォン最適化を実施する際に最低限抑えておきたいこと

http://blog.livedoor.jp/ld_directors/archives/51459535.html

• ■スマートフォンサイトをデザインする上で知っておくべき10のTIPS

http://blog.webcreativepark.net/2011/06/16-103025.html

• ■200サイトのiPhoneデザインを見て感じたスマートフォンの最適化

http://ameblo.jp/linking/entry-11020427542.html

---

• ■スマホのUI考1 ボタンについて

http://fladdict.net/blog/2011/06/smart-button.html

• ■スマホのUI考2 フィードバックについて

http://fladdict.net/blog/2011/06/smart-feedback.html

• ■スマホUI考3 ジェスチャ入力について

http://fladdict.net/blog/2011/06/smart-gesture.html

---

• ■第1回 スマートフォン対応の重要性とその方法

http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/smartphone_web_part1.html

• ■第2回 スマートフォン特有の表示環境を理解する

http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/smartphone_web_part2.html

• ■第3回 スマートフォン向けのコーディング

http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/smartphone_web_part3.html

• ■第4回 画像の扱いと最適化

http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/smartphone_web_part4.html

---

• ■ネットブックやスマートフォン利用者に配慮したサイト作り

http://www.bebit.co.jp/memo/2009/09/post_153.html

• ■iPhoneサイトで気をつける3つのポイント

http://www.bebit.co.jp/memo/2010/08/iphone.html

• ■スマートフォン対応しただけで、安心してはいけない理由

http://www.bebit.co.jp/memo/2010/08/post_190.html

• ■【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題

http://www.bebit.co.jp/memo/2010/09/_web_6.html

• ■【スマートフォン】スキマ時間を捉える3つのポイント

http://www.bebit.co.jp/memo/2010/08/3_1.html

スマートサイトで特に参考にすべき企業サイト

• ・Yahoo
• ・楽天
• ・楽天トラベル
• ・セブンイレブン
• ・ローソン
• ・サントリー
• ・セブンネットショッピング
• ・食べログ
• ・クックパッド

スマートフォン キャプチャ収集サイト

• ■iPhoneデザインボックス

http://design.web-hon.com/

• ■スマートフォンサイト集めました。

http://sp-web.jp/

• ■絶対見ておきたい有名企業のスマホサイトまとめ

http://ascii.jp/elem/000/000/590/590502/