-
1:ID:7KIFfD · 2017-09-29

#質問 レスポンシブデザインについて質問です。
皆さんはレスポンシブでサイトをデザイン(コーディング)する際に「スマホ」「タブレット」「PC」の3つのブレイクポイントで作っていますか?あと、PC表示の最大幅は何pxで作っていますか?

またbootstrapやfoundationなどのフレームワークは使用してますか?

どんなものかとギャラリーサイトで見てるんですが、ほんと色々で。。。

10 件の回答

2:ID:I/ZtFp · 2017-09-29

ブレイクポイントは案件による。予算次第。事前に打ち合わせ必須。PC表示の最大幅はあんまり設けないけど、必要なデザインの場合は1800とかにしてたかな。
フレームワークは使いません。あんなのやりにくいだけ。

3:ID:c0lwrH · 2017-09-29

スマホ・タブレット・PCという分け方はしないな
横幅で分けてるだけ

4:ID:vxUZ4J · 2017-09-29

レスポンシブでやるときはブレイクポイント3つ用意するよー。
ブレイクポイントは、最近のだとiPhone6, 7, iPadの横幅を目安にしてるよ。
PCの横幅はデザイン次第かな。
横幅いっぱいのデザイン以外は、960~1080くらいでつくることが多いかな。
フレームワークはbootstrapをカスタマイズしたのを使ってるよ。

5:ID:0v2fGr · 2017-09-29

Foundation使ってるから、大体Foundationデフォルトとの、640,1024,1440かな。
要望があれば変えるし、臨時のブレイクポイントも随時切るよ。

6:ID: · 2017-09-30

Re:2
案件・予算次第ですか、ありがとうございます。
まさに予算が少ないからフレームワーク使ってタブレット表示なしにしようか悩んでいたので助かりますた。

7:ID: · 2017-09-30

Re:3
確かに最近はデバイスでも色々すぎるので、スマホ・タブレット・PCという分け方もどうかという感じですね。
ちなみによく使うブレイクポイントはございますか?

8:ID: · 2017-09-30

Re:4
ありがとうございます。私も今はbootstrapのグリッドのみシステムのみ使用しているので、なんだか安心しました!フリーランスだと、クライアント様のことを考えれば考えるほど不安になってしまったりするので。。。

9:ID: · 2017-09-30

Re:5
ありがとうございます。
bootstrapと微妙にブレイクポイントが違うので、それもまた悩みの元でした。
Foundation使おうか悩んでいるので、使っている方からのご意見嬉しいです。

10:ID:ld8uXq · 削除
11:ID:ld8uXq · 2017-09-30

アドバイスだけど、スマホを優先すべきか、PCを優先すべきかはよく考えておいたほうがよい。

そもそもモバイル最小の横幅320pxと、フルhdの1920pxだと横幅だけでも6倍の差がある。

フルーイッドだと両方を成立させるデザインは相当難しい。

どっちを優先するかで決まると思う。

最近スマホで見てる人、gaの統計見ても大体7割弱だから、サイトの内容用にもよるが、スマホで閲覧されることを最優先に作ってるし、デザインもそのようにしてる。

スマホ縦→320~
タブレット縦→640~
タブレット横&pc→960~

で考えている。昔の960gridの考え方は今でも十分使えると思うよ。横幅も16の倍数かつ、ブレイクポイントが320の倍数だから計算もしやすい

960以上のサイズが必要となれば、随時足せばいい。

ただ、メディアクエリはbootstrap4などは5つもあるが、そこまで手が回らんだろうし、

3つぐらいの範囲で納めておいたほうが混乱しないかもね。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る