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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2868閲覧

SP専用サイトのbodyのmax-widthはいくつにしますか?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/16 03:12

クライアントさんの予算の都合で、SP専用サイトを作っているのですが、PCでも最低限見れるようにしたいそうです。

その場合bodyのmax-widthはいくつにしますか?
レスポンシブサイトだと1920pxと聞いてはいますが。

また、おそらく今だとアイフォン6プラスがSPの最大サイズで、
論理的には2208pxのようですが、物理的には確か740pxくらいだったと思います。

この場合画像は 2208pxとして作成することはわかっているのですが、
それ以外の要素、動画のwidthも2208pxとして作る必要があるのでしょうか?

動画は画像と同じだが、その他の見出し、などは740として作ればよいのですかね?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

PC用を作らず、レスポンシブにもせず、メディアクエリも使わず、スマホ専用を作った上でPCでも見られるように・・ですか。
結構レアなケースなように感じます。

http://webseeya.com/2015/09/04/smartphone-display-share/

最高では確かに1920pxですが、それはフルHDですし、画像やデータをそれに合わせて作ったのでは、もはやスマホ用のデータ量ではないです。
私なら1024ですかね・・

投稿2016/11/16 08:04

takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/11/16 09:00

お返事ありがとうございます。 クライアントさんの予算があまりなく、ですがSPサイトがどうしてもほしいということで、 非常にイレギュラーですがそのようになっています。 http://qiita.com/tomohisaota/items/f8857d01f328e34fb551 を見てみました。 ポイントが物理的なサイズ SPの画面のサイズ、起動しなくても人間の目でも大きさがわかる。行しくされていない、見たまんまのサイズ 画像はこのサイズにあわすとボケる ピクセルが論理的なサイズ 起動しなてブラウザで見ないとわからないサイズ。ぎゅーと凝縮したように見える。 画像はこのサイズにあわさないとボケる デバイス? ピクセルとどう違うのでしょうか?
takepieee

2016/11/16 09:08 編集

ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成する。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要がある デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しい。 書いてましたね。 今回はポイントだけ確認すればよろしいかと思います。 ブラウザの出力はポイントだったかと。
退会済みユーザー

退会済みユーザー

2016/11/16 09:08

iPhone 6s Plus iPhone 7 Plus 414x736 3 1242x2208 0.87 1080x1920 1080x1920 添付のサイトに上記のようにあったのですが、画像を完璧にきれいにするためには、サイトのwidth100%が2208pxとして画像のサイズを決めるということまではわかっているのですが、 その他の見出しやセクションやフッターGnaviなどもそのような想定で製作すべきなのでしょうか? ユーチューブやvideoタグの動画はおそらく2208pxとして大き目の動画にするつまり画像と同じということでしょうか? ただ重すぎるので現実はそれ以下にするせいぜいサイトのwidth100%が1024px想定のサイズにするということでよいでしょうか?
takepieee

2016/11/16 09:16

「PCでも見れるように」というのはお客様のご要望なのでしょうから、 - 常にwidth:100%で表示。またそれに耐えるデザインをする - 画像が重くなりますからどこかに線を引きましょう、とお客様を説得する の2択ですよね。 常に100%が本来筋ですし、画像が多少ぼやけても「そういうものだ」と思って頂ければベストですが、業界によっては「絶対画像は最適出力で」という方もいらっしゃいますので、そこはお客様に選んで頂くしかありませんよね。
退会済みユーザー

退会済みユーザー

2016/11/17 01:00

すいません直後に下記のようにありますね。 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成する。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要がある デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しい。 このサイトの解説がわかりやすいです。 http://www.paintcodeapp.com/news/iphone-6-screens-demystified 他のサイトに下記のような記載があったのですが、つまり IPHONE6プラス cssピクセル=760pxくらい=ポイント デバイスピクセル=760pxくらい×3=ピクセル デバイス??? ・また、下記のように考えたのですが、ポイントが間違えてますかね? ポイントが物理的なサイズ SPの画面のサイズ、起動しなくても人間の目でも大きさがわかる。見たまんまのサイズ 画像はこのサイズにあわすとボケる。 レティナでもそうでなくても変わらないサイズ ピクセルが論理的なサイズ 起動しなてブラウザで見ないとわからないサイズ。ぎゅーと凝縮したように見える。 画像はこのサイズにあわさないとボケる。 レティナだと、2から4倍に変わるサイズ また、デバイスが端末に搭載された液晶の物理的なピクセル数とあるのが気になります。 起動しなくても人間の目でも大きさがわかる、定規で測れる、液晶画面の物理的サイズはポイントではなくこちらのことでしょうか? ただそれだとiphone6プラスは1920にならないですよね。 矛盾していませんか?
takepieee

2016/11/17 03:31

私の認識違いだったらすみません。 フォントだと分かりやすいと思うのですが、 解像度1920と640でブラウザを表示。 CSSで「20px」「20pt」がそれぞれ指定してあったとして、 ピクセルはその粒の数に依存。 ポイントは解像度に依存。 解像度が変わろうが、ポイントで指定した文字は同じ大きさ。 解像度が変わると粒の数に依存するピクセルは文字が大きくなったり小さくなったりする。 じゃなかったですかね・・曖昧な記憶ですみません。 スマホは殆どの場合デバイスとしての解像度とブラウザ表示時の解像度が違っていたと思います。 ソニーとか同じだった気もします。 そのあたりの違いじゃないでしょうか・・ 何かもう質問と内容が変わってきているので、もし疑問が残ったら新たにスレッドを建ててはいかがでしょうか。 私なんかより詳しい方が教えてくれると思います。 良い質問だと思いますし。
退会済みユーザー

退会済みユーザー

2016/11/17 03:55 編集

4K (スマートフォン初、液晶)2015年9月にソニーモバイルコミュニケーションズが発表した「Xperia Z5 Premium」の5.5型 (※ ピクセルレートは 4だったはずだけどね)
退会済みユーザー

退会済みユーザー

2016/11/17 07:41

XPERIA Z5 Premium:5.5インチ4Kディスプレイ(解像度3,840×2,160ドット) こんなにいるんですかね? 画像や動画を3800pxとして制作しないといけないのですね。 カンプを作るとき、その他の見出しなども3800にしないといけないのですかね?
takepieee

2016/11/17 07:45

PCでも4Kディスプレイありますよ。 4Kディスプレイ用にホームページ作りますか? 私は作った事ないです。メディアクエリでmin-width:1920を設定したことが1回あるだけですね・・ それより実際の大きさと操作感、正しく写真を見せる事が出来る構造の方が大事だと思います。
退会済みユーザー

退会済みユーザー

2016/11/17 08:01

ありがとうございます。 画像や動画だけを3800pxとして制作して、 デザインカンプワイヤーフレームは、320pxのみかせいぜい740pxを足す程度でSP専用サイトはよいのですね。 レスポンシブサイトなら1920pxまでのカンプをつくり想定すべきなのですかね? それとも1334pxまででいいのですかね?
takepieee

2016/11/17 08:09

私が1920を設定したサイトは、とある写真が重要なサイトだったからです。 ピクセルで語るなら1200前後、または100%で充分とは思います。 あくまで一般論ですが。サイトによって事情がありますからなんとも言えませんが。 あと画像や動画を3800で作るのは・・ 普通に考えて重すぎです。 普通のiPhoneでそのサイト拝見して転送量が7Gに到達したとかいったら、私なら運営者にクレーム出しますよ。どんな設計かと。 仮にそのサイズのものを準備するとしても、ユーザ様が自分の意思でクリックしてからじゃないと、個人的には駄目だと思います。
退会済みユーザー

退会済みユーザー

2016/11/18 02:03

>>> あと画像や動画を3800で作るのは・・ 普通に考えて重すぎです。 普通のiPhoneでそのサイト拝見して転送量が7Gに到達したとかいったら、私なら運営者にクレーム出しますよ。どんな設計かと。 仮にそのサイズのものを準備するとしても、ユーザ様が自分の意思でクリックしてからじゃないと、個人的には駄目だと思います。 実務ではおっしゃる通りですね。画像と動画は、完璧にきれいにするためには、 理論上3800pxを想定して作らないといけないが、 現実1920以下、通常は1024px以下を想定した画像のサイズにすべきということですね。 デザインカンプやワイヤーフレームはどうでしょうか? こちらは、3800pxとして作りますか? それともこちらはれてぃなを考えないデバイスのサイズで作ればよいと思いますか? iphone6プラスなら、740pxとして作ればいいのですかね? 私は小さいのもが収まれば大きいものは何とかなるので、sp専用サイトなら320で作ってあとはブラウザ上でやってしまうことが正直多いです。 あとはそのまま拡大をします。 レスポンシブサイトの場合は1334を追加します。
takepieee

2016/11/18 02:16

ワイヤーやはページ構成が分かればいいですが、デザインは実際のサイズで作ってもらうべきでしょう。じゃないとコーディングが面倒です。 どうしても実際のサイズ不安があるのであれば、サンプルページを1ページ作ってから高解像度機種で実際に判断してもらうしかないでしょう。 私は最初FFで開発するのですが、開発ツールのレスポンシブデザインモードで320*568、360*592、375*667、414*736、768*1024あたりで確認しています。 この辺は多様すぎて正解がない気がしますが。
退会済みユーザー

退会済みユーザー

2016/11/18 03:04

最後に下記が主題だったので下記だけ再確認させてください。 実務ではおっしゃる通りですね。画像と動画は、完璧にきれいにするためには、 理論上3800pxを想定して作らないといけないが、 現実1920以下、通常は1024px以下を想定した画像のサイズにすべきということですね。 デザインカンプやワイヤーフレームはどうでしょうか? こちらは、3800pxとして作りますか? それともこちらはれてぃなを考えないデバイスのサイズで作ればよいと思いますか? iphone6プラスなら、740pxとして作ればいいのですかね? カンプ、レイヤー自体は、れてぃな対応を考えずに作り、その後書き出しの際に、画像と動画だけ2倍、3倍にするという形でよろしいでしょうか。
退会済みユーザー

退会済みユーザー

2016/11/18 03:07

再質問にしたほうが良い問いことでしたので、再質問にしますね。
takepieee

2016/11/18 03:14

上で答えたつもりだったのですが、解りづらく申し訳ありません。 ワイヤーはイメージが掴めればいいと思っていますので、適当です。私はiphone6のモックを使って作ります。 デザインは私の場合センスが無いのでどなたかに作っていただきますが、実際の制作サイズで発注します。 最初に触れましたが「スマホだけ」の制作経験はアプリでない限り無いので、iphone6のサイズで発注し、コーディング段階で各キャリアのチェックをしています。縦横もありますし。 それを基準に考えれば横414の場合と736で私はやります。 でも横320でも1024でも見れるようにチェックします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問