携帯サイト作成にあたっての、基本的な知識について教えて下さい。

質問

携帯サイト作成にあたっての、基本的な知識について教えて下さい。
---------------------------------
○作成内容は、
・地域情報のポータルサイト
・画像(写真と作った画像)と場所を紹介する文章のみで、FlashやCGIや動画などは使いません。
です。
・３キャリア対応

○借りる予定のレンタルサーバー
FC2web

○HTML知識
PCサイトを作る知識はあります。タグも大体わかります。
---------------------------------

携帯サイト作成について色々ググって調べたのですが、イマイチ感覚が掴めません。
まずは無料のレンタルサーバーで試しに作ってみようと思い、FC2webを使うことにしてみました。
FC2webには、「無料携帯サイト作成サービス」がありますが、これだとPCサイトをタグ入力で作るような作り方は出来ないような気がします(ページ内部にCSSを直接入力するような使い方が出来ない?!)。
Ｑ＆Ａを読むと、“自由に作りたいならFC2ホームページを使え”とあります。

そこで質問です(順序がバラバラで申し訳ないですヾ(_ _*))
(1)携帯サイトを作るのに、PC用サイトのページで作る場合、横(表示されるページ幅)のサイズの設定はいくつにしたら良いのか。

(2)FC2ホームページを利用した場合、３キャリアに問題なく対応できるかどうかの確認は出来ないと思うので、３キャリア対応を確認できる無料ソフトがあれば教えて下さい。

(3)携帯サイトの「記述に使う言語」を色々調べてみましたが、htmlとxhtml、どちらを使うのが妥当なのでしょうか。
こちらの説明「http://allabout.co.jp/gm/gc/23999/2/」を見ると、
“「XHTML Mobile Profile 1.0」であれば、3大キャリア共通のページを作成できます。 また、検索エンジンからも「携帯サイト」であると認識されます。”
と書いてありますが、ここに書いてある通りに作れば、３キャリア対応が作りやすいのでしょうか。

(4)使えるタグは勉強中なのですが、外部CSSは使いませんが、「表」を入力するようなタグは使えますか？

とりあえず、今思いつくのはこれだけですが、他に参考になりそうなサイトもあれば教えて頂けると嬉しいです。

宜しくお願い致します。

回答No.2

metametamu · ベストアンサー

３キャリアを一つのhtmlでやるのはかなりハードですね・・・
携帯の場合対応させたい機種が重要になってくるので、その補足はあった方がいいんじゃないでしょうか。

(1)スクロールバー分を引いて220pxもしくは画面の幅の240pxあたりが最低ラインじゃないでしょうか

(2)ソフトはありますが再現性がいまいちなので実機で確認された方がいいです。
iモードHTMLシミュレータIIはそこそこ再現性が高かったような気がします。

(3)docomoのことを考えてtransitional 1.0かmobile profile 1.0がいいんじゃないでしょうか。

(4)使えます。

以下３キャリアの見た目統一の方法です。どうしてもデザインが調整できない時は見てみてください。
情報がちょっと古い可能性があるので参考程度に・・・

・画像のフォーマットは基本はjpegです。次点でgif。
・divとspanとimg以外あまり信用できないです。pとか使うと余白が消せないことが多いです。
・背景やフォントカラーを指定したい時はdivまたはspanに指定する。
・文章間の改行はdivを使って行うと隙間ができにくいです。
　<div>一段目</div>
　<div>二段目</div>
・画像間の改行はbrを使うと隙間ができにくいです。
　<img src="a.jpg" alt="" /><br />
　<img src="a.jpg" alt="" />
・文字と画像間の改行は匿名ブロック要素を利用すると隙間ができにくいです。
　<div>テキスト</div>
　<img src="image.gif" alt="" />
・余白をシビアに調整したい時は1×1pxの画像にheightを指定して調整するといいと思います。
　<img src="spacer.jpg" alt="" height="20" />

お礼

３キャリアの事を同時に考えようとすると、確かに頭がこんがらがってきます(-。－；)
手持ちの携帯がSOFTBANK３G(912SH)なのと、周りにauが多いのと、ドコモを使ったことが無いので、ドコモ対応で調べると、制限がキツそうで、どこまで対応のサイトを作ったら良いのか迷っていました。

-------------------------------------------
“画面の幅の240px”とありますが、これも何処かで調べて疑問だったのですが、これはどの携帯でも一緒ですか？解像度の問題なんでしょうか。。
手持ちのSOFTBANK携帯で画像を見る時、隙間無くめ一杯で表示すると縦800ピクセル横480ピクセルで表示出来ます。
画像の場合は、サイズが違っても縮小拡大で表示されるように出来るみたいですが、文章などのレイアウトも幅480ピクセルで作るとドコモでは崩れてしまいますか？
-------------------------------------------

デザイン調整、とても参考になります！
色々な携帯サイトを見て調べてて疑問に思ってた事でした＾＾

