ホームページの表示幅はどうやって決めてるんですか?と聞かれる事がある。


ホームページを勉強している人から、最近良く聞かれる質問です。
特にレスポンシブデザインをやっている人に多いですね。
レスポンシブデザインだと、ブレイクポイントの関係で色々と悩んでいる人が多いみたいなので、今日はそのあたりのお話しを。
どちらかと言うと今回はデザイン初心者向けかな?

 

まずは何を基準にするかが問題

レスポンシブデザインだからと言う問題ではなく、まずは横幅いくつにすればイイの?と言う素朴な疑問にぶち当たる人がいます。
ワードプレスなどのCMSテーマを改造する場合などは、テーマの横幅を使うえば良いので、あまり意識する事も無いと思いますが、オリジナルで作ろうと思うと、この問題は、最初にぶち当たる壁です。

デザインを起こすにしても、横幅を決めておかないと、デザインが出来ません。
ですが、これが難しい。

現在のホームページ制作はアクセスキャリアの種類が増えたおかげで、様々なモニタサイズへの対応が必要になっています。(PC・タブレット・スマートフォンなど)

最も小さいスマートフォンで横幅が640px程度。そしてPC用液晶モニタだと40インチ以上と言う巨大なモニタがあり、3800px以上の横幅サイズです。また、最近では液晶TVでのブラウジングが可能な機器もあるので、昔のように画面サイズを基準でホームページを作ることが難しくなっています。

一時期リキッドデザインと言う手法が流行りました。これはレスポンシブデザインが一般化する前に、複数のモニタサイズに対応する為に、画面サイズに対して、横幅を%(パーセント)指定で作って、表示させたモノでした。モニタのサイズが変わっても、ピクセル指定ではないので、画面サイズに合わせた表示が出来る便利な手法です。代表的なサイトに、Amazon、ウィキペディアなどがあります。
ですが、昨今のモニタの大型化で横幅全画面での表示では、見た目が悪くなるようになってしまいました。

ではどうするか。
もう、こうなると表示する最大幅を決めて作るしかありません。
横幅の最大値を決定して、内部のレイアウトはリキッドデザインの様に伸縮させる形に作ります。

そこで横幅の最大値ですが、現在の主流は1000~1200pxぐらいの様です。
これは11インチ程度の小型ノートPCを基準にしている様で、現在の小型ノートPCだと横幅が1280px程度ですから、そのあたりが基準になっているようです。

この辺りは、ユーザーエージェント※1での判断があると思います。ユーザーエージェントでの最小値を考えると小型ノートPCがおそらく最小の数値だと思います。(PC用15インチ液晶だと980pxあたりの可能性もありますが……)
ですからPCアクセスを考えた時に一番小さいノートPCを基準にする事は、理にかなっていると言うわけです。

ユーザーエージェント※
ホームページにアクセスしてきたブラウザ情報に含まれるモノで、ブラウザの種類(Internet
Explorerとか)とPC、iPhone、AndoroidなどのOS情報になります。それらの情報を読み取って、PCからのアクセスであるとか、iPhoneからとかの判別をします。

私が作る場合はホームページの種類にもよりますが、大体1000~1100px幅で制作する事が多いですね。最大1100pxであれば、数年前のノートPCもでかろうじて画面いっぱいで見る事が出来ます。
安全マージンを見るのであれば、1000px程度が良いかと。
また、スタイルシートを上手く使って、1100px以下の小さい画面のノートPCでもホームページを綺麗に見せる事は出来ますが、そのあたりの話は、また後日にします。

最近流行りの1カラムデザインでも、一見すると横方向は全画面表示の様に見えますが、画面センターを中心にして横幅が決まっている場合が多くあります。(1カラムの場合はリキッドデザインに近い作りの場合が多くありますね)

 

ブレイクポイントでの対応は

