レビューを書かせて戴きたいと思います。

→　Amazon　iPhone & Android スマートフォンサイト制作の教科書 [amazon.co.jp]

本書「iPhone & Android スマートフォンサイト制作の教科書」は、スマートフォンサイトのデザインや制作についてのノウハウを解説した入門書です。

著者は、こもりまさあき氏、谷拓樹氏、石本光司氏、いちがみトモロヲ氏、4名の共著という形になっています。

目次は次の通りです。

• 序章　スマートフォン向けサイト制作をはじめる前に
• 第1章　スマートフォン制作のための基礎知識
• 第2章　制作・テスト環境のセットアップ
• 第3章　スマートフォンサイトの企画、構造設計
• 第4章　スマートフォン向けのパーツ制作
• 第5章　HTML5による実装
• 第6章　CSS3によるレイアウトと装飾
• 第7章　JavaScriptを使ったインタラクション
• 第8章　フレームワークやオーサリングツールを使ったサイト制作
• 第9章　パフォーマンスの最適化
• 付録　スマートフォン各機種　画面解像度一覧表

入門書というスタンスが取られていますので、スマートフォン向けサイト制作の基礎知識の部分から、制作に必要な環境の構築方法、どんなサイトを参考にしたらよいかのギャラリーなど、基本的な部分からしっかり解説されています。

しかしながら、基礎的なことしか書かれていないというわけではなく、タップなどスマホ特有のUIの解説や、HTML5・CSS3といった新しめの技術など、一歩進んだ部分の説明も書かれています。

画像や余白だらけだとか、文字でびっしりなどということはなく、どのページも適度なバランスで書かれています

また、jQuery Mobileや、各種スマホサイト向けフレームワークの紹介など、広く浅くではあるものの、幅広く解説がなされています。

むしろ後半部分は、入門書というにはやや高度すぎると言えるくらいかもしれませんが、このあたりは無理に理解しなくてはならない部分でもないので、これで良いのかもしれません。

全体として学習の流れを考えてうまく作られており、タイトル通り教科書として使える良書になっていると思います。

今後スマートフォン向けのサイトやサービスはどんどん増えていく傾向にあると思いますので、まだ制作の経験の無いかたは本書を参考に勉強をはじめてみてはいかがでしょうか。

なお内容の一部は、こちらのサイトから見れるようになっています。
購入前に雰囲気がつかみたい方はどうぞご覧ください。

→　MdN Design Interactive　iPhone & Android スマートフォンサイト制作の教科書 [mdn.co.jp]

関連：

• ブックレビュー:PhoneGap入門ガイド
• ブックレビュー：iPhoneアプリで稼ごう
• ブックレビュー：位置情報ビジネス ~「位置ゲー」が火をつけた新しいマーケット~

Yahoo!検索スタッフブログに、「スマートフォン版Yahoo!検索の作り方　第1回：UI設計編」という、リニューアルした検索ページのUIについて解説した記事がありましたのでご紹介させて戴きます。

私も実際に使ってみましたが、かなり使いやすく、よく考えられています。

これは、現時点でのスマートフォン向けWebユーザインターフェイスとしては、高いレベルで完成されており、我々にとっては良いお手本となると思います。

→　Yahoo!検索 スタッフブログ　スマートフォン版Yahoo!検索の作り方　第1回：UI設計編 [searchblog.yahoo.co.jp]

スマホをお持ちの方は、記事を読むだけよりは、実際に使われてみるのが理解しやすいかと思います。

ユーザエージェントを騙ってiPhoneにすると、HTMLやJavaScriptなども見ることができそうですので、気になる方はどんな仕組みかチェックしてみてはいかがでしょうか。

関連：

• 機種やキャリアによって異なる十字キーの操作性について解説された記事「入力フォームの操作性、機種による違いにご注意！」
• スマホ向けデザインのコツをまとめた記事「スマートフォンサイトをデザインする上で知っておくべき10のTIPS」
• ASCII.jpに「jQuery Mobileデザイン入門」という連載記事が掲載されています

