質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

レスポンシブサイトでのブレイクポイントの決め方、cssの記述順について

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 667

dea

score 18

 レスポンシブサイトでのブレイクポイントの決め方、cssの記述順について

現在、自社の既存のECサイトのリニューアルを行なっています。
ブランディング会社から、デザインデータは750pxで納品しますという話があり、
サイトへのアクセスのシェアから見てもiPhone6〜Xの横375pxが一番多かったので、
その方向で行こうと考えています。
ただ、iPhoneSEのアクセスもそれなりにあるので、SEで崩れるのは避けたいです。

モバイルファーストでレスポンシブのcssを一から組むのが初めてのため、
ブレイクポイントの設定をどうしたらいいのか迷っています。

ブランディング会社はいくつもの大手の企業を手掛けているのですが、webの案件は初めてらしく、
この辺りの質問には回答をいただけませんでした。

以下のような案を考えてみたのですが、ベストな方法をご教授いただけると幸いです。

//A案
デザインの基準が750pxであるので、cssも375pxを基準にした記述を一番上に書く。
SE用の記述は別途ブレイクポイントを設定して下部に記述する。

//B案
SEを基準にした記述を一番上から書いていき、375pxのブレイクポイントを設定する。
(この場合、デザインデータも640pxで納品してもらうかたちにするべきでしょうか?)

どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2018/11/05 14:41

    他のデバイス(アンドロイド端末やPC)は考慮しないのでしょうか?

    キャンセル

  • dea

    2018/11/05 14:56

    ありがとうございます。主要なアンドロイドとタブレット、PCもカバーしたいと考えております。

    キャンセル

回答 2

+3

私見なので参考程度に留めておいてもらいたいのですが、
デザイン会社のデザインって実際を考慮していないケースが多いです。
レスポンシブにする以上は画面幅によって見え方が違いますし、画像のサイズ・文字のサイズ・ブロックの幅 など状況によってデザインそのままの状態を維持できることはまずないでしょう。

よほど1pxのズレも許されないような奇抜なデザインでない限りは「レイアウト参考」で作りこんで良いのではないでしょうか。

ブレイクポイントの設定については既存のCSSフレームワークがどの位置に置いているかというのを参考にすると良いかもしれません。
※むしろ既存のフレームワークにレスポンシブ部分を任せてデザインを入れていくやり方でも良いかも

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/05 14:53

    回答ありがとうございます。
    確かに個人的にはレイアウト参考でも良いと思いました。

    今は社内のデザイナーからpcサイズでデザインしたデータをもらい、
    私の方で良い感じ(または無理やり)にスマホにも適用させるみたいな流れでして、
    現状もデザインデータはレイアウト参考のようになっています。

    ただ、今回は全面リニューアルということと、外部の大きなデザイン会社も入っていることもあって
    「基盤をしっかりしておかないと」という思いもあって凄く悩んでいます。

    フレームワークについても考えてみます!

    キャンセル

checkベストアンサー

+1

スマホ用のデザインデータはいつも750pxでもらいますが、
320px幅でもおかしくならないように考慮して組んでいる者です。

個人的にはA案に近いかたちで作ってます。
ただし、完全にSE向けにスタイル指定を分けてしまうわけではありません。
幅等の指定は原則として相対単位で指定して、幅が狭くなってもそれなりに
ちゃんと表示されるようにしておくのが前提で、どうしても収まりきらない部分だけを
個別に@mediaで差分調整するようにしてます。

375px幅デザインをベースにしながらでも、組む時に

・多段組の部分はカラム落ちしないように注意
・どうしてもカラムが狭くなりすぎる場合は実装判断でカラム数を減らす
・デバイスフォントは原則折返し表示を許容(折り返した場合のデザインに配慮)
・どうしても自動折り返しさせたくないデバイスフォントは小さい画面だけvw単位でフォントサイズを指定

といった点に注意しながら随時幅を狭くして表示確認しながら作れば、
320px対応も同時にやることは不可能ではないです。
まぁ面倒くさいですけどね。

ぶっちゃけ320pxにちゃんと対応するならデザイン段階からそのつもりでデザインしてもらうのが
本当は一番いいのですが、無理な場合は上記のような形でコーダー判断で対処した上で、
後でデザイナーにどうしても気になるところだけ修正指示をもらうようにしてます。

参考までに…。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/06 15:57

    回答ありがとうございます。
    実際に制作されている方からの話を聞けて、とても参考になりました!
    レスポンシブであることをデザインの時点で考慮してもらって入れば、相対単位で組むことで
    だいたいはいけそうですね!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る