ポイントは3つあります。 - 田中 紳詞 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

注目のQ&AランキングRSS

対象:WEBデザイン・プログラミング

田中 紳詞 専門家

田中 紳詞
経営コンサルタント/ITコンサルタント

- good

ポイントは3つあります。

2013/10/18 17:03
(
5.0
)

こんにちは。

横幅については、3つばかりポイントがあります。
少し長くなってしまいますが、ご容赦ください。

一点目にご認識頂きたいことは、そもそもWebサイト(いわゆるホームページ)は、様々な環境の方がご覧になるものであるということで、それぞれで見え方が異なります。

具体的には13インチのノートパソコンで見る人、iPadなどのタブレット端末で見る人、17インチのディスプレイで見る人、25インチのディスプレイで見る人など、様々です。

そのため、こういった事情を考慮しないと、25インチの大きな画面で見ている人はキレイに見えますが、利用者が多いディスプレイサイズで見たとき、殆どの人がスクロールしないと画面がすべて見えない・・・なんてことがあります。

二点目に、上記の話は「画面表示」についてですが、印刷の設定はブラウザやプリンタの設定にも依存するということで、印刷時に縮小したり余白を小さくすれば、端が切れるレイアウトでも一ページに収めることが可能な場合もあります。

最後の三点目ですが、そういった設定の変更を行わず、ブラウザから「印刷」を選択すれば綺麗にプリントされる・・・というのが理想かと思われ、ご質問を頂いたのは恐らくこの点を前提とされているかと思います。

利用者の目線でいえば、表示されている画面そのままの状態で印刷されるのが好ましいかとは思いますが、画面の表示とは別に印刷用のCSSで別途レイアウトを設定したり、印刷用ボタンを別途設けて新しいウインドウから印刷するという手が一般的かなと思います。

その場合は、画面表示される横幅と印刷の横幅は関連がありませんので、印刷に限って言えば、あまり気遣わなくてもよいでしょう。

ただ、印刷以外のことを考えると、1200は少し大きめです。
決してダメというわけではありませんが、冒頭で書いた通り、閲覧環境によっては意図しない見栄えとなってしまうことも考えられるため、可能であれば960~980程度に収まるのが無難かなと思います。(メジャーなサイトは、殆どこのサイズです)

ただし、あくまで「印刷したとき、表示されている画面そのままの状態で印刷されるのが好ましい」という場合は、Webサイトのレイアウト自体を小さめに、恐らくA4用紙が基準になるかと思いますので、具体的には640~700くらいが目安でしょうか。
ちょっと小さ目です。

Webサイトの横幅は、対象ユーザや表示したいコンテンツ、印刷を考慮するか否か、利用者が多い画面の解像度のトレンドなどの要素が関係するため、はっきりとした「これが正解!」という答えはありませんが、参考になれば幸いです。

プリント
CSS
ホームページ
印刷

評価・お礼

plussman さん

2013/11/07 21:50

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

回答専門家

田中 紳詞
田中 紳詞
( 東京都 / 経営コンサルタント )
株式会社Exciter 代表取締役/主席コンサルタント
03-6280-3255
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

業務システムからモバイルまで、IT業界の無差別格闘家

専門はSAPなどの業務システムとコンサルティングですが、それに限らず企業にとって必要なITとその活用を考え、幅広い分野の経験を積んできたと自負しております。ITには多くの分野がありますが、一面ではなくトータルで勘案したプロの仕事をお届けします。

(現在のポイント:-pt このQ&Aは、役に立った!

この回答の相談

ホームページの印刷について

スキル・資格 WEBデザイン・プログラミング 2013/10/15 14:55

ホームページを作成する際に横幅が何ピクセル以内であれば印刷時に全画面が印刷されますか?
たまに右端が途中で欠けてしまうホームページを見かけますがこれは横幅が広いために生じる現象なんでしょう… [続きを読む]

plussmanさん (東京都/53歳/男性)

このQ&Aに類似したQ&A

レスポンシブWebデザインの印刷について plussmanさん  2013-09-06 09:38 回答1件
ホームページを作ってほしい spyauctionさん  2013-03-05 22:25 回答2件
リキッドデザインの必要性とwidthの主流について よっきーさん  2012-03-26 18:36 回答1件
HTML5>CSS3>jQueryとやってきたのですが、その後 jqueryさん  2016-04-20 13:12 回答1件