→　ASCII.jp　日本語サイトの事例を一挙紹介（前編）　絶対見ておきたい有名企業のスマホサイトまとめ [ascii.jp]

→　ASCII.jp　日本語サイトの事例を一挙紹介（後編）　スマホサイトを作る前に見たい国内38社の実例 [ascii.jp]

誰もが知っている国内有名企業のスマートフォンサイトがまとめられています。

ジャンルとしては次のようにわかれています。

前編：

• ファッション・アパレル
• メーカー（自動車・家電）
• メーカー（食品・飲料）
• 交通・旅行
• 小売・飲食
• 不動産・建設

後編：

• 金融（銀行）
• 金融（保険・証券）
• 金融（クレジット・消費者金融）
• 通信
• メディア（ニュース）
• メディア（テレビ）
• EC・通販
• ポータル・Webサービス
• その他の業種

iPhoneのホーム画面のようにアイコンを並べるのが、どの業種でも比較的よく使われているレイアウトのようですね。

どのサイトも凝ったデザインとなっており、参考になりそうです。

関連：

• デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」

→　参考にしたい優れたiPhone(スマフォ)Webデザイン集 – iPhoneデザインボックス [design.web-hon.com]

この手のデザインの参考になりそうなサイトのキャプチャを集めるという手法は以前からあり、幾つか同様のサイトがあります。

当ブログで過去にご紹介させていただいたことのあるサイトや書籍を改めてまとめてみました。

まず、恐らくこの手のサイトの元祖であると思われる、ケータイサイトのキャプチャを集めたサイト「case:MobileDesign!　モバイルサイトのデザイン」

→　case:MobileDesign!　モバイルサイトのデザイン [d.hatena.ne.jp]

続いて、同じくケータイサイトのキャプチャをジャンル別に大量に掲載している大御所「モバイルデザインアーカイブ」
→　モバイルデザイン集のモバイルデザインアーカイブ [mobiledesignarchive.jp]

そのiPhone版である「iPhoneデザインアーカイブ」

→　iPhoneサイトデザイン集のiPhoneデザインアーカイブ [iphonedesignarchive.jp]

PC版もあります。「ブブンデザインアーカイブ」

→　Webデザインの“ブブン”を集めたブブンデザインアーカイブ [bubundesignarchive.jp]

Androidも含めスマートフォンサイトを集めている「スマートフォンサイト集めました。」

→　スマートフォンサイト集めました。 [sp-web.jp]

サイトの他に書籍も出版されています。
過去にレビューを書いたデザインアーカイブ系の本はこれだけあります。

→　ke-tai.org　ブックレビュー：携帯サイト年鑑2010 – ケータイサイトの最新デザインがわかる厳選500サイト超掲載 [ke-tai.org]

→　ke-tai.org　ブックレビュー：モバイルデザインアーカイブの本。Ver.2.0 [ke-tai.org]

→　ke-tai.org　ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。 [ke-tai.org]

参考になれば幸いです。

関連：

• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• iPhoneサイトのデザインがまとめられた「iPhoneデザインアーカイブ」がオープンしたとのことです

→　スマートフォンサイト集めました。 [sp-web.jp]

各サイトのキャプチャ画像をジャンル別にまとめて掲載して、デザインの参考にしようというコンセプトのサイトのようです。

方向性としては、「iPhoneデザインアーカイブ」などと同じですね。

最近はスマートフォン向けサイトの需要も大きいので、Webデザイナーの方は必見ではないでしょうか。

関連：

• iPhoneやAndroid向けのサイトデザイン作成テクニックを紹介した記事「スマートフォン対応サイトの作り方、教えます」
• ブックレビュー：携帯サイト年鑑2010 – ケータイサイトの最新デザインがわかる厳選500サイト超掲載
• iPhoneサイトのデザインがまとめられた「iPhoneデザインアーカイブ」がオープンしたとのことです

