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

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

第1回 スマートフォン対応サイトの作り方、教えます
第2回 作って学ぶスマートフォン対応サイトの基本
第3回 サイト制作の前に知りたいiPhone/Androidの仕様
第4回 スマートフォン対応サイトを設計するときのノウハウ
第5回 スマートフォンサイトをデザインする7つのポイント
第6回 実例でわかる！スマートフォンサイトの画面設計
第7回 HTML5/CSS3で作るスマートフォンサイトの基本
第8回 JavaScriptで振り分けてスマホサイト完成！
第9回 CSS＋jQueryでクロスデバイスサイトを作ろう
第10回 jQueryでiPhone風スライドパネルを作ろう

ポイントをまとめると・・・

■第1回 スマートフォン対応サイトの作り方、教えます

●メジャーなサイトのスマホ対応
●スマホの対応のそれぞれ
・コンテンツやサービスをスマートフォン向けに全て最適化
・専用アプリを提供
・一部のページだけ対応
●必要知識
・HTML+CSS(HTML5/CSS3)
・Javascript(2本指を使ったジェスチャーや画面の拡大/縮小等)
●制作方法
・1から作成
・PCサイトをスマートフォンで見やすくする（HTML＋CSS修正）

■第2回 作って学ぶスマートフォン対応サイトの基本

●Viewport（自動縮小）
●シミュレータ
・iPhoneシミュレーター（Macのみ）
・Androidシミュレーター・・・eclipseが必要

■第3回 サイト制作の前に知りたいiPhone/Androidの仕様

●iPhone標準ブラウザーは「Safari」
●Mobile Safariの制限
・プラグイン非対応のため、Flash NG
・文字コードエンコーディング設定がない
・ファイルのアップロード・ダウンロードができない
・画像容量、Javascriptの処理時間に制限有
●Androidとはグーグルが中心になって開発しているモバイル用OSの名称
●Androidの標準ブラウザーは「ブラウザ」(chromeに近い）
●Android 端末の制限
→基本はMobile Safariと同じ、プラグイン非対応、アップロード、ダウンロードNG
　でもFlashはOK。

■第4回 スマートフォン対応サイトを設計するときのノウハウ

●QRコードを認識するソフトウェアが標準では搭載されていない
●ゴールをフォーム入力ではなくTel問い合わせ、リアル店舗への誘導、
　Twitterやメールを使ったURLをPCと共有、ブックマーク、ホーム画面への追加などがよいかも
●階層は浅く、1ページは長く設計
●スクロールバーが存在しないので（指でなぞるため）
　ページ内リンク、折りたたみ、タブなどを有効利用
●文字サイズはPCサイトよりも大きく（14〜15pt程度）

■第5回 スマートフォンサイトをデザインする7つのポイント

●PC同様ワイヤーフレーム→デザインカンプを作成
●リキッド（可変幅）でデザイン
→コーディングだけでなく、デザインカンプでボタン作成時も
　幅を問うような装飾を施さない（ボタン幅が変えられるようなデザイン）
●縦画面と横画面でレイアウトを変更するにはCSSの「メディアクエリー」を使って対応できる
●pngが使える
●画像を使って表現していた角丸ボックスやグラデーションなどの装飾要素は、容量削減のため、CSS3のプロパティを利用する
●ロールオーバーができないので、リンクだとわかるようにする（画像リンクとか）


■第6回 実例でわかる！スマートフォンサイトの画面設計

●PCサイトのコンテンツ選定（どこをスマホサイトに取り入れるか）
●サイトマップを作成
・Webサービス「Cacoo」でサイトマップ作成
　https://cacoo.com/
　ワイヤーフレームの作成もできる
●ジャンプボタンの配置方法

■第7回 HTML5/CSS3で作るスマートフォンサイトの基本

●デザインカンプの作成
●HTMLはHTML5を使用
●リセットCSSの組み込み
・文字のサイズや太さ、マージンなどブラウザーによって違い、標準が適用されるため
　リセット用のCSSを適用してブラウザーの標準スタイルを無効にする
・HTML5 DoctorやGoogle Codeから取得できる
●角丸をCSS3のaside要素（のborder-radius）で作る
●ボタンのグラデーションのCSS3(-webkit-gradient)

■第8回 JavaScriptで振り分けてスマホサイト完成！

●CSSでボタンを作成したときはリンク領域もCSSで拡大する
●smoothScroll.jsでスクロールをスムーズにする
●スマートフォンとPCの振り分けはJavascriptでもできる
●PCとスマホでコンテンツの内容が違い、振り分けする場合は
　スマホサイトに転送してよいかをダイアログで確認

■第9回 CSS＋jQueryでクロスデバイスサイトを作ろう

●クロスデバイス＝PC向けのHTMLを利用し、CSSとJavaScriptだけで
　レイアウトやデザインを変更すること
●メディアクエリー＝出力する媒体（PC、印刷など）や画面解像度など条件に合わせてスタイルを適用できるCSS3の機能
　linkタグのmedia属性を指定する
　例えば横幅が狭い環境で見たとき、メニューを非表示にしてメインのみ表示
●非表示にしたメニュー部分はCSSのdisplay:noneで非表示
　＋jQueryでエフェクト表示をさせる
●画像もjQueryで切り替えられる（CSSとメディアクエリーでもOK）


■第10回 jQueryでiPhone風スライドパネルを作ろう
●jQuery：http://jquery.com
・文字のフェイドアウト
・左右スライド
・その他いろいろ

何度も読み返したいサイト。
[コメントが多かった順の記事]
・人の心理の裏をかくホームページ集客術：リピータになってもらうためには(233)
・ホームページ心理学第２弾「メールの書きだしとホームページ運営・集客の関係」(76)
・娘が生まれた(69)
・ゲームと言えば、何を思い出す？ (50)
・Microsoftからアクセス (30)
・「目標の立て方」と「努力」と「実行力」(26)