スマホサイトでケータイも対応する－画像問題解決編－
画像が問題で、スマホサイトとケータイサイトが１つにはならないと思っていませんか？
 |
| [ラウンドアバウトでスマホサイトをガラケーで表示した場合] |
通常、スマホ向けに高画質画像をたくさん使ったサイトをそのままガラケーで表示すると、画像サイズが大きすぎたり、１ページの容量が大きすぎたりで、下の画像のようにレイアウトが崩れるなど、トラブルが出てしまいます。
 |
| [スマホサイトをガラケーでそのまま表示] |
しかし、スマートフォン向けのサイトをガラケーにも展開できる「ラウンドアバウト」は、２つの強力な画像変換機能を搭載しているので、こうしたレイアウト崩れなどの画像に関する諸問題をすべて解決します。
その２つの強力な機能とは
- オートレイアウト
- 自動容量調整
「デザインに差が出るオートレイアウト」
今までのケータイサイトに比べ、スマートフォン向けのサイトを作成するときは画像を沢山使います。例えば、メニューをアイコン化し、3×3の並びでいかにもスマートフォン向けのサイトっぽく見せたり、右のサンプルサイトのようにPCサイトに似せて、サイトトップにメニューを横並びに画面幅ぴったりに作ってレイアウトしたりします。その他にも絵文字の代わりに小さなアイコン画像も多く使い、スマートフォンサイトらしいデザインを求める場合もあるでしょう。
でも、本来はそんなデザインをしたスマートフォン向けサイトはガラケーではちゃんと見えるはずがないと思いませんか？きっと、ケータイサイト制作で苦労されてきた方ほど、「そんなレイアウトをワンソースでは無理！」と思うでしょう。
その代表的な理由が
- 画面幅がガラケーとスマートフォンで違う
ラウンドアバウトがアクセスしてきたモバイル端末の画面幅に合わせて、すべての画像を自動リサイズします。だからレイアウト崩れを気にする必要はありません。
オートレイアウト機能に任せれば、画像の配置は自由自在です！
「キレイな画像が表示できる自動容量調整」
今まではガラケーに対しては１ページで表示できる容量が決まっていたので、画像の容量と格闘しながらサイト制作してましたが、スマートフォンでは違います。
せっかくのスマートフォンサイト、どうせならきれいな画像を見せたいですよね！？
実際、アパレル系ECサイトでは、きれいな画像が表示できるか否かが、モバイル端末からの売上に大きく左右すると言われています。
 |
| 左：スマホ向け 右：ガラケー向け |
通常、スマートフォンサイトでは左のスマホ向け画像を１ページ内にいくつも表示しても容量制限がないためエラーになることはなく、画質もキレイなまま表示されます。