WEB素材作成ソフト？

質問

WEB素材（自分のホームページで使う用の素材）を作りたいと思っています。
具体的には自分で書いた絵や文字を使おうと思っているのですが
どのように作るのが一番良いのでしょうか。
最初は「ペイント」で作ろうと思ったのですが、どこのサイトでも
素材やサイトのタイトルなどはGIF形式になっていて、リンク用バナーは
JPEG形式になっているところもありました。
ペイントだとbmp形式になり、無理矢理GIF形式などで保存しようとすると
色情報の一部が失われる可能性があると表示されます。
（JPEG形式なら問題なく保存できるようですが・・・）

まったくの素人なのでいくつかお聞きしたいことがあります。
まず、なぜ素材はGIF形式が多いのでしょうか。
リンク用バナーもGIF形式のところもあるようです。
それと、バナーはJPEG形式のところもいくつか見つけたのですが
JPEG形式でも問題ないのでしょうか。（ペイントで作れるので）
最後に、素材はできるだけGIF形式のほうがいいという場合は
素材作成に向いているソフトウェアを教えて下さい。
フリーでもシェアでも市販のものでも何でも構いません。
よろしくお願い致します。

回答No.2

kyanasaki · ベストアンサー

BMPは無圧縮形式で非常に重いからだと思います。
現在インターネットではBMPを使う事をあまり進めていません。
通常画像(BMP)はgifやjpg等に画像圧縮を行う必要があります。
仮に画面をキャプチャーした画像ですと、
BMP形式で保存した場合、2MBほどになりますが、
JPG形式の場合は50KB～200KBで済むのです。
また、色もあまりBMPと遜色ありませんので利用されています。

仮にBMPで画像を保存しネットで表示した場合、
利用者は500KB～1MBの画像を表示する必要があります。
これでは、光回線でも10秒程かかるばあいもあります。
ISDNなら、もうどうしようもありません。
しかし、gifやjpgで表示した場合100kb程度になるので、
どんな回線でもスイスイ表示されるっと言う事です。

通常使用した色の数によって保存形式を変更します。
画像が256色以内だった場合はgifにすると美しくなりますが、
jpgにすると、色を最大限に美しく表現する為、
画像にむらができます。
この事を、通常画像が荒れると言いますが…。

逆に、写真などの256色以上の場合はjpgで保存します。
これを間違ってgifにした場合写真が汚くなります。
何故なら写真を256色で表現してしまうからです。

何故素材形式はgifが多いかというと、
上記の点から踏まえて、その素材が256色以内で、
また、BMP形式，jpg形式より容量が軽くなるからです。
バナーはjpg形式！と言う決まり事は全くありません。
256色以内であれば、gif形式と考えた方が良いです。
これを理解していない人は大抵、gifやjpgを混乱して使用してしまいます。

i-to-ziさんが作る画像が256色以上の場合はgif形式
それ以上の場合はjpg形式で保存した方が良いですね。
例えばペイントソフトで制作した場合はgif形式ですが、
紙に書いて、それをスキャナで取り込んだ場合は、
jpg形式の方が綺麗な画像になる可能性が高いです。

画像処理に関してはやはり、PhotoShopが一番お薦めですね。
プロでも使いますし、自由度が高いのが特徴です。
その分価格が7万円(?)程度だった気がします。
フリーの場合はEDGEが現在最強と言われています。(恐らく)
シェアでも通用するくらいのレベルがありますよ。
ドット絵を描く時や素材を作る時はこれが一番です。

■EDGE
http://www.tkb-soft.hmcbest.com/
ドット絵制作ツール
現在絶大な人気を誇るフリーソフト

お礼

とても詳しく書いていただいて、ありがとうございます！
GIFとJPGは保存する際に使いわけが重要になってきますね。
その点を踏まえてうまく使い分けていきたいです。
フリーソフトまで教えていただいて、本当にありがとうございました。

回答No.8

kowaza

フォトショップのファイル＞Web用に保存で、GIFにして、落としたくない色をスポイトアイコンで吸い取って、錠のアイコンをクリックしてロックする。そしてすこしづつ減色していけば、軽い素材が作れると思いますよ。画像の重さも表示されますし、便利です。

お礼

ロックすると落としなくない色は落ちないということですよね！？
とても便利ですね！！ありがとうございました！！

回答No.7

sion_fs

＃５さんのを参考に、私も実際に比較してみました。

（１）猫の写真（携帯で撮影）
２５６色保存
BMP 77.88k
GIF 33.10k
PNG 28.20k

