link
special
radioDTM.jp site

blogトップへ

メルマガ登録へ

linksへ

公式バナーへ

Podcastへの登録と試聴

メールはこちら


link

play for japan

酒ト飯 イイダ

最近の記事
最近のコメント
最近のトラックバック
カテゴリー
アーカイブ
リンク集
カレンダー
Sun Mon Tue Wed Thu Fri Sat
 123456
78910111213
14151617181920
21222324252627
28293031   
<< October 2018 >>
プロフィール
検索
管理者ページ
RSS1.0
Atom0.3
<< コヤマリョウのSKY(サブカルクソ野郎)/漫画「敷居の住人」〜悩みと思いやり〜 | main | 配信後記#194/【ゲスト】ドン・マルティネス >>
エセWebデザイナーへの道:第5回「軽量化」
 
エセ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デザイナーとして可愛がってくださいませ。

さーて次回のから新カテゴリー開始!!!
その名も・・・

構成カネコの

週刊ブツヨクガイド」

この企画は、カネコが「いま欲しいもの」または「買って重宝してるもの」
そんなカネコの「物欲」にスポットライトを当て、
あなたの買い物ライフの手助けにでもなれば、これ幸い。っていう企画です。

まぁ前にこのカテゴリーでやっていた
「今週のお道具」もしくは「今週のガジェット」みないなものがメインになる企画です。

まぁステマステマうるさい世の中なんで怖い面もありますが、
金が入ってくれば、そりゃ嬉しいですよ!むしろお金くださいよ!!と言わんばかりに
「物欲」をむき出しに書いていこうと思ってます。どうぞよろしく



【構成カネコ】
JUGEMテーマ:インターネット

Posted by : radioDTM | エセWebデザイナーへの道 | 00:05 | comments(0) | trackbacks(0)
コメント









この記事のトラックバックURL
http://blog.radio-dtm.jp/trackback/982944