こんにちは。
携帯サイトを初めて制作することになったのですが、
キャリアごとに、一行あたりの文字数であったり画面サイズがまちまちなので、
どのくらいの画面サイズや文字数を基準にするのがよいのか分かりません。
(調べて、"240pxを基準に~"など見かけましたが、本当にそれでいいのかと、、、)
携帯サイトを(仕事で)制作されたことのある方、ご教示願えませんでしょうか?
また、携帯サイト制作ならではのHTMLの記述であったり、注意事項がありましたら併せて仰ってくださりましたら助かります。
よろしくお願い致します。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
行の表示文字数は概ね12文字が目安。
DocomoではCSSはXHTMLで書かれた拡張子「.xhtml」でしか正常に反映せず、又、内部はa要素のみしか記述出来ません。
他は「直接」記述に成る。
此の辺りは公式で確認を。
画像を含めたファイルサイズは15kb辺りを目処にしたら良いでしょう。
現行機種では360×240が最低ラインかな?
No.4
- 回答日時:
仕事でサイトを作ったことが無いので私個人の感想で良ければですが、240×320の携帯の環境の場合、文字をぎっしり詰めて12×12(文字)くらいが読みやすさのボーダーかなと思いました。
画面サイズは何も指定しないのがベストだと思いますが、画像などはどうしても大きさを固定して作らないといけないので、ファイルサイズが大きくなり過ぎないようであれば幅800pxで出来るだけ作るのが良いと思います。
ファイルサイズや画面の占有率によって800px→640px→480px→240pxとサイズを下げて妥協できるサイズを適宜考えます。
imgタグで記述する場合は、モニターのサイズにフィットするようにwidthやheightは記述しないようにします。
>携帯サイト制作ならではのHTMLの記述であったり、注意事項・・・
3キャリアを意識する時にはDTD宣言やhtmlの拡張子が問題になってくるみたいです。
phpなどを利用して書き換えてやると良いと思います。
No.3
- 回答日時:
デザインの仕方にもよるのですが、大体QVGAを想定して横幅240pxで作るようにしています。
どこまでを対応機種にするかにもよります。キャリア仕様書を読むことをおすすめします。
softbankなどは公開されている情報が少ないですが....
auはスクロールバーで240幅の画像を勝手に縮小表示するので1pxのラインなどはつぶれます。
機種によってスクロールバーのpxが違うので安全ラインは220pxくらいかと...
3キャリア共通で~と考えるとXHTMLの場合、docomoはインラインしか利きません。携帯、キャリアによって固有の書き方が必要になってくる場合があります。
auは微妙な隙間を勝手にあけてきたりするので画像を2枚つなげて1つに見せるなどは難しいです。
文字数に関しても対応機種によります。
12~14くらいで作ることが多いです。
携帯サイト制作の情報はPCに比べて少ないですが、頑張ってください。
No.2
- 回答日時:
そもそも、HTMLは、
【引用】________ここから
HTML は、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ここまで、HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より引用
なので、そもそも携帯電話用だからと言って、特段変わったことをする必要がないはず。HTMLを知っている人は、画面サイズでは悩まない。
悩むのは、1ページあたりのデータ量の制限とか、利用者のパケット通信費なのです。
携帯電話の場合は、パソコンで表示されているような派手なデザインは、上の2点から害悪とさえなるのですよ。
ディスプレイの横幅なんて考えても、利用者が文字サイズをデフォルトから変えていたら意味ないでしょう。
したがって携帯電話で利用される可能性のあるページを作成するときは、
★一ページを表示するためのデータ量を切り詰めること
★狭い画面で、以下に早く目的のところにたどり着けるか
この2点を最優先課題としてページをお作りなさい。それが一番利用者に優しいページで、結果的に利用されるサイトを作ることにつながります。
わたしは、携帯電話でアクセスされる可能性のあるページは、携帯電話でアクセスする限りは、本当にシンプルですがパソコンで見ても、決して見劣りしません。それが、
【引用】_____ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで、HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より引用。
これは常に心に留めておくように。
シンプルに、基本にのっとって文書構造にしたがってきちんとマークアップすればよい。その意味でも、テキストエディタで作成すべきでしょうね。
【参考】→http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% …
No.1
- 回答日時:
こんなページを見つけました。
http://agency.mobile-stage.net/document/tec03.php
携帯の画面は大体、320*240が主流なのでそれぐらいを目安にすると良いかと。縦に長い物もあるので一概にコレとは言えませんが、、
HTML自体の記述ではないですが、デザインとしてPC以上にリキッドデザインを意識すると良いと思います。幅固定、文字数固定ではなく、いろんな大きさでも柔軟に対応できるデザインが重要です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- docomo(ドコモ) dアカウントの携帯電話番号が登録できない。ワンタイムコードがSMSに届かない。 2 2023/07/09 23:07
- その他(パソコン・スマホ・電化製品) TV購入したいがどれを買っていいか迷っています。 YouTubeを大きい画面でみたいのですが自室のテ 5 2023/01/03 01:32
- docomo(ドコモ) 携帯 arrows we の操作 4 2023/03/29 18:53
- Yahoo!メール Yahooアカウントにログインできなくなって困っています。 2 2023/05/16 02:28
- iPhone(アイフォーン) iphoneでのメールアカウント追加方法 1 2022/03/27 10:36
- その他(恋愛相談) 親に隠れて彼氏がほしい。 3 2023/02/26 10:57
- その他(悩み相談・人生相談) 会社の同僚に携帯を見られたかもしれません。 見られたくない内容でした。 ただ、その時は一瞬で、 私は 1 2022/12/21 17:31
- クレジットカード 携帯料金の銀行引き落としについて。 携帯電話の料金が毎月16日に引き落としなのですが、10月に通帳を 4 2022/11/27 18:45
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- デザイン 至急!今パソコンでB2サイズでポスター製作をしてる最中なのですが、そこで青空の写真を使いたいと思って 1 2022/08/29 01:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
趣味でhtmlを勉強するのに適し...
-
この容量はテキストサイトとし...
-
ブラウザ切り替え
-
スマホ用のhtmlの覚え方
-
カラム落ちの何が悪いのか
-
パソコンと携帯で文字のサイズ...
-
レスポンシブデザインとは? ...
-
エラーが出ます
-
ホームページを作っているので...
-
リンクの下線は消すのが普通?
-
ホームページでファイルをダウ...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
HTMLからフォルダを開きたい
-
form action="#"
-
iPadの標準ブラウザでローカルH...
-
<!DOCTYPE html>あってますか?↑
-
java_run.batがダウンロードで...
-
Excelで、社外秘(閲覧のみ)と...
-
セイヨウタンポポとカントウタ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ、iPadやiPhoneで...
-
ホームページを作っているので...
-
リンクの下線は消すのが普通?
-
カラム落ちの何が悪いのか
-
ホームページ制作、SPサイトの...
-
HPビルダーのフレームページ...
-
平均的なウィンドウサイズとは?
-
ソリッドレイアウトとリキッド...
-
レスポンシブデザインとは? ...
-
ホームページの携帯サイトの作...
-
デザインとコーディングは同一...
-
Windowsホームページ作成MACで...
-
ブラウザ切り替え
-
レスポンシブ 横1080px高解像度...
-
画面は固定と可変のどちらがい...
-
エラーが出ます
-
スマホ横幅が720px だけ 横が...
-
携帯電話(ガラケー)でのデザ...
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
おすすめ情報