携帯サイトとPCサイトはここまで違う!

2008年10月7日(火)
柴崎 正也

補完的要素を担う絵文字

 携帯サイトでは、画面が小さく、容量や前ページのCSSの問題等でPCサイトのような豊富な表現ができないので、絵文字がこれらの補完的な要素を担っています。絵文字はサイトの印象を大きく変えるので、積極的に使用すべきです。

 表示可能な絵文字の種類や数、入力方法は各キャリアで異なっており、1枚のページを3キャリア対応で制作する場合はHTML側で対処することは難しくなります。また、絵文字はドコモとau間で互換性がありますが、ソフトバンクについてはありません。PHP等の絵文字変換スクリプト(http://www.dspt.net/tools/emoji/)を使用すればこれらの互換性は回避できます。

 ドコモの絵文字(http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/index.html)とソフトバンク絵文字(http://creation.mb.softbank.jp/web/web_pic_01.html)ではバイナリコードもしくはUnicodeでの入力が一般的です。一方、au絵文字(http://www.au.kddi.com/ezfactory/tec/spec/3.html)はIMG独自タグでの入力が推奨されますが、ドコモ絵文字との互換性(サーバーで変換)があります。さらに、ドコモ絵文字を使えば絵文字を、バイナリデータとして扱うことができるので、絵文字の拡大縮小表示も可能になります。auに対してはドコモの絵文字を使用すると良いでしょう。

 キャリア別の絵文字入力方法については次のようになります。

 ドコモの場合はバイナリコード入力の際には、専用エディタが必要です。ドコモ側で入力ツール(i絵文字)(http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/index.html)が用意されていますので、このツールを利用すると良いでしょう。一方、Unicode等のテキストで入力を行う場合、基本絵文字、拡張絵文字の表を参考に、それぞれのコード欄の文字を記述して入力します。例えば、Unicodeで晴れの場合は、「」と入力します。

 auの場合も同様に「EZweb絵文字一覧【タイプD】(http://www.au.kddi.com/ezfactory/tec/spec/pdf/typeD.pdf)」を参考に目的の絵文字番号を入力します。例えば、太陽なら「」と入力します。

 ソフトバンクの場合も同様に、「WEB & NETWORK 絵文字一覧 使用方法(http://creation.mb.softbank.jp/web/web_pic_01.html)」を参考にして、バイナリコード(Webコード)またはUnicodeの欄から目的の絵文字のコードを見つけて、入力します。例えば、Unicodeで晴れの場合は「」と入力します。

 キャリア別絵文字入力方法をまとめたファイルは、こちらからダウンロード(http://www.thinkit.co.jp/images/article/143/1/14312.zip)できますので、参照ください(14312.zip/2.99 KB)。

画像の種類とキャッシュの容量について

 携帯サイトで扱える画像の種類(フォーマット)は、GIF、JPEG、PNG、BMP画像などがありますが、実際に使用できる画像の種類は携帯キャリアや端末の種類によって異なります。機種ごとの画像対応状況はImpressR&Dが公開している「携帯端末プロファイルデータ(無償版)(http://imri.impressrd.jp/iil/k-taiprofile)」のデータ(1999年以降の発売機種が対象)を参考にすると良いのですが、ここでは実際にどうすれば良いのか示唆したいと思います。

 キャリア別に見た場合、それぞれどのような画像フォーマットや色を選べば良いか図2-1にまとめました。

 現在の市場に出回る機種を考慮すると、3キャリア対応でサイトを制作する場合、画像フォーマットはJPEGかPNG画像を選択し、できるだけ使用する色数を減らして制作すると良いでしょう。もちろん、かなり古い機種まで考慮すると、カラー非対応機や画像フォーマットの対応状況により画像を表示できない機種もありますが、静的なHTMLでは全機種対応は難しいので、ある程度機種を絞ることも必要です。

 また、これに関連して、PCとは異なり、携帯端末では一度に表示できるページサイズに限界があります。HTMLやそれに含まれる画像やFlashなどを含めた全体の容量をここではキャッシュ容量と定義することにします。端末によってこの容量に違いがあります。発売当初のキャッシュ容量は5~6KB程度しかなかったケータイも現在では、300KB程度まで対応した端末も存在します。現在は昔ほどキャッシュ容量を気にする必要がなくなりましたが、キャリアごとに目安となるキャッシュサイズを図2-2に示しました。

PCおよび携帯サイト制作のほか、デコメ、SEO、LPOなどWEBサイト全般の業務に携わる。過去にイントラネットのデザイン改修、コーポレートサイトの企画および制作、タイアップバナー広告の作成、Movable TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。著書に「携帯サイト コーディング&デザイン」。そのほか、HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。HTMLタグボード:http://www.dspt.net/携帯ホームページを作ろう!:http://dspt.blog59.fc2.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています