携帯＋iPhoneモバイルサイト制作術　実践的コーディング＆デザイン完全ガイド

久保靖資・豊沢泰尚　著

定価 2,420円
（本体 2,200円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入
- Amazon
- ヨドバシ.com

発売日	：2010-09-14
仕様	：B5変型判／224pP
ISBN	：978-4-8443-6136-7

「PCサイトをモバイルでも展開したい」と依頼されて困っているWebクリエイターのために、携帯サイトに取り組む際のノウハウをQ&A形式でまとめた解説書です。企画・設計・運用時の注意点をはじめ、XHTML＋CSSによる汎用携帯サイトのコード例も3キャリアによる実機の表示結果とあわせて解説しています。さらに、よりPCサイトに近い技法で制作できるiPhoneサイトについても、基本的な考え方からデザインのポイント、コーディングの実際までを詳しく解説。本書に掲載したサンプルコードはWebサイトからダウンロードできるので、テンプレートとして利用したり、実機で検証する際にも役立ちます。携帯、スマートフォンと、今後ますます発展していくモバイルサイト制作に必須の超実践的な一冊です！！

→サンプルデータのダウンロードはこちら

■ページ見本

【携帯＋iPhoneモバイルサイト制作術　実践的コーディング＆デザイン完全ガイド】

■Introduction　携帯サイト・iPhone最適化サイトとは？

01　携帯サイトとPCサイトの違い
制約から生まれる携帯サイトらしさ
キャリア・端末の実装差が作業負荷となる

02　3キャリア汎用の携帯サイトコーディング
端末の世代によりマークアップ言語が異なる
3キャリア汎用の携帯サイト制作
携帯ブラウザとサポートするXHTML
携帯ブラウザ向けに使えない技術

03　携帯サイトの最新情勢
重視されつつある企業サイトの携帯対応
ユーザーから見た携帯サイトの利用方法

04　iPhoneへのサイト最適化
全面タッチパネル化したスマートフォン
サイト最適化のポイント
携帯サイト・PCサイトとの違い

■Chapter01　携帯サイトを設計するときに決めておくこと

Question01　企画段階でおさえておくことは？
Answer 1　PCサイト同様の開発コストを想定する
Answer 2　対応端末の範囲を明確にしておく
Answer 3　公式サイト・勝手サイトの最大の違いは集客

Question02　公式サイトにするにはどうすればいいの？
Answer 1　キャリアサイトから申請情報を入手
Answer 2　初回申請では3カ月以上を要する
Answer 3　認定には企画内容が重視される

Question03　サポートする端末はどう決めるの？
Answer 1　第3世代のみか、第2世代まで含めるか
Answer 2　ドコモの言語対応状況に注意
Answer 3　確認作業も含めた現実的な端末対応

Question04　特別な開発環境は必要？
Answer 1　プログラムの必要性は高い
Answer 2　コーディングはテキストエディタが基本

Question05　表示・動作チェックはどうするの？
Answer 1　エミュレータで簡易チェック
Answer 2　実機による表示チェック

Question06　運用を考慮してCMSやASPを活用したほうがいい？
Answer 1　ASPサービスのメリット・デメリット
Answer 2　CMS選択のポイント

Question　07　携帯サイト用のドメインって必要？
Answer 1　ユーザーの利便性を考慮したドメイン
Answer 2　PCと携帯アクセスを振り分ける
Answer 3　キャリアごとにアクセスを振り分ける

Question08　キャリアごとにHTMLを作成したほうがいい？
Answer 1　ワンソース・マルチキャリアも可能
Answer 2　キャリア別のコード出し分け

Question09　アクセス制限はどうやってかけるの？
Answer 1　UAもしくはIPアドレスでアクセス制限をかける

Question10　Flashの対応状況はどうなってるの？
Answer 1　現状ではFlash Lite 1.1が無難
Answer 2　Flash Liteコンテンツの制約

Question11　デコメはどうやってつくるの？
Answer 1　デコメの基本はHTMLメール
Answer 2　キャリアごとのデコメ仕様と作成ツール

Question12　SEO対策や集客施策はどうするの？
Answer 1　検索エンジンが活用されはじめている

■Chapter02　デザイン・コーディングの仕様を決める

Question13　文書型（DOCTYPE）は何を選べばいいの？
Answer 1　HTMLの場合はCHTMLで記述
Answer 2　XHTMLにはキャリア独自の文書型
Answer 3　XHTML 1.0 Transitionalで3キャリア汎用
Answer 4　3キャリア汎用のXHTMLの基本構造

Question14　文字コードは何にすればいいの？
Answer 1　文字コードはShift-JIS
Answer 2　半角カタカナ・絵文字と文字コード

Question15　3キャリアで汎用的に使える要素は？
Answer 1　キャリアにより対応している要素が異なる
Answer 2　よく使う要素は限られている

Question16　携帯サイトのユーザビリティを上げるには？
Answer 1　電話機能にかかわる属性
Answer 2　アクセスキーでボタン操作を可能にする
Answer 3　フォームの入力を支援する

Question17　CSSはどの程度使えるの？
Answer 1　ドコモをベースとしてCSSを利用する
Answer 2　携帯サイトならではの演出をCSSで実現する

Question18　画面サイズの基準はあるの？
Answer 1　横幅240ピクセルをメインターゲットとする

Question19　文字サイズと1行の文字数の目安は？
Answer 1　デフォルト文字サイズが違う場合もある
Answer 2　文字数を揃える場合の目安は10～12文字

Question20　画像形式はなにが使われているの？
Answer 1　3キャリア汎用ではJPEGフォーマット
Answer 2　端末別に画像を変えるにはプログラムが必要

Question21　ファイルサイズの制限は？
Answer 1　3キャリア汎用では100KB以内が目安

■Chapter03　デザイン・コーディングのTips

Question22　見出しはどう表現するの？
Answer 1　h要素はあまり使われない
Answer 2　画像やdiv要素で見出しを表現する

Question23　段落はどうマークアップするの？
Answer 1　p要素を使わない場合もある
Answer 2　p要素ではなく、div要素で代用

Question24　ページ全体で背景色や文字色を指定するには？
Answer 1　body要素に対してCSSで指定する
Answer 2　リンク用の擬似クラスも指定可能

Question25　表組みは使えるの？
Answer 1　新しい機種ではtable要素が使える
Answer 2　視覚表現は属性を基本とする
Answer 3　行揃えや高さ揃えは有効

Question26　文章や画像をセンタリングするには？
Answer 1　ブロック要素にはtext-alignプロパティを使う
Answer 2　画像のセンタリングもtext-alignで指定

Question27　部分的な背景色や背景画像はどう指定するの？
Answer 1　帯状の背景色はdivで指定する
Answer 2　auではdiv要素に1ピクセルの隙間ができる
Answer 3　背景画像はbody要素のみで使える
Answer 4　画像とdiv要素を隙間なく並べるには

Question28　文字サイズはどう指定するの？
Answer 1　キーワードによる文字サイズの指定
Answer 2　font-sizeはdiv・span要素で指定
Answer 3　2段階程度の文字サイズでデザイン

Question29　文字の装飾はどう指定するの？
Answer 1　colorプロパティによる文字色指定
Answer 2　書体の表示制御は基本的には行わない
Answer 3　text-decoration:blinkは使える

Question30　文章を横スクロールさせるには？
Answer 1　displayプロパティに独自拡張されたマーキー

Question31　画像と文章の回り込みはどうするの？
Answer 1　align属性と、floatプロパティの併用
Answer 2　回り込み解除はブロック要素で行う

Question32　罫線はhr要素を利用する？
Answer 1　hr要素の装飾には限界がある
Answer 2　画像やdivで擬似的な水平線をつくる

Question33　使いやすいメニュー・ナビゲーションは？
Answer 1　メニュー記述の実際
Answer 2　アクセスキーでユーザビリティを向上
Answer 3　ページ内アンカーリンクも重要

Question34　電話やメール機能はどうやって呼び出すの？
Answer 1　電話機能を呼び出すtel:属性
Answer 2　メール送信を行うmailto:属性

Question35　使いやすい入力フォームをつくるには？
Answer 1　入力項目数をおさえる
Answer 2　入力モードを切り替える
Answer 3　入力エラーなどへの対応

Question36　ページタイトルのつけ方は？
Answer 1　ブックマークや検索結果で表示される
Answer 2　auでブックマークを制御する

Question37　端末に保存されるキャッシュは制御できる？
Answer 1　端末へのキャッシュを禁止する

Question38　画像のコピーは制御できる？
Answer 1　キャリアごとに異なる著作権保護機能

Question39　デコメコンテンツはどうやって掲載するの？
Answer 1　キャリアごとのデコメサービス
Answer 2　デコメテンプレートの配信方法

Question40　ムービーやFlashコンテンツはどうやって掲載するの？
Answer 1　ムービーデータの配信方法
Answer 2　Flash Liteの配信方法

Question41　絵文字を使うときの注意点は？
Answer 1　絵文字の表示コード
Answer 2　絵文字変換プログラムの活用

■Chapter04　iPhone＆スマートフォンサイト

Question42　スマートフォンを識別するには？
Answer 1　スマートフォン対応サイトの考え方
Answer 2　スマートフォンからのアクセスをUAで識別

Question43　スマートフォンの画面サイズと解像度は？
Answer 1　Viewportによって画面サイズを制御する
Answer 2　最適化の度合いとViewportの関係

Question44　PCサイト制作と違う点は？
Answer 1　iPhone搭載Mobile Safariの制約
Answer 2　iPhone搭載Mobile Safariの独自機能

Question45　iPhoneらしいサイトのつくり方は？
Answer 1　サイト最適化のポイント
Answer 2　CSS3を利用してiPhoneらしくデザインする
Answer 3　縦横切り替えに対応する

Question46　ムービーはどうやって見せればいいの？
Answer 1　iPhoneのSafariがサポートするメディアタイプ

Question47　メールや電話などの機能を呼び出すには？
Answer 1　メールや電話機能を起動する
Answer 2　マップアプリを起動する

■Appendix　携帯＆iPhoneサイトサンプル

01　携帯サイトサンプル
02　iPhoneサイトサンプル