ちょっと待って！
実は携帯の標準ブラウザーだって、十分な表現力があるんです。
.jpg)
右の写真は４年位前のQVGA端末での表示です（ラウンドアバウトのカタログの写真）。これを見れば、随分以前からブラウザーの表現能力は非常に高かったのが分かります。つまり、ブラウザーの表現能力に関して言えば、3G携帯とスマートフォンには、大きな差はなく、一部は3G携帯の方が高い場合さえあるのです。
スマートフォンとラウンドアバウト ⑤標準ブラウザーの秘めた能力を引き出す
スマートフォンは携帯電話の一種なので、サイトを２つ作っても対象ユーザが増えるわけではありません。２００９年末の状況は下左図の通りです。伸び行くスマートフォンマーケットをターゲットにしたいけど、多数派の３G携帯も重要だし...スマートフォン用のサイトは３Gでは見えないし...
ちょっと待って！
実は携帯の標準ブラウザーだって、十分な表現力があるんです。
.jpg)
右の写真は４年位前のQVGA端末での表示です（ラウンドアバウトのカタログの写真）。これを見れば、随分以前からブラウザーの表現能力は非常に高かったのが分かります。つまり、ブラウザーの表現能力に関して言えば、3G携帯とスマートフォンには、大きな差はなく、一部は3G携帯の方が高い場合さえあるのです。
ちょっと待って！
実は携帯の標準ブラウザーだって、十分な表現力があるんです。
右の写真は４年位前のQVGA端末での表示です（ラウンドアバウトのカタログの写真）。これを見れば、随分以前からブラウザーの表現能力は非常に高かったのが分かります。つまり、ブラウザーの表現能力に関して言えば、3G携帯とスマートフォンには、大きな差はなく、一部は3G携帯の方が高い場合さえあるのです。
スマートフォンとラウンドアバウト ④スマートフォンの課題
タップ・フリック・ピンチアウト＆イン...その操作名は覚えていなくとも、iPhoneが実現しているマルチタッチ・インターフェースは真に画期的で、誰でもすぐに操作を覚えてしまう優れものです。ユーザーは小さな画面に映るPC用のWebを、伸ばしたり縮めたり、追い払ったり引き寄せたり...優雅なモバイル生活を満喫できるようになりました。
■（左から）iPhoneでのページ全体、部分拡大、Flashは見えない（上部の青い点の空白部）
ところが、いくつか都合の悪いことも見えてきました。第一に、如何に優れたインターフェースがあっても、3.5インチのディスプレイでは、PCサイズのサイトはあまり見易くはないということ。第二は、Flashがサポートされないことです。
ところが、いくつか都合の悪いことも見えてきました。第一に、如何に優れたインターフェースがあっても、3.5インチのディスプレイでは、PCサイズのサイトはあまり見易くはないということ。第二は、Flashがサポートされないことです。
スマートフォンとラウンドアバウト ③iPhone快進撃、XPERIA追撃。スマートフォンは一般化へ...
2009年のiPhoneの目に見える大成功は、スマートフォンに懐疑的な人々、そして行き着くまで来た感のある携帯電話機に、新たな未来を感じさせることになります。また極めて重要な個人ツールである携帯は、ブランドも重要であり、そこでドコモが出したのが、ドコモから撤退していたSony/Ericsson のAndroid端末、Xperiaです。
ブランド力、デザインも格好よく、プロモーションも大々的に行い、Docomoから出たこともあり、これは売れました。漸く、iPhoneに対抗できるスマートフォンが出たと言えます。
ブランド力、デザインも格好よく、プロモーションも大々的に行い、Docomoから出たこともあり、これは売れました。漸く、iPhoneに対抗できるスマートフォンが出たと言えます。
スマートフォンとラウンドアバウト ②Android端末よりiモード2.0
アップルは基本的に１国１キャリアというルールがあるので、ドコモが急いで出したのが、HT-03AというAndroid端末です。iPhone3Gから遅れること丁度1年、2009年7月でした。またアップルもiPhoneの改良版iPhone3GSを、2009年6月に出しています。
ところが、実は2009年の携帯端末関連で、おそらく最大の話題となったのは、Android端末よりも、iモードブラウザがFOMA始まって以来の仕様拡張をしたことです（iモードブラウザ2.0）。ラウンドアバウトは、その対応に僅か3日しか掛かっていません。それもそのはずで、何も変更しなくても新ブラウザーに対応できしまうので、確認とプレスリリースの時間だけだったのですから。
【ドコモ初・日本初のAndroid携帯 HT-03A】
ところが、実は2009年の携帯端末関連で、おそらく最大の話題となったのは、Android端末よりも、iモードブラウザがFOMA始まって以来の仕様拡張をしたことです（iモードブラウザ2.0）。ラウンドアバウトは、その対応に僅か3日しか掛かっていません。それもそのはずで、何も変更しなくても新ブラウザーに対応できしまうので、確認とプレスリリースの時間だけだったのですから。
スマートフォンとラウンドアバウト ①生粋のスマートフォン対応だったが...
今日、ラウンドアバウトHPのTOPを更新し、スマートフォンに関するページを追加しました。
http://www.symmetric.co.jp/roundabout/index.php
http://www.symmetric.co.jp/roundabout/smartphone.php
スマートフォンを前面に押し出していて、俄かにスマートフォン対応をしたように思われるかもしれませんが、実は、「生粋のスマートフォン対応」なのです。スマートフォンへの対応はラウンドアバウトという製品にとって、あまりに自明な特性であり、そこを特に強く訴求するが無かっただけなのです。それには理由があり、そしてここに至るには長い道のりがありました...
http://www.symmetric.co.jp/roundabout/smartphone.php
スマートフォンを前面に押し出していて、俄かにスマートフォン対応をしたように思われるかもしれませんが、実は、「生粋のスマートフォン対応」なのです。スマートフォンへの対応はラウンドアバウトという製品にとって、あまりに自明な特性であり、そこを特に強く訴求するが無かっただけなのです。それには理由があり、そしてここに至るには長い道のりがありました...
携帯サイト制作の実践ノウハウ：iPhone用の画像で操作性を一層向上させる
今回は、よりiPhoneでの閲覧や操作に向いたデザインの作り方について説明していきます。
携帯サイト制作の実践ノウハウ：CSSでiPhoneで操作しやすい携帯サイトを作るコツ
今回はiPhone向けにデザインや操作性を改善するCSSプロパティについて、少し詳しく説明していきます。
携帯サイト制作の実践ノウハウ：ラウンドアバウトでリッチで快適な携帯サイトをiPhoneにも
ラウンドアバウトでiPhoneに対応した携帯サイトを作る際、おさえておきたい制作のコツについて説明していきます。
●VGA基準で制作
iPhone対応に限らず、ラウンドアバウトで作る携帯サイトでは常にお勧めしていることですが、VGA端末をターゲットにページレイアウトを作ります。
iPhone のブラウザ幅（縦向き・portlaitモード）は320ピクセルです。従来では一般的なQVGA端末（横幅240ピクセル）では、iPhoneの画面で は全体的に小さい内容表示になります。480ピクセル基準で作った画像はラウンドアバウトが自動的に縮小してデザインレイアウトを保持するので、画面に 合った大きさで見せることができます。なお、ラウンドアバウトは、iPhone端末の画面サイズを320×480ピクセル（portlaitモード）とし て画像を縮小します。
●VGA基準で制作
iPhone対応に限らず、ラウンドアバウトで作る携帯サイトでは常にお勧めしていることですが、VGA端末をターゲットにページレイアウトを作ります。
iPhone のブラウザ幅（縦向き・portlaitモード）は320ピクセルです。従来では一般的なQVGA端末（横幅240ピクセル）では、iPhoneの画面で は全体的に小さい内容表示になります。480ピクセル基準で作った画像はラウンドアバウトが自動的に縮小してデザインレイアウトを保持するので、画面に 合った大きさで見せることができます。なお、ラウンドアバウトは、iPhone端末の画面サイズを320×480ピクセル（portlaitモード）とし て画像を縮小します。
携帯サイト制作の実践ノウハウ：iPhoneで携帯サイトが見たい！に応える
iPhoneには高性能なフルブラウザ（Mobile Safari）があるので、iPhoneからのアクセスはPCと同じとするサイトが多いようです。iPhoneには容量オーバーエラー（メガバイトレベルは別として）やマークアップ言語の差異といった携帯固有の問題が生じませんが、本当にPCとiPhoneが全く同じデザイン・コンテンツでよいと考えてもよいのでしょうか？
例えば下はiPhoneからアクセスしたPCサイトです。ページ上部のFlashコンテンツが表示できておらず、内容全体が一見しては読めないほど小さく表示されています。
iPhoneでは縦の場合約３分の１に縮小表示されるため、読みづらく指でのリンクやボタンの操作がしにくいということも、iPhoneで見るPCサイトによくある問題の一つと言えます。こうしたこともあってか、iPhoneに機種変更したことで（PCブラウザ拒否設定などにより）携帯サイトが見られなくなった利用者が、PCサイトでなく携帯サイトを引き続き利用したいと思うことが少なからずあるようです。
例えば下はiPhoneからアクセスしたPCサイトです。ページ上部のFlashコンテンツが表示できておらず、内容全体が一見しては読めないほど小さく表示されています。
iPhoneでは縦の場合約３分の１に縮小表示されるため、読みづらく指でのリンクやボタンの操作がしにくいということも、iPhoneで見るPCサイトによくある問題の一つと言えます。こうしたこともあってか、iPhoneに機種変更したことで（PCブラウザ拒否設定などにより）携帯サイトが見られなくなった利用者が、PCサイトでなく携帯サイトを引き続き利用したいと思うことが少なからずあるようです。
携帯サイト制作の実践ノウハウ：CSSで背景画像を付ける
ラウンドアバウトの画像変換は、img要素の画像に限りません。変換対象となる画像は次のとおりで、今回はラウンドアバウトを使った背景画像デザインを取り上げます。
背景画像のCSSプロパティですが、本当はdivやtable関連要素にも変換対応しています。ただ、ドコモがbody要素にしか背景画像のCSSプロパティに対応しないので、３キャリアで背景画像を使う場合は実質body要素だけということになります。
背景画像を使ったデザインは淡い色調のパターン模様がよく使われます。例えば、下の画面のように小さい画像を縦横にリピートさせて柄のようなデザインをします（このサンプルは絵柄をわざとハッキリさせていますが）。これを様々な機種で見たとき、気になるのが柄の大きさに違いが出てしまうことです。VGA端末向けに作るとQVGA端末では大柄、一方QVGA端末に合わせるとVGA端末では細かく見えます。サイズ違いを用意して出し分けを行うか、機種による見栄えの違いを受け入れるしかありません。
（VGA端末サイズに合わせて背景画像を作った場合）
（QVGA端末サイズに合わせて背景画像を作った場合）
- インライン画像（img要素のsrc属性）
- 背景画像
- background属性
- background、background-imageプロパティ
- フォームのイメージボタン（input要素のsrc属性）
- リストのマーカー画像（list-style-imageプロパティ）
- 画像へのリンク（a要素のhref属性）
背景画像のCSSプロパティですが、本当はdivやtable関連要素にも変換対応しています。ただ、ドコモがbody要素にしか背景画像のCSSプロパティに対応しないので、３キャリアで背景画像を使う場合は実質body要素だけということになります。
背景画像を使ったデザインは淡い色調のパターン模様がよく使われます。例えば、下の画面のように小さい画像を縦横にリピートさせて柄のようなデザインをします（このサンプルは絵柄をわざとハッキリさせていますが）。これを様々な機種で見たとき、気になるのが柄の大きさに違いが出てしまうことです。VGA端末向けに作るとQVGA端末では大柄、一方QVGA端末に合わせるとVGA端末では細かく見えます。サイズ違いを用意して出し分けを行うか、機種による見栄えの違いを受け入れるしかありません。
（VGA端末サイズに合わせて背景画像を作った場合）
（QVGA端末サイズに合わせて背景画像を作った場合）
