当ブログは移行しました。

http://www.symmetric.co.jp/blogに移行しました。
5秒後に自動的に移動します。
移動しない場合はこちらをクリックしてください。

携帯サイト制作のヒント:PI機能で表示コントロール

ラウンドアバウトの機能の1つに、アクセスした機種の属性に応じて、コンテンツ内の表示の一部を切り替える機能(PI)があります。出し分けたい内容をHTML上に記述すれば、条件にマッチする機種にのみ表示させることが可能です。

PIとはProcessing Instructionの略記で、XML文書中に特定のソフトウェアへの命令を埋め込む、処理命令のための記述です。<?ターゲット 処理内容?>で表され、PHPではこのPIが使われています。ラウンドアバウトの表示コントロール機能はこのPIを利用しているので、表示コントロール機能のことを「PI機能」と呼んでいます。

PI機能の利用シーンの一部
  • 待受画面幅・高さに応じた配布する待受画像ファイルを切り替える
  • 対応アプリの種類やバージョンに応じて配布アプリを切り替える
  • Flash Liteバージョンに応じてFlashコンテンツの表示をコントロールする
  • GPS対応状況とキャリアに応じて位置情報送信用のコードを出し分ける
などなど。

携帯サイト制作のヒント:2ペインレイアウトをするには?

ページを縦に分割する2ペインレイアウトは、一目で多くの情報を見せることができ、ユーザビリティ向上に効果的なレイアウトです。

PCサイトではdivなどのブロック要素にfloatプロパティを指定することで2ペイン・3ペインのレイアウトをしますが、携帯サイトではdivにfloatが効かず横に並べられないので、テーブルを使います。

携帯サイト制作のヒント:綺麗な箇条書きを実現するには?

箇条書きリストは情報を整理して見せるのに効果的ですが、PCサイトでは一般的でも携帯サイトでは使われません。下の例のように字下げ幅やマーカーの見た目の違いが大きいことや、ドコモはCSSプロパティでアレンジできることがほとんどないことから、見た目をアレンジしたくても3キャリアで同じような表示ができないのです。


(画面:左からdocomo 904i、au G9、SoftBank 920P)

ラウンドアバウト・ホスティングの存在理由

ラウンドアバウト・ホスティングは、「コンテンツ変換製品やサービスは高すぎる」「携帯サイトを手作りするのは大変だ」という中で、もっと安く素晴らしいコンテンツが作れないと「モバイルはこれ以上発展しない」という危機感から生まれています。サービスコンセプトは次のようなものです。

今やクラウドという時代にあって、サーバーや製品を個々のユーザーが購入する時代ではなくなってきています。そのような意味からもホスティングに組み込まれているのは、ユーザニーズにマッチした形といえるのではないでしょうか?

携帯コンテンツ変換ASP:プロキシ型携帯変換の限界

敢えて単刀直入に書けば、次のようになります。




「ドコモ端末用にコンテンツを作っているので、ドコモ端末は変換を通さずにアクセスする」という一見理に適ったように思える構成でも2つの疑問が生じます。
  • ドコモ端末に生じる問題は解決してくれないのか?
  • であれば、ドコモ端末での問題は自分で解決しなくてはならないのか?
キャッシュ容量制限や端末毎の画面サイズ違いを吸収せず、CSSの使えないドコモが基準だとすれば、コンテンツ変換エンジンとしては、今後も多くの生産性向上は望めないことになります。

携帯コンテンツ変換ASP:プロキシ型の2URLとドコモ無変換の問題


プロキシ型携帯コンテンツ変換ASPでは、2つのURLが存在します。1つは元のコンテンツのあるWebサーバで、もう1つが変換プロキシサーバです。多くの場合、まず本当のURLを持っているコンテンツサーバにアクセスし、au/softbankの時は変換サーバにリダイレクトされます。そして、この事がこの方式の問題となるケースがあります。



携帯コンテンツ変換ASP:コストと運用面の比較

ASP利用では導入コストが低くても、運用コストが高ければ元も子もありません。課金体系について、ラウンドアバウト・ホスティングと変換プロキシ型ASPでは大きく異なっています。

基本月額料金
従量超過課金
(1PV換算)
ラウンドアバウト・ホスティング
2~3万円(共用)、10万~12万円(専用)
※サーバ、メモリ、ディスク、回線等のホスティングサービスを含む
なし
プロキシ型変換ASP
A:7.5万円(10万PV程度)
B:25万円(100万PV)
あり

携帯コンテンツ変換ASPの種類

ラウンドアバウトや他社競合製品を導入する場合、自ら選定・テスト・購入・導入する必要が生じます。その手間を省くことができるのが、ASPです。ASPであれば、利用したい期間だけ使えたり、製品テストなどをする必要が無いので、気軽に導入が図れます。そして、携帯変換にもASPがあり、2種類あります。

携帯サイト制作のヒント:行間が詰まって読みにくいので改善したい

新着情報など一覧でテキストを見せるようなページで、行間が詰まっていると読みにくい印象を与えます。背景色の付いたボックスと接する箇所は特に余白が欲しくなります。



PCサイトではCSSのline-heightやmarginプロパティを使えばできますが、携帯サイトの場合、最も普及するiモードブラウザ1.0のFOMAではこれらのプロパティが効かず行間を調整できない事情があるので、画像を使った何らかの方法でしか余白を調整することしかできません。

携帯サイト制作のヒント:アイコンを使ったわかりやすいナビゲーション

PCサイトではアイコンと言えば画像ですが、携帯サイトではアイコンに絵文字を使うことが一般的です。なぜなら、文字と同じくらいの画像を常に配置しておくことが難しいからです(画面サイズの数だけの画像と、それを切替える仕組みが必要)。

ラウンドアバウトを使うと画像は画面のサイズと連動して縮小するので、PCサイトのような多彩なアイコンを自由に使うことができるようになります。その時のアイコン画像の作り方・使い方について説明します。