PR

3キャリア対応の携帯サイトを作るには

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

制限の多いキャリアに合わせた作り

 前回(http://www.thinkit.co.jp/article/143/2/)は、汎用的な携帯サイトを作る手順とポイントを解説しました。今回は、3キャリア対応の携帯サイトを作るテクニックと「こうしたい」を実現するデザインテクニックを技術的視点で解説します。

 3キャリアに対応した携帯サイトを作るためには、各キャリアの仕様を比較し、最も制限の多い(自由度の低い)キャリアに合わせなくてはなりません。まず、第1回(http://www.thinkit.co.jp/article/143/1/)と第2回(http://www.thinkit.co.jp/article/143/2/)の内容をふまえて、3キャリアの携帯サイト制作のポイントをおさらいしましょう。

 HTML/CSSに関しては、最新のデザインを取り入れるならHTML文書は「XHTML」で記述する、コンテンツのMIMEタイプは「application/xhtml+xml」(HTTPヘッダーも)、文字コードは旧機種を考慮して「Shift-JIS」、外部CSSは使用せずに、styleタグによるリンク設定とstyle属性による「インライン指定」にとどめることが、ポイントとなります。

 画像に関しては、サイズは「横幅最大240px」、フォーマットは「JPEGかPNG画像」、できるだけ使用する色数を減らす、画像などを含めたページ全体の容量は「100KB以内」とするのがポイントです。

 そのほかに関しては、文字サイズは1行につき「標準で全角10文字」程度、「小で13文字」程度。絵文字はauとドコモに互換性があり、全キャリア対応はプログラムが必要。タグを記述する際に「インデントを使わない」コーディングをすることがポイントとなります。

 もちろんこの条件では、2G端末などの旧機種を考慮していないので、全機種に対応させてページを作ることはできません。どこで一線を引くかは前回(http://www.thinkit.co.jp/article/143/2/)でも紹介しましたが、それはサイトの規模や制作者の判断に委ねられます。

色つきけい線、hrタグ

 それでは、前回(http://www.thinkit.co.jp/article/143/2/)のサンプルサイトをもう少し発展させたサイトを例に、それぞれポイントとなるデザインテクニックを紹介していきます(図1-1)。サンプルはこちらからダウンロード(http://www.thinkit.co.jp/images/article/143/3/14331.zip)できます(14331.zip/7.79 KB)。

 まず、携帯サイトでカテゴライズによく使われるけい線(


タグ)は、キャリアによって指定方法が異なる、クセの多いタグです。

 それでは、キャリア別にhrタグのポイントを紹介します。

 ドコモでのhrタグのポイントは、XHTMLではすべての属性に非対応となります。

 ソフトバンクでのhrタグのポイントは、下記になります。

・けい線の上下にマージンがとられる
・hrの余白調整はmargin/paddingプロパティで対応可能
・陰をなくすnoshadeに対応

 auでのhrタグのポイントは、下記になります。

・ライン色はcolorプロパティで対応
・au以外のキャリアのライン色はbackgroundプロパティで対応
・heightプロパティは非対応(size属性で縦方向の長さを指定)
・borderプロパティは非対応(au以外はけい線の境界線を指定可)
・text-alignプロパティはauのみ対応(au以外はalign属性を使用)

 また、widthプロパティは全キャリアで使用可能となります。

 このように、初期状態のhrタグの長さを変えたり、色を変えたりするには、キャリアによって指定方法が異なるので、これらすべてを同じようなデザインにするには、下記のように多少長くなってもすべてを考慮した指定方法にする必要があります(図1-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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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