新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

モバイルサイトを本格的に始めよう

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

モバイルサイトを見る女性これからはケータイだのなんだのさんざん言ってましたが、
結局なかなか本格的に手をつけずにいました。
その理由として、

難点その一 ソースが見れない。
難点その二 動作確認がしずらい。
難点その三 キャリア毎のページが必要。

等があったのですが、さすがにそうも言っていられず、とうとう重い腰を上げようとこういうわけです。

スポンサーリンク
 

ケータイサイトに関してはライブドアさんのディレクターブログで詳しく解説しています。

モバイルサイトのデザイン – livedoor ディレクター Blog

ケータイ livedoor の場合、ページ全体の容量は 30 キロバイト前後を目安にしており、画像とテキストを 1行に並べるときの画像サイズ、テキストのバイト数は、QVGA を基準に、画像は横 80 ピクセル以下、テキストはフォントサイズ(小)を指定して 1 行 20 バイト前後を目安にレイアウトを決めています。

ケータイサイトを作るうえで一番気をつけなければならないのが画像の横幅です。
必要以上に大きくすると容量オーバーの可能性が出てくるし、
かといって小さくしすぎるとデザインのバランスがおかしくなってくる。
ライブドアさんでは80pxを基準にしているようですが、これは現在、主流になりつつあるQVGA(320×240ピクセル)の1/3になります。
つまり、文字を流し込む上での画像サイズということになりますね。
画面全体に画像を入れたいときは横幅を240px(実際はスクロールバー等も加味してもう少し小さく)にします。
フォントの文字数も同じくレイアウトをする上で重要になってきますが、
ライブドアさんの言っているフォントサイズ(小)で20バイトは16px×10文字(20バイト)となり、160pxになります。
つまり、ライブドアさんのイメージではケータイサイトも通常のWebサイト同様以下のようにレイアウトされることを考慮しているのでしょう。
ライブドアケータイサイト
なお、QVGA(320×240ピクセル)ではそれぞれ、
フォントサイズ(大)24px×10文字
フォントサイズ(中)20px×12文字
フォントサイズ(小)16px×15文字
が、横幅に入る文字数となりますが、スクロールバーを加味して、
それより一文字少ない文字数を基準にするといいと思います。
(DoCoMo P905iで検証。なお、P905iにスクロールバーはありません)

モバイルサイトのCSS – livedoor ディレクター Blog

DoCoMo は外部スタイルシート、head 要素へのまとめ書きに対応しておらず、タグに style 属性を直接指定する方法のみ対応しています。au(ツーカー)、SoftBankは、DoCoMo とは異なり、外部スタイルシート、head 要素へのまとめ書き、style 属性の直接指定にも対応しています。
細かい部分では、au(ツーカー)、SoftBank は HTML で記述されていてもスタイルを認識してくれますが、DoCoMo は MIME タイプの設定が XHTML になっていないとスタイルどころか XHTML ファイルということも認識されないため、background-color プロパティが使用できず、簡単に装飾することができません。

CSSに関しては、王様DoCoMoにあわせて作れということのようです。
DoCoMoさんもそろそろ、暴君凋落の兆しが見えてきていると思うのですが大丈夫なのでしょうか?
つまりは、ケータイサイトにスタイルシートを適応させるには、
XHTML形式にしてタグ内にstyle属性を入れてスタイル指定する。
ということが必須条件ということです。(DoCoMoだけだけどね)

さて、いろいろ回って上記ライブドアさんのディレクターブログよりも詳しいサイトを見つけました。
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
こちらに関してはまたいずれ検証します。
今後は、これを期にプロットファクトリーケータイサイトをプロトタイプとし、
様々な検証をしていこうと思います。

 - デザイン, 携帯電話・スマホ

アドセンス広告メイン

Message

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

  関連記事

最強のストーカーツールがツイッター(Twitter)に登場

1年以上前の記事です。内容が古い可能性があります。あまりこういった使い方はして欲 …

no image
「iOS 4」テザリングはなくてもBluetooth対応キーボードが使えるのでいい

1年以上前の記事です。内容が古い可能性があります。iPhone(アイフォーン)の …

KitKat(キットカット)の上で絢香が歌い出す。スマホを使ったおもしろブランディング01

1年以上前の記事です。内容が古い可能性があります。たまたまKitKat(キットカ …

フォトショップ(Photoshop)でWebデザイン、角丸シェイプを使うときは「ピクセルにスナップ」にチェック!

1年以上前の記事です。内容が古い可能性があります。Webデザイナーとして当然なん …

衝撃!! 「LINE POP」は辞められない

1年以上前の記事です。内容が古い可能性があります。「LINE POP」がなんか知 …

no image
各社出揃った2008年秋冬モデルケータイ

1年以上前の記事です。内容が古い可能性があります。本日、ドコモの2008年冬モデ …

イスラエルで30秒でスマートフォンをフル充電できる技術が開発される

1年以上前の記事です。内容が古い可能性があります。佐村河内に始まりSTAP細胞、 …

no image
携帯サイトには公式サイトと勝手サイトがある

1年以上前の記事です。内容が古い可能性があります。携帯サイトがめちゃめちゃ伸びて …

no image
Googleケータイ(Android)はドコモで決まり?

1年以上前の記事です。内容が古い可能性があります。□NTTドコモ、Android …

no image
モバゲータウンのやり口(ビジネスモデル)

1年以上前の記事です。内容が古い可能性があります。モバゲータウンを始めたのは以前 …

血液型オヤジ