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

ケータイサイト解体新書

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

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

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

イメージ:ケータイサイト解体新書

数量

送料無料

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

販売終了

  • ご利用ガイド
  • 内容
  • 目次
  • 立ち読み
  • お詫びと訂正
えふしん氏(モバツイ)、コグレマサト氏(ネタフル)も推薦!

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

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

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

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

モバツイのデザインも手掛けた携帯Webのプロによる、ありそうでなかったケータイサイトデザインの実践的なノウハウが満載。3キャリア携帯の差異に負けずにデザインを攻めたい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プロパティ対応表

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

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

ケータイサイト解体新書

2,808円(税込)/B5/232ページ/2010年6月26日

販売終了


関連商品

イメージ:iPhoneのオモチャ箱

iPhoneのオモチャ箱

iPhone SDKプログラミング

イメージ:ユメみるiPhone

ユメみるiPhone

クリエイターのためのiPhone SDK プログラミング

Design Log

WORKS ONLINE BOOK STORE BLOG

CGWORLD.JP

WORKS_TW

CGWJP_TW

CGKENTEI