レスポンシブデザインを使っているのであれば、ブレイクポイントを設定して対応すればよいと思う方もいるかもしれませんが、作業効率を考えるとあまり賢いやり方ではありません。
ブレイクポイントが増えるとそれだけ画面確認の作業が増えますので、出来ればブレイクポイントは少ない方が良いんです。

ブレイクポイントの設定も、ある意味においてホームページ制作の要ではありますが、個人的にはユーザーエージェントを優先して、PC・タブレット・スマートフォンを上手く切り替えられる様に設定出来れば良いと考えます。ですので、ブレイクポイントは2つぐらい(タブレット・スマートフォン)が適当かと思います。

多すぎるブレイクポイントは制作の混乱を招くだけでなく、メンテナンス性も悪くなるので、難しいですね。

この話は、2015年現在の話であって5年後はどうなっているか解りません。
個人的な感覚では、デバイスの小型化よりもモニタの高性能化が進むでしょう。ですが、どんなに高性能な小型画面でもPCサイズの画面をスマートフォンで表示する事は無理でしょうから、今ぐらいの表示幅がベストなのかもしれませんね。

コメント

  1. These are actually fantastic ideas in concerning blogging.
    You have touched some pleasant factors here. Any way
    keep up wrinting.

  2. Good day I am so happy I found your weblog,
    I really found you by mistake, while I was looking on Aol
    for something else, Anyhow I am here now and would just like to
    say thanks a lot for a tremendous post and a all
    round interesting blog (I also love the theme/design), I don’t have time to browse it
    all at the minute but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up
    the awesome b.

  3. Thanks on your marvelous posting! I really enjoyed reading it, you might be a great author.
    I will make certain to bookmark your blog and will come back later
    on. I want to encourage one to continue your great writing, have a nice holiday weekend!

  4. Thanks a lot for sharing this with all of us you really recognise what you are talking approximately!
    Bookmarked. Kindly also discuss with my website =).

    We can have a hyperlink trade agreement among us

  5. What’s up, its nice article about media print,
    we all know media is a great source of facts.

  6. Hi! This is kind of off topic but I need some advice from an established blog.
    Is it very hard to set up your own blog? I’m not very techincal but I can figure things
    out pretty quick. I’m thinking about making my own but I’m not sure where
    to begin. Do you have any ideas or suggestions?

    With thanks

  7. Hey I know this is off topic but I was wondering if you knew of any widgets I could add
    to my blog that automatically tweet my newest twitter
    updates. I’ve been looking for a plug-in like this for quite
    some time and was hoping maybe you would have some
    experience with something like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to
    your new updates.

  8. WOW just what I was looking for. Came here by searching
    for canadian pharmacy online

  9. Write more, thats all I have to say. Literally, it seems
    as though you relied on the video to make your point.
    You clearly know what youre talking about, why waste your intelligence on just posting videos to your blog
    when you could be giving us something informative to
    read?

  10. you’re actually a excellent webmaster. The web
    site loading speed is incredible. It seems that you’re doing any distinctive trick.
    Moreover, The contents are masterpiece. you’ve done a fantastic activity on this subject!

  11. I know this site offers quality dependent
    posts and additional stuff, is there any other site which
    gives such things in quality?

  12. LNZ3Amnb cialis daily

  13. x2IEgusr cialis generico

  14. adn7nC5T cialis

  15. F8WcG5E9 tadalafil

  16. ZXVh5zFq levitra

  17. rHtDvkQo buy cialis

  18. udFgtrbv buy levitra

  19. YPdv8TK8 buy cialis online

  20. j2l7EkB8 buy cialis

  21. ErnehIAt buy cialis

  22. Y1TeuB2U buy levitra

  23. MXiLYYSY sildenafil 100 mg

  24. hqoh85ng cialis tablets

  25. X9yDM2ik cialis without a doctors prescription

  26. Ud3bCBTT cialis coupon

  27. YRKTwAos cialis coupon

  28. bavK5Ngb cialis coupon

  1. この記事へのトラックバックはありません。

PAGE TOP