これからゆっくり考L

旅行好き。美味しいもの好き。日本酒好き。

モバイルサイトのデザインをする時にちょっと気にしてほしい事

携帯サイトのコーディングを実務でやり始めてからまだ2か月ぐらい。
6サイトぐらいの案件をこなした程度のまだまだひよっこモバイルコーダーな私ですが、
いっちょまえに「このデザインは無理なので、こうこうこういう風にしていただけたらと・・・」
とデザイナーさんに指示を出したりすることもあったりします。


指摘する箇所が毎回同じような気がするので、ここら辺でメモがてらまとめてみます。
※携帯サイトの制作に詳しい方からの突っ込みダメだし大歓迎です。というか、ぜひぜひお願いしたく。


前提条件は、以下の3つ。

・3キャリアを1ファイルで対応
・対応機種は3G以降
・xhtmlでコーディング

太字(ボールド)は使っちゃダメ

docomoが非対応ですし、auも一部対応してなかったりするので。

1ページ内のリンク色はできれば1色に・・・ってデザイン上単色は無理ってこともありますよね

[2色以上にした場合に起きる現象]
docomoでは、CSSで指定したリンク色の下線がついてしまいます。
aタグ内で、<span style="color:#fff;">とやったとしても、下線は白になりません。
あくまで、CSSで指定した色の下線がついてしまいます。


docomoでの表示サンプル
※CSSでリンクのカラーを黒(#000;)に指定して、aタグ内部で<span style="color:#fff;">と指定した場合


docomo以外は結構ちゃんと表示される


※CSSでリンク色を指定せずに、aタグの内側すべてに<span style="color:#***;">ってするとどうなの?
⇒docomoで確認してみたところ、下線がリンクデフォルト色の「青」になりました。

テキストは左端にできればくっつけてほしいです。

⇒marginはイメージタグにしか適用できないので、微妙な余白が左右にあるとちょっと困ってしまいます。


テキストがダーッと表示される部分のデザインで両端に余白があると、
テーブルを使って空白のセルで左右に余白をもたせる、といったことになります。


メニューが縦に並ぶような場合で先頭にアイコンがある場合は、
アイコンのイメージタグでmarginが効くので別にテーブルは使わなくていけます。


※blockquoteを使えばいいんじゃないの?
⇒デザインされた通りの余白はほぼ再現できないかと。
機種依存?キャリア依存?で決められた余白が空いてしまうので。
blockquoteはあんまり使わないです。私は今まで使ったことがないです。

フォントの大きさはできれば2段階ぐらいで・・・

docomoがそもそも3段階しか対応してないので(一部機種は除く)。
美しさ的に、2段階ぐらいがいいのではーと個人的には思います。

テーブルを使わなければならなさそうなデザインもできれば避けていただけると嬉しかったりします

⇒docomoの古い機種(901、902あたり)が一部対応していないので。
あと、テーブルの1セルごとにフォントサイズの指定をしなければいけないので面倒k(ry

その他

他にもちょいちょいあるんですが。


背景画像は1ページにつき1回しか使えない(つまり1種類のみ)。とか、
auでdivの下に1pxの隙間があくのでうまく入れ子にしないと厳しいぞ。とか、
スクロールバーの分だけページの横幅が狭くなっちゃう機種があるので、横幅240pxの画像だとぎゅっとつぶれてしまうことがありますよ?とか、
文字依存のデザインはやめてー!各キャリアで文字の大きさは結構違うんだから!等々。


キャリアだけでなく、機種によっても表示が異なる場合がちょいちょいあるので、
すべて上記通り、という訳ではないですのでご注意ください。