誰もがハマりやすいケータイのtableタグについてまとめられた記事です。

→　livedoor ディレクターブログ　ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース [blog.livedoor.jp]

ケータイのtableタグは、非対応の機種があったり（最近の機種ではどれも大丈夫ですが）、キャリアや機種によって見え方が微妙に違ったりで、PCサイト制作畑からケータイにやってきた人は、誰もがハマる要素の一つです。

この記事では、そんなtableタグについて1エントリーまるまる使って解説されている貴重な記事です。

ケータイのtableタグの特徴や注意点に加え、実際のサンプルソースを何パターンも掲載しているので、大変わかりやすく実用的です。

とりあえずブックマークしておいて損のないエントリーだと思います。

関連：

• 機種やキャリアによって異なる十字キーの操作性について解説された記事「入力フォームの操作性、機種による違いにご注意！」
• ケータイサイトのスクリーンショットの撮り方について書かれた記事「livedoorディレクターブログ モバイルサイトのキャプチャを撮ろう」
• livedoorディレクターブログに掲載されたモバイルデザインに関する記事「そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7」

→　面白法人カヤックのデザイナーブログ　永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）

これまでに何度もご紹介させていただいたことのある、Flashやモバイルの記事でおなじみカヤックさんのブログです。

「永久保存版！？携帯コーディング、これだけ読めばすぐできる！」と題して、いまどきの3キャリア共通HTMLコーディングのポイントと、テクニックが紹介されています。

またそのまま使えるデザインテンプレートもついており、至れり尽くせりですね。

このページ１つを見せれば、ケータイ向けHTMLのコーディングとはどのようなものかがわかる、良エントリーになっていると思います。

まだ見ていない方はぜひチェックしてみてください。

関連：

• ケータイサイトでのtableタグの使い方がまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第二弾)」
• 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術」
• XHTMLを使ったページ作成の要点がまとめられた記事「携帯サイト[xhtml]のコーディング前のチェックポイント」

発行・発売元のワークスコーポレーション様からご献本いただきました。
ありがとうございます。

→　Amazon　ケータイサイト解体新書 – デザインパターンから理解する実装テクニック [amazon.co.jp]

※発売日は2010年6月26日で、現在予約可能です。

本書「ケータイサイト解体新書 – デザインパターンから理解する実装テクニック」は、デザイン目線で書かれたケータイ解説書です。

著者は「モバデビ」のホシナカズキさん、サイト製作協力は「これからゆっくり考L」のsakaki0214さんとなっています。

目次は次の通りです。

• CHAPTER 1　ケータイサイトを取り巻く環境
• CHAPTER 2　ケータイサイトの構築とキャリア仕様
• CHAPTER 3　デザインをはじめる前に
• CHAPTER 4　実例にみるケータイサイトデザイン
• CHAPTER 5　デザインの実践
• CHAPTER 6　マークアップ&コーディング
• 巻末資料

詳細な目次はこちらから見ることができます。
また、内容の一部も立ち読みできます。

→　ワークスコーポレーション　ケータイサイト解体新書　―デザインパターンから理解する実装テクニック ／ホシナカズキ 著 [www.wgn.co.jp]

帯にWebデザイナー必読、HTMLコーダー必読、というキャッチコピーがありますし、冒頭の挨拶文でもデザイン目線でという話が書かれていますが、本当にデザインだけの内容というわけではなく、序盤にはケータイ業界の現状と動向がまとめられていたり、ところどころ技術的な内容も出てきます。

ただしその技術的な箇所の内容は残念ながら少し怪しいようです。
キャリア振り分けのmod_rewriteを使った.htaccessの記述例に「Options +FollowSymLinks」という記述があったり（別にあってはダメというわけではないですが関係ないと思います）、RewriteRuleの記述に不必要と思われる[OR]があったりします。
誤植なのかわかりませんが、スペースが必要なところに入っていませんし、少なくともこのサンプルの通り入力しても動作しないでしょう。

