Q&A
他のデバイス（アンドロイド端末やPC）は考慮しないのでしょうか？
レスポンシブサイトでのブレイクポイントの決め方、cssの記述順について
現在、自社の既存のECサイトのリニューアルを行なっています。
ブランディング会社から、デザインデータは750pxで納品しますという話があり、
サイトへのアクセスのシェアから見てもiPhone6〜Xの横375pxが一番多かったので、
その方向で行こうと考えています。
ただ、iPhoneSEのアクセスもそれなりにあるので、SEで崩れるのは避けたいです。
モバイルファーストでレスポンシブのcssを一から組むのが初めてのため、
ブレイクポイントの設定をどうしたらいいのか迷っています。
ブランディング会社はいくつもの大手の企業を手掛けているのですが、webの案件は初めてらしく、
この辺りの質問には回答をいただけませんでした。
以下のような案を考えてみたのですが、ベストな方法をご教授いただけると幸いです。
//A案 デザインの基準が750pxであるので、cssも375pxを基準にした記述を一番上に書く。 SE用の記述は別途ブレイクポイントを設定して下部に記述する。 //B案 SEを基準にした記述を一番上から書いていき、375pxのブレイクポイントを設定する。 （この場合、デザインデータも640pxで納品してもらうかたちにするべきでしょうか？）
どうぞよろしくお願いいたします。
回答2件
0
私見なので参考程度に留めておいてもらいたいのですが、
デザイン会社のデザインって実際を考慮していないケースが多いです。
レスポンシブにする以上は画面幅によって見え方が違いますし、画像のサイズ・文字のサイズ・ブロックの幅 など状況によってデザインそのままの状態を維持できることはまずないでしょう。
よほど1pxのズレも許されないような奇抜なデザインでない限りは「レイアウト参考」で作りこんで良いのではないでしょうか。
ブレイクポイントの設定については既存のCSSフレームワークがどの位置に置いているかというのを参考にすると良いかもしれません。
※むしろ既存のフレームワークにレスポンシブ部分を任せてデザインを入れていくやり方でも良いかも
投稿2018/11/05 05:22
総合スコア80850
回答ありがとうございます。
確かに個人的にはレイアウト参考でも良いと思いました。
今は社内のデザイナーからpcサイズでデザインしたデータをもらい、
私の方で良い感じ（または無理やり）にスマホにも適用させるみたいな流れでして、
現状もデザインデータはレイアウト参考のようになっています。
ただ、今回は全面リニューアルということと、外部の大きなデザイン会社も入っていることもあって
「基盤をしっかりしておかないと」という思いもあって凄く悩んでいます。
フレームワークについても考えてみます！
0
ベストアンサー
スマホ用のデザインデータはいつも750pxでもらいますが、
320px幅でもおかしくならないように考慮して組んでいる者です。
個人的にはA案に近いかたちで作ってます。
ただし、完全にSE向けにスタイル指定を分けてしまうわけではありません。
幅等の指定は原則として相対単位で指定して、幅が狭くなってもそれなりに
ちゃんと表示されるようにしておくのが前提で、どうしても収まりきらない部分だけを
個別に@mediaで差分調整するようにしてます。
375px幅デザインをベースにしながらでも、組む時に
・多段組の部分はカラム落ちしないように注意
・どうしてもカラムが狭くなりすぎる場合は実装判断でカラム数を減らす
・デバイスフォントは原則折返し表示を許容（折り返した場合のデザインに配慮）
・どうしても自動折り返しさせたくないデバイスフォントは小さい画面だけvw単位でフォントサイズを指定
といった点に注意しながら随時幅を狭くして表示確認しながら作れば、
320px対応も同時にやることは不可能ではないです。
まぁ面倒くさいですけどね。
ぶっちゃけ320pxにちゃんと対応するならデザイン段階からそのつもりでデザインしてもらうのが
本当は一番いいのですが、無理な場合は上記のような形でコーダー判断で対処した上で、
後でデザイナーにどうしても気になるところだけ修正指示をもらうようにしてます。
参考までに…。
投稿2018/11/05 16:18
総合スコア3763
回答ありがとうございます。
実際に制作されている方からの話を聞けて、とても参考になりました！
レスポンシブであることをデザインの時点で考慮してもらって入れば、相対単位で組むことで
だいたいはいけそうですね！
あなたの回答
tips
プレビュー
