こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。
つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。
どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。

【01】対応端末について

こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。
サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運用コストがかかってしまうことがあるので対応端末は慎重に選びたいところです。

【02】1ページあたりの容量について

ケータイ livedoor では画像とXHTMLファイルの容量を含めた30k 〜 50k 未満を目安に作っています。
仕様的には100k（3キャリアで1枚のXHTMLファイルを読ませた場合）まで可能ですが、3キャリアの中で Docomo の画面表示が比較的遅いため、ユーザへの表示ストレスを検証した上でこの容量としています。

【03】コーディングについて
まず、3キャリアの特徴をまとめてみました。
i-modeの特徴
・外部 css 非対応
・インラインの css のみ対応
・疑似クラスは link　visited　focus に対応

EZweb・Yahoo!ケータイの特徴
・外部 css 対応
・head 要素へのまとめ書きに対応
・疑似クラスは link　visited　に対応

その他
・非対応のスタイルは無視して表示される

この特徴を考慮した上で、XHTML でコーディング、3キャリアで1枚の XHTML ファイルを読み込ませることを前提としたタグを紹介させていただきます。
フォントカラーの指定


フォントサイズ（小）の指定

※EZweb の一部の端末で無視される場合がある

フォントサイズ（大）の指定

※EZweb の一部の端末で無視される場合がある

表示位置（左）の指定


表示位置（中央）の指定


表示位置（右）の指定


部分的な背景色の指定（ブロック）


部分的な背景色の指定（インライン）


ブリンクの指定


マーキー（右→左）の指定

※記述は異なるが左→右、一方から流れて停止、バウンドも可
※i-mode はマーキーで囲った文字が64バイト(全角32文字)以上だと切れる

罫線の指定

※color:#ff3300; text-align:center; は EZweb用に 指定

画像の回り込み（右）

※align="left" は EZweb 用に指定

画像の回り込み（左）

※align="right" はEZweb用に指定

ケータイ livedoorではこちらの記事で紹介させていただきました、共通モジュールを使ってキャリア別に異なるスタイルシートを呼び出しています。

【04】画像について

拡張子
gifまたはjpg画像を1枚用意すると3キャリアで表示することができます。

サイズ
画面に対して横240ピクセルがぴったりサイズと思いがちなのですが、ブラウザの表示領域は必ずしも横240ピクセルではありません。
ロゴ画像や装飾用の画像を横240ピクセルで作ってしまうと端末側で自動縮小がかかってしまうので、これを回避するために横220ピクセル 〜 230ピクセルで作成することをおすすめします。

【05】コーディングベースのデザインについて

デザインがニガテな方でも配色と文字のレイアウト、絵文字の使い方でなんとかなります。
サイトの配色は3色以内
黒、白、グレー以外に使用する色として、濃淡のはっきりしている色を３色選びます。
例えば濃い色（あか）→ 中間色（オレンジ）→ 淡い色（きいろ）を選んだとします。
ページでの使用箇所は、あかはページのタイトルに、オレンジは見出しに、きいろは装飾用に使用するといった感じです。

ロゴがある場合はロゴから2色、または3色、色を抜き出します。
ロゴの中でメインとして使われている色を濃い色として、その次に中間色、淡い色を決めます。中間色、淡い色がない場合はきいろ、オレンジ、きみどり、みずいろ、ピンクから選んでみてはいかがでしょうか。

1行の文字数は10 〜 15文字
フォントサイズ（小）は15文字以下、フォントサイズ（デフォルト）は10文字前後、フォントサイズ（大）は5文字前後を意識してコピーやアンカーにするテキストを考えるとキレイに納まります。

1行に画像とテキストをレイアウトする場合は、画像は横80ピクセル以下、テキストはフォントサイズ（小）で10文字前後にするとキレイに納まるようです。

絵文字を使ってにぎやかに
絵文字を使うのがニガテ！という方はこちらをご参考下さい。
他には左寄せにしたタイトルの頭に絵文字をつける、センター寄せにしたタイトルの両端に同じ絵文字をつけるなどするとにぎやかになります。

spacer.gifの使用は控えめに
PCサイトでよく使用された、1ピクセルの透過 gif が最近モバイルサイトでも使用されることが多くなりました。おそらく「brだと行間が広すぎる、微妙な行間がほしい」というときに使用しているのだと思います。
ケータイ livedoor でも使用しているコンテンツがありますが、多用しすぎると表示が遅くなる原因にもなるので、画像が多いページには spacer.gif の替わりに背景色と同じ色にした罫線で微妙な行間をとるようにしています。

【06】おまけ

i-mode は XHTML でないと部分的な背景色の指定ができません。サイトが HTML でコーディングされているとツライところですね。
そんなときはソース的にあまり美しくありませんが、table タグに width="100%" bgcolor="#ff3300" で代用することができます。table タグはi-modeで900i、901i、700i、701i シリーズが非対応ですが、シェア率が低くなっているので代用するのもOKかなと思っています。

代用する場合は、table タグ内に指定した背景色と文字色、body タグ内に指定した背景色と文字色の組み合わせに注意しましょう。非対応端末はtable タグが無視されてしまうので、table タグ内の文字色と body タグ内の背景色が同色や補色だった場合、読みにくくなってしまいます。
※font color でくくっている場合は無視されません


いかがでしたか？モバイルのコーディングやデザインは奥が深くて、まだまだたくさんキャリアに依存した仕様がありますが、3G 端末の普及と対応端末を限定にすることによって開発の敷居も下がってきたので、昔ほど懸念する仕様はなくなってきました。

これらはモバイルチームでこつこつ調査した上の仕様なので、これからモバイルサイトを担当するディレクターやマークアッパーの方の調査、作業目安として参考にしていただければと思います。

ライブドアでは「PC より仕組みが複雑だと思っていたけど意外とモバイル簡単かも（ﾟ∀ﾟ）」とひらめいたディレクターを募集しています。