- 締切済み
スマホサイト用の画像を作成する場合のサイズについて
現在、個人で作成したWebサイトがあるのですが、パソコン用のみとなっております。 レスポンシブWebデザインで、スマートフォンにも対応するために、取り組んでいるところです。 パソコンサイトと同じ画像を、スマホのデバイスでも併用する場合はスタイルシートでサイズの縮小を指定すれば良いかと思います。 しかし、デバイスのサイズごとに、画像を切り分けることも必要かと思います。 この場合、スマホ用の画像を作成する場合、下記のdevicePixelRatioを考慮し、表示するサイズの2倍の解像度で画像を作成するという認識で問題ないでしょうか？ iPhone 6 Plusのdevice-pixel-ratioは『3』ですが、ファイルサイズによる読み込み速度の影響をふまえて、2倍の解像度の画像で良いのかと思っております。 ■devicePixelRatioの例 iPhone 3GS： devicePixelRatio（1.0） iPhone 5S： devicePixelRatio（2.0） iPhone 6 Plus： devicePixelRatio（3.0） 初歩的な質問になりますが、ご回答のほど、宜しくお願い致します。 また、関連することや、他のことでのアドバイスなどもありましたら、是非宜しくお願い致します。
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- aokii
- ベストアンサー率23% (5210/22062)
関連するQ&A
- スマホサイト作成について
ワードプレスのレスポンシブではないサイトはいくつか 作成したことがありますがレスポンシブを使わずスマホサイトを 作ろうと思っています。 ワードプレスでレスポンシブを使わないでスマホサイトを作るには どうしたらよいでしょうか？ 現在PCサイトがあるワードプレスの中にスマホサイトのファイルは 置けそうにないのですが実際に置くことはできないでしょうか？ またいくつかスマホのサイトが簡単に作れるというサービスを見ましたが 既存の自社ドメインではないものになってしまうという認識でよろしいでしょうか？ よろしくお願いします。
- ベストアンサー
- インターネットビジネス
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- スマホ写メ画像の解像度を教えて下さい。
自分はガラケーを使っていてスマホ画像の解像度を調べる事が出来ません。 どなたか自分のスマホ（Android / iPhone等）で撮影した画像をパソコンに取り込んで解像度を教えてくれませんか？解像度の調べ方は、 Windowsの場合は、 画像ファイルを右クリック ＞プロパティーの詳細タブにある水平解像度/垂直解像度の事です。 Macの場合は、 プレビューで画像を開いてツールメニューのサイズを調整 ＞ に解像度があります。 宜しくお願いします。
- ベストアンサー
- 画像・動画・音楽編集
- レスポンシブｗebデザインでの画像表示について
私はサイト制作初心者なんですが、なんとかレスポンシブｗebデザインでのサイトを作っています。 そこで、画像の表示方法について悩んでいたので、アドバイスをお願いします。 今現状やっていた画像表示処理は・・・ ＜パターンA＞ １つの大きな画像を％で縮小させ、あくまで１枚だけで全サイズに対応する というものです。 ところが最近、ネットでたくさんのプロの方々のブログを拝見していると、どうやらRetinaディスプレイに対応した画像は必須なんじゃないか？となり、悩んでおります。 もしRetinaディスプレイに対応した画像の場合は、表示サイズの倍サイズで作ったものを縮小して表示させなければいけないため、重くなるのは必定。 となると、さすがにパターンAでは厳しいと思い下記のパターンBを検討しています。 ＜パターンB＞ １つの画像につき ・PCディスプレイ用画像 （・タブレット・高解像度スマホ用画像） ・通常スマホの縦向用画像 の、２つないしは３つのサイズ別で対応する そこで、もしこのパターンBで画像を表示する際は、一体どのような変換方法を使うのが現在では適切なのでしょうか？ 初心者なりに調べてみたりして考えていたのが↓ (1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える (2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する でした。 個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？ どなたかお詳しい方、レスポンシブｗebデザインでの画像表示方法について、アドバイスをください。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 高解像度のスマートフォン対応サイト作成について
いろいろ調べたのですが、どうもしっくり理解できないので、 教えてください。 スマートフォンサイトを作成していますが、解像度が高くなった機種 （たとえばiphone4）だと、これまでiphone3Gなどのスマホで ポートレート表示（320px）で作ってきたものが、 画像が荒れてしまうという現象が起きます。 解像度が上がるということは、実寸（たとえば1インチ×1インチ内）に ピクセルがいっぱい入ってる、というイメージなのですが、それで正しいですか？ ということは、例えば30px×30pxの写真を載せたとき、高解像度だと 小さく表示されますよね？ この、小さく表示されてしまうのが困るので、大きく表示させると 荒れてしまう、ということなのでしょうか？ 小さく表示されてしまうのが困るので、大きく表示させる、というのは どこで設定するものでしょうか？ width=device-widthではだめなのでしょうか？ 高解像度だから、小さい解像度の写真が荒れてしまうのであれば、 高解像度にする意味って、どこにあるのでしょう？ かえって面倒なだけじゃないのでしょうか…？ 変な疑問ですみません！ よろしくお願いいたします。
- ベストアンサー
- CSS
- 作成中のWebサイトをスマホで見ると、突然消えます
Webサイトを作成しており、パソコンではきちんとドメインを入力して確認することはできます。 そこで、私のイーモバイルのスマホでドメインを入力し、確認してみると、3秒くらいで突然消えます。 これは、なぜでしょうか？
- ベストアンサー
- CSS
- Photoshopでの画像サイズについて
お世話になります。Photoshop初心者です。 疑問に思ってのですがPhotoshopで新規ファイル作成します。 使用するサイズが決まっているので画像サイズ８０×６０ｃｍ、解像度３００、RGBカラーで作成。 すると自動的にピクセル寸法（９４４９×７０８７）が決まります。 画像サイズなのですが、BMPでファイル保存したものをAutoCADで表示し大きさを測ってみると 80.0153×60.0327ｃｍとなりました。 小数点以下の数値があるのは、インチに対しての解像度・サイズが関連しているので画像サイズｃｍで端数が出てしまうのでしょうか？？ 試しに画像サイズ８０×６０ｃｍのｂｍｐを２つ縦に並べました。 画像サイズを高さだけ２００％にして上下に同じ画像を並べ画像解像度を調べたら、 高さが１２０.０１ｃｍになっていました。ピクセル寸法は１４１７４pixel。 ピクセル寸法は２００％したので倍になっています。 単位ｃｍにしてみると小数点以下の誤差が出てきます。 Photoshopの画像サイズは小数点以下は入力できないようなのですが・・・ 何か他に良い方法があるのでしょうか？？ お手数ですがご回答よろしくお願いします。
- 締切済み
- グラフィックソフト
- レスポンシブWebデザインでファビコンの切り替え
レスポンシブWebデザインをしているのですが、 パソコンの場合、スマホの場合などでファビコンの画像を 変えることは可能なのでしょうか。
- 締切済み
- CSS
- 表示画面の解像度と画像のサイズ
お世話になります。 画像を表示する、「画面の解像度」と画像のサイズについて 教えてください。 (1)画像サイズが大きい場合 「スマホの画面解像度：縦：960 横：640」の場合 A 画像の大きさ：縦960 横640 B 画像の大きさ：縦1920 横1280 質問：このスマホ画面で見た場合、AとBは「肉眼では」画質の違いはわからない程度でしょうか？ (2)画像サイズが小さい場合 「スマホの画面解像度：縦：960 横：640」の場合 A 画像の大きさ：縦960 横640 B 画像の大きさ：縦480 横320 質問：このスマホ画面で見た場合、Bの方が、画質が荒いという認識でよいでしょうか？ 以上よろしくお願いいたします。
- 締切済み
- 画像・動画・音楽編集
- LINEのスタンプ作成時、元絵のサイズと解像度？
LINEのスタンプを販売できるとのことで、面白そうなのでチャレンジしてみようと思っています。 手描きのイラストを使おうと思っているのですが、元絵はどのくらいの大きさで描くのが良いのか分からず困っています。 LINEのガイドラインには下記のようにあるのですが、ピクセルをcmに変換してその２倍位で描けば荒い感じには見えないでしょうか？ たま～に荒い画像のスタンプを見かけるので心配しています。 フォーマット：PNG サイズ (最大)：W 370×H 320 pixel ※スタンプ画像のサイズは、自動で縮小するために偶数のサイズにしてください。 ※解像度は72dpi以上、カラーモードはRGBを推奨します。 ※画像は1個 1MB以下で作成してください。 https://creator.line.me/ja/ スマホで使う人が多いと思いますが、解像度もどうするべきか恥ずかしながら調べても解決出来ませんでした。 何でもweb上の画像の解像度は７２dpiかと勝手に思っていたのですが、それ以上と表記してあったのでもっと適した数値があるのか知りたいです。 読み込みや加工はPhotoshopで行います。 初歩的な質問と思いますが教えて頂けると嬉しいです。 よろしくお願いします。
- 締切済み
- Photoshop（フォトショップ）
