Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

イラストフォント配布サイト作りました!

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

イラストをフォント化したTTFフォントの配布サイトです。

Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。

個人、商用ともにフリーです。
ご自由にお使いください^^

自分で好きなものだけWebフォント化していただいても大丈夫◎

デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。

こういうのがあると便利ー!などのご意見もお待ちしています!!

Font用のSVGファイルはFireworksで

ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。

詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪

Bootstrap下調べ

bootstrap

というわけでBootstrapを使うにあたって、いろいろ調べ事をしたのでメモしておきます。

Bootstrap 3でレスポンシブを無効にできるか?

Bootstrap 2系は要素を追加してレスポンシブを実現するようになっていたそうなのですが、3系は標準でレスポンシブ対応とのこと。

今回のサイトはPC用のフォント配布サイトということもあって、レスポンシブである必要もあまりなかったのでレスポンシブを無効にする方法を調べました。
以下の手順で簡単にできました。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を削除する。
<link rel=”stylesheet” href=”css/bootstrap.min.css” media=”screen”>の下に、
<link rel=”stylesheet” href=”css/non-responsive.css” media=”screen”>を追加する。
<script src=”js/respond.min.js”></script>を削除する。
グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。

引用:Bootstrap移行ガイド レスポンシブの無効化

英語ですが、公式サイトにも手順がのっています。

公式:http://getbootstrap.com/examples/non-responsive/

段組はどういう仕組み?

bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。

画像はどのサイズで作る?

%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。

フォームのスタイリング

classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。

デザインの調整

以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。

その他参考にしたサイトなど

全体的な感想

どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。

いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!

なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆

Webデザイナー7年目の2011年を振り返る

今年も残すところあと3日とちょっとになりました。 プライベートなWebにかかわるいろんなことをまとめて、今年1年を振り返ってみたいと思います

今年も残すところあと3日とちょっとになりました。

プライベートなWebにかかわるいろんなことをまとめて、今年1年を振り返ってみたいと思います。

今年は、Webデザイナーになって丸6年を迎え、7年目に入る年でした。
7年目とか…早い…。信じられない…。

去年

2009年から少しずつ、仕事以外でのアウトプットをはじめていたのですが、
それを見ていただいたことでいろいろと発表の機会をいただいたり、そういうことがさらにサイトを作る意欲になったりと、今年はさらにいっぱいがんばりました!!!!

こんなことを書いていました。

今年はこれらのアウトプットがさらにいろんな形になった一年でした。

一番大きかったのはやっぱり本を書かせていただいたことです。

それもあって、今年は去年に比べてあまり個人サイトを作ったりする時間がとれなかったのでプライベートではWebに関わることは特になにもしていなかったような気がしていましたが、振り返ってみるとけっこういろいろやっていました…!

今年の振り返りや反省をいくつか。

アメブロはじめてみた。

友達がピグにハマりまくっていたり、
まわりでアメブロでブログをやっているひとが多かったりと、
いろいろ気になったのではじめてみました。
何事も体験してみないとわからないですもんね。
なるほど、通知機能とかよくできてるなーと使ってみて改めて思いました。
この辺はまた改めてまとめたいと思います。

StartUpWeekendに参加した

その時の様子はこちらなど(StartUpWeekend3日目レポート!)に書いています。
ホントいろんな方と知り合うことができました。
すごく楽しかった!!これは来年もあったらぜひとも参加したいです。

MashupAwardに応募できなかった

去年に引き続き、絶対応募しよう!と思っていたのですが、
バタバタしていて結局何も作れず…応募できませんでした。
来年は計画的にサイトつくって応募したいなぁ。

iPadで絵を描く、100枚達成できなかった…

あれだけハマっていたiPadでのお絵描きですが、
最近全然できておらず…!
結局まだ100枚達成できていません…
た、達成できる気がしない…!w

めちゃくちゃ本読んだ

今年はめちゃくちゃ本を読みました。
いっぱいインプットしたので、来年はもっとしっかりアウトプットできるように頑張ります!

今年読んだものでもう一回読んでおきたいもの↓

ブログってすごい

