「スマホサイト制作」を編集中

スマートフォンサイト案件が来たときのために、スマホサイト制作についてまとめておきます。<br>
※このページは、たにぐちまこと著「[http://www.amazon.co.jp/iPhone-Android-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E5%85%A5%E9%96%80-WEB-PROFESSIONAL/dp/4048702181 iPhone+Androidスマートフォンサイト制作入門]」から抜粋しております。

<div id="manual">
==スマートフォンの特徴・仕様==
<p>まずはスマホのことを知っておきましょう。</p>
===■iPhone===
<p>解像度：320×480px（4は640×960だがブラウザでは320×480で表示する仕様になっている）<br>
ブラウザ：Mobile Safari（WebKitベース）</p>
<br>
'''「Mobile Safari」の制限'''
<p>
・プラグインに非対応→「Flash Player」が使えない、等<br>
・文字コードの変更ができない→meta要素で文字コードを忘れず指定する<br>
・ウィンドウの制御ができない→常に全画面<br>
・ファイルのアップロード、ダウンロードもできない→アプリで対応<br>
・ファイルサイズなどの制限→「Safari Web Content Guide」参照
</p>
<br>
===■Android===
<p>解像度：320×480px～640×960px<br>
ブラウザ：ブラウザ（WebKitベース）</p>
<br>
'''「ブラウザ」の制限'''
<p>
・プラグインに非対応→「Flash Player」は標準搭載（Android2.2以降）<br>
・ファイルのアップロードはできない（ダウンロードは可能）
</p>
<br>

==基本的なマークアップ==
===Viewportの設定===
<p>これにより、仮想ウィンドウサイズを設定することができます。<br>
デフォルトだと「Mobile Safari」の場合は980pxに設定されているので、スマホ専用サイトは見づらくなってしまいます。<br>
それを解消するため、画面の横幅に合うよう設定します。基本的に以下のように記述しておけば大丈夫でしょう。<br>
'''<meta name="viewport" content="width=device-width, user-scable=no, initial-scale=1, maximum-scale=1">'''</p>
<br>
<p>
'''width'''＝横幅<br>
'''user-scable'''＝ユーザーによる拡大・縮小の許可の有無<br>
'''initial-scale'''＝初期の倍率<br>
'''maximum-scale'''＝拡大可能な最大の倍率
</p>
<br>

===リセットCSSの読み込み===
<p>リセットCSSは、HTML5用のものを用います。[http://html5doctor.com/ HTML5 Doctor]が配布している「[http://html5doctor.com/html-5-reset-stylesheet/ html5reset.css]」を利用するとよいでしょう。</p>
<br>

===HTMLマークアップ===
<p>基本的には[[HTML5／CSS3]]でマークアップします。</p>
<br>

==参考リンク==
*■実践！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/

</div>