3キャリア共通のモバイルサイトコーディングにおけるポイント

MT4i3.0.8X1の公開後、テンプレートセット作ったりしてますが、中には自分でコーディングしたい!って人もいると思われます。

そんな人のために、既に情報としてはいろいろなところで出ているんですが、一応3キャリア(i-mode/EZweb/Yahoo!ケータイ)共通のコーディングのポイントを纏めておこうかなと。

別にMT4i3.0.8X1だけじゃなく、普通にどんなモバイルサイトのコーディングでも使えます。

一応、注意点をまず述べておくと、XHTMLに対応しているのは、

  • docomoのFOMA端末
  • auのWIN端末
  • softbankの3GC端末

という、いわゆる上位端末になります。古い下位機種では利用できません。
最近は下位端末を利用している人は少なくなりましたし、仮に利用していてもまずネット閲覧にケータイを使う目的ではないので、このあたりは非対応でも問題ないかなと考えています。

次に全体の容量。
基本的にはi-modeの上限(i-mode2.0は除く)である容量100KBを守ればいいのですが、さすがにその容量まで使い切ると、表示が重くなるのは当然。

因みに、この容量とは表示されるページのソースと画像の合計になりますから、仮にソース側が5KBである場合、画像は残りの95KB使えるということです。

個人的には合計して50KB以下に抑えておくのがちょうど良いかと思います。

コーディングの前に共通の画像を用意する

コーディングを共通させるのは勿論ですが、画像も1枚の画像を共通で利用するようにしなければなりません。

width 最大240px以下

最近の画面サイズで言えば240pxで概ねOKなんですが、機種によってまちまち。
例えばブラウザにスクロールバーが表示されてしまうことで画像の幅が圧迫されて画像が荒れることもあります。そういうのがイヤって人は230pxくらいで作成した方がいいかなと。

拡張子は.jpg/.gifで

容量は出来る限り落とすのが無難。そう言う意味ではGIF形式の方がいいかも。

個人的にはJPG形式を多用してます。
PNG形式はi-mode1.0では非対応になってますが2.0では対応になりました。
とは言え対応機種の数も少ないですし、現時点ではまだ上の2形式で用意したほうがいいです。

CSSの対応について

この辺も実はキャリアによって差があります。

i-mode

インラインCSSのみ対応。外部CSSは非対応です。疑似クラスは使えます。
利用可能な疑似クラスはlink/visited/focusの3つ。

EZweb/Yahoo!ケータイ

こっちは2キャリア共通。
外部CSS対応していて、headに纏めて記述も出来ます。疑似クラスはlink/visitedに対応。

個人的にはあんまり外部CSS使ってません。インラインCSSと疑似クラスだけ。
そろそろスタイルの共通化をさせる意味で、外部CSSのテンプレートも作ろうかとは考えていますが。ちなみに対応していないスタイルは無視されます。

実際のコーディング例

まずはdivタグの使い方について。

divではブロックの背景カラー、位置の指定、マーキーなんかに使います。

/* ブロックの背景カラー指定 */
<div style="background-color:#000000;">hoge</div>
/* 位置の指定(中央) */
<div style="text-align:center;">hoge</div>
/* 位置の指定(右) */
<div style="text-align:right;">hoge</div>
/* 位置の指定(左) */
<div style="text-align:left;">hoge</div>
/* マーキー */
<div style="display:-wap-marquee;">hoge</div>

基本的に位置指定で左は使わなくてもいいかなと。デフォルト左ですし。
ただ、例えば中央位置指定をしたdivタグ内にさらにdivタグを追加して右、左の位置指定をする場合は必要です。

また、マーキーはi-modeだと中に含める文字数に制限があって、全角32文字を超えると自動的にテキストがカットされるので注意。

スタイルはひとつのタグに複数書き込めます。例えばブロック背景色黒、位置指定が中央の場合は以下のように記述します。

/* ブロックの背景カラー:黒 位置の指定:中央 */
<div style="background-color:#000000; text-align:center;">hoge</div>

次にspanタグの使い方。
spanタグは主に文字への指定を行います。文字の大きさや文字の色など。装飾もですね。
あんまり利用頻度は多くないですがインラインの背景カラーにも利用されます。

