携帯サイトの作り方

Web年賀状制作復習メモ第一弾。
「とりあえず携帯サイト作るのにコノ辺は知っとこう」的なネタです。

知識0から今すぐ携帯サイトを完成させなきゃいけないWeb屋さん(先月のウチだ)に読んで頂けると、(先月のウチから削られた)睡眠時間をプレゼントできるかと思います。

最近の携帯Webブラウザは頭良くてCSSも割かし分かってくれます。
けどちょっと凝ったデザインをやろうとするととたんにツンツンしだします。
でれツンで非常に萎える事この上ない……。

主観でかしこさを羅列するとこんな感じ。
au > softbank >>> 越えられない壁 >>> docomo

ちなみにウチの知識レベルはこんな感じ。

XHTML・CSS ★★★★☆ そこそこ自信有り
PHP ☆☆☆☆☆ 超うんこ
携帯サイトの知識 ☆☆☆☆☆ 的場の打率程度

で、制作時に困った事ランキングは以下の通り。

  1. コーディング・CSS
  2. 絵文字
  3. pngとgif
  4. 1ページあたりの容量

ググれば解説はいっぱいあるけど小難しくて「結局の所、結論は!?結論だけ教えて!!」と頭がスポンジになりました。
ので、能書き抜きで出来る限りバッサリきっぱりクッキリ要点のみまとめます。

コーディング・CSS

  1. 言語はXHTML
  2. ドキュメントタイプはXHTML 1.0 Transitional
  3. docomoにはHTTPヘッダでContent-Type: application/xhtml+xmlを吐く
  4. コンテンツの横幅は240px目安
  5. 一行の文字量はfont-size:middle;の場合横に9文字程度
  6. 画面サイズより大きい画像は画面サイズちょっきりに縮小表示される
  7. CSSはタグにstyle要素で直書き
  8. 背景色は<div>にしかつけられない
  9. <p>は上下にスペースが空きすぎて使いづらい
  10. ページ内リンクは<a name=”hoge”>にしか飛べない(idには飛べない)
  11. リンクの部分的な色かえはちょっと面倒

絵文字

  1. PHP絵文字変換スクリプトを使う
  2. i絵文字を使う(auはdocomoの絵文字を自動で変換する)

3キャリア共通を意識するならPHP絵文字変換スクリプト
softbankの時だけ絵文字がアホになっても良ければ
もしくはsoftbankの時だけ絵文字がアホになるのを直すテクがある人はi絵文字がオススメ。

pngとgif

  • docomo・Lモード・古いsoftbank→gif
  • それ以外→png

上記の様に画像の拡張子を切り替える。出来ない・めんどくさい場合は全部jpegにする。

1ページあたりの容量

  • 文書→10kb前後
  • 画像→30kb前後

とりあえず身も蓋もないけどこんだけ知ってればサクッとこなせる筈。
あくまでウチ流なので間違い訂正・突っ込み大歓迎です。

そのうち各々の解説エントリーが出来る筈。なんでその結論が出たのか知りたいって人は読んでみて下さい。
「これを先に知りたいなぁ〜」ってリクエストあればコメントでどうぞ。優先的にエントリーします。

6 comments

  1. 突然の問い合わせ申し訳ありません
    始めましてPIKKLE株式会社の稲冨と申します
    現在弊社では携帯電話向のhtml・css技術者を探しております
    作業内容と致しましては3~5日間くらいの作業ボリュームを
    委託可能な方を探しておりまして
    諸条件など双方で合意できれば継続的に発注可能だと思います
    突然の申し出でご迷惑でなく、もしも興味があるようでしたら
    是非ともご連絡いただきたいのですが、いかがでしょうか?
    ご返信お待ちしております。

    PIKKLE株式会社
    企画営業部 部長 稲冨正博

  2. 阿部マリコ より:

    >Pikkle株式会社 稲冨さま
    コメントありがとうございます。
    昨夜メールさせていただきましたので、お返事いただければと存じます。
    それでは、失礼します。

  3. スミマセンメールがまだ届いていないようなのですが
    もう一度送っていただいても構いませんでしょうか?
    お待ちしております。
    稲冨

  4. モカ より:

    はじめまして〜!
    携帯サイトの構築を目指しています。
    コーディングのDOCUTYPEはどうしようとか絵文字はどうしようとか悩んでいる時にここを拝見し、とてもすっきりしました。
    有り難うございます〜。

  5. 阿部マリコ より:

    >Pikkle株式会社 稲冨さま
    本日メールを再送させて頂きました。
    遅くなりまして大変申し訳ございません。
    ご確認頂ければと存じます。

    >モカさん
    はじめまして!コメントありがとうございます。
    お役に立てたみたいで嬉しいです。
    やっぱり悩む所はみんな同じなんですね。
    自分もまだまだ勉強中なので
    お互い頑張って良いコンテンツを生み出していけると良いですね♪

  6. たく蔵 より:

    はじめまして
    携帯サイトを作ろうと思ってここへたどり着いたのですが)@_@( 知識が全くなく(:_;;何からしていいのやら(T^T)よきアドバイスをお願いします(^o^)

コメントを残す

メールアドレスが公開されることはありません。