MdNCORPORATION

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

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

久保靖資・豊沢泰尚 著
本体 2200円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 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サイトサンプル

基礎から演出まで! イラスト表現のヒントが満載の8冊

基本からはじめてプロデザイナーを目指す!最初の一歩に選ぶ本