[書評]Mobile Site Codeing&Degign (携帯サイト コーディング&デザイン) 

mobile-design1.jpg

Mobile Site Coding&Degign(携帯サイト コーディング&デザイン)」を著者の高木悠介さんよりご献本頂きました。

携帯サイトのデザインを中心に書かれた書籍です。「PHP x 携帯サイト デベロッパーズバイブル」が、プログラムを使って絵文字やGPSの位置情報を取り扱う動的なサイトを作成するための本であるに対し、この本はHTML(XHTML)コーディングやCSSの使い方に特化した携帯サイトデザイン本になっています。

mobile-design2.jpg

この本が秀逸なのは、タグ毎に各キャリアの実機でどのように表示されるかが写真付で全て書かれているところです。携帯サイトを作成しているとタグ毎に挙動が違い、そのたびに各キャリアの携帯を開いてはチェックするということをちまちまとやらなければならないのですが、そのポイントがきっちりとまとめてかいてあり、ここを読むだけで携帯サイトの基本とその特徴がつかめる優れものになっています。

mobile-design3.jpg

また様々なデータも用意されており、携帯サイトのHTMLコーディングをされる方は是非手元に置いておきたい一冊になっています。

Mobile Site Codeing&Degign (携帯サイト コーディング&デザイン)目次


Chapter 1 独自に進化する携帯サイトの世界
1-1 携帯サイトを取り巻く状況
1-1-1 ユーザー層
1-1-2 携帯サイト利用率とシェア
1-1-3 コンテンツサービスの状況
1-1-4 端末の市場動向
1-1-5 携帯サイトのこれから
1-2 携帯サイトが注目される理由
1-2-1  24時間持ち歩く携帯
1-2-2 垂直統合がもたらす認証・著作権・課金モデル
1-2-3 公式サイトと勝手サイト

Chapter 2 携帯サイトはPCサイトと何が違うのか
2-1 携帯キャリア独自の仕様
2-1-1 携帯ブラウザ
2-1-2 HTMLの種類
2-1-4 CSS
2-1-5 絵文字
2-1-6 文字エンコード
2-2 端末に依存する仕様の違い
2-2-1 扱える画像の種類と目安
2-2-2 キャッシュ容量
2-2-3 画面サイズ
2-2-3 文字サイズ
2-3 携帯サイトならではの機能
2-3-1 電話を直接かける
2-3-2 電話帳登録
2-3-3 メールを送る
2-3-4 フルブラウザ切り替え
2-3-5 ブックマーク
2-3-6 GPS
2-4 携帯サイトではできないこと

Chapter 3 汎用的な携帯サイトの作り方
3-1 目的や規模に合わせた作成法の選択
3-1-1 キャリア別静的サイト
3-1-2 3キャリア対応の静的サイト
3-1-3 プログラム完結型
3-2 携帯サイトを作るために知っておくべき知識
3-2-1 基本はPCサイトと同じ
3-2-2 HTMLタグとCSS組み合わせによるキャリア別挙動
3-2-3 よく使う、使わないHTMLタグとCSS
3-3 汎用的なサイトを作る
3-3-1 標準的なサイト構成
3-3-2 サンプルサイトのソースの解説
3-4 携帯サイトの慣習テクニック
3-4-1 装飾は絵文字が最大の武器
3-4-2 半角カナのなせる技
3-5 動作確認
3-6 PCサイトから携帯サイトへの導線付け
3-6-1 htaccessを使ったユーザーエージェント振り分け
3-6-2 IP制限
3-6-3 QRコード
3-6-4 METAタグ

Chapter 4 3キャリア対応携帯サイトの制作ノウハウ
4-1 HTMLヘッダー
4-1-1 HTMLかXHTMLか
4-1-2 DOCTYPE宣言
4-1-3 コンテンツMIMEタイプ
4-2 画像についてのルール
4-2-1 画像の種類と画面サイズ
4-2-2 再配布の禁止
4-3 文字関連のルール
4-3-1 文字色の指定
4-3-2 文字サイズの変更
4-3-3 インデント
4-4 CSS関連のルール
4-4-1 インラインCSSと外部CSS
4-4-2 使えるCSSプロパティ
4-5 「こうしたい」を実現するデザインテクニック
4-5-1 色つき罫線