またGoogleマップをケータイサイトに導入するというページでは、「出力はGIF形式になるのでSoftBank端末の一部では表示することができない」という旨の記述がありますが、現在のGoogleMapStaticAPIではformatを指定できると思います。　→　参考
少なくとも1年半前からはformat指定ができたはずなので、少し情報が古いようですね。

そもそも現時点のソフトバンク端末（旧J-Phone端末は停波されたので）であればGIFは全ての機種で見れるはずですし、本書の巻末資料や3章の画像形式のページでもソフトバンク端末のGIF欄は全て「○（表示可能）」になっており矛盾があります。

ただこれらは発売前の見本誌だからかもしれません。直っていることを期待します。
（※もし直っているようでしたら、本記事はすぐ訂正しますのでご指摘をお願いします）

追記(2010/6/25)
ご連絡をいただきました、直っていないようです。
随時こちらのURLの「お詫びと訂正」に公開するとのことでした。

それはさておき、デザインに関する記述はというと、こちらはなかなか使えるものになっています。

CHAPTER 4「実例にみるケータイサイトデザイン」という章では、EC系、ポータル系など各系統別の有名サイトのデザイン解説と、そのHTMLソースが掲載されています。
これらは各サイト内にちりばめられたテクニックや工夫が見て取れ、とてもためになります。

またCHAPTER 5「デザインの実践」・CHAPTER 6「マークアップ&コーディング」にも、ぜったい抑えておきたい基本的な内容から、他の書籍ではなかなか載っていないようなマニアックなTIPSまでが紹介されており、参考になるでしょう。

技術的な記述に若干の不安はあるものの、それは内容のごく一部ですし、全体としては魅力的な一冊になっていると思います。

ケータイサイトデザインに関わる方はチェックしてみてはいかがでしょうか。

関連：

• ブックレビュー：ユーザー視点でつくる　携帯サイト制作の基礎知識
• ブックレビュー：mixiアプリをつくろう!OpenSocialで学ぶソーシャルアプリ
• ブックレビュー：Ruby on Rails携帯サイト開発技法

iPhoneサイトのデザインがまとめられた「iPhoneデザインアーカイブ」がオープンしたとのことです。

→　iPhoneデザインアーカイブ [iphonedesignarchive.jp]

サイトの名前を聞いてピンと来た方も多いかもしれませんが、ケータイサイトのデザインをまとめたサイトで有名な、あの「モバイルデザインアーカイブ」の姉妹サイトとなっています。

内容は、iPhone向けで良質なデザインを提供しているサイトを紹介し、カテゴリ別にまとめていくという形になっています。

モバイルデザインアーカイブでは、（当たり前ですが）日本国内のサイトだけが紹介されていたのですが、こちらのサイトでは、海外のサイトも積極に紹介されており、なんだか新鮮です。

iPhoneデザインアーカイブのサイト自体のデザインもiPhoneを模したものになっており凝っていますね。

iPhone向けのデザインをしているデザイナーさんは必見のサイトだと思います。

関連：

• ブックレビュー：モバイルデザインアーカイブの本。Ver.2.0
• ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」

→　case:MobileDesign! モバイルサイトのデザイン紹介ブログ　一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第二弾) [d.hatena.ne.jp]

最近は対応端末がほとんどとなっているためそれほどでもありませんが、tableタグはケータイサイトを作る上ではまりやすいポイントとなっていました。

ドコモ901以前の世代に対応しなくてよいのであれば、表現力の限られるケータイサイトのデザインでは、tableタグをうまく使うことは非常に重要になってきます。

上記のブログを参考に勉強してみてはいかがでしょうか。

関連：

• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術」

モバイルサイトのデザインを紹介しているブログ「case:MobileDesign!」で、「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾)」というエントリーがありました。