…というとなんか大げさな感じもしますが、
地方在住のへっぽこWebデザイナーの私が本を書かせていただくことができたのは、とにかくブログのおかげです。
Fireworksマニアがきっかけで書かせていただけることになったので、ブログの大事さを改めて感じた一年でした。

来年も更新頑張ります♪

Fireworks CS5/4/3 (速習デザイン)

「気になったことはとりあえずやってみる!」は来年も続ける

気になったらいてもたってもいられなくて
すぐに試してみたくなるタチなのですが今年も例外なくそんな一年でした。
パブーでデジタル写真集をいろいろ作ってみたり、友達とデザインフェスタに出展してみたり。

来年も気になったことにはなんでもやってみようと思います☆

来年も頑張ります!

ありがたいことに、来年Fireworks関連でいくつかお話しさせていただくことになっています。

【東京】2011.02.03(fri) CSS Nite back2basic #8「Fireworks」

【福岡】2011.01.17(thu) 「速習デザインFireworks CS5/4/3」出版記念「Fireworks厳選Tipsチュートリアル」

どちらも現在申し込み受付中なので、もしご都合がつけばお越し頂けるとうれしいです^^

来年も無理をしないように楽しく元気に過ごせるよう、頑張って行きたいと思います。

来年も、どうぞよろしくお願いします☆

WordCamp Kobe 2011に参加しました!!

9月11日に開催された
WordCamp Kobeに参加してきました!!

なんと600人弱の参加があったとか!!!

これはすごい!すごすぎる…!!!ということで当日のレポートです☆

国内最大のWordCamp

9月11日に開催された
WordCamp Kobeに参加してきました!!

なんと600人弱の参加があったとか!!!

すごすぎる…!!!

国内No1記録を大幅に塗り替えちゃいました☆

会場は神戸芸術工科大学

神戸には同僚の@ask4416といっていたのですが
@ask4416は午後からの参加だったので、

午前中はWeb Attendで仲良くなった
@hibiki443さんが同じ三宮にお泊まりだったので
一緒にお出かけしました!

わーいわーい!!!

学校到着!

色々写真撮ったので貼っておきます♪

Exif_JPEG_PICTURE

おっきなポスター!

かわいいです…♪

Exif_JPEG_PICTURE

登ってゆきます。

Exif_JPEG_PICTURE

学内の案内板がカラフルでかわいい!

Exif_JPEG_PICTURE

きれいな学校です…!

Exif_JPEG_PICTURE

なんかしてました。

Exif_JPEG_PICTURE

キリン。蔦を絡ませるのかな?

Exif_JPEG_PICTURE

この案内板もきれい。

Exif_JPEG_PICTURE

ここを進んで右に曲がったところから会場に入りました。

パンフレットはセルフサービス

Exif_JPEG_PICTURE

パンフレットなどはセルフサービスでした。

福岡では毎年、パンフレット類の袋詰めが恒例行事なんですが
福岡もこのスタイルでいいのかも??

気になるパンフレットをいろいろもらってメイン会場へ!

アンカンファレンス

早速アンカンファレンスの説明があり、グループ分け!

私は@hibiki443さんと一緒に
@takayukisterさん& @horike37さん率いる
プラグインチームに混ぜてもらって
いろいろトークしてきました!

あると便利なプラグインのネタが出たので
これ全部誰か実現してくれないかなぁーーーと心から願っています…!w
(他力本願でごめんなさい><)

楽しくランチへ

アンカンファレンス後は
同じグループだった@kana_f_h_pさん@pan__ichiさんと仲良くなって
4人でランチしてきました♪
楽しかったー!!!

こういう出会いがあるのがあるからWordCamp大好き^^

そして本編へ

そんな楽しいランチのあと、会場に戻ると…

ひとひとひとひとひと!!!!!!!w

おそるべし600人っ!

Exif_JPEG_PICTURE

まずはNaoさんっ♪満員御礼でした!!

Exif_JPEG_PICTURE

IIJさん

Exif_JPEG_PICTURE

プライムストラテジーさん

他にもいろいろ見てきたのですがメインホール以外の写真撮るの忘れてました…><

いくつか満員過ぎてみられなかったセッションがあったのですが
後日動画が公開されるみたいなので、それを楽しみにしています!

 

