スマホサイトでケータイも対応する－文字問題もCSS変換で解決編－

文字が問題で、読みづらいサイトをスマートフォンに見せていませんか？

[スマホでは文字が小さ過ぎてPCサイトが見づらくありませんか]

スマホユーザーがスマホを持ちたい理由のトップが「PCサイトにアクセスできるから」だそうです。しかし、実際にスマホでPCサイトを見ると文字が小さ過ぎて読めず、文字を拡大しながら読むと上下左右に移動しながらページ全体を閲覧することになるので、快適なブラウジングとは決して言えない状態になってしまいます。

従ってスマホにはスマホに適したページを作るのがベストとなりますが、これをケータイで見ると、文字が大き過ぎて縦に長くなったりページ全体のレイアウトが崩れるなどの問題が出てしまいます。スマホとケータイはディスプレイの大きさが類似しているにもかかわらず、それぞれに適したサイズのページを用意しなくてはならないのです。

[スマホとケータイは文字サイズの見え方が違います]

スマートフォンでもケータイでも読みやすいサイトを作るためには、個々に専用サイトを作り開発や運用のコストを二重化せざるをえないのでしょうか？

そこで、ラウンドアバウトからの提案です。

スマートフォン向けのサイトをガラケーにも展開できる「ラウンドアバウト」は、CSSに関する３つの機能を備えています。スマートフォンとガラケーとで違えたい文字の大きさや行間、余白などを柔軟に調整可能、外部CSSに対応しないドコモ一部機種の対応も心配不要です。

そのCSSの３つの機能とは

• CSS変換機能
• 外部CSSファイル切替
• FOMA90xCSS埋め込み

「業界初！CSS変換機能」

デバイスの多様化が進むにつれて、同じCSSでも表現には大きな差が生じます。もはや１つのCSSではユーザーに最適なコンテンツ表示を提供することが困難になっています。CSS変換機能はラウンドアバウト独自の新しいテクノロジーで、柔軟かつ強力にデバイスの多様化に対応します。

例えば冒頭でお話した文字サイズ、スマホではちょうどよく見える大きさがケータイでは大き過ぎるという状態も、CSS変換でケータイでもちょうどよい大きさにfont-sizeプロパティの値をチェンジ。他に、指でタッチしやすいように行間を広げたリンクをケータイでは詰めたい場合はline-heightプロパティを変えたり、marginプロパティで余白を付ける付けないを変えるなど、自由自在に調整できます。

「外部CSSファイルをスマホ・ケータイとで簡単切替」

CSSプロパティレベルでなく、スマホとケータイでもっと大胆にデザインを変えたい場合もあります。ラウンドアバウトでは読み込む外部CSSファイルをスマホとケータイとで簡単な記述で切り替えることができます。さらに言うと、ケータイの中でもドコモのiモードブラウザ2は別にしたいといった細かい切替ニーズにも対応できます。

CSS切替機能を活用することで、スマホにはCSS3を使い表現力の幅をより一層広げるということもでき、「ケータイ並みのスマートフォンサイト」にとどまらず積極的にスマートフォンサイトを展開できるようになります。

「開発効率に差が出る、ドコモ90xのCSS埋め込み」

最新機種がますます表現力を強めていく一方、未だ広く使われているドコモの90x、70xシリーズの対応が気になる方も多いかと思います。ドコモ90x、70xシリーズは、外部CSSに対応しておらず、style属性でCSSプロパティを直接埋め込む方法でしか、CSSのデザインを表現することができません。

でも、心配はいりません。

ラウンドアバウトには、外部CSS非対応のドコモには自動でstyle属性に埋め込む機能があります。デザインを外部CSSファイルに集約させて、開発やメンテナンスができる効率の良さは、従来型ケータイサイト制作と比べれば一目瞭然。

ラウンドアバウトは外部CSSを使ったコンテンツ制作を基準にしているので、Webの標準技術でスマートフォンサイトが作れるのはもちろんのこと、非対応の機種もしっかりフォローします。

これらのCSS変換機能があるから、ラウンドアバウトはスマートフォン向けのサイト１つでケータイもカバーできてしまうのです。

各機能のより詳細については製品サイトをご覧ください。

早速、ラウンドアバウトの変換を試してみたい場合は以下のトライアルサービスをご利用ください。

Facebookはじめました。「ラウンドアバウト」
http://www.facebook.com/symmetric.roundabout
よろしければ「いいね！」をお願いします。