→　case:MobileDesign! モバイルサイトのデザイン紹介ブログ　一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾) [d.hatena.ne.jp]

• 横幅240pxの画像を作るときは良く考えて！
• リンク用画像を作るときはマージンも画像内に含めて！
• 左右にマージンを取ってテキストを読みやすく！
• XHTMLで背景を切り替える時は＜div＞に要注意！

今回は第一弾ということで、上記4つのテクニックが掲載されていました。

2番目のリンク用画像については、私はいつも余白を取らずギリギリで作成してしまっていたため、今度から素材を作る機会があれば活用していこうと思います。

4番目のauで背景画像に切れ目が入ってしまう件は、ハマりやすいポイントですね。

こちらのブログでも詳しく解説されているので、合わせて参考にしてみてください。

→　ゆめ技：ゆめみスタッフブログ　【3キャリア共通コーディング】au（EZweb）端末で、divの隙間を消す裏技。 [yumewaza.yumemi.co.jp]

第二弾のエントリーも期待しています。

関連：

• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• ゆめみのmod_ktaiがとうとうリリース、しかも無償利用が可能

→　Amazon　モバイルデザインアーカイブの本。Ver.2.0 (携帯Webコレクション) [www.amazon.co.jp]

「モバイルデザインアーカイブの本。Ver.2.0　携帯Webコレクション」は、昨年発売された「モバイルデザインアーカイブの本」の続編です。　→　そのときのレビューはこちら

今回は前巻よりも12サイト多い、計126サイトのキャプチャが収録されています。
（もちろん収録サイトに重複はありません）

内容としてはこちらのケータイサイトデザインを紹介するサイト「モバイルデザインアーカイブ」が、書籍になったという位置づけで、スクリーンキャプチャ集という感じです。

→　モバイルデザインアーカイブ　トップ [mobiledesignarchive.jp]

前巻の時もそうでしたが、今回もamazonではさっそく品切れ状態となっているようですね、本書の人気のほどが伺えます。

使い方としては、サイトのデザイン作成を行う場合に、参考にしたいデザインのサイトを探したり、クライアントとの打ち合わせでイメージを掴む、といった形になると思います。

サイトのデザインを考える際の打ち合わせで、みんなで小さなケータイの画面を覗き込んで打ち合わせする、といった状態になったりしなくても済むのは嬉しいですね。

掲載サイト数も増えて、かつフルカラーなのにも関わらず、1600円という安価なお値段も助かるところです。

ケータイサイト構築にかかわる方であれば、即購入で後悔のない一冊といえるのではないでしょうか。

関連：

• ブックレビュー：「ケータイ白書2010」 – プレゼン資料や企画書の作成に欠かせない一冊
• ブックレビュー：ケータイサイトのレイアウト
• ブックレビュー：Linux-DB システム構築/運用入門

→　livedoorディレクターブログ　そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 [blog.livedoor.jp]

モバイルサイトが少しでも見やすく、使いやすいサイトになるよう、チェックすべき7つのポイントがあげられています。

1. 必要な情報がファーストビューに表示されていますか?
2. 情報と情報の間に適度な空間がありますか?
3. センター寄せのテキストが意図しない部分で折り返されていませんか?
4. サイトにアクセス→表示まで時間がかかりすぎていませんか?
5. 横幅いっぱいの画像がつぶれて表示されていませんか?
6. サイトのカラーリングに一定のルールがありますか?
7. ページが長すぎるページがありませんか?

ケータイサイトはPCに比べてどうしても制限が多いため、より一層ユーザビリティに配慮しなければなりません。

基本的な項目も多いですが、livedoorのような大手がどのようなポイントをチェックしているかがわかって参考になりますね。
皆さんも自サイトを確認してみてはいかがでしょうか。

関連：

• モバイルSEOのチェックリストがまとめられた記事「ディレクターなら押さえておきたいモバイルSEO34項目」
• ブックレビュー：ケータイサイトのレイアウト
• ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。