いろんなノベルティーゲット!!

マグカップやセンスやクリアファイルを頂いたりもしました♪

わーい☆

完全なお客さんとしてのWordCamp

福岡以外のWordCampに参加したのは
というかお客さんとしてWordCampに行くこと自体はじめてだったので、
ゆっくりのんびり、いつもと違う感覚でたのしめてよかったです!!!

WordCampを鹿児島でも。

いつもなんですが、LTはおもしろいもの&参考になるものがいろいろでてきますね!
どれもすっごくよかったです!!

あの短い時間でぎゅっとまとまっているのがすごい!!

鹿児島でもWordCampやるぞ!というLTもあり、九州でもっとあるといいのに!!!!と思っていたのでとっても楽しみです!福井の蟹も気になりまくりでした…♪w

参加してみて、いいなぁと思ったところ

スタッフの方の数がすごく多い!

この規模を見事に運営してらっしゃいました!

関西圏以外からもたくさん&家族連れ、お子様連れでの参加も多数!

いろんな方が参加しやすいイベントってすばらしいですよね!
福岡からも新幹線でさっといけるし、
東京からも新幹線でも飛行機でもこれるし、
神戸は立地的にも全国的なイベントをするのに優れている土地なのかな、と思いました☆

スタッフTシャツいいな。そしてTシャツは色付きがいいな。

スタッフの方のピンクのお揃いのTシャツがすごくわかりやすかったです。

サイトにあった写真付きの道案内がとっても親切

微妙にわかりにくい場所だったので、サイトにあった写真付きの道案内地図が本当に役に立ちました!
こういう心遣いって大事ですよね…!
大学の中も広くてまよっちゃったりしがちですが、完璧な誘導がしてありました!すばらしい…!

スタッフの皆さんがみんな楽しそう!

これは福岡も同じなんですがみんな楽しそうでした♪

WordCampのスタッフってなんか楽しいんですよねー。なんだろうね、あれ。

いろんなプログラマもデザイナーもコーダーもディレクターもそんなのなにも関係なく
みんなでひとつのこと一緒にできるからかなぁ?

あんまり職種問わず!なイベントないですもんね^^

おまけ:名刺は派手な方がいい

そういえば名札はフォルダーのみ配布されて
中身は自由に名刺など入れるようになっていたので、
会社名刺ではなく、派手で目立つ方の個人名刺をいれていました。

するとすると…

「もしかしてYUKIさんですか?名刺がお花だったから…!」と
会いたかったフォロアーのさんに話しかけてもらえて
無事にお会いすることができました!!

名刺派手にしててよかった!!!!と思った出来事でした☆

新幹線の都合で懇親会に参加できなかったことは心残りですが;;
いろいろといいことづくしの神戸の旅でした☆

