エセWebデザイナーへの道:サイトの軽量化

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
エセWebデザイナーへの道

はーい、構成のカネコです。
そしてお久しぶりのエセWebデザイナーです。
この第5回をむかえるわけですが、薄々気づいてはいた当ブログカテゴリーの欠点を
ようやく文字化して伝えようと思います。

まず、ネタ自体の説明が難しい
これが最大の問題ですね。
そもそも書いている本人が詳しくないものを、
もっと知らない人が読んでも分かるようにするのは無理があるわけです。

次に課題が膨大すぎるわりに目に見える変化が地味
これは悲しさマックスですね。
Webデザインやコーディングなんて、日々進化を繰り返しているジャンルで、
10年前の知識なんて、今は通用しないぜ!なんて普通のことなんです。
その割に、知識があまりない人にとっては全然変化が分からないなんてこともザラ。
心がやられます。

最後は、ブログ更新のスピード感以上のことはやっている
つまり、ブログって週1ペースで更新担当がくるんですが、
実際には、ほぼ毎日何らかの更新作業をやっているんです。
だから、毎日こんな所が変わってるよ~的な報告ブログには出来ないということ。

以上のことから、このブログカテゴリーは無理がある!と判断しました笑
ってことで来週からは違うカテゴリーをはじめようかな~なんて思ってます。
詳しくは最後に書きます。
まずは予告してしまっていたので、課題はこなそうと思います。

まずどんなコーナーだったかと言いますと・・・

このコーナーではradioDTM企画構成のカネコが
立派な”エセWebデザイナー”として成長していくまでの過程を
毎週お届けします。

毎週テーマ(課題)を自らに課し、
それを克服していく過程と報告をしていきます。

*あくまでド素人が試行錯誤している様を書いていくため、
 間違いなどが多々あると予想されます。
 そういう場合は、コメント等で、ご指摘いただければ幸いです。

ってことです。

やめときゃよかった今週の課題は!!??
●サイトの軽量化に挑む

これは非常に重要です。
今は家のPCで有線LAN接続でネットサーフィンなんて時代じゃない!
みんなスマートフォンやらタブレットやらで、無線LANを捕まえて
悠々とネットを楽しむ時代なわけですね。

つまりネット環境が人それぞれ。
もっというとその場その場で条件が変わるのは当たり前です。

そんな時代に必要とされるホームページとは何か?
それは知りたい情報がスムーズに手に入れられるページではないでしょうか?
それには「軽量化」というキーワードは不可欠なんですね。

しかし、ひとことに軽量化と言っても、やり方はいろいろあります。
コードをシンプルなものに組み替えたり、
プレグインを導入したり・・・
まぁ説明に困ることこの上ないわけですね。

なので、今回扱う軽量化は、
「画像の軽量化」に絞ります!!

DTMのページに使われてる画像のほぼすべては、
以前紹介したAdobe社の「Fireworks」というソフトで作られているんですが、
それを導入した最大の理由は、
レイヤーを保持したまま画像保存が出来る!という画期的なシステムに魅かれたのですが…
これで作った画像データってとにかく重いのが難点。
*ピンときてない人は完全に開き直って無視しております。ごめんなさい。。。

だから、カネコのやり方としては、
①まずページの方向性、イメージが固まっていない状況では、
レイヤーを保持しつつ画像を保存して配置していく。
②固まってきたと思ったら、それぞれの画像を軽いものしていく。

という2段階を踏むようにしています。
②の作業を、画像作成編集ソフトでは「書き出し」といいます。
Fireworksで作業しているということもあって、
カネコが選んでいる書き出し形式は「PNG」(ぴんぐ)というもの。

これは1000万色以上の色が扱えるのに劣化がしにくく、しかも透過出来るというもの。
JPEG、GIFが当たり前だった15年前には考えられないくらい画期的な拡張子です。

ただ、単にこのPNGという形式で書き出せばいいというわけではありません。
どの拡張子でも同じことが言えるのですが、
普通に書き出したファイルのままでは、無駄が多いのです。

どういうこと?という人は絵の具を思い浮かべてください。

学校の美術の時間。
隣の席のクラスメイトがキャンバスをひたすら黒く塗りつぶしているとします。
そこであなたは彼に「何で黒一色で描いてるの?」と言うと、
隣の画伯は、
「馬鹿!ただの黒じゃないんだよ!こっちには青を強めに混ぜてるし、
こっちは少しだけ緑が入ってるだろが!」と怒ってきたとします。
でもあなたが見たら、どう見ても単なる黒一色にしか見えません。

実は、画像ファイルには同じことが起こっています。
人間の目では識別できないほどの微妙な色を表現してくれているんです。
ただ、実際は、そこまで細かい色分けというのは必要ないんです。
「黒だったら黒」
こんな風に割り切れれば、情報としては「一面に黒を塗る」という単純なもので済みます。

これを全ての画像データに適応すれば、
サイトの閲覧スピードは20~30%ほど早くすることも可能になる場合もあります。

そのためには、画像ファイルを軽くするためのソフトが必要です。

カネコが愛用しているのがこちら・・・

ImageOptim

Mac用のPNG/JPEGの軽量化ソフト
オフラインで使えて、画像を投げ込むだけで軽量化してくれるナイスガイ。

他にもあんまり使ってないけど・・・

ImageAlpha

とか、

PNG Compressor

・・・なんかもあります。

あと、PNGではなくJPEGのみですが、
オンラインサービスのJPEG miniなんかは相当便利です。

まぁあんまり軽量化させすぎると、明らかに画像が劣化してるのがバレバレになるので
やり過ぎには注意しましょう。

最近のDTMのページには、ほぼすべて軽量化作業済みの画像で組まれているので
リニューアル直後と比べると、スピードには歴然の差があるはずです。

でもこれは完全に目の見えない変化。
Webデザイナーって、表には出ない部分で相当細かい努力を積み重ねているんだなと
やってて知り、「俺は一生エセでいいや」と心に決めたカネコであった。

・・・・ね?キツイでしょ??笑
これは毎週無理ですよ。しかも軽量化したの自体は2ヶ月くらい前から始めた作業だし。

ってことで今回でこのカテゴリーは終わり。
何かしら大きなWeb変更点があったときのために消しませんが、
その時が来たら、またエセWebデザイナーとして可愛がってくださいませ。

【構成カネコ】

 

radioDTMインフォメーション

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Podcast新着

  1. 新方針のradioDTMのプロトタイプをお届け!7月から発表し、…
  2. 進化していこうとしているradioDTMの現状報告回!先…
  3. 特別企画!番組向上委員会!!配信は500回を突破。活動も丸10年を通過し、転換期を迎…
  4. 大阪からナードマグネットが再び登場!!今回は大阪のパワーポップバンド、ナードマグネッ…
  5. from逗子のHalf Mile Beach Clubが2度目の登場!逗子を盛り上げ…
PAGE TOP