モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。
こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。

個人的に「ここだけは外せない!」という項目は以下の6つ

  • ・xhtml?html?
  • ・文字コードは?
  • ・tableは使ってOK?
  • ・絵文字は?
  • ・カタカナの扱いは?半角?全角?
  • ・VGA対応は?

別のブログでは既に告知してますが、こちらでも紹介させてください。

執筆協力をしました本「ケータイサイト解体新書」が6月24日に発売されました。

執筆協力といっても、やっていることはこのブログでやっていることとあまり変わりません。実際に自分がデザイン、コーディングをしたサイトのソースがどかんと載っています。

以下、自分が担当したものをざーっとご紹介。

枠線のサンプル画像

3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか?

ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。

xhtmlの場合、htmlの場合、と両方確認してみました。

よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ(ボタンのサイズ)が変更できるか、の検証です。

今までsubmitボタンの大きさを変更したことが無かったのですが、とあるソースを見ていたら、

<input type="submit" value="ボタン" style="font-size:x-small;" />

という記述をみかけて気になった次第です。

携帯サイトのデザインをする時、デバイスフォントの部分(アンチエイリアスをオフにしてる部分)を何ピクセルにしてますか?
PCサイトの場合だと、通常の文字サイズを12pxないし13px、小さい文字を10pxで作成しているデザインをよく見るのですが、携帯でもそのパターンが多いなーと感じています。

ユーザーが端末側の設定で文字サイズを変更している場合がありますが、検証する時は通常「標準(中)」の文字サイズでやっています。標準の文字サイズでチェックして、微調整をしたりしてます。
※会社の方針や案件によっては違うかもしれないので一概には言えませんが。

デフォルトの設定から変更していない人の割合が多い、とどこかに書いてあったような...?

で、端末側の設定で文字サイズ標準(中)にすると、意外と文字が大きく表示されるんです。

なので、デザイン上の文字サイズを12px、10pxで作成してしまうと、実機で見たときにだいぶ違和感を感じてしまう可能性があります。

※前提として、文字サイズはdocomoで大中小の3段階しか大きさの変化をつけられません。大はかなり大きいため、中、小の2段階しか使用ません。
詳しくはこちらのエントリーをどうぞ。
>>[携帯]フォントサイズ(XHTML版)

では、サンプルデザインと実際に組んだページを見比べてみます。

ケータイサイト解体新書
サイト制作協力をした本が出版されました!

サイト内検索
モバイルサイト
これからゆっくり考L:QRコード

このページのトップへ