携帯サイト作成することになったのですが...

質問

こんにちは。
携帯サイトを初めて制作することになったのですが、
キャリアごとに、一行あたりの文字数であったり画面サイズがまちまちなので、
どのくらいの画面サイズや文字数を基準にするのがよいのか分かりません。
（調べて、"240pxを基準に～"など見かけましたが、本当にそれでいいのかと、、、）

携帯サイトを(仕事で)制作されたことのある方、ご教示願えませんでしょうか？

また、携帯サイト制作ならではのHTMLの記述であったり、注意事項がありましたら併せて仰ってくださりましたら助かります。

よろしくお願い致します。

回答No.5

noname#100277

行の表示文字数は概ね１２文字が目安。

DocomoではCSSはXHTMLで書かれた拡張子「.xhtml」でしか正常に反映せず、又、内部はa要素のみしか記述出来ません。
他は「直接」記述に成る。
此の辺りは公式で確認を。

画像を含めたファイルサイズは15kb辺りを目処にしたら良いでしょう。

現行機種では360×240が最低ラインかな？

回答No.4

noname#83877

仕事でサイトを作ったことが無いので私個人の感想で良ければですが、240×320の携帯の環境の場合、文字をぎっしり詰めて12×12(文字)くらいが読みやすさのボーダーかなと思いました。

画面サイズは何も指定しないのがベストだと思いますが、画像などはどうしても大きさを固定して作らないといけないので、ファイルサイズが大きくなり過ぎないようであれば幅800pxで出来るだけ作るのが良いと思います。
ファイルサイズや画面の占有率によって800px→640px→480px→240pxとサイズを下げて妥協できるサイズを適宜考えます。
imgタグで記述する場合は、モニターのサイズにフィットするようにwidthやheightは記述しないようにします。

＞携帯サイト制作ならではのHTMLの記述であったり、注意事項・・・
3キャリアを意識する時にはDTD宣言やhtmlの拡張子が問題になってくるみたいです。
phpなどを利用して書き換えてやると良いと思います。

回答No.3

mizunoto_R

デザインの仕方にもよるのですが、大体QVGAを想定して横幅240pxで作るようにしています。
どこまでを対応機種にするかにもよります。キャリア仕様書を読むことをおすすめします。
softbankなどは公開されている情報が少ないですが....

auはスクロールバーで240幅の画像を勝手に縮小表示するので1pxのラインなどはつぶれます。
機種によってスクロールバーのpxが違うので安全ラインは220pxくらいかと...

3キャリア共通で～と考えるとXHTMLの場合、docomoはインラインしか利きません。携帯、キャリアによって固有の書き方が必要になってくる場合があります。
auは微妙な隙間を勝手にあけてきたりするので画像を2枚つなげて1つに見せるなどは難しいです。

文字数に関しても対応機種によります。
12～14くらいで作ることが多いです。

携帯サイト制作の情報はPCに比べて少ないですが、頑張ってください。

回答No.2

ORUKA1951

そもそも、HTMLは、
【引用】＿＿＿＿＿＿＿＿ここから
HTML は、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣ここまで、HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )より引用

　なので、そもそも携帯電話用だからと言って、特段変わったことをする必要がないはず。HTMLを知っている人は、画面サイズでは悩まない。
　悩むのは、１ページあたりのデータ量の制限とか、利用者のパケット通信費なのです。
　携帯電話の場合は、パソコンで表示されているような派手なデザインは、上の２点から害悪とさえなるのですよ。
　ディスプレイの横幅なんて考えても、利用者が文字サイズをデフォルトから変えていたら意味ないでしょう。

　したがって携帯電話で利用される可能性のあるページを作成するときは、
★一ページを表示するためのデータ量を切り詰めること
★狭い画面で、以下に早く目的のところにたどり着けるか
　この２点を最優先課題としてページをお作りなさい。それが一番利用者に優しいページで、結果的に利用されるサイトを作ることにつながります。

　わたしは、携帯電話でアクセスされる可能性のあるページは、携帯電話でアクセスする限りは、本当にシンプルですがパソコンで見ても、決して見劣りしません。それが、
【引用】＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで、HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )より引用。
　これは常に心に留めておくように。

　シンプルに、基本にのっとって文書構造にしたがってきちんとマークアップすればよい。その意味でも、テキストエディタで作成すべきでしょうね。
【参考】→http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF

回答No.1

Seravy

こんなページを見つけました。
http://agency.mobile-stage.net/document/tec03.php

携帯の画面は大体、320*240が主流なのでそれぐらいを目安にすると良いかと。縦に長い物もあるので一概にコレとは言えませんが、、

HTML自体の記述ではないですが、デザインとしてPC以上にリキッドデザインを意識すると良いと思います。幅固定、文字数固定ではなく、いろんな大きさでも柔軟に対応できるデザインが重要です。