→　Amazon　ケータイサイトのレイアウト 企業・キャンペーン・サービス・ブランディング……240pxのデザインテクニック [amazon.co.jp]

こちらの書籍「ケータイサイトのレイアウト」は、ケータイサイトのキャプチャを集めた書籍です。

同様のコンセプトの書籍には、先日レビューを書かせていただいた「携帯Webコレクション モバイルデザインアーカイブの本。」があります。
内容も構成もほぼ近い感じですね。

「FOOD & DRINKS」、「BEAUTY & HEALTH」、「GOODS & INFORMATION」の3つの章にわかれており、計60個のサイトが多くのキャプチャ画像付きで紹介されています。

デザインのポイント、配色のポイントなどは何点かの解説は書かれているものの、基本的にはキャプチャを載せただけのシンプルなページ構成になっています。

本書の一番のメリットはデザインカタログのように顧客に見せて、打ち合わせで使えるところです。

従来は顧客の要求するイメージを把握するのはかなり大変な作業でしたが、この本があればこちらに掲載されているサイトの中からイメージに近いものを選んで貰い、固めていくことができます。

実際に顧客に接する営業職の方やデザイナーの方にお勧めしたい一冊です。

関連：

• ブックレビュー：Linux-DB システム構築/運用入門
• ブックレビュー：携帯サイト構築バイブル
• ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。

→　これからゆっくり考L +α　携帯サイト[xhtml]のコーディング前のチェックポイント [sakaki0214.com]

前回のHTML編もよかったですが、今回も必要な情報が簡潔にまとめられており、良エントリーとなっていますね。

背景画像やフォント、画像の横幅など、ケータイサイトデザインでは必ず必要になるポイントが抑えられています。

上記ブログはご紹介した記事以外にも、デザインに関する小ネタが幾つも紹介されていてとてもためになります。

デザイナーの方もプログラマの方も、ぜひ一度目を通してみてはいかがでしょうか。

関連：

• ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」
• ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。
• 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」

ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」というエントリーです。

→　これからゆっくり考L　携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com]

ケータイサイトでは、どうしても実現しづらいデザインというものがあります。
このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめているとのことです。

詳細は上記ブログ内でサンプルサイト付きで解説されているので、そちらを見ていただくとして、チェックポイントを簡単に引用させていただくと、次のようになっています。

• tableの使用はOKか
• 背景色を複数色使っていないか
• 枠線を使っていないか
• サムネイル画像の横にテキストが来るパターン
• リストアイコンの下に文字が回り込んでくるかどうか
• ページの左右に微妙な余白が空いていないか
• フォントサイズは2段階ないし1段階か
• 太字を使っていないか

※非常に細かい話ですが、上記エントリー内では902がテーブルが利用不可と書かれていますが、902はiモード対応HTML6.0なので全機種でtableタグが利用できるはずです。

このブログの書き手はコーダーさんとのことで、ならではの視点で良エントリーとなっていますね。

最近はケータイサイトでもかなり凝ったデザインが求められるようになってきていますので、デザインのやり取りが発生する際のチェック項目として活用してみてはいかがでしょうか。

関連：

• ケータイ3キャリアに対応するためのDOCTYPE宣言について
• 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」
• ドコモ端末でCSSを利用するには

→　Amazon　モバイルデザインアーカイブの本。―携帯Webコレクション [amazon.co.jp]

以前ご紹介させていただいたサイト「モバイルデザインアーカイブ」が書籍になったとのことです。

→　モバイルデザインアーカイブ　トップ [mobiledesignarchive.jp]

→　ke-tai.org　ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 [ke-tai.org]

サイトの内容と同じように、本書はケータイサイトのキャプチャ集という形をとっています。

内容としては、ケータイサイトのキャプチャ画像数枚、およびデザインに関する論評・解説が大量に記載されています。

その数、なんと149サイトです。これだけの数のサイトに掲載許可をとるのは大変だったことと思います。お疲れ様でした。

