閉ざされた独自のHTMLワールドと“キャリア”の壁

chapter 1 実践で使えるケータイサイト制作ガイド

閉ざされた独自のHTMLワールドと“キャリア”の壁

ケータイサイトの歴史とサービスの特徴

ケータイサイトの歴史は、PCサイトに比べてまだまだ浅い。2001年に（株）NTTドコモが発売した携帯電話（docomo）から、503シリーズをはじめとするカラー表示の端末が出たころを黎明期とし、徐々にケータイサイトが増えていった。なかでも着メロサイトが流行ってからは、ケータイサイトを新たなビジネスチャンスとしてとらえる動きが加速した。以後、楽天（株）をはじめとするECサイトがモバイル事業を本格化させ、さまざまなジャンルの事業主がケータイサイトをつくり、ECなどの物販や企業のビジネスツールとして今日まで発展してきた。ケータイサイトは、PCサイトのようなオープンで公衆性の強いものとは異なり、つねに手元にありさまざまな機会をその場で即時にとらえることができる、パーソナルなツールとして認識されてきた。それゆえにパーソナライズなサービスを提供するサイトが多い特徴がある。クライアントからケータイサイトのオーダーがあった場合は、企画提案の段階でパーソナライズに関しても意識しよう【1】。

PCサイトと違う点と注意すべき点

では、PCサイトとケータイサイトでは、何が異なるのか。大きく違う点は、文字コードとCSS、絵文字の3点だ【2】。具体的な制作術は後述するが、各キャリアのHTML、XHTMLは独自の進化を遂げてきており、ケータイ独特のタグや、PCサイトでは一般的でもケータイでは使用できないタグなどが存在する。たとえばPCサイトを作成するうえで欠かせない＜p＞や＜ul＞、＜ol＞などの段落やリスト系のタグは一切使用しない。代わりにレイアウト上で頻繁に使用するタグは＜div＞や＜br/＞である。＜p＞や＜ul＞、＜ol＞も当然使用可能なタグではあるが、ケータイサイトではCSSでカスタマイズできる要素が少ないため、使用しないほうが無難だ。

ケータイサイト制作で一般的に使用する文字コードはShift-JISだ。ただし、ソフトバンク（株）から発売されている携帯電話（SoftBank）の3GC端末で、SoftBank絵文字を使用させる場合に、Shift-JISを指定していると絵文字が表示上から消えてしまうことがある。こういった場合は、文字コードを「UTF-8」にしなければならない【3】。

CSSも独特の記述方法が採用されている。（株）KDDIから発売されている携帯電話（au）と、SoftBankの端末は外部CSSの使用が可能だが、docomoでは使用できない。また、auについては独特なクセがあるため、こちらも外部CSSの使用はお勧めできない。docomoでは、＜a＞タグのみが内部参照形式のCSSで使用可能だ。内部参照のCSSは他キャリアでも指定できるので、リンクカラーのみを内部参照で指定し、その他のCSSはインラインで各タグ内に記述しよう。

ほかにも、コンディショナルコメントやハックなどによる切り分けやリフレッシュ、JavaScriptなど、PCサイトではコーディングレベルで可能な処理もケータイサイトでは不可能なため、多くの処理をPHPなどの開発フェーズに任せることになる。もしクライアントの要件で上記のような処理が必要な場合は注意してほしい【4】【5】。

また、ケータイサイト独自の考え方として、カタカナや記号などの表記に関しては半角文字を使用することが多い。それは、ケータイサイトの歴史上で、画面表示幅やキャッシュ容量が非常に少ない、たとえば画像込みで6KBしか表示できない端末が発売されたこともあったからだ。そこで当時は、小さな画面内に半角カタカナや半角記号を用い、容量の軽減とともにより多くのテキスト情報を入れようと考えた。現在では携帯端末の解像度向上にともなって、全角カタカナに対する違和感も薄れている。そのため、どちらを使用するかは制作者の好みになっているが、表現上で通常のテキストと目立たせたいテキストという意味合いをもたせた使い分けをしてもよい。

キャリアごとに独自のHTMLがある

ケータイサイトを制作する際、言語は何を使うかと問われたら「HTMLを使う」と答える人が多いだろう。しかし、ことはそれほど単純ではない。ケータイサイト制作の予備知識として、日本国内に限って言えば、docomo、au、SoftBankの3キャリアがほとんどのシェアを握っている。各キャリアのシェア比率は5：3：2だ。3キャリアそれぞれが個別に成り立ち、各社がシェア競争をしながら発展してきた過程で、結果的に各キャリア独自の絵文字、HTML、XHTML＋CSSをもつこととなった。シェア競争が一段落した現在、絵文字などのサービスについては一部、互換性のあるキャリアもあるが、HTMLやXHTML＋CSSになると、まだまだ独自の制約に縛られる。とはいえ、ひとつのキャリアだけに特化していたり、3キャリアのうちのひとつを切り捨てるなどといったことは、現状のケータイサイト制作現場ではほぼあり得ない。そのため、この3キャリアで閲覧できるケータイサイト作成を行う必要がある【6】。

各キャリアの使用言語を理解する

3キャリアで閲覧できるケータイサイトを作成する前に、各キャリアで採用している言語を知ろう。各キャリアとも、独自の進化を遂げてきたことは前述したが、これによりdocomoは「Compact HTML」（以下、C-HTML）と「iモード対応XHTML」の2種類、auは「HDML」と「XHTML Basic」（au向けサブセット）、SoftBankでは「ソフトバンク携帯電話向けHTML」と「ソフトバンク携帯電話向けXHTML」と称し、それぞれが独自のHTML言語を採用している。ここまで説明してきたことをまとめると、ケータイサイト制作で基本的に使用するのはHTMLだが、その他に6つの言語を覚えなくてはいけないような錯覚に陥る。「今から新たに6つの言語を覚えるのは難しいので、ケータイサイト制作はあきらめよう」と考える人もいると思うが、この時点でその判断をするのはまだ早い【7】【8】。

3キャリア6言語をどのように見せる？

上記にて、キャリア6言語を記載したが、不要な部分や共通化できるものがある。例を挙げれば、docomoのFOMA、auのWIN端末、SoftBankの3GC端末は「第3世代携帯」と呼ばれ、すべての端末はXHTML＋CSSに対応している。また、第3世代携帯は2009年2月時点では、90％以上のシェアを獲得している。サイトのターゲットユーザーにもよるが、第2世代ユーザーの10%弱を切り捨てれば、1種類の共通XHTMLファイルを作成するだけでよい。なぜなら、実質的に第2世代端末のユーザーは、ケータイサイトの閲覧に積極的ではないデッドユーザーである場合が多いからだ【9】。

ただし、クライアントの意向で「第2世代端末も含めて対応してほしい」と言われた場合には、C-HTMLをベースとした共通HTMLファイルを作成し、合計2種類のファイルやPHPなどで世代別に振り分けをしなければならない。また、クライアントから「キャリアごとに違う文言を入れたい」と言われたときは、同じファイルを3分割して.htaccessなどで簡易的に各キャリア別のページか、ディレクトリに振り分ける方法もある。振り分けが必要な場合は、プログラマーやSEを確保して作業するほうが無難だろうが、クライアントの要望に応じて対応方法を検討しよう。

［INDEX］
>>>　 閉ざされた独自のHTMLワールドと“キャリア”の壁
>>>　 ケータイサイト公開までのワークフロー