デザインパターンから理解する実装テクニック

ケータイサイト解体新書

ケータイサイトってキャリアごとの調整が面倒そう……そんなふうに感じているWebデザイナー、HTMLコーダー（マークアップエンジニア）の方にお送りする「1ソース3キャリア対応」のケータイサイト構築術が登場です。

制作現場で実際に駆使されている手法解説に加えて、2006年夏以降に発売された400 以上のXHTML対応機種のデータ一覧、docomoの絵文字252種類を他キャリアの絵文字と対照する対応表など、3キャリアに効率よく対応するノウハウを凝縮しました。

★刊行記念イベント開催決定★

詳しくはこちら

在庫あり

ご注文日から最短２営業日でお届けいたします。詳しくはこちら。この商品は送料無料にて、ワークスコーポレーションが直接販売、発送いたします。

この商品のお求め方法

定価	2,730円（税込）
判型	B5
総ページ数	232
発売日	2010年6月26日
ISBN	978-4-86267-086-1
著者	ホシナカズキ

数量

※後からでも冊数変更できます

えふしん氏（モバツイ）、コグレマサト氏（ネタフル）も推薦！

「1ソース3キャリア対応」のケータイサイト構築術

ケータイサイトは画面サイズが小さく、キャッシュ容量も少ないことから、「あんまりデザインできないんでしょ？」とWebデザイナーの皆さんは敬遠してこられたかもしれません。何より、実装言語であるHTMLやCSSのキャリアごとの解釈の違いや独自仕様の複雑さから、「なんとなく面倒そう」と思われてきた節があります。ですが、2006年以降のケータイのスペック向上やXHTML対応で状況はずいぶん変わりました。1ソースで3キャリアに対応させることが可能になってきたのです。

XperiaやiPhoneをはじめとするスマートフォン礼賛の世の中ですが、若年層のインターネット利用はパソコン経由でもなく、スマートフォンでもなく、ケータイが大部分を占めています。そしてケータイサイトデザインは、まだ参入障壁がそれほど高くない。今のうちに「面倒そう」というイメージを払拭して、ケータイサイトデザインの世界に踏み出しましょう。

えふしん氏（モバツイ）から推薦の言葉をいただきました

モバツイのデザインも手掛けた携帯Webのプロによる、ありそうでなかったケータイサイトデザインの実践的なノウハウが満載。３キャリア携帯の差異に負けずにデザインを攻めたいWeb制作者なら必見です。サンプルコードのデザインがとても素敵で、HTMLが丸々記述されているので、まずはここから攻めてみては？

コグレマサト氏（ネタフル）から推薦の言葉をいただきました

Twitterユーザーの多くはケータイやスマートフォンから利用しています。手の平でURLをクリックするのですが、その先がケータイサイトかPCサイトかは大違い。また見てもらえるのか、そうでないのか。あなたの作ったサイトだってケータイで読まれているかもしれない！　さて、どうする！？

これからもケータイサイトの需要は伸び続けます

※画像クリックで拡大表示

現在、iPhoneやAndroidといったスマートフォンの存在に注目が集まっていますが、ケータイサイトの意義も失われていません。端末の画面サイズが大きくなったとはいえ、最も大きいものでも3.4インチしかなく、カーソルとテンキーを使用するインターフェースにも限界があるからです。ケータイの小さな画面に最適化されたサイトはなくならず、その流儀を知る必要があるといえるでしょう。

詳細な目次を見る

3キャリアに対応するHTML・CSS

ケータイには、キャリア（通信事業者）や機種、世代によって、HTMLの仕様が異なります。本書では、キャリアごとの違いをいかに吸収して、1ソースで3キャリアに対応するリッチなケータイサイトを制作するか、に主眼を置いています。

詳細な目次を見る

具体的なケーススタディ8サイト

「モバツイ」や「ネタフルズ」など、実際に運営されているサイトを含む8つのケーススタディに実装されたソースコードを解剖。PCサイトと異なり見ることが困難なケータイサイトのソースコードを見ながら、そのテクニックを習得していくことができます。

詳細な目次を見る

使える小技も満載！

画像の回り込みを実現しようとした場合、docomoとSoftBankでは使用できるfloat属性も、auでは無視されてしまいます。ですが、3キャリアの回り込みを1ソースで実現する方法が実はあります。他にも「3キャリア共通のタグと一部端末で利用可能なタグ」や「.htaccessを活用した振り分けやPCのシャットアウト」など、ケータイサイトを制作する際に使える小技を多数、ご紹介しています。

詳細な目次を見る

巻末資料も豊富

画像サイズや画面サイズ、画像の対応状況などをまとめた最新の「ケータイ機種情報一覧」や、絵文字対応表、CSSプロパティ対応表を巻末資料として掲載しております。

詳細な目次を見る

CHAPTER 1

ケータイサイトを取り巻く環境

1-01　ケータイサイトのユーザー層
1-02　ケータイサイトの利用率とシェア
1-03　ケータイ端末の動き
1-04　ケータイサイトの今後

CHAPTER 2

ケータイサイトの構築とキャリア仕様

2-01　ブラウザの種類とキャリア独自の仕様
2-02　3キャリア対応のHTML
2-03　3キャリア対応のCSS

CHAPTER 3

デザインをはじめる前に

3-01　画面サイズ（1）デザイン時の基本設計
3-02　画面サイズ（2）表示可能な文字数
3-03　画面サイズ（3）画面の最適化
3-04　画像形式
3-05　キャッシュ容量
3-06　絵文字の活用

CHAPTER 4

実例にみるケータイサイトデザイン

4-01　ソーシャルメディア系のサイトデザイン
CASESTUDY：モバツイ
4-02　EC系のサイトデザイン
CASESTUDY：オガベジ
4-03　コンテンツ配信系のサイトデザイン
CASESTUDY：Music Full
4-04　ポータル系のサイトデザイン
CASESTUDY：think-L JAPAN
4-05　芸能・タレントオフィシャル系のサイトデザイン
CASESTUDY：BLACK OFFICIAL MOBILE
4-06　コーポレート系のサイトデザイン
CASESTUDY：株式会社豊島屋本店
4-07　占い系のサイトデザイン
CASESTUDY：開運姓名判断
4-08　ブログ系のサイトデザイン
CASESTUDY：ネタフルズ

CHAPTER 5

デザインの実践

5-01　サイト仕様とデザイン仕様
5-02　ターゲット設定
5-03　レイアウト（1）基本知識
5-04　レイアウト（2）ファーストビューの重要性
5-05　レイアウト（3）トップページの役割
5-06　ラフデザインの作成
5-07　構成仕様書の作成
5-08　テキストのデザイン
5-09　デザインカンプを作る
5-10　画像素材の制作（1）ケータイサイトならではの注意点
5-11　画像素材の制作（2）リンク用画像の注意点
5-12　第二階層～サイト全体のデザイン
5-13　サイトのカラーリング

CHAPTER 6

マークアップ&コーディング

6-01　ケータイサイトのマークアップ
6-02　DOCTYPE 宣言
6-03　3キャリア共通のタグと一部端末で利用可能なタグ（au）
6-04　.htaccessを活用した振り分けやPCのシャットアウト
6-05　div要素をデザインに活用する
6-06　水平線実装のパターン
6-07　3キャリアで回り込みを実現するテクニック
6-08　3キャリア1ソースのフォームレイアウトのテクニック
6-09　フォントの選択
6-10　透過画像を使って余白を調整する
6-11　背景を画像で表現して世界観を明確にする
6-12　ユーザビリティを確保する（1）リンクの利用
6-13　ユーザビリティを確保する（2）アクセスキーの利用
6-14　外部CSSを使ったデザインハック
6-15　Googleマップをケータイサイトに導入する
6-16　ケータイサイトの検証
6-17　マークアップミスによるバグ
6-18　Flash Liteとケータイサイト

巻末資料

ケータイ機種情報一覧docomo
ケータイ機種情報一覧au
ケータイ機種情報一覧SoftBank Mobile
絵文字対応表
CSSプロパティ対応表

画像をクリックすると拡大表示いたします。

デザインパターンから理解する実装テクニック