本書の目的としては、サイトのデザイン作成を行う場合に、参考にしたいデザインのサイトを探す、といった使い方が想定されているのだと思われます。
掲載サイトは「プロモーション」「携帯・IT」などのカテゴリに分類されているのも親切です。
ケータイサイトの要件ヒアリングの際などに、この本を1冊持って行くと、お客さんのイメージを拾い上げやすいかもしれませんね。

また、私はプログラマのため、デザイン自体は作成しないのですが、ボタンやメニューなどの部品を作成するケースは多くあります。
本書を見れば部品レベルでも参考にできるデザインがピックアップできるので便利です。

欲を言えば、紹介したデザインを再現するためのHTML／CSSなどを解説してくれると非常に助かるのですが、さすがにそれは欲張りすぎかもしれないですね。

値段も1,680円と技術書などに比べると安価なのも嬉しいですね。
ケータイサイトに関わる人であれば持っていて損のない1冊だと思います。

関連：

• ブックレビュー： Flash Liteで作る携帯コンテンツ実践教科書
• ブックレビュー： PHP×携帯サイト 実践アプリケーション集
• ブックレビュー： モバイルSEO&SEM Web担当者が身につけておくべき新・100の法則。

→　モバミル – イケてる携帯サイトデザイン [mobamiru.kayac.com]

モバミルはケータイサイトのURLを入力すると、ドコモ・au・ソフトバンクと3キャリア分のキャプチャ画像を撮ってくれるサイトです。

各キャプチャは絵文字表示にも対応しており、きちんとそれぞれの絵文字画像となって表示されます。

ただ、キャプチャの生成には多少の時間がかかりますので（キャプチャ処理後メールで通知が来ます）、各キャリアの動作確認に使うというよりは、ウェブ魚拓のようにアーカイブ的な使い方や、面白いケータイサイトを探す用途に使えそうです。

サイトの宣伝としても効果があると思いますので、ケータイサイトをお持ちの方は登録してみてはいかがでしょうか。

関連：

• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ブックレビュー： モバイルユーザビリティ・デザイン

モバイルサイトをキャプチャし、それをジャンル別にまとめて紹介しているサイトがありました。

→　モバイルデザイナーのためのアイディアエンジン　モバイルデザインアーカイブ [mobiledesignarchive.jp]

着うた、携帯ゲーム、占い、クーポン、など細かくジャンル分けされて、各モバイルサイトのキャプチャ画像が公開されています。

今月オープンしたばかりのサイトのようですが、アーカイブには既に100以上のサイトが収録されているようです。

デザインの参考に使えるのはもちろんのこと、クライアントと打ち合わせする際などにも、「こんなサイトではどうでしょうか」と実際にサイトを見せながら話ができるので便利かもしれません。

関連：

• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ブックレビュー： モバイルユーザビリティ・デザイン
• ブックレビュー：携帯サイト コーディング&デザイン

デザインに優れたケータイ向けサイトを、キャプチャ画像付きで紹介しているサイトがありました。
これは素敵です。

→　case:MobileDesign!　モバイルサイトのデザイン [d.hatena.ne.jp]

どうやってキャプチャしているのか気になったのですが、コメント欄にその答えがありました。

1. PCからアクセスできるサイトは、PC上からUserAgentを偽装するなどしてキャプチャする
2. Flashのサイトの場合は、ソフトバンク端末で保存し、メール添付でPCに転送する
3. ケータイからのみのアクセス制限されているサイトは諦める

とのことです。

2の方法は知りませんでした。
ドコモやauでは出来ないのですが、ソフトバンク端末であれば可能とのことです。
参考になりますね。

ケータイサイト作成を行っている方はぜひ巡回ルートに入れたいサイトですね。

関連：

• ブックレビュー： モバイルユーザビリティ・デザイン
• ブックレビュー：携帯サイト コーディング&デザイン
• ThinkITでモバイルサイト制作特集が組まれています