4-5-2 spacer.gifによる疑似罫線
4-5-3 背景見出し(反転文字)
4-5-4 点線区切り
4-5-5 画像の回り込みと解除
4-5-6 下位互換のための記述方法
4-5-7 ページ内リンク
4-5-8 バグの考慮
4-6  CSSハック
4-6-1 外部CSS
4-6-2 CSSへの対応状況の違いを逆手にとる

Chapter 5 携帯サイトのユーザビリティ
5-1 使いやすさを向上する
5-1-1 リンク先とアンカーテキスト
5-1-2 アクセスキー
5-1-3 フォーム入力補助
5-1-4 ページ内コピー
5-1-5 ドメイン指定拒否解除、許可登録
5-1-6 内部リンク
5-1-7 ダイレクト操作
5-1-8 利用者に安心感を与える
5-2 視認性を高めるコツ
5-2-1  1行以内に収める努力
5-2-2  文字量を減らすテクニック
5-2-3 罫線文字で階層を可視化する
5-2-4 メニューと内容説明を1行で示す
5-2-5 余白はできるだけ詰める
5-2-6 PCサイトとは違う画面遷移
5-2-7 色の扱い方

Appendix
A-1 携帯絵文字変換スクリプト
A-2 3キャリア対応携帯画像変換
A-3 キャリア別に外部CSSを切り替える

Reference
・HTMLタグとCSSのキャリア別挙動
文書の本文を記述する
文書のヘッダー部を指定する
HTML 文書であることを示す
HTML 文書のタイトルを示す
略語であることを示す
頭字語であることを示す
住所や連絡先、電話番号などを示す
引用の文章であることを示す
改行を表す
引用や参照を示す
定義部分であることを示す
汎用的なひとかたまりの範囲を定義する
論理的な強調を行う
見出しをつける
キーボードから入力される文字であることを示す
段落であることを示す
プログラムソースなどをそのままの状態で表示する
短い引用を示す
プログラムの出力サンプルを示す
汎用タグ
論理的な強調を表す
プログラムコードの引数や変数を示す
リンクを示す
定義リストで定義する単語と解説を行う
順序なし/ありリストを表示する
入力フォームを表示する
入力フォームの各部品
表を表示する
表の中で表題を示す
画像を表示する
文字を太字にする
文字をひとまわり大きくする
水平方向の罫線を引く
文字を斜体にする
文字をひとまわり小さくする
メタデータを入力する
href属性で指定した文書を参照する
スタイルシートを記述する
ページに記述されたリンク先URLの基準となるURL

・キャリア別CSSプロパティ対応表


出版は「PHP x 携帯サイト デベロッパーズバイブル」と同じソフトバンククリエイティブさんで、携帯サイトならではの動的サイトの構築方法が書かれたのが「PHP x 携帯サイト デベロッパーズバイブル」で、デザインの部分に特化して書かれたのが「Mobile Site Coding&Degign」という位置づけになっています。

携帯サイトのデザインに興味のある方にぜひオススメしたい一冊です。

携帯サイト コーディング&デザイン
Amazon bookmark with Amab.jp on 08.12.29
ソフトバンククリエイティブ (2008-12-26)


GPSを使った位置情報プログラムや、デコメールの送信方法など3キャリアに対応した動的携帯サイトを作りたい方はこちらもあわせてお手元にどうぞ!

PHP×携帯サイト デベロッパーズバイブル
Amazon bookmark with Amab.jp on 08.12.29
ソフトバンククリエイティブ (2008-09-27)


関連エントリー


memokami :: 「PHP x 携帯サイト デベロッパーズバイブル」が発売になりました

posted by 荒木 稔 | 2008年12月29日 | TrackBack(0) | はてブに追加 このエントリーをはてなブックマークに追加
前後の記事
この記事へのTrackBack
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。