とても詳しくありがとうございました。
あと、上記の疑問、お手数ですがわかる範囲で教えて頂けると嬉しいです。
宜しくお願いいたします。

補足

すみません、お礼の補足です。
幅480pxで作ったらレイアウトが崩れるかどうか、と質問させて頂いたのは、
たまに見るサイトで幅240pxで全体的に作られたであろうサイトを手持ちのSOFTBANK携帯で見ると、両側に余白が出来、肝心のサイト全体が小さく表示されてしまって、サイトが見にくいからです。

参考になるかわかりませんが、
GREEのアプリで「おみせやさん」というのがあり、そこがそういう作り方になっています。
SOFTBANKの携帯で見ると、真ん中に細～く表示され、文字もとても小さくなるので、一々ブラウザ設定で文字を拡大しなくてはいけません；
なるべくなら、見る側のそういう作業の煩わしさを無くしたいのですが、、、

回答No.5

metametamu

すみません、訂正です。
movaまだ使えますね・・・

お礼

了解です＾＾一応開けといてみました。

ありがとうございました＾＾

回答No.4

metametamu

まだ見ていらっしゃいますかね？

多分現在のdocomoの機種は全てFOMAですよ。
MOVAって去年あたりにサービスの提供が終了したはずなので。

回答No.3

metametamu

http://ke-tai.org/moblist/
携帯スペックのデータベースです。
http://blog.ville.jp/2008/06/04/99
iモードブラウザ1.0の情報が多いので参考になるのではないでしょうか

＞肝心のサイト全体が小さく表示されてしまって、サイトが見にくいからです。
サイトの幅が240pxで固定されている場合、少なからずwidthに対応しているブラウザだと同じような挙動になるのではないでしょうか。
逆に480pxで作った場合は普通に解釈すれば240pxの画面で横スクロールが発生する可能性があります。
質問者さんのソフトバンクの挙動を聞いた感じ、少なくともサイト全体への幅指定は１つのhtmlでは難しいのではないかと思います。

本来なら対応機種を絞るのが一番ですが、そうしたくないのであれば最大幅と最小幅を決定して可変のデザインにするのがいいのではないでしょうか。
極力最小幅で画像を作り、サイト全体へのwidthは指定しない方法です。

文章は普通にマークアップすれば自動的に折り返すので問題ないと思います。
画像はdivの中に内包しdivに背景色を付けるなどすれば、見かけ上画像を拡大することなく画面いっぱいに伸ばすことができます。
<div style="background:#ffffff;"><img src="header.jpg" alt="サイト名" /></div>
画面いっぱいに画像を伸ばしたいところだけは苦肉の策として最大幅で作った画像を縮小させて表示させるという方法があります。(あまりオススメはしません)
<img src="header.jpg" alt="サイト名" width="100%" />

携帯サイトは文字数がかなりシビアにデザインに絡んでくるため、そのあたりとの調整も必要だとは思いますが・・・

お礼

ありがとうございます。
昨日、お礼を書いた後、i-mode HTML Simulator IIを使って色々サイトを見てみて、手持ちのSOFTBANK携帯と比較してみて、表示の違う部分をだいぶ理解できてきました。

サイト全体はwidth100%か指定しないかに設定し、画像や本文を240pxに収めているサイトが殆どでした。確かに、画像を480pxにした場合、横スクロールが出るのはイタダケナイですよね；
携帯スペックのデータベースを見ると、ドコモ携帯にもブラウザ幅が480pxのものが2009年以降、一部の携帯で出てきてはいますが、まだまだ少ないようですし。

というか、よく考えたら、画像を多用するので、３G対応に対応機種を絞らないといけないかもしれない（笑）今更ですが。。
ドコモ携帯って2004年以降～の機種は全部「FOMA」なのかな？それなら、あまり気にせず作れそうですね。
今回頂いた情報でかなり勉強になりました。
頑張って作ってみます。ありがとうございました。

回答No.1

noname#140925

3キャリア対応したければ、iモード用に作ればOKです。
iモード用に作れば、残りの2キャリアでも表示できます。
HTML使うかXHTML使うかは好みですが、HTMLの方が簡単でしょう。
その変わり凝ったページは作れませんけど。

[参考]作ろうiモード：iモードブラウザ | サービス・機能 | NTTドコモ
http://www.nttdocomo.co.jp/service/imode/make/content/browser/index.html

とりあえず、iモードブラウザ1.0用のHTML辺りで作ることから始めましょう。

お礼

ドコモの参考サイトありがとうございます。
使ってる携帯がSOFTBANKなのと、ドコモ携帯を使ったことがないので困っていました。
2009年5月以降の機種だとSOFTBANKの３Gに近い性能なのでしょうか。
しかし、それ以前の機種を使ってる人がまだまだ多いのですよね。

iモードブラウザ1.0用のHTML、勉強してみますね。ありがとうございました。