フルカラー保存
BMP 230.45k
PNG 94.09k
Jpeg 49.95k
Jpeg-80% 2.05k

（２）イラストバナー（全107色の画像）
88ｘ31サイズ
Jpeg 4.31k
BMP 3.81k
Jpeg-80% 2.05k
GIF 1.47k
PNG 1.39k
Jpeg-45% 1.38k

640ｘ225サイズに拡大
BMP 145.08k
Jpeg 63.55k
GIF 31.90k
PNG 22.84k
Jpeg-80% 20.11k

（３）写真200x50サイズ
BMP24bit 30.05k
PNG24bit 15.76k
Jpeg100% 13.80k
BMP 256 11.86k
GIF 256色 6.12k
PNG 256色 5.19k
Jpeg-80% 3.14k

このような結果になりました。
この表を見れば明らかですが、

１）色数が少ない画像では、GIF／PNGの圧縮率が非常に高くなる。
２）サイズが小さい画像では、JPEGの利点はあまり無い。
３）個人的には、ＰＮＧがＧＩＦより圧縮度が高い事も証明されて満足です（笑）

といった感じですね＾－＾

なお、Jpeg とだけ記述してあるのはJpeg-99% を意味します。この％は圧縮率で、低ければ低いほど、高圧縮＝画像の劣化が激しいという事になります。
一般的には８０％程度が良く利用されます。

なお蛇足ですが、ＧＩＦの著作権問題に関しては、既に昨年、ＧＩＦの著作権は期限切れとなりました。現在はそのまま利用して全く問題がありません。

お礼

こんなにたくさんの検証を本当にありがとうございます！！
すごく分かりやすくてためになりました。
今後はこれを参考に用途によって使い分けていきたいです。
ありがとうございました！！

回答No.6

kowaza

素材などを作成するなら
アドビの「フォトショップ」がダントツでいいです。
バージョンが高ければいいと言うわけではないようで
5.5が人気なようです。
今でもあるかわからないですが「イラストレーター」とセットになってるものは割安な感じがします。
5.5以上では、「WEB用保存」というものが追加されGIF、JPEG、PNGなどの保存形式や画像の重さをかえるのは簡単です。

GIFはイラスト。JPEGは写真。とおぼえればいいと思います。

お礼

フォトショはバージョン６と８が手元にあります。
これがあれば十分そうですね♪よかった♪
手元にあるとは言え勿体無いことにほとんど触ったことがないので
少しずつ勉強していきたいです。ありがとうございました！

回答No.5

pupu3sjp

＃３です。

試しに「ペイント」で「カラフルな花びらの薔薇」を作成して保存してみました。

16色BMP：77.6KB
256色BMP：156KB
24ビットBMP：465KB
（※減色すれば画像も悪くなる）
GIF：4.69KB
JPEG：16.5KB

やはり、素材はGIFで作成する方が無難です・・・。(^^;)

お礼

実際にやっていただいて、本当にありがとうございます！！
確かGIFも256色でしたよね！？こんなにまで違うなんて。
これが積もっていけばHPの重さもずいぶん差が出そうですね！！
とても参考になりました。ありがとうございました。

回答No.4

sion_fs

ＢＭＰとはWindowsの標準形式ですが、Macでは標準形式ではありません。
すなわち、Macでは表示できない場合がある、と言うのが一つ目の理由で、２つめの理由として、ＢＭＰは原則では圧縮をサポートしていません。

この為、ファイルのサイズが極端に重くなります事は＃２さんの仰るとおりです。

ＧＩＦは、そうした欠点を排除する為の形式の一つです。色数を原則では２５６色まで落としてしまい、その代わりに繊細な画像をそのままで高い圧縮率で保存できます。

ＪＰＥＧは、逆に写真向けの圧縮形式です。色数を極力落とさずに圧縮率を高めますので、その代わりに繊細な部分はぼやけてしまいます。

ＧＩＦは色数が落ちるので、写真などグラデーションには不向きですが、画像がぼやける事は有りません。ＪＰＥＧは画像がぼやけるので、文字やキャラクタなどには不向きですが、写真などのグラデーションの表現が得意です。

なお、ＧＩＦは著作権で一時期問題となり、ＧＩＦやＪＰＥＧに代わる形式としてＰＮＧが使われました。ＰＮＧはＧＩＦと同じ画像をＧＩＦより高圧縮出来る上、ＪＰＥＧの代わりとしても利用出来ます。ＨＴＭＬで画像を利用する際、最も推奨される（Ｗ３Ｃ推奨）画像形式です。