ホントにすてきなところだったので
今度は観光とグルメツアーでも神戸&大阪に行きたいな♪(*´▽`*)ノ

お世話になったみなさま、本当にありがとうございましたー!!!

Web Attend 2011に参加しました!!

大阪の梅田で行われた
Web Attend 2011に参加しました!!

100人以上が集まる大きな飲み会です!

大阪の梅田で行われた
Web Attend 2011に参加しました!!

100人以上が集まる大きな飲み会です!

主催の@yat8823jpさんにイベントのことを教えていただき、
翌日のWordCampKobeの懇親会は新幹線の都合で参加できないこともあって
よろこんで参加しました♪
場所はパーティスペース&バー オープンドア

以前一度梅田にきたことがあるのですが、
似たようなビルが多すぎて方向がさっぱりわからず
めちゃくちゃ迷った記憶しかなかったので、

これはひとりでは絶対たどり着けないだろうと
東京組のみなさんと梅田のヨドバシで合流させていただくことに。

…ちなみに貴和製作所にいきたくてヨドバシいってました(6Fにある)
ビーズいっぱいうはうはでした♪

福岡にもできたらいいのにー!!!><

…話がそれました。

肝心のお店ですが…
案の定、一緒に連れて行ってもらわないとわからない感じの場所でした…!

拾っていただけてよかった;;

みなさんのおかげで無事に到着。

会場に集まったのは100人超のみなさま!!!!!!!
これはすごい…!!

しかも翌日にWordCampがあるからか、
全国各地からいろんな人が集まってました!

司会とか受付とかされていた方々がみんな明るくて元気ですごくよかったです!

そしてみんな若い!(笑)

楽しかったー♪

そういえば

イベント中、こんなことがありました。

私、化粧と髪型と服のテイストが安定していないせいか
一度しかあったことのない方にはよく顔を忘れられるのですが…!
(私はすごく覚えている方なので余計切ない)

ぼっちになりたくない一心で
一度あったことがある人になにがなんでも見つけてもらおうと(あぁなんて他力本願)
twitterで「こんな格好の人がいたら私です!」と
当日のきていた洋服のイラストを描いてUPしてみたりしていました。

それが違う意味で効果を発揮しまして、
「服の画像見たのでそうかなぁと思って!」と
twitterで相互フォローさせていただいているみなさまに声をかけていただくことができたのです…!;;

本当は自分からたくさんの人に話しかけたかったのですが
なにせ普段引きこもりで飲み会なんて滅多にいかないのでw
こういうときなかなか自分からいけない私…。

なので本当にうれしかったです…!!

ありがとう洋服!!!><。

トラックパッドで必死に描いてよかった!!!w

関西に来ないと会えない方々にたくさんご挨拶できてうれしかったです!

そうそう、神戸で福岡仲間もできました!
やった!やったよー!!!!

主催の@yat8823jpさんはじめ、

みなさま、楽しい時間を本当にありがとうございました!!

PNGとJPEG…こんなときはどっち? Web用画像の書き出し、比べてみました!

画像の書き出しについて、実際に画質やファイルサイズにどれくらい差が出るのか
いろいろ比較してみました。

今回は、

透過を含まない大きな写真の書き出し
透過を含まない小さな写真の書き出し
透過を含み、且つCSS Spriteで使用するための画像の書き出し

の3つについて検証してみました!

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に​使い分けていますか?[2011年7月現在]のつづきです。

コメントやtwitterなどでいろいろ反応を頂きました。
ありがとうございました☆
結構同じ使い分け方の方もいらっしゃってほっとしています…!

今日はこのあいだのつづきで、
自分の中でもやーっとしていた使い分けの部分を実際に比べてみました!

今回は、

  1. 透過を含まない大きな写真の書き出し
  2. 透過を含まない小さな写真の書き出し
  3. 透過を含み、且つCSS Spriteで使用するための画像の書き出し

の3つをチェックしてみました!

チェック1:透過を含まない写真の書き出し(大きいサイズ:1200px × 1600px)について最適な書き出し形式はどれ?

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。

PNGはPNG-24で書き出します。
(透過を含まないものなのでフルカラー使用可/透過不可のPNG-24を選択)

JPEGは80%の画質で書き出します。

チェック1-1

それらの画質とファイルサイズをくらべてみました。

チェック1-2

ImageOptimなどの画像最適化ツールを使い、圧縮してファイルサイズを小さくしたたものくらべてみました

書き出すにあたって

チェック1には以下の東京タワーの画像を使用します。

RAWデータをPhotoshopで読み込み、PSDで保存しました。

PhososhopではこのPSDをそのまま書き出します。
FireworksではPhotoshopと条件を揃えるためにPSDの状態で読み込み、書き出します。

tw_s_fw_opt

それぞれ書き出す

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。

PNGは透過を含まないものなので今回はフルカラー透過なしのPNG-24を選択して書き出します。
JPEGは80%の画質で書き出します。

Fireworksで、画質80%のJPEGで 書き出し

tw_fw_書き出し_jpg

書き出し後ファイルサイズ:340 KB(338,376 バイト)

Fireworksで、PNG-24で 書き出し

tw_fw_書き出し_png

書き出し後ファイルサイズ:3.4 MB(3,393,649 バイト)

Photoshopで、画質80%のJPEGで書き出し

tw_ps_書き出し_jpg

書き出し後ファイルサイズ:971 KB(970,497 バイト)

Photoshopで、PNG-24 書き出し

tw_ps_書き出し_png

書き出し後ファイルサイズ:3.4 MB(3,440,473 バイト)

チェック1-1 そのまま比べてみる

大きな画像なので、並べて比較しやすいよう、一部を切り出しました。
(画像をクリックすると実寸大の画像を表示します)

※正しく比較できるよう、これ以上の画像の劣化が発生しないように
切り出した画像はJPEGも含めてPNGで書き出しています。

tw_fw_jpg_up tw_fw_png_up tw_ps_jpg_up tw_ps_png_up
fireworks JPEG(80%)
340 KB
[338,376 バイト]
fireworks PNG-24
3.4 MB
[3,393,649 バイト]
Photoshop JPEG(80%)
971 KB
[970,497 バイト]
Photoshop PNG-24
3.4 MB
[3,440,473 バイト]

くらべてみて

Fireworksのほうが圧縮率が高い

JPEGについて、Fireworks,Photoshop共に同じ80%で書き出しましたが、
fireworksのほうがかなりファイルが小さくなっています。
その分やや画質が荒くなっています。

tw_fw_jpg_up tw_ps_jpg_up
fireworks JPEG(80%)
340 KB
[338,376 バイト]
fireworks JPEG(92%)
995 KB
[994,987 バイト]
Photoshop JPEG(80%)
971 KB
[970,497 バイト]

今回の画像では、Fireworksで画質を92%として書き出しすると、
Photoshopに近しい画質・ファイルサイズになりました。

Photoshop JPEG(80%)&Fireworks JPEG(92%)と
Firerworks PNG-24&Photoshop PNG-24では、
ファイルサイズが3倍ほど違うが、
等倍で通常見る分には見た目の美しさに3倍もの差は感じないように感じられました。

チェック1-2 ImageOptimで最適化して比べる

ImageOptimとは、PNGやJPEGの様々なメタ情報を排除、圧縮することができるソフトです。
起動したら最適化したいファイルを画面にドラッグするだけ。
書き出し後のPNGファイルもちっちゃくなります。

CSS Nite LP14の松田さんのセッション「Fireworks PNGの特性を活かした、”書き出し”をしない効率的ワークフロ」で紹介されていたアレです☆

詳しくはこちらなどもどうぞ:JPEG/PNGのサイズをぎりぎりまで削減する「ImageOptim」

(ImageOptimはMac用ですので、Windowsな方はPNGGauntletをどうぞ♪)

ImageOptimを使って、ファイル中の不要なデータを削ってデータサイズを小さくしてみます。
(不要な部分を削るだけなので画質は変わりません。)

tw_opt

上の4つがチェック1のファイルです(下の4つはチェック2のファイル)

圧縮結果

tw_fw_jpg_up tw_fw_png_up tw_ps_jpg_up tw_ps_png_up
fireworks JPEG(80%)
340 KB

[338,376 バイト]
fireworks PNG-24
3.4 MB
[3,393,649 バイト]
Photoshop JPEG(80%)
971 KB
[970,497 バイト]
Photoshop PNG-24
3.4 MB
[3,440,473 バイト]

くらべてみて

すべてにおいてファイルサイズの減少が見られたものの、
PNG-24がJPEGに匹敵するファイルサイズになるような爆発的な効果はありませんでした。

チェック1のまとめ

完璧な見た目を優先する必要があるならPNG。

ある程度きれいに見えれば問題ないレベルであれば
ファイルサイズが1/3以下のJPEGが優位。

チェック2:透過を含まない写真の書き出し(小さいサイズ:240px × 340px)について最適な書き出し形式はなにか

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。
PNGはPNG-24で書き出します。(透過を含まないものなのでフルカラー使用可/透過不可のPNG-24を選択)
JPEGは80%の画質で書き出します。

チェック2-1

それらをそのまま比べてみます。

チェック2-2

ImageOptimなどの画像最適化ツールを使い、さらに圧縮したものを比べてみます。

チェック2にもチェック1と同様、以下の東京タワーの画像を使用します。

RAWデータをPhotoshopで読み込み、PSDで保存しました。
PhososhopではこのPSDをそのまま書き出します。
FireworksではPhotoshopと条件を揃えるためにPSDの状態で読み込み、書き出します。

tw_s_fw_opt

それぞれ書き出す

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。
PNGは透過を含まないものなので今回はフルカラー透過なしのPNG-24を選択して書き出します。
JPEGは80%の画質で書き出します。

Fireworksで、画質80%のJPEGで書き出し

tw_s__fw_書き出し_jpg

書き出し後ファイルサイズ:25 KB(24,357 バイト」

Fireworksで、PNG-24で書き出し

tw_s__fw_書き出し_png

書き出し後ファイルサイズ:131 KB(126,996 バイト)

Photoshopで、画質80%のJPEGで書き出し

tw_s_ps_書き出し_jpg

書き出し後ファイルサイズ:49 KB(45,591 バイト)

PhotoshopでPNG-24で書き出し

tw_s_ps_書き出し_png

書き出し後ファイルサイズ:127 KB(126,689 バイト)

チェック2-1 そのまま比べる

tw_s_fw_jpg_up tw_s_fw_png_up tw_s_ps_jpg_up tw_s_ps_png_up
fireworks JPEG(80%)
25 KB
[24,357 バイト]
fireworks PNG
131 KB
[126,996 バイト]
Photoshop JPEG
49 KB
[45,591 バイト]
Photoshop PNG
127 KB
[126,689 バイト]
tw_s_fw_opt tw_s_fw_opt
fireworks JPEG(80%)
25 KB

(24,357 バイト)
fireworks PNG
131 KB
(126,996 バイト)
tw_s_ps_opt tw_s_ps_opt
Photoshop JPEG
49 KB
(45,591 バイト)
Photoshop PNG
127 KB
(126,689 バイト)

くらべてみて

検証1−1同様、同じ80%の画質で書き出したが、ファイル容量はFireworksのほうが小さい。

4つの画像の見た目にファイルサイズほどのものを感じなかった。

チェック2-2 ImageOptimで最適化して比べる

ImageOptimを使って、ファイル中の不要なデータを削ってデータサイズを小さくしてみます。
(不要な部分を削るだけなので画質は変わりません。)

tw_opt

下の4つがチェック1のファイルです(上の4つはチェック1のファイル)

圧縮結果

tw_s_fw_jpg_up tw_s_fw_png_up tw_s_ps_jpg_up tw_s_ps_png_up
fireworks JPEG(80%)
25 KB

[24,357 バイト]
fireworks PNG
131 KB
[126,996 バイト]
Photoshop JPEG
49 KB
[45,591 バイト]
Photoshop PNG
127 KB
[126,689 バイト]
tw_s_fw_opt tw_s_fw_opt
fireworks JPEG(80%)
25 KB
(24,357 バイト)
fireworks PNG
131 KB
(126,996 バイト)
tw_s_ps_opt tw_s_ps_opt
Photoshop JPEG
49 KB
(45,591 バイト)
Photoshop PNG
127 KB
(126,689 バイト)

くらべてみて

チェック1−2同様、すべてにおいてファイルサイズの減少が見られたものの、

PNG-24がJPEGに匹敵するファイルサイズになるような爆発的な効果はありませんでした。

チェック2のまとめ

チェック1と同じく、どうしても完璧な見た目を求めるならPNGだと思うのですが、
このような写真であれば見た目にほとんど差がない印象をうけました。

こちらも容量が1/5以下のJPEGが優位?

チェック3:透過を含む画材の書き出し

用途からPNG一択ではあるのですが、
PNG-8とPNG-32で見た目、容量にどれくらい違いが出るか
PHOTOSTOCKERで実際に使っているCSSSprite用画材で検証してみました。

こんな感じでいろんなパーツを1つのファイルにまとめています。

bgImage_00_opt

わかりやすいように背景を黒にしてみました。

000

(このファイルはちょっと作り方が悪くて無駄なスペースがあるのですが…そこは目をつぶってください><)

チェック3-1 そのまま比較する

■Fireworks作業データ(パスとかフィルタの情報とか入った状態)

→1.9 MB(1,866,582 バイト)

■FireworksでPNG-32で書き出し

82 KB(80,140 バイト)

■FireworksでPNG-8で書き出し

41 KB(37,317 バイト)

PNG-8とPNG-32の見た目の差

似たような色のパーツが多いので256色で足りるかなーと思ったのですが、以外と色数使っていました><
PNG-8ではよく見るとボタンのグラデーション部分がすこしだけ荒くなってしまいました。

(あとで拡大画像載せます><)

くらべてみて

PNG-8とPNG-32でファイルサイズが2倍になっているので
できる限り256色の範囲で作った方がファイルサイズ的にはよさそう。

ただ、今回の場合はこれだけのパーツ数で82KBなのでPNG-32でも許容範囲内ではないかと思いました。

チェック3-2 ImageOptimで最適化して比べる

これまで同様、ImageOptimで最適化してさらにデータをスリムにしてみます。

注)作業用ファイルも最適化していますが、最適化した場合作業データはすべて失われます!かならずバックアップして行ってくださいね

bg_opt

■Fireworks生データの状態

→1.9 MB(1,866,582 バイト)→61 KB(59,578 バイト)

■FireworksでPNG-32で書き出し

→82 KB(80,140 バイト)→61 KB(59,581 バイト)

■FireworksでPNG-8で書き出し

→41 KB(37,317 バイト)→33 KB(31,546 バイト)

くらべてみて

PNG-24ではさほど効果が得られませんでしたが、
透過を含むPNG-8、PNG-32はかなり効果がありました。(全体からの%での判断)

書き出しをしていないFIreworksの作業データも
PNG-32で書き出したものと同じくらい(むしろ少し小さい)圧縮されました。

チェック3 まとめ

PNG-32でも写真等を含まない今回のようなデータであれば、
カンバスのサイズが大きくてもファイルサイズを押さえることができることがわかりました。

また、透過を含むファイルはImageOptimの効果も高いようです。(全体からの%での判断)

すべてを終えてのまとめ

ブロードバンドが普及してきて、
昔ほど1KBとの戦いをする機会はなくなってきたとはいえ
スマートフォンからの接続というのも増えつづけていますし、
できるかぎりファイルの転送量は減らしてあげたいところですよね。

ほかにもgoogleが検索結果の表示順位を決定するアルゴリズムに
サイトの応答速度を取り入れているといったこともあるようなので、SEO対策的にも重要。

その点をふまえながら今回の結果をあらためて見ると
まだまだJPEGが有効な場合もかなり多くて
使い分けが大事だなと改めて思いました。

やっぱりこれからも画質とファイルサイズとにらめっこしながら
用途に合わせて使い分けていく必要がありそうです><

透過を含むPNGはImageOptimなどを使うとかなり恩恵が受けられるので絶対に使っていきたいところ。

今のところ、最近作ったサイトでは

Fireworksで画材作る→全部書き出す→書き出した画像のフォルダ内の画像をいっぺんにImageOptimにドラッグアンドドロップ→アップロード

という感じでやっています。

修正が入ったパーツは、時間があれば個別にImageOptimにかけてあげてアップロードしてます。

いろんな状況での向き不向きをきちんと頭に入れて書き出しをして
できるだけ手間をかけずにファイルサイズダイエットを身につけていきたいです☆

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか?[2011年7月現在]

みなさん、Web用の画像の書き出しって最近どう使い分けしていますか??
自分の状況や知っていることなどをまとめてみたのですが、
私はこうだよ、とかこれは間違ってるよ!などありましたら、よかったらご意見ください!!^^

みなさん、Web用の画像の書き出しって最近どう使い分けしていますか??

私がWebデザインをはじめたころはIE6が全盛期だったこともあり、
あまり透過PNGを使うという選択肢がなかったのですが、
jsなどでコーディング時に対応できる手法が出てきた頃から
透過PNGを多用するようになりました。
(ちなみにDD_belatedPNG.jsというのをよく使っています)

また、昔は一部のガラケーでGIFに対応していなかったり、
PNGに対応していなかったり…なんてこともありましたよね。

それで自動的に選択肢が決まっていたり…など。

いろいろと状況が変わった今、
改めて画像の書き出し形式について考えてみました。

自分の状況や知っていることなどをまとめてみたのですが、
間違っていることや古い認識もあったりするかもしれないので
これは間違ってるよ!などありましたらご指摘いただけますと幸いです><

それぞれの画像形式の特徴など

PNG 特徴 PNG-8、PNG-24、PNG-32の3種類がある。
フルカラーに対応。(PNG-24/PNG-32)
アルファチャンネル使用可。透明度を指定した透過画像を作成することができる。(PNG-32)
可逆圧縮式。
ファイル単体でのアニメーションの作成はできない。
PNG-8で同条件で書き出した場合、GIFに比べ容量を小さくできる。
向き アイコンやロゴなど比較的解像度の小さな写真など
不向き 古い機種にも対応させなければいけないガラケーサイト:一部古い携帯電話ではPNGをサポートしていないものがある
IE6に対応必須の場合:
IE6以前の古いブラウザでPNG8以上の透過PNGに対応していない(※jsなどでコーディング時に対応可能)
GIF 特徴 アニメーションを作る場合や
背景を透過させたい時に使用されることが多い。
1色の透過はできるがアルファチャンネルは使用できない。
1つのファイル中で使うことができるのは256色まで。
向き アニメーションGIF作成時
PNGが使えない状況でのベタ面の多いイラスト、ロゴなど
不向き サイズの大きな写真等を含む画像の書き出し時
色数か256色以上使われている写真等の書き出し時
JPEG 特徴 大きな画像や色数の多い写真などを使用する際に使用することが多い。
画像圧縮形式(不可逆圧縮)。
圧縮率の変更ができるため、データサイズを調整することが可能。
圧縮率を上げすぎるとデータサイズは小さくなるが画質は劣化する。
向き 大きな写真など階調の細かい色数の多い画像
不向き アイコンやロゴなどの輪郭がはっきりしているもの(PNGやGIFのほうが優れているため)

PNGそれぞれの特徴と違い

PNG-8 8ビットカラー(256色)まで書き出し。透明色の指定可。IE6でもjsなどでの対応なく透過できる。
PNG-24 24ビットカラー(フルカラー)書き出し。透明色の指定不可。
PNG-32 24ビットカラー(フルカラー)にアルファチャンネル情報(8ビット)を付与した形式。
透明度情報を持つので画像の容量が大きくなる。
IE6で透過させたい場合、jsなどで対応が必要

※ご指摘いただいてPNG-24の部分を修正しました。
※間違いがあればご指摘いただけますと幸いです。

私の使い分けの現状

PNG-8 透明化があるロゴやアイコンで色数を256色以下に抑えられるもの
PNG-24 色数が256色を超える画像
透明化の必要がなく使用している色数が非常に少ないロゴやアイコン
(PNG-8よりPNG-24のほうが容量が小さくなるが場合がある)
PNG-32 デザイン的にどうしても透過が必要な色数の多い写真など
半透明の透過の表現が必要なもの
GIF 形式指定がある場合のバナー
アニメーションGIFバナー
ガラケーサイト用のロゴやアイコン
JPEG 写真全般。
背景に透過の必要がないもの
バナー(容量を押さえるためにFireworksでJPEGマスクを使って文字情報の部分だけキレイに書き出したりしています)

Fireworksでプレビューしながら
できるだけ一番容量が小さくてきれいになるものを選んで書き出しているので、
明確にきっちりこう!とわけている訳ではないのですが、
大きくわけると大体こんな傾向になっているような気がします。

みなさんはどのように使い分けていらっしゃいますか??

こだわりなどありましたら良かったら教えてください!!

しかしこんな風に分類してみたものの、
こだわってPNGやJPEGのいろんな圧縮テクニックを使って
ひとつひとつこだわって調整すると、JPEGがいいと思っていたものが
PNGでもっと軽く書き出せたりとかいろいろあったりしますよね…。
(私は、現状そこまでできていません…;;)

うーん。書き出し、未だに奥深い><

☆追記☆

いろんな方にご意見をいただきました。
ありがとうございます!
私と似たような状況の方や、PNG一択という方、まだPNGに抵抗があるという方、さまざまいらっしゃいました。

このあたりは答えがないのでホントに奥が深いですね。

自分でもまだ答えが出せていないので、
後日いろいろ書き出し比べてきちんと検証して新たに記事にしてみたいと思います。