携帯サイト(html)の制作に入る前に確認しておきたいチェック項目

by sakaki0214[Mobile]
2009-10-30 02:27:23
[ページ移動: 1 2]

「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。

モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。

ですが、知っているのと知らないのとでは工数がかなり違ってきます。
一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。

今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめてみた感じです。

デザイナーさんに関しては、その項目に気をつけてデザインしていただければ戻しがぐんっと減りますよ!って感じです。

分かりやすいようにサンプルデザインを作ってみました。

<画像:初期提出デザイン>

「これでhtmlでコーディングしてください」
と言われた場合で考えていきます。

前提条件は、
・3キャリア1ソース
・html(CSSは使用不可)
・文字コード:Shift-JIS
・改行コード:CR LF

対応端末は、
・docomo 901/701以降
・au WIN端末
・softbank 3G
です。

チェックポイント

パッとみて指摘すべき箇所は以下の項目。

<画像:デザインのチェックポイント>

各チェックポイントの詳細は以下をどうぞ。

tableの使用はOKか

docomoの901、701、702、が対応端末にはいっている場合はtableの使用可否の確認します。901、701、702(一部)はtableが効きません(なかったこととしてレンダリングされます)。

tableは全く使わないのか、基本使わないがtable非対応機種で見ても大きな崩れがなければ使ってもよいのか、それとも気にせず普通に使っていいのかの確認をします。

901、701、702が対応端末に入っていなくても、念のため聞いておくのもいいかと思います。

※2009年10月31日修正
・902はtable対応しているため表示を削除しました。
・702の一部がtable非対応の旨追記しました。

ご指摘ありがとうございました。
ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」 | ke-tai.org

背景色を複数色使っていないか

bodyに背景色を指定するため、基本1色です(背景画像もbodyタグでのみ指定可能)。
複数色使いたい場合はtableの使用が必須です。
table非対応機種では無視されてしまうので場合によっては文字色が見えなくなる可能性もあるのでオススメできません。

複数の背景を色使いたい場合はxhtmlをオススメします。

枠線を使っていないか

枠線はtableを使う必要があります。よってtableが使えない端末では実現不可能です。
cssを使った場合でも、borderが使えないためtableの使用が必須になります。

901、701が対応端末に入ってくる場合は要注意です。

サムネイル画像の横にテキストが来るパターン

今回のサンプルページだと、「新作ブランケットの受付スタート☆」の説明文のところが要確認です。 文字の量が増えた場合、サムネイル画像の下に文字が回り込まないようなデザインになっていますが、これはtableを使う必要があるため今回の条件では実現不可となります。

リストアイコンの下に文字が回り込んでくるかどうか

これは「【特集】冬の季節〜」のところです。
これも↑と同じ理由で実現不可。tableが使えない以上、テキストが折り返すと左端から次の行が始まります。

ページの左右に微妙な余白が空いていないか

tableの使用が必須となります。よってこれも実現不可。
デザインする際にピタッと左右にくっつけてほしいところ。
そういうデザインがあがってきた場合でも、口頭で事情を説明することによって「左右の余白は開けなくていいですー」ってなるパターンが多いです。

フォントサイズは2段階ないし1段階か

今回のサンプルサイトでは3段階使っています。

[ページ移動: 1 2]

[*]前の記事 | [#]次の記事
TOP

コメント(8) トラックバック(4)

Powered by MT4i 3.0.8X1
携帯アクセス解析