スマートフォン対応

スマートフォン対応とは？
1 PC・携帯サイトをスマートフォン用に最適化したWebサイト
2 スマートフォン専用サイト
3 スマートフォンアプリ
・Webアプリ … JHTML5/CSS/JavaScriptを用いて開発する方法。イメージ例:市販車
・ネイティブアプリ … JavaやC/C++などのプログラミング言語とSDKを用いてネイティブアプリケーションとして開発する方法。イメージ例:F1

画面解像度による違い
・スマートフォン … ～480
・ネットブック … 480～1024
・PC … 760～

テンプレートによる違い
1 テンプレ数2 … 「PCメイン＋スマートフォン対応」「携帯専用」
2 テンプレ数2 … 「PCメイン＋スマートフォン対応」「携帯専用メイン＋スマートフォン対応」
3 テンプレ数3 … 「PCメイン＋スマートフォン対応」「携帯専用」「スマートフォン専用」

技術による違い
1 携帯専用 … 「HTML」+「Flash Lite」
2 PCメイン＋スマートフォン対応 … 「HTML」+「Flash」+「JavaScript」
3 スマートフォン専用 … 「HTML」+「JavaScript」

スマートフォン専用サイト制作のポイント
・HTML5+CSS3+JavaScriptを使用
・Portrait(縦画面)とLandscape(横画面)を意識しリキッドデザインを使用
・１カラムレイアウト

---

ウィンドウサイズを基準にデザインを調整
レスポンシブWebデザイン
・デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法
・モバイルサイト制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更

レスポンシブWebデザインを選択する4つの理由
1．ワンソースなので画像やテキストの変更などのメンテナンスが容易
2．CSSだけで実装するのでフロントエンドで開発が完結
3．他のデバイスへの拡張性が高い
4．スマートフォン非対応のCMSでもCSSの調整だけで対応可能

1．ワンソースなので画像やテキストの変更などのメンテナンスが容易
・Webサイトをマルチデバイスに対応させる場合、少し前であれば、iPhone, iPad などのOSやスクリーンサイズごとにキメ細かくデザインを調整したページ（HTML）を用意し、サーバーサイドの技術などを利用して細かく振り分ければよかった。しかし、各社からAndroid端末が次々と発売されている現在は、何パターンのスクリーンサイズが存在するのか把握することが困難
・デバイスごとにHTMLを用意して、何種類ものCSSを用意するのは難しい。今後も各キャリアから「春・夏」「秋・冬」と続々とリリースされるモデルごとにOSやデザインを用意して対応するのは極めて困難

3．他のデバイスへの拡張性が高い
・レスポンシブWebデザインでは、HTMLは1つであり 、CSSもデバイスごとのOSやスクリーンサイズに依存しないように設計する。ウィンドウサイズを決定してCSSを記述すれば問題はない

レスポンシブWebデザインを作る3つのステップ
1.ピクセル単位でデザインしてパーセント単位に変換
2.画像サイズを指定する（Fluid Image）
3.respond.js の読み込み
・320ピクセル iPhoneを代表とするスマートフォン
・768ピクセル iPad を代表とするタブレット端末
・1024ピクセル デスクトップPC
・1680ピクセル スマートTVをはじめとする大きなスクリーン
▽URL