/* 文字のサイズ指定(大) */
<span style="font-size:xx-large;">hoge</span>
/* 文字のサイズ指定(小) */
<span style="font-size:xx-small;">hoge</span>
/* 文字色の指定 */
<span style="color:#ffffff;">hoge</span>
/* インライン背景カラーの指定 */
<span style="background-color:#000000;">hoge</span>

この他にも文字を点滅させるblinkなどもspanタグで使いますが、個人的にはあんまり使いません。
テキストを強調して目線を行かせるには有効ですが。

なお、文字サイズを大きくするというのもあまり利用頻度は高くないですかね。
文字を大きく見せる場合は、大概タイトルやキャプションといったものなので、h1/h2/h3/h4といったところを使います。

pタグもありますが、最近はあんまり利用されないですね。下方にmarginプロパティが付いてしまう機種が増えたため、いちいちインラインCSSで解除すると煩雑になってしまうというのひとつの理由です。

先ほどのdivタグと組み合わせると、以下のような記述になります。

/* ブロック背景色:黒 位置指定:中央 文字サイズ:小 文字色:白 */
<div style="background-color:#000000; text-align:center;"><span style="font-size:xx-small; color:#ffffff;">hoge</span></div>

今度は画像に関してです。
以前別記事で書きましたが、画像の回り込みを3キャリアで共通させる場合、ちょっとクセがあります。

/* 画像回り込み(左) */
hoge
<div style="clear:both;" clear="all">hoge</div>
/* 画像回り込み(右) */
hoge
<div style="clear:both;" clear="all">hoge</div>

EZwebのみfloat指定が出来ないので、ここではalign="left"を含ませるようにします。
さらに回り込みの解除では、PCブラウザの場合、brタグにclearを含ませますが、実はこれがi-modeで使えないため、回り込み解除をさせる位置に必ずdivタグを持ってきて、そこにclearを含ませる記述をしています。

margin-top/margin-right/margin-bottom/margin-leftstyleに記述する場合もありますが、これもキャリアによって使えないことがあるので、敢えて省いています。

この他にも水平線を入れるhrタグがありますが、基本的に画像で対応するほうがデザイン的にはいいと思っています。
使いどころとしては、レイアウト上の微妙な余白を空けたいときでしょうか。

スペーサーとして1px四方の透過画像や、背景と同一色の画像を使う方法もありますが、多用するとソースが煩雑になる場合が多いので、敢えてhrタグを背景と同一色にして利用するほうが良いかと。
ただ、i-mode2.0で表示した場合、hrタグは上下に0.5emの余白が取られるようになったので、今後はスペーサー画像が主流になるやもしれません。

さらにaタグについておまけ的なところを。

aタグは基本疑似クラスで色の指定を行っています。しかし、サイト内で特定のaタグだけ色を変えたいというのはままある話。
そんなときに記述を間違うと色の変更が出来ません。
意外にコレに嵌ってる人を見かけます。

<a href="#"><span style="color:#ff0000;">hoge</span></a>

という感じで、aタグの中にspanタグを入れればOK。
間違ってaタグの外をspanタグで囲っても疑似クラスで指定した色が適用されてしまいます。

大体これくらいのコーディングが出来れば、大概のモバイルサイトは問題ないんじゃないかと。

もちろんこれ以外に様々なタグがありますが、正味使われてるのってこんなもんですね。

liタグなんかは割と画像代用したりしますし。
それにstrongタグなんかも使いません。SEO的にはありですが、i-modeでは無視されます。

あとはデザイン面ですが、こればっかりはマニュアルには出来ません。
精々文字レイアウト上、1行に収まる文字数を気をつけるとか、3キャリア別に判別するプログラムを使って、絵文字を使うか使わないかとか。まぁ絵文字は個人的に使いたくない派ですけどね。一気にサイトがダサくなるので。
そのあたりくらいでしょうかね言えることは。

デザインについては、ホント千差万別。
サイトの内容や視覚導線によってレイアウトも工夫しなきゃなりませんから、正解というのがありません。個人でやるならば、よくよく自分と向き合ってデザインを決めることをオススメします。

他のモバイルサイトをよく見ておくのも必要だと思います。

[amazon asin=’4862670865′ type=’banner’]

モバデビの最新情報をチェック