1. クラウドソーシングTOP
  2. みんなのお仕事相談所
  3. バナー作成におけるデータ容量の抑え方
みんなのお仕事相談所

「みんなのお仕事相談所」では、ユーザーさまのご依頼の相場や製作期間、
契約書やお金に関する悩みを気軽に相談できるQ&Aコミュニティです。
違反案件についてはよくある質問の「【共通】違反のお仕事とは」をご覧ください。
また、違反報告についてはよくある質問の「【共通】違反報告とは」をご確認ください。

受注者からの相談
フリーランス(デザイナー)の相談

バナー作成におけるデータ容量の抑え方

解決済
回答数
5
閲覧回数
16331
すぐ知りたい!  : すぐ知りたい!

今回初めてバナー作成のお仕事にチャレンジしてみようと考えています。
しかし恥ずかしながらバナー作成時はデータ容量に制限があると知らず、現在JPEG形式の50KB以下(サイズは257px・402px)の容量に抑えることに四苦八苦しています。

50KB以下のデータ容量のデザインだととてもシンプルなものになってしまうのですが、様々なバナーを見る限りオブジェクトなども豊富に使用されていたり、写真なども使われいますが、どのようにしてデータ容量をさげているのでしょうか。特別な保存方法があるのかもしくは制限データが低くないからなのか・・・色々とネットや本で調べましたが的確な回答が見つからず困っています。

初歩的な質問で恐縮ですがアドバイスいただける方がいらっしゃいましたらよろしくお願い致します。

YUKARI B

2014年12月06日 06:27

ベストアンサーに選ばれた回答

うま工房さんからの回答

Photoshopの「web用に保存」は使っていますか?

2014年12月07日 23:03
相談者からのお礼コメント

うま工房様

ご回答誠にありがとうございました。
これまでロゴやフライヤーなどの制作が多くweb用のデータを作る経験が乏しかったため、「web用に保存」も初めて使用する機能でした。うま工房様の的確な一言のアドバイスが結果的に問題をすぐ解決してくださいましたのでベストアンサーに選ばせていただきます^^
illustratorの使用頻度が断然多いのですが、これからはphotoshopの勉強にももっと力を入れて活動の幅を広げていきたいと思います。

2014年12月09日 15:37

すべての回答

yosatonetさんからの回答

こんにちは。
画像は専門外なのですが、ソフトの利用方法的にはわかりましたので、ご回答いたします。
jpegファイルには圧縮率という考え方があります。高いとファイル容量は大きく綺麗に、低いと画像が荒くファイル容量が小さくできます。
手持ちの写真データで今回の大きさで実験してみました。
圧縮率95%ですとファイル容量51KBでぎりぎりでした。
圧縮率70%ですとファイル容量24 KBでとても小さくなりました。比較しますと、見た目、ほんの少し荒いかなと思います。
保存やエクスポートするときに圧縮率を指定できるソフトで余裕を見て45KBくらいになるように圧縮すればよいかと思います。
ちなみに私はGIMPを使いました。

2014年12月06日 11:58
KDR-hitomiさんからの回答

こんにちは。
参考になるかわかりませんが、私がやっている方法です。

yosatonetさんがおっしゃられているとおり、jpgは圧縮率で容量がかわります。
下げれば容量は減りますが画像自体が粗くなってしまいます。
ある程度仕方がないことではあるのですが、少しでも綺麗にする方法として・・・
・カラープロファイルを「sRGB」にする。
・解像度を下げる。webですと150pixelでも綺麗に出ます(サイズが大きい場合はこれに限りませんが)
・画質を9~8(高画質)にする。
などがあります。
同サイズ、同画質、同プロファイルでも、画像の色数で容量は変わりますので、
色々試してみるとよいかと思います。

2014年12月07日 17:11
うま工房さんからの回答

Photoshopの「web用に保存」は使っていますか?

2014年12月07日 23:03
みやまえさんからの回答

うま工房さんのおっしゃっているコマンドのショートカットは
Macですと、
「command」+「shift」+「option」+「s」です。
kokode
jpegをえらび、開いたウインドウで画像上の「最適化」か「2〜4アップ」タブをクリックして
画像下の容量予想を見ながら、右にある「画質」の数値を画像の粗さとにらめっこで調整します。
ファイアワークスをお持ちなら、似た方法でいきなり仕上がりの希望容量を入力できたはずです。
これは最新のフォトショップでもできるかもしれません。

2014年12月09日 11:42
ミヤモトハルカさんからの回答

YUKARI Bさま

こんにちは。
私もバナーの制作経験はそれほど豊富というわけではありませんが、
制作ソフトの機能(今回はPhotoshopでしょうか?)で限界まで圧縮したのに、
まだ容量が大きい!とういう場合は、いわゆる「圧縮ソフト」を使用して、
容量を小さくしています。
「jpeg 圧縮」などで検索すると色々なものが出てくると思いますが、
例えば私はpngを扱うことが多いのですが、「ImageAlpha」「imageoptim」
(後者はjpegも対応)
などを使っています。無料で簡単に使えて上手くいけば75%程度容量をカット
できることもあります。また、有償ですが、「JPEGmini」というソフトもあるようです。
ぜひ検索して、試してみてください。

先日は名刺の件でのご相談の際は、あたたかいお言葉をありがとうございました。
共にデザイナーとして頑張っていければと私も大変嬉しく思いました。
この場を借りて、お礼申し上げます。

Alopex

2014年12月09日 15:10
相談者コメント

yosatonet様

ご回答、並びに実際試みていただいたということで、誠にありがとうございます。
今回はPhotoshopで何とか解決することができました^^
とても親切で丁寧なご回答に大変感銘しました。ありがとうございます。

2014年12月09日 15:17
相談者コメント

KDR-hitomi様

ご回答ありがとうございます。同じデザインでも色素やシャドウを使用しただけで容量が変わってしまうのでもう少しインパクトを与えたいけど容量制限があるし・・・でバナーデザインならではの大変さを学ぶことができました。
今回はPhotoshopのweb用に保存でクライアント様の意向にそうデータが完成できました。いただきましたアドバイスは今後の仕事に活かさせていただきます^^ご丁寧なご対応誠にありがとうございました。

2014年12月09日 15:21
相談者コメント

みやまえ様

ご回答、並びに操作手順まで記載していただきありがとうございます。
ファイアワークスでも可能なんですね。普段あまり使用しないソフトなので知識不足でした。様々なソフトを駆使することでよりクライアント様の希望にそったデザインをご提案できるようもっと知識と経験をつんでいこうと思います。

2014年12月09日 15:31
相談者コメント

Alopex様

画像の圧縮ソフトは他にも色々あるんですね。独学ではじめた世界なので日々グラフィックデザインの世界の奥深さに魅了されるばかりです。今回はphotoshopの「web用に保存」でクライアント様の意向どおりのサイズデータ量で対応することができました。いただいたアドバイスはこれからの活動に是非役立たせていただきます^^
環境は違うかも知れませんがお互い頑張ってよいデザインをしていきましょう^^♪応援しています!

2014年12月09日 15:37
不安や疑問に真摯に向き合い改善につとめます クラウドワークス安心安全宣言