『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか?』っていう質問を最近良く受けます。モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような位置づけになってきているのでしょうか。確かに、携帯サイトを作ってきている身としても、モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。いうことで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。ちなみに、左のスクリーンショットは、自分が似せて作った偽モバゲーのサイトの画像。本家と変わらないデザインとなっていると思います。本来なら、HTMLやCSSのコードを公開してしまうほうが理解という意味では、最善だとは思うのですが、それをしてしまうとそのまま他のサイトにアップロードして、悪用する輩が必ず現れるので、残念ですが、公開はできません。コードを公開することは目的ではありませんし、悪用されることは本意ではありませんので、何卒ご理解ください。順に説明していきます。今回のサイトは3キャリア対応版ということで、1枚のHTMLですべて完成させています。XHTMLで作成する。画面の「新着ニュース」や「お知らせ」にあるように、ブロックレベル要素に背景をつけるためには、ドコモではXHTMLで書かなければなりません。TABLEタグを使用することもできますが、その場合だと対応する端末の敷居を高くする結果となるので、XHTMLで全体をコーディングする必要があります。XHTMLでHTMLを書くにはPC向けとは異なり、少々テクニックが必要です。これについては、前回の記事で詳しく書きましたので、そちらをご覧ください。キャリアごとの仕様の差は外部CSSで。モバゲーのように文字を1段階小さくして全体のテキストを表示する場合など、キャリアごとに若干差が出てきてしまう場合もあります。この場合、特に(ドコモ)と(au・ソフトバンク)に差がでることが多いので、こういうケースでは、外部CSSを読めるブラウザ(au・ソフトバンク)と読めないブラウザ(ドコモ)の仕様の差を埋めるために、あえて外部CSSを読み込ませ、こちらにau、ソフトバンク向けのスタイルを記述することで解決します。文字サイズを1段階小さくするには(補足有り)文字を小さくして表示するサイトも最近はよく見かけます。サイト全体の文字を一括で指定する方法は残念ながらありません。これは、ドコモが対応していないから。BODYタグに、インラインCSSで「font-size:smaller;」のように記述できないからです。これは文字ごとに指定してやるしかないです。するかというと、私はこう書きました。href="test.html">友達紹介/a>]</span></div>と書いてます。ここで、DIVタグのclass属性の「small」は外部CSSにスタイルを記述していますが、そこには以下のように書いています。{font-size:12pt;}外部CSSが読み込まれるauとソフトバンク携帯の場合、文字サイズが12ptという情報が初期の段階で読み込まれます。ドコモではこの情報は無視されますが、SPANタグに書いたインラインCSSで文字サイズを一段階小さくする記述をしているので、文字は小さくなる。このSPANタグのCSSは逆にauでは読めません。smallerという相対指定なので、auとソフトバンク端末では追加指定(+smaller)として読み込まれ、12pt+smallerで文字が小さくなって表示されます。(この方法では一部機種では2段階文字が小さくなる場合があります。)※追記ごめんなさい。誤解を招く書き方をしてしまいました。CSSによる携帯サイトの文字サイズ指定については後日改めて記事にします。※さらに追記どうやら、以下のようにDIVタグにfont-sizeプロパティを指定して、bodyタグ以下の属性として記述してやれば、全体で文字サイズを指定することも可能な様子。BODYタグに記述しても不可なのは確かですが、この方法なら簡単ですね。ロゴ画像のサイズは横240ピクセル最近の携帯はほとんどが横240ピクセルより高解像度化していますが、auやドコモのブラウザでは、画像を自動的に拡大縮小する機能が備わっており、横240ピクセルで作っておけば、大抵は画面ピッタリに収まるようになっています。ソフトバンクは高解像度のまま表示する他に合わせないKYな仕様をしている端末もあり、240ピクセルでは画像が小さく表示されてしまう端末もありました。流れる文字はDIVタグで実際のモバゲーにはないのですが、電光掲示板のような流れる文字を表示させることもできます。この場合、HTMLタグにマーキータグがありますが、今回はXHTMLで書いているので、以下のようにDIVタグを使いました。style="display:-wap-marquee;">この画面はモバゲータウンに似せて作ったテスト画面です。style="color:white;">新着ニュース</span></div>としてます。背景はDIVタグにbackground-colorプロパティでCSSで指定します。ここで、同時に、文字の色も指定すれば、もっと単純化できますが、colorプロパティをDIVタグに書いてもドコモでは読み込まないので、別途SPANタグで文字カラーを指定します。※追記ドコモでもcolorプロパティはDIVタグに適用できるので、一度に併記しても構いません。ここでの各キャリアのポイントは以下です。右寄せ(補足有り)画像中の「もっと見る」にあるように、右寄せで文字を表示させる方法は、CSSで「text-align」プロパティを用いるのが良いと思われます。href="test.html">もっと見る</a></div>とするのが一般的です。中央揃えの場合はCENTERタグを使うこともできますが、XHTMLでは古いので、こちらのほうがよいでしょう。DIVタグではなく、SPANタグで囲む方法もありますが、本来「text-align」プロパティはブロックレベル要素にしか適用できないので、誤用となります。画像の回り込み(補足有り)画像中のエンタメ内にあるように、画像に文字を回り込ませて、たとえば、モバゲーのように画像の右側に文字を回り込ませる方法は以下。ここでのポイントは、2つ。通常回り込みを行う場合は、DIVタグなどにfloatプロパティを用いて実現しますが、auなどではfloatプロパティに対応していないので、上記のようにドコモ用にインラインCSSでIMGタグにfloatプロパティで回り込みさせ、一方au向けにはIMGタグのalign属性で同様に指定します。その他の方法として、TABLEタグを使って、擬似的な回り込みを実現する方法もありますが、TABLEタグに対応していない端末が多いので、避けるべきです。携帯サイトは文字でデザインする!携帯サイトは文字でデザインするといっても過言ではなく、改行せずに画面いっぱいに表示できる文字数は決まっているので、できる限り文字を短くし、他と文字数が揃うように調整してやりながら、全体としてみたときに上手く調和がとれている必要があります。半角カナのなせる技~オシャレかつスマートに着飾る魅力たとえば、コミュニティー&アバター内の「友達検索~友達を誘おう」までの部分を見てください。メニューとそのメニューの説明が「:」を境に区切られ、しかも全体が揃っているため、見やすくなっています。これをコーディングする際、通常はTABLEタグを使う発想が考えられますが、たぶんモバゲーもTABLEタグは使用していないでしょう。:身近な仲間も!?として、タウンの文字の後に単に全角スペースを挿入するに過ぎません。これでも携帯サイトの場合はOKでしょう。「サークル」の部分では、本来携帯サイトは文字幅の節約をするために、「サークル」のようにカタカナは半角で表示するテクニックが使われますが、今回のように「:」までの文字数はモバゲーの場合は4文字にしているので、あえてサークルを全角で書いているのだと思います。