Mobile モバイルサイト制作メモ2010

モバイルのデザイン、コーディング、SEO、Flashなどまとめ。
(参考にした本が2008年発刊のものなので情報がちょっと古いかも…)
▼デザイン
・幅はQVGAの240pxを想定する
・1ページ辺りの容量は50KBを目安に
・画像リンクにはテキストでキャプションつける(クリックがよくなる)
・背景色、文字色の組み合わせでメリハリを
・auとSBはdivに背景画像を指定できる(docomo用に背景色も同時に指定)
・日に何度もアクセスしてもらう施策として、アクセス時間によってトップを変化させる
<?php
//現在時刻を取得
$now = getdate();
//時刻で表示内容を分岐
if($now['hours'] >= 0 && $now['hours'] <= 11) {
echo("0時から11:59まで");
} else if($now['hours'] >= 12 && $now['hours'] <= 23) {
echo("12時から23:59時まで");
}
?>
・端末の戻るボタンは「ブラウザバック」という言葉が一般的に使われている
・ページの上下に移動するリンク(数字キーを割り当てておきたい)
・au限定だけどソフトキーは入れておく(真ん中のボタンにテキストはaのtitle、左ボタンはタグ)

▼コーディング
・docomoのXHTMLを基準(docomo仕様ならau,SBも対応してるから)
・strongは表示のためじゃなくSEO対策として使う
・hrを区切り線として使う
・titleタグは表示されなくても、絵文字などで装飾(ブクマ対策
・画像のaltはタイトル、メニュー、リンクが貼られている画像などに絞って記述
・画像にwidthとheightを必ず指定(表示が早い)
・au限定の mode="wraplnowrap" は選択するとマーキー状態になるテキスト。リンク指定も可。
・フォーム入力には入力文字のistyle指定をしておく

参考:http://blog.livedoor.jp/ld_directors/archives/51104376.html

▼SEO
・クローラーからのアクセスを遮断しない
・Y!は3キャリア、googleはdocomo用ページしかクロールしてない
・ドメインが違うサイトを挟む(効果測定ページなど)とクロールされない
・プルダウンでページ遷移させているとクロールされないので、サイトマップでリンクを確保
・3キャリアの専用ドキュタイプを宣言する
・クローラーのアクセスにはセッションIDを付与しない
・ちゃんとコーディングする
・ディレクトリ型検索エンジンに登録 (Y!モバイル / エフルート)
・Googleサイトマップに登録する

※PCと同じく姑息な手段を使わず、ユーザーにとって見やすい使いやすいサイトづくりをすることが重要

▼Flash
・アニメーションは6fps
・Flashコンテンツのサイズは240×240を想定
・FlashLite1.1か2.0で作るのが無難(対応機種を考えると)
対応機種まとめ

▼ツール
MacOSX用の3キャリア対応のエミュレータ
http://www.esyuma.com/jp/stroll.html
  • edit
  • 2010.07.27 Tuesday

関連する記事

search

categories

selected entries

links

profile

others