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

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

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

Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

Q&A

解決済

3回答

2974閲覧

レスポンシブ等でいきなりCSSでデザインを作る場合、 画像を適切なサイズに設定する方法

aki_

総合スコア18

Photoshop

Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

0グッド

2クリップ

投稿2018/02/17 00:26

初歩的な質問ですみません。
例えばレスポンシブデザインなどで、
カンプなしで写真の画像の書き出しを行わず
いきなりCSSでデザインを作る場合、
画像を適切なサイズに設定する方法を
ご教示いただければと存じます。

今までPhotoshop等で
カンプを作るというのが当たり前になっていたので、
基準になるサイズに合わせて書き出せばよかったのですが、
レスポンシブの場合、基準となるサイズがわからなくなってしまいました。

普通にカンプを作るのと同様、ブラウザのサイズ(例:960px、768px、375px等)に
合わせれば問題御座いませんでしょうか。
そもそも手順としては
「photoshopで写真・イラストなどの画像を開く→サイズ変更・トリミング→加工→完成」
でよろしいのでしょうか。

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

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

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

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

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

guest

回答3

0

デバイスにあわせた画像の出しわけができます。

【HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King】
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

【srcset属性について - Qiita】
https://qiita.com/C058/items/643a9ff2d23dfe3a0b37

【なんでもかんでも<picture>要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点 | Rriver】
https://parashuto.com/rriver/responsive-web/picture-srcset-use-case

【srcset と sizes】
https://terkel.github.io/srcset-sizes/

投稿2018/02/17 04:51

kei344

総合スコア69366

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

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

aki_

2018/02/17 10:16

ありがとうございます! 出し分けについては、私も考えているところでした。解像度によって、出し分けしたほうが良さそうですね。
guest

0

Photoshopには最近、同じファイルから解像度の違うファイルを一度に書き出す機能が実装されました
「ファイル>書き出し>書き出し形式」から確認してみて下さい
縦横比やレイアウト・トリミングが変わらないならこっちを使った方が効率が良いでしょう

投稿2018/02/17 04:49

KazuhiroHatano

総合スコア7802

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

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

aki_

2018/02/17 10:14

ありがとうございます! いい機能ですね。私もCCほしいですね...
guest

0

ベストアンサー

表示の問題だけ考えるなら、解像度の上で許されるギリギリの小さい画像を作ればいいと思います。表示サイズはファイルの実サイズではなくCSS等の設定で決めるもので、photoshopでの処理とは別に考えるべきことです。

追記:
最近はCSSの性能が上がって、いちいちphotoshopで作り直さなくても表示をずいぶんいろいろと変更できます。私も最近知ったのですが、グラデーションとかCSSだけで実現できるんですよね。
表示サイズに関していえば、たとえば、
https://allabout.co.jp/gm/gc/400630/
に書いてある

css

1img { width: 100vw; }

という設定を使うと、PCの大画面だろうがスマホの縦置きだろうが横置きだろうが、そして用意した画像の幅が10ピクセルだろうが10000ピクセルだろうが、ブラウザの横幅ぴったりのサイズの画像が表示されることになります。このようにファイルのサイズと表示サイズは別物なので、後者が重要なのにphotoshopでの出力設定に悩むのは意味がないこともあります。この辺はよく区別して検討したほうがいいでしょう。

投稿2018/02/17 03:22

編集2018/02/17 03:50
KojiDoi

総合スコア13669

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

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

aki_

2018/02/17 04:10

ありがとうございます。 確かに、CSS側でサイズは決めていますよね。 ただ、PC、スマホ、タブレットだと画面の解像度が違うため、 画像を3段階くらい用意はする必要はあるんじゃないかと考えていたのです。 横幅100vwの画像を作成する場合、 PC=960px Retina対応のスマホ=750px(※375pxの2倍) retina対応タブレット=1536px(※768pxの2倍) 位が基準…と考えていましたのですが、 解像度の上で許されるギリギリの小さい画像というのが ちょっとよくわからないでいます。 画面によっては荒すぎて問題があるということは 問題ありませんでしょうか。 それとも現場では、画像の荒さはそこまで気にしないものですか。
KojiDoi

2018/02/17 08:45

>それとも現場では、画像の荒さはそこまで気にしないものですか。 それは現場次第ですよ。たとえば写真アルバムサイトのようなところでギザギザみえまくりの画像しかないとなれば問題でしょうが、文字主体のサイトでの賑やかし目的のワンポイントイラストとかなら多少荒くても誰も気にしないでしょう。むしろどうでもいい画像が大きすぎるがゆえにアクセスに時間がかかることのデメリットが勝るということになります。その辺はマニュアルに単純に従うのではなく都度都度頭を使うべきところでしょう。
aki_

2018/02/17 10:13

コメントありがとうございます。 そのへんサイトによって、柔軟に考えなければならないところですね。今作っているものが画像重視のサイトだったので、やはり気を使わなければならないところではありますが、そのへんももう少し柔軟に考えて良さそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問