ThursdayエセWebデザイナーへの道はーい、構成のカネコです。お久しぶりのエセWebデザイナーです。この第5回をむかえるわけですが、薄々気づいてはいた当ブログカテゴリーの欠点をようやく文字化して伝えようと思います。ネタ自体の説明が難しいこれが最大の問題ですね。そもそも書いている本人が詳しくないものを、もっと知らない人が読んでも分かるようにするのは無理があるわけです。次に課題が膨大すぎるわりに目に見える変化が地味これは悲しさマックスですね。Webデザインやコーディングなんて、日々進化を繰り返しているジャンルで、10年前の知識なんて、今は通用しないぜ!なんて普通のことなんです。その割に、知識があまりない人にとっては全然変化が分からないなんてこともザラ。実際には、ほぼ毎日何らかの更新作業をやっているんです。毎日こんな所が変わってるよ〜的な報告ブログには出来ないということ。以上のことから、このブログカテゴリーは無理がある!と判断しました笑ってことで来週からは違うカテゴリーをはじめようかな〜なんて思ってます。詳しくは最後に書きます。予告してしまっていたので、課題はこなそうと思います。どんなコーナーだったかと言いますと・・・このコーナーではradioDTM企画構成のカネコが立派な"エセWebデザイナー"として成長していくまでの過程を毎週お届けします。毎週テーマ(課題)を自らに課し、それを克服していく過程と報告をしていきます。間違いなどが多々あると予想されます。いう場合は、コメント等で、ご指摘いただければ幸いです。やめときゃよかった今週の課題は!!??●サイトの軽量化に挑むこれは非常に重要です。今は家のPCで有線LAN接続でネットサーフィンなんて時代じゃない!みんなスマートフォンやらタブレットやらで、無線LANを捕まえて悠々とネットを楽しむ時代なわけですね。ネット環境が人それぞれ。いうとその場その場で条件が変わるのは当たり前です。そんな時代に必要とされるホームページとは何か?それは知りたい情報がスムーズに手に入れられるページではないでしょうか?それには「軽量化」というキーワードは不可欠なんですね。ひとことに軽量化と言っても、やり方はいろいろあります。コードをシンプルなものに組み替えたり、プレグインを導入したり・・・まぁ説明に困ることこの上ないわけですね。以前紹介したAdobe社の「Fireworks」というソフトで作られているんですが、それを導入した最大の理由は、レイヤーを保持したまま画像保存が出来る!という画期的なシステムに魅かれたのですが...これで作った画像データってとにかく重いのが難点。*ピンときてない人は完全に開き直って無視しております。�まずページの方向性、イメージが固まっていない状況では、レイヤーを保持しつつ画像を保存して配置していく。�固まってきたと思ったら、それぞれの画像を軽いものしていく。いう2段階を踏むようにしています。�の作業を、画像作成編集ソフトでは「書き出し」といいます。Fireworksで作業しているということもあって、カネコが選んでいる書き出し形式は「PNG」(ぴんぐ)というもの。これは1000万色以上の色が扱えるのに劣化がしにくく、しかも透過出来るというもの。JPEG、GIFが当たり前だった15年前には考えられないくらい画期的な拡張子です。このPNGという形式で書き出せばいいというわけではありません。普通に書き出したファイルのままでは、無駄が多いのです。いうこと?という人は絵の具を思い浮かべてください。隣の席のクラスメイトがキャンバスをひたすら黒く塗りつぶしているとします。「馬鹿!ただの黒じゃないんだよ!こっちには青を強めに混ぜてるし、こっちは少しだけ緑が入ってるだろが!」と怒ってきたとします。あなたが見たら、どう見ても単なる黒一色にしか見えません。実は、画像ファイルには同じことが起こっています。人間の目では識別できないほどの微妙な色を表現してくれているんです。実際は、そこまで細かい色分けというのは必要ないんです。「黒だったら黒」こんな風に割り切れれば、情報としては「一面に黒を塗る」という単純なもので済みます。これを全ての画像データに適応すれば、サイトの閲覧スピードは20〜30%ほど早くすることも可能になる場合もあります。そのためには、画像ファイルを軽くするためのソフトが必要です。カネコが愛用しているのがこちら・・・ImageOptimMac用のPNG/JPEGの軽量化ソフトオフラインで使えて、画像を投げ込むだけで軽量化してくれるナイスガイ。Compressor・・・なんかもあります。miniなんかは相当便利です。軽量化させすぎると、明らかに画像が劣化してるのがバレバレになるのでやり過ぎには注意しましょう。最近のDTMのページには、ほぼすべて軽量化作業済みの画像で組まれているのでリニューアル直後と比べると、スピードには歴然の差があるはずです。これは完全に目の見えない変化。Webデザイナーって、表には出ない部分で相当細かい努力を積み重ねているんだなとやってて知り、「俺は一生エセでいいや」と心に決めたカネコであった。・・・・ね?キツイでしょ??笑これは毎週無理ですよ。軽量化したの自体は2ヶ月くらい前から始めた作業だし。ことで今回でこのカテゴリーは終わり。何かしら大きなWeb変更点があったときのために消しませんが、その時が来たら、またエセWebデザイナーとして可愛がってくださいませ。構成カネコの「週刊ブツヨクガイド」この企画は、カネコが「いま欲しいもの」または「買って重宝してるもの」そんなカネコの「物欲」にスポットライトを当て、あなたの買い物ライフの手助けにでもなれば、これ幸い。前にこのカテゴリーでやっていた「今週のお道具」もしくは「今週のガジェット」みないなものがメインになる企画です。金が入ってくれば、そりゃ嬉しいですよ!むしろお金くださいよ!!と言わんばかりに「物欲」をむき出しに書いていこうと思ってます。Thursdayはい、カネコです。すいません、今週はWebデザイナーへの道はお休みです。細かい更新はしておりますので、サイト全体を楽しんでいただければと思います。あと今週日曜日はTHEラブ人間による「下北沢にて'12」が開催せれます。ThursdayエセWebデザイナーへの道はーい、構成のカネコです。第4回のこの企画になります。「radioDTM配信200回記念イベント特設サイト」のオープンをしました!!イェイ!リンク:radioDTM配信200回記念イベント特設サイト既にみてくれていると思いますが、この特設サイトは、前回のこの企画的に説明しますと、ヘッダーの下に、2段の段組があるタイプになります。これはhomeのページと比べると楽なもんですね。(実はhomeのページを作る前に、すでに特設サイトの土台は完成させていたりしてます)なるべく分り易く、清潔感のあるイベントサイトを目指してます。徐々に増えていく楽しみを感じて貰えればと思ってます。(イメージは、本棚に名著の背表紙が並んでいく感じ!)ってことで、ブログは遅れてますが、radioDTMのホームページ環境は、日々進化してます。今回はその「日々の変化」を分り易くする。いうことがテーマでもあるのでよろしく!さーて、まずどんなコーナーかと言いますと・・・このコーナーではradioDTM企画構成のカネコが立派な"エセWebデザイナー"として成長していくまでの過程を毎週お届けします。毎週テーマ(課題)を自らに課し、それを克服していく過程と報告をしていきます。間違いなどが多々あると予想されます。いう場合は、コメント等で、ご指摘いただければ幸いです。今週のお道具!!!毎週Webをデザイン、編集、更新する上で役立つであろう便利グッツを紹介するミニコーナーです。今回はその画像の元を揃えるための必需品である、カメラをピックアップ。写真によるイメージはホームページにとって非常に強力な武器になります。「百聞は一見に如かず」とは良く言ったもので、どんなに文章で説明しても、実物のイメージは伝えにくい。写真なら一発で伝わる力があります。写真をたくさん色鮮かやにレイアウトするだけで、サイトの持つ印象が変わるはずです。我々のサイトも目指したいところではありますね。N所謂「デジイチ」と言われる品。社長の家に眠っていたものを安く譲っていただきました。眠っていただけあって、結構年代モノではありますね。古くても一眼レフカメラはやっぱり良い!その理由は、1:レンズがデカいし、選べる。2:絞り、シャッタースピード、露出が細かく設定出来る。こんなところでしょうね。昔は大きいサイズの写真が撮れるとか、言われてた気がしますが、ぶっちゃけると今ではコンパクトデジカメでもかなりの大きさで撮れるのでそんなにこだわらなくていい気がしますし、Web制作の場合はRAW現像は関係ないですけど、やはり上に上げた2つのポイントは一眼レフカメラが一番ですね。型落ちのデジイチを一つもっておくのは手だと思います。●PC●ホームページ制作ソフト●画像編集・制作ソフト●カメラ以上の4つがあれば、かなりのホームページが作れると思います。編集ソフトだって、無料でそれなりに使えるソフトも探せばあります。あとは根気とセンスだと思いますので、皆さん、僕と一緒に頑張りましょう!!・・・ってことで今週のお道具はこれで終わり。News」ってやつです。Web業界では(たぶん)What'sNews=更新履歴を指します。もって実はもう作って運営しちゃってます。(↓図1)はい出来ました〜ってことで終わらせてもいいんですが、ここまでに至る経緯は結構苦労しました。「上下にスクロールさせる」という機能が選ぶことが出来るのです。それを利用して作ってみたら、角丸のボックス全てが適用されてしまいました。・・・いやいや、そうじゃないがな。俺がやりたいのはこういうことじゃい。(↓図2)うん、これですね。そこで考えられることは、やっぱり「段組」によるレイアウト。「スクロールさせたい部分と、そうでない部分を段組で分ければ良い」ってこと。そこで、実際に組んだ段組はこんな感じ(↓図3)この【A】【B】【C】を上下に組んで、【B】のみにスクロール機能を適用。実はもっと効率的な方法論があります。「WordPress」などのオープンソースを使った自動反映のシステムです。簡単にいうとブログみたいなもんです。記事を書くと、予め設定していた箇所に、記事のタイトル・公開日時などの指定した情報を自動的に反映してくれるというもの。・・・いずれはこれを利用したい。今はいちいちDreamWeaverで更新情報をタグで書き込んでそれをサーバーにアップするという手動方法をとっていますカネコです。