ただ、歴史があまり深くない為にＰＮＧに対応した画像作成ソフトはあまり多くないです。
（※表示はＩＥでもモジラでも出来ますしVodafoneなんかは標準形式でした。）

バナーは、ＪＰＥＧでもＧＩＦでもＰＮＧでも問題有りません。が、その画像に合った形式を使うのが良いでしょう。（写真を使ったバナーならＪＰＥＧ、文字が中心ならＰＮＧやＧＩＦ、といった形）

pixiaなんかは結構有名なソフト（フリー：GIFは非対応）ですね。
http://homepage2.nifty.com/~maru_tacmi/

市販ソフトではPaintShopなどが有ります。
http://paintshoppro.jp/

参考URL：

http://homepage2.nifty.com/~maru_tacmi/

お礼

BMPはMacでは表示できない可能性があるんですか！知らなかった・・・（汗
GIF問題については少しだけ耳にしたことがあるのですが、
このまま普通にGIFを利用してても構わないのでしょうか・・・？
PNGなんてのもあるんですね（ド素人でスミマセン）！！
そちらに関しても勉強していきたいです。ありがとうございました。

回答No.3

pupu3sjp

GIFが使用できる色彩は256色と、他の形式に比べデータ容量を少なく出来るので、
写真以外の画像をGIFで作成すると、HPでは負担が軽くなるからです。

逆を言うと、写真などは256色では再現できないので、現状で一番適しているのは
JPEGのようですし、デジカメの保存形式がJPEGに統一されているようですね。

BMPは「モノクロ」「16色」「256色」「24ビット：フルカラー：16,777,216色」と
保存が出来るオールマイティーなところが有ります。
もちろん上記の各色順に保存すれば、容量は増大していきますよね。

素材は好みの形式で作成しても特に問題はありませんが、いわゆる「HPが重い」
状態を回避するには、容量の少ない画像にした方が無難と言えば無難です。

Win 98時代は「ペイント」でGIF形式で保存が出来なかったような気がしますが、
現状のWin XPの「ペイント」ではGIFもJPEGもBMPも保存が出来るようなので、
用途に合わせて使い分けるのが良いでしょうね。
（この点は、ちょっと疑心暗鬼なので、間違っていたらスミマセン）

なお、JPEGは保存をする度に圧縮が掛かり、色彩も退色していきます。
修正・保存を繰り返すと、徐々に画像が潰れた感じになったり、ゴミが付着
したような汚れが目立っていきますので、注意が必要です。

お礼

回答ありがとうございます。HPが重いのは問題ですからね。
ぜひ使い分けて軽いHPにしたいと思います。
えっ！JPEGは保存するたびに汚れた感じになってしまうのですか！
それじゃあ、一度に全て修正しないといけないですね。
でも、写真だとあまり修整することはないかもしれないですが・・・。
非常に有益な情報をありがとうございました。

回答No.1

rightegg

こんにちは。

GIFでもJPEGでもどっちでも良いです。
ルールは無いですよ。

それぞれの特徴を踏まえて使い分けているだけです。
GIFってのは色数を限定することでファイルサイズを抑えています。
例えば縞模様ならGIFの方が便利。気をつけるべきなのは、例えば白黒なら白と黒であり「灰色」は含まれないということ。
つまり直線でハッキリ分かれた色でない場合は、そのグラデーションを表現するために色数が必要って事です。

つまり写真のような画像にはGIFは向かないと言うこと。そう言う画像はJPEGの方が優秀です。

そして全体的に見れば、JPEGの方が軽い事になります。
でもGIFも多いですよね。これは「表示の軽さ」の問題です。JPEGとGIFでは、GIFの方が表示が速いんですよね。だから大して重さが変わらないような小さな画像では、GIFの方が好んで使用される傾向にあります。

別にペイントで自由に作れるならペイントで構いませんよ。GIF変換がいまいち綺麗にいかないならJPEGにするか、別のソフトを買えばいい。JPEGだけでサイトを作っても何の問題もないですからね。

もちろんFireWorksとかPaintShopを購入しても良いし、本格的にやりたければPhotoShopを買っても良い（高いから手が出ないでしょうけど）です。
どのソフトでもJPEGやGIFは書き出せます、あとは各種フィルターや操作性、扱える容量の差です。

お礼

なるほど。線などでくっきり描かれたイラストならGIFでも良さそうですね。
GIFばかり見かけるので不安でしたが、JPEGでも良いとのことでとかったです。
フォトショップは手元にあります、バージョン8.0のものが。
高いですよね～。