link
special
radioDTM.jp site

blogトップへ

メルマガ登録へ

linksへ

公式バナーへ

Podcastへの登録と試聴

メールはこちら


link

play for japan

酒ト飯 イイダ

最近の記事
最近のコメント
最近のトラックバック
カテゴリー
アーカイブ
リンク集
カレンダー
Sun Mon Tue Wed Thu Fri Sat
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>
プロフィール
検索
管理者ページ
RSS1.0
Atom0.3
エセ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)
エセWebデザイナーへの道:今週はお休みです
 

はい、カネコです。
すいません、今週はWebデザイナーへの道はお休みです。
細かい更新はしておりますので、サイト全体を楽しんでいただければと思います。
あと今週日曜日はTHEラブ人間による「下北沢にて'12」が開催せれます。
radioDTMチームも動きますので、是非ともご来場ください♪

【構成カネコ】


Posted by : radioDTM | エセWebデザイナーへの道 | 05:40 | comments(0) | trackbacks(0)
エセWebデザイナーへの道:第4回(更新履歴を作る)


エセWebデザイナーへの道

はーい、構成のカネコです。
遅れてすいません。第4回のこの企画になります。
まぁ全然働いてないわけじゃないんですよ!
リスナーや、ブログチェックしてくれてる人は分かっていただけていると思いますが、
「radioDTM配信200回記念イベント特設サイト」
のオープンをしました!!イェイ!



既にみてくれていると思いますが、この特設サイトは、前回のこの企画的に説明しますと、
ヘッダーの下に、2段の段組があるタイプになります。
これはhomeのページと比べると楽なもんですね。
(実はhomeのページを作る前に、すでに特設サイトの土台は完成させていたりしてます)

なるべく分り易く、清潔感のあるイベントサイトを目指してます。
ラインナップもバナーっぽいレイアウトにして、
徐々に増えていく楽しみを感じて貰えればと思ってます。
(イメージは、本棚に名著の背表紙が並んでいく感じ!)

ってことで、ブログは遅れてますが、radioDTMのホームページ環境は、日々進化してます。
今回はその「日々の変化」を分り易くする。ということがテーマでもあるのでよろしく!



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

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

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

ってことです。まずはこのコーナー・・・

今週のお道具!!!

毎週Webをデザイン、編集、更新する上で
役立つであろう便利グッツを紹介するミニコーナーです。
今週の"お道具"はこちら・・・

カメラ!!!!

前回は「画像編集・制作ソフト」を紹介しましたが、
今回はその画像の元を揃えるための必需品である、カメラをピックアップ。
写真によるイメージはホームページにとって非常に強力な武器になります。
まぁ「百聞は一見に如かず」とは良く言ったもので、
どんなに文章で説明しても、実物のイメージは伝えにくい。
でも写真なら一発で伝わる力があります。

また、写真をたくさん色鮮かやにレイアウトするだけで、
サイトの持つ印象が変わるはずです。
カネコの好みとしても、写真を品よく上手に使いこなすサイトは大好物で、
我々のサイトも目指したいところではありますね。

そんなカネコが使用しているカメラはこちら・・・



Canon EOS Kiss Digital N

所謂「デジイチ」と言われる品。
社長の家に眠っていたものを安く譲っていただきました。
眠っていただけあって、結構年代モノではありますね。
(発売日は2005年2月らしい)

でも、カネコの個人的な見解としては、
古くても一眼レフカメラはやっぱり良い!
その理由は、
1:レンズがデカいし、選べる。
2:絞り、シャッタースピード、露出が細かく設定出来る。

こんなところでしょうね。
昔は大きいサイズの写真が撮れるとか、言われてた気がしますが、
ぶっちゃけると今ではコンパクトデジカメでもかなりの大きさで撮れるので
そんなにこだわらなくていい気がしますし、
Web制作の場合はRAW現像は関係ないですけど、
やはり上に上げた2つのポイントは一眼レフカメラが一番ですね。

デジイチって型が古くなると、がくっと値段が落ちるんですが、
そうとう最新型の新しい機能を使いたいという人以外は、
型落ちのデジイチを一つもっておくのは手だと思います。
(*ただ、最近のデジイチは写真のみではなく動画撮影の機能も含んでいるため、
    動画を撮りたいという人は、やはり最新型の購入をオススメします)

さぁ、ここまで全4回のお道具をまとめると・・・
●PC
●ホームページ制作ソフト
●画像編集・制作ソフト
●カメラ


以上の4つがあれば、かなりのホームページが作れると思います。
今回のカメラに関しては、正直、iPhoneとかのカメラでも十分だと思いますし、
編集ソフトだって、無料でそれなりに使えるソフトも探せばあります。
あとは根気とセンスだと思いますので、皆さん、僕と一緒に頑張りましょう!!


・・・ってことで今週のお道具はこれで終わり。
さぁいよいよ本題です!

ということで今週の課題!!!
ひとつのボックスだけをスクロール出来るようにする!(=更新履歴を作りたい)

所謂「What's News」ってやつです。
Web業界では(たぶん)What'sNews=更新履歴を指します。
でもって実はもう作って運営しちゃってます。(↓図1)


はい出来ました〜ってことで終わらせてもいいんですが、
ここまでに至る経緯は結構苦労しました。

この更新履歴を作る上で、前回も紹介したCSSによる「段組」が活用されてまして、
実は段組によるブロックは、ブロック内に収まり切らない情報量の場合、
「上下にスクロールさせる」という機能が選ぶことが出来るのです。
それを利用して作ってみたら、角丸のボックス全てが適用されてしまいました。

・・・いやいや、そうじゃないがな。
俺がやりたいのはこういうことじゃい。(↓図2)


うん、これですね。
そこで考えられることは、やっぱり「段組」によるレイアウト。
要するに、
「スクロールさせたい部分と、そうでない部分を段組で分ければ良い」
ってこと。


そこで、実際に組んだ段組はこんな感じ(↓図3)




この【A】【B】【C】を上下に組んで、【B】のみにスクロール機能を適用。
あとは【A】+【B】+【C】をまとめて【news】というブロック内に収納すれば
更新履歴の出来上がりってわけです!!

・・・でもこのやり方は、かなりアナログな方法をとってまして、
実はもっと効率的な方法論があります。
それは「php」というもプログラミンを利用したもので、
「WordPress」などのオープンソースを使った自動反映のシステムです。
まぁ僕は全然詳しくないので、今後勉強していきたいと思いますが、
いま現在運営されている多くのホームページで採用されているシステムで、
簡単にいうとブログみたいなもんです。
記事を書くと、予め設定していた箇所に、記事のタイトル・公開日時などの
指定した情報を自動的に反映してくれるというもの。
・・・いずれはこれを利用したい。
今はいちいちDreamWeaverで更新情報をタグで書き込んで
それをサーバーにアップするという手動方法をとっていますカネコです。
頑張ります。


ってことで今回は終わり。次回の課題!!!
サイトの軽量化に挑む!

「重いぞradioDTM!」ってな感じなサイトなんで、次回は軽量化がテーマ。
さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 02:45 | comments(0) | trackbacks(0)
エセWebデザイナーへの道:第3回(CSSによる複数のdivタグをつかった複数段ページに挑む)


エセWebデザイナーへの道

はーい、構成のカネコです。
第3回も更新遅れましたね。うーん、今回ばかりは仕方ないんです。。。
何故ってそれはホームページをプチリニューアルしたから!!
皆さんもう観ていただけましたか??
まだの方のためにiPhoneでブラウジングした画像を貼ってみよう。



どや!だいぶ成長したエセWebデザイナーカネコの仕事は!?笑
まぁ全然まだまだなんですが、日々できることが増えている実感はありますね。
この「ホーム」というradioDTMのポータル的なページを使って、
これから少しずつ要素を加えていこと思っております。どうぞよろしく!

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

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

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

ってことです。まずはこのコーナー・・・

今週のお道具!!!

毎週Webをデザイン、編集、更新する上で
役立つであろう便利グッツを紹介するミニコーナーです。
今週の"お道具"はこちら・・・

画像作成ソフト!!!!

前回もソフトでしたが、今回も非常に重要なソフトを紹介します。
前回のWebオーサリングソフトの「Dreamweaver(以下DW)」は、
ぶっちゃけると必ずしも必要なソフトとは言えないと思います。
その理由は前回の記事にも書いたのですが、
要するに「ホームページとはコードの塊である」ということです。
DWはそのコードを打つ作業をサポートしてくれるソフトです。
これは知識と技術と根気があれば、自力で構築することは可能です。

ただ、画像を作るとなると話は別!!

画像って、ホームページを作る上で、非常に重要になる要素だと思います。
ページ彩りを加えることは勿論、より分り易く説得力を持たせる効果はやはり威力抜群。
このブログでもその理論は存分に使われています。

そんなカネコが最近頼りまくっている画像作成ソフトはこちら・・・




Adobe Fireworks CS6

よいさ!またしてもAdobe様の登場じゃ!
これはAdobe社が販売しているグラフィックソフトウェアひとつ。
Adobeさんと言えば、illustratorPhotoshopが有名ですが、
Webを作る場合だったら、カネコは絶対コイツをオススメします!

元々はAdobe社とライバル関係であったマイクロメディア社によるソフトでしたが、
最終的にはAdobe社が約34億ドルでマイクロメディア社自体を買収するという形で
Adobeソフトとして仲間入りを果たしました。

このソフトの特徴は、とにかくWebにおける画像作成に特化しているという点。
というかもはやWeb以外には全く向かないソフトです。
そもそもカラーの表現方法がRGBという、ディスプレイためのものしか用意されてません。
つまり、印刷用の色を作れないってことですね。実に潔い。

そんなFireworks(以下FW)は、分り易くいうと、
illustratorとPhotoshopが持っているWeb画像制作における便利機能を
いいとこ取りしたって感じのソフトになってます。
だから超細かいことは出来ないんですが、
これまでやっていたイラレ、フォトショの往復をしなくても
だいたいのことは出来る!って感じですね。
また、世界ではじめて「スライス機能」という技術を
搭載したことで一躍有名になったらしいです。
今はフォトショをはじめ、多くの画像編集作成ソフトが導入している機能ですが、
これのパイオニアだけあって、超強力。利便性抜群の内容になってます。

中でも一番わかりやすいのが、前回のDWとの連携ですね。
まずFWを使って作りたいサイトのデザインを画像として描いてしまいます。
それを「スライス機能」によってパーツごとにバラバラにしてやって
DWに指定させておいた画像用フォルダにぶち込むだけで、
すいすいサイトの構築が出来てしまいます。わーお。

あとカネコが最も驚いた機能が、「.fw.png」という拡張子。
これは最近よく使われている「.png」という画像データ用拡張子に
"まだ追加編集出来ますぜ"ということ。

どういうことかというと、今回リニューアルしたDTMのサイトですが、
上のほうに「PR枠」と書いてあるボックスが2つ並んでいますね。



これは単純に今後PRしたい事柄をこのボックスに埋める予定なわけですが、
まずはFWで必要な大きさでもって角丸のボックスを描いただけなんです。
それをDWでイメージ配置として「fw.png」の拡張子のボックス画像データを
指定してあげているんですが、
実は、この「PR枠」と書いてあるボックスをFWで編集するだけで、
そのままDWの方でも編集された画像をサイトに反映してくれるんです!!
・・・凄くないですか??
つまり、FWで大雑把なボックスをたくさん作って、DWで仮置きするだけで、
あとは少しずつFWでもって画像を作り上げていくだけで、
自動的にDWがサイトとして反映させてくれるんですわ。

これまでは画像ソフトで編集したデータをいちいちWeb用に書き出していました。
そんでもって「あっ!ここ誤字ってる!!汗」って間違いを発見したとしますね。
そうなるとまた元のデータを読み出して、編集して、またWeb用に書き出して、
それをサイトのサーバーにアップして、ソースコードに反映させて・・・
こんな作業をしてわけですが、FWとDWの場合だと、
FWのデータ保存拡張子である「fw.png」のまま保存しておくだけで
画像としても認識されるし、そのまま編集できるデータとしても保存されている。
ってこと!

このシステム考えた人はマジで天才だと思います。
この説明をするためにあえて「PR枠」って仮置きにしていたわけですね。
本末転倒(笑)でも本当に凄いんです。オススメっす!



・・・ってことで毎回長くなってしまってますが、今週のお道具はこれで終わり。
いよいよ本題です!

ということで今週の課題!!!
CSSによる複数のdivタグをつかった複数段ページに挑む!


勘の良い方なら既にお気づきでしょうが、何故この課題を選んだかというと
今回のプチ・リニューアルした「ホーム」のページを作るためでした。
社長の言う通り「仕事とブログを両立させようという魂胆」でございますね。

さて、書き出す前に、興味ない方にも前提として知っておいていただきたいのが
先週軽く説明した【CSS】ですが、
これにはサイトの枠組みを定める「段組」と呼ばれる作業を、
より構築しやすくする機能があります。

今回リニューアルした「ホーム」を例に説明します。

超単純にホームページのオーソドックスな段組を表すとこんな感じ(図1)



つまりA→B→Cと上から下へと重なっているわけですね。
それぞれの役割は・・・

●A(=ヘッダー。サイトの顔、タイトル的なこと)
●B(=コンテンツ。サイトの中身)
●C(=フッター。サイトの定形の情報。署名みたいなもの)

こんな感じですね。ほとんどのサイトがこの3つの要素を持っているはずです。

ただ、普通、サイトを作る場合は、この3つの要素をベースにしつつ、
さらに細かくしていくわけです。ちょっとこのブログを例に説明しますと・・・



こんな感じですね。
つまり(図1)の【B】のコンテンツ部分を左右に2分割しているわけです。

ここでポイントなんですが、
このCSSで設定する段組のボックスは、「中身を2分割に出来る」ということ。
エセWebデザイナー(見習い)のカネコはこの理論を元に、
「だったら3分割することも出来るんじゃね?」って単純な発想のもと、
今回の「ホーム」を考えたのですが、この「3分割」がクセモノでした。

あくまで"エセ"なので、詳しくはわからないのですが、
この段組は「ひとつのボックスの中に2つの小さなボックスを入れる」が原則らしいんです。
まぁ分り易く書くと「3つは無理!」ってこと。
強引にやろうとすると、3つ目がボックスの外にはじかれてしまいます。

でもって思考覚悟した結果、導き出した答えが、
2分割したボックスの中(片方)を、さらに分割してしまえばどうだろうか?ということ。

つまり・・・
まず一度、【B】の部分を【D】【E】に2分割します。(↓図2)




さらに・・・
図2で作った【D】のボックスを、【F】と【G】に分割するわけです。(↓図3)




どうでしょう?
こうすれば、表向きは【A】【F】【G】【E】【C】の構成になるはず(↓図4)




・・・いや〜長くなりましたが、こんな感じ作ったのが
今回のプチ・リニューアルになります。
厳密にいうと、今回の記事の理論「3つは無理だけど2分割をたくさんする」を
利用して、さらに細かく分割させて作りました。
【A】のヘッダーの部分だけでも7つのボックスで構成しています。

もっと効率のいいやり方はたぶんあるとは思うのですが、
少しずつ構造を理解して、自分のサイトでためしてみる。ということが
立派な“エセ”Webデザイナーへの道と覚悟して、今後も歩んでいこうと思います。
どうぞよろしくお願いします!!



さてさて、ようやく終わりました。次回の課題!!!
ひとつのボックスだけをスクロール出来るようにする!(=更新履歴を作りたい)

よし、これでいこう!頑張るぞい!!
さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 01:27 | comments(0) | trackbacks(0)
エセWebデザイナーへの道:第2回(IEの表示バグを克服する!)

はーい、構成のカネコです。
第2回にして早速更新遅れてしまいましたが、

エセWebデザイナーへの道

さーて、頑張っていきましょう。
どんなコーナーかと言いますと・・・
このコーナーではradioDTM企画構成のカネコが
立派な"エセWebデザイナー"として成長していくまでの過程を
毎週お届けします。

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

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


ってことです。そんでもって第2回にして早速の微調整なんですが、
先週「今週のガジェット」という名前をつけてコーナー内コーナーを
紹介したのですが、あんまり今後、ガジェットらしいガジェットを紹介するか
どうも微妙なので、名前を変更します。

今週のお道具!!!

うん、こっちの方がより“エセ”らしさが出ていいですね。
これでしばらく試してみようと思います。
ってことで今週の「お道具」はこちら!!!

ホームページ作成ソフト!!!!

先週はPCだったので、次はソフトになります。
カネコが使用しているのはこちら。



Adobe Dreamweaver CS6


Webに身近な人にとっては有名なソフトだと思います。
Adobe社が販売している(正確に言うと)Webオーサリングツールです。
"オーサリングツール”何だ!?って人のために、にわか知識で簡単に説明すると
プログラミング作業を簡易的にして、そこまでの知識、技術がない人でも
ホームページが作れるよってことですかね。

(後半に効いてくるので説明しておきますと)
そもそもの話ですが、ホームページっていうのは【HTML】という
専門テキストコード(=タグ)を打ち込むことによって構成されています。
これはプログラミングとはまた違うのですが、ほぼ同じだと思ってくれればいいです。
そして、2000年以降は、この【HTML】というコード情報と別に、
【CSS】というテキストコードを作り、
この2つを合わせて構成することが主流となっています。
(さらに【JavaScript】【php】【FLASH】などを組み合わせていたりします)

そして、カネコの場合は、高校生時代に友人のS橋くんから【HTML】の方のみの
知識だけ嚙らせてもらったのでした。
それが今現在、【HTML】以外の知識ゼロという環境を恨むはめになりました。

そこで、今回紹介したDreamweaverのようなオーサリングツールが必要となってくるわけです。
DWは【HTML】や【CSS】のタグを打ち込む際に様々なサポートをしてくれます。
「こんな風にしたいな」とか「こんな効果を加えたいな」などの要望に対して
適切なコマンドや、表示される位置関係などから視覚的に調整できたりなど
至れり尽くせりな機能で溢れてます。


が、しかし。そもそもの話なんですが、
実はホームページって、単なるテキストコードの塊でしかないので、
正直、専用のソフトとか無くても全然作れます。
だた、そこにはそうとうなコードの知識と理論が必要になります。
はっきり言って超大変です。
そういうの好きな人には全く苦ではないはずですが、
カネコの場合は、あくまで"エセ"なので、思いっきりDreamweaverに頼りまくっています。



・・・こんな感じで今週のお道具は終わり。
さーて、いよいよ本題!

ということで今週の課題!!!
●Windows IEでの表示バグを克服する

よし!これに挑んでみましょう!!
まずIEってのはMicrosoft社が提供している
Webブラウザのアプリケーション「Internet Explorer」の略ですね。
これはおそらく誰しも一度は触ったことがあるアプリのひとつだと思います。
かつてはWebブラウザアプリの世界シャア9割以上を誇っていたものです。

そんなIEさんが、Webデザイナーの方には、結構クセモノになっているようです。

何故かというと、Webブラウザアプリそれぞれで、表示する方法論(システム)って
微妙に違ったりしているらしいんです。(完全ににわか知識っす苦笑)
そんでもって、特にこのIE大先輩が独特の方法論を採用しているわけですね。
どういうことかというと、先程「お道具」のコーナー内でも書かせてもらいましたが、
今のホームページの主流は【HTML】と【CSS】の組み合わせで構成されているわけですが、
なんとIE先輩は、この【CSS】というシステムをかなり軽視し続けているらしいんです。

とあるブログに載っていた【CSS】の最新版である【CSS3】に対する
主要Webブラウザの対応表を貼ってみます。(図1)




笑。なにこれ。ヤル気あるんすか??
これが所謂「IEの表示バグ」です。
つまり、コードを打つ側に対して、使えない機能が満載のWebブラウザさんがIEなわけですね。
更に厄介なのは、そんな使えない大御所のIEさんが、今現在でも世界の6割の使用率を
しめているというのが、Web屋にとっては悩みのタネになっているようです。


そんな中で、このエセWebデザイナー(見習い)のカネコにも
この表示方法の違いによって起こるバグの恐怖が降りかかってまいりました。

そして、カネコを襲ったバグはこちら。
「何か画像が指定よりデガく表示されてるっぽいバグ」

・・・何これ怖い。
分り易く会社のWindowsを使ってスクリーンショットしてみたのがこちら。(図2)



先日、公開して大変好評な『新曲もってこい』の専用ページですが、
なんか変じゃないですか??

改行に違和感。つかこんな設定してないし。

下のアーカイブなんて、こんなんになってます。↓(図3)


・・・うん、怖いね。変な線が表示されてるし。

これって実はちゃんと画像の大きさを調整してあって、
ひと月で最大5アーティストのサムネイルが表示できるようにしておいたのですが、
これだとどう考えても4つまでしかはいらないですよね。

そりゃあ「これがIEバグってやつか!?」って絶望にかられましたよ。

そこで"エセ"なりに考えました。
「・・・これって画像がデカめに反映されてるのが原因じゃないか?」と。

そうです。つまり、複数の画像を横に並べて、幅がぴったりになる計算にしているのに、
その画像が、予定よりもデカく認識されたら、
(図2のように)勝手に改行されてしまうわけですね。

ここで、解決のヒントになったのが、図3で書いた「変な線」です。
「これって【HTML】を学んだときにやった"Border”ってやつではないか??」


で、結果論ですが、これが的中してました。
Borderというのは、画像の表示を指定したときに、
他との境目を分り易くするために表示される枠のことを指します。
そんでもって、基本的には画像に対しては使われないものです。

これがIEの場合、デフォルトで表示されて、
そのBorderを合わせたサイズで画像を認識してしまうらしいのであります!

・・・これは何という時代錯誤なんでしょうか笑

確かに昔は、画像を貼る際に、Border表示をさせない指示のコードである
<Border="0">ってのを打ち込んでいたことを思い出しました。

でも多くの画像で構成されているホームページを作る場合、
いちいち打ち込むのって本当に疲れる作業です。
それに、IE以外のブラウザの場合だと、
画像にはBorder="0"という認識をデフォルトでしてくれるっぽいし、
僕は先週にも書いたように生粋のMacユーザーなので、
普段使わないブラウザの対策ってだけで気分はげんなりなわけですね。。。


ただしかし!!!
ここで冒頭に紹介した【CSS】というシステムが効いてくるわけです。

まず【HTML】と【CSS】のそれぞれの違いについて説明しておくと
(これはあくまでカネコのオリジナルな見解です)
*プラモデルで例えてみます!
●【HTML】は、プラモデルの設計図
●【CSS】は、作る上でのセンスと経験値

・・・こんな感じだと考えます。

つまり、買ってきたプラモデルをただ設計図(説明書)を見ながら作ったら
基本的には、誰でも同じような形でつくることができますね。
だけど、そういうのって、なんだかのっぺりしてて、オリジナリティに欠けたりするもんです。

そうなってくると、プラモ上級者との違いってどこだというと、
センスと経験値なんだと思います。

要するに、【HTML】はホームページの枠組みをしていて、
そこに、【CSS】というシステムを導入することによって、
より他と差別化でき、さらにこれまでの経験値を活かすことができるというわけ。

例えば、プラモデルを作りだしたばかりの時って、色々な簡単なミスをしてしまいますね。
パーツの切り離しを雑にしてたり、ボディを洗わない状態でシールを貼ってしまったり、
スプレーの色を塗る時に、まず白で下塗りすることを怠ったり。
でも人は失敗から学んで経験をするものです。
次に作るときは、まずパーツを丁寧に洗って乾かし、慎重に切り離して組み上げ、
一度白で下塗りをした上にスプレーで満遍なく塗装をして、
十分に乾いてから、ピンセットなどを使って慎重にシールを貼るわけですね。

そういった、経験値、そしてセンスを、備忘録のようにしてメモしておく作業を
ホームページ構築の行う上で、【CSS】というシステムを使って行っているのではと
足りない頭で必死に考えだし、理解しています笑
(もっと正しい見解、説明があったらコメントなどで教えてください)



さぁ長くなりましたが、そんな【CSS】を使ってどう乗り切ったかというと、
要するに、以前のやっていた、画像を貼るごとにボーダーの非表示を指示していたことを
【経験値】として記しておくわけですね。

「いいか?このページでは、画像を貼るときにボーダーは基本いらないんだぜ」
ということをCSS上に書いておくんです。
そうするとどうでしょうか?僕の経験を活かして、
それ以降、全ての画像からボーダーは消えているようになるわけです。


そうやってCSSを書きなおしたものをIEで見るとこんな感じになりました。↓(図4)



うん、きちんと計算通り枠ピッタリに画像が並んでいますね。

アーカイブはこんな感じ↓(図5)



うん、そうだよ。これがやりたかったんだよ!!!!

いやー、長くなりましたが、何とか今週の課題はクリアできました。
もし、僕のように“エセWebデザイナー”として、同じような悩みに苦労されている方が
いらっしゃった場合、少しでもお役に立てれば、これ幸い。失礼しました。




ということで次回の課題!!!
CSSによる複数のdivタグをつかった複数段ページに挑む!

さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 17:49 | comments(0) | trackbacks(0)
エセWebデザイナーへの道:第1回(序章)

はーい、新コーナーでーす。
どうも、構成のカネコです。
映画もこっそり観てますが、それよりも今はWebじゃ!
ってことで今週から新コーナー・・・

エセWebデザイナーへの道


さて、どんなコーナーかと申しますと・・・

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

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

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



って感じです。
さらには、何事にも形から入る派のカネコなりに、
エセWebデザイナーになるべく揃えたガジェット紹介なんかも
おまけ程度にやっていこうかなって思ってます。


ではまず今週のガジェット!!!

何はともあれ、これがないとはじまらない
作業用PC!!!!

エセWebデザイナーが愛用してますPCはこちら



MacBook Air 11inch

スペックは以下の通り
モデル:2011 Mid
CPU:Intel Core i5 (1.6GHz)
メモリ:4GB
ストレージ:SSD 125GB

皆さんご存知、MacBookの最小最軽量モデル。
なんでこれをチョイスしたのかと言われれば理由は簡単で、
「持ち運びが苦にならないMac」ってところでしょう。

僕は自分のファーストPCってのが、
姉の知人から安く譲り受けた"iBook G4"だったのが影響しまして、
それ以降、Mac製品しか持たなくなりました。
つか正直な話、Windowsの使い方をよく知りません笑
ってことで相変わらずMac一択なんですが、
Macの弱点って、高い・デカい・重いってことだと思います。
つまり持ち運びには不向きなわけですね。
いくらノート型だからと言っても、会社や家に置きっぱなしという方も
Macユーザーには多いのではと思います。

が、しかし!
カネコは「せっかくのノートPCなら持ち運んでどこでも作業できなきゃ意味ないやんけ」
と思い込んでおりますので、以前はクソ重たいMacBook Pro 13inchをバックに入れて
持ち歩いていました。

そんな中での11inchのMacBookAirちゃんの登場には心躍りました。
SSDを採用ということなので、125GBモデルの登場と同時に借金して購入しました。

なんてったって1kgちょいですよ!!」
これならちょっとしたバックに楽に入れられることが出来ます。

まぁ弱点としては、
ストレージの容量が少ない・バッテリーの持ちが悪い・DVDドライバーがない
こんな程度でしょうね。

いやいや、相当条件悪いだろう!?って人もいるかと思いますが、
要するに、自分の作業スタイルと用途で、何を必要とするか?だと思います。
知人が新たにPCを選ぶ際にアドバイスをさせていただくことが何度かあるのですが、
「何を?いつ?どう作業したいのか?」ということを明確にイメージしておくことが
結構大切なんだと思います。

僕の場合だと、
SSDストレージはアプリケーションのみに割り振り、
その他のファイル保存は「Dropbox」などのクラウドサービスを利用。
あとはバックアップ用の外付けHDDが500GBもあれば充分。
バッテリーも電源アダプターを家用・会社用などと2個持ちしておいたり、
DVDドライバーの件も、逆に会社などに外付けDVDドライバーを置いておく方が
よっぽど効率的だと割り切ってます。

この11インチAirちゃんにより、マジでいつでもどこでも作業することが可能になりました。
あとはWi-Fiルーターなんかあればほぼ最強だと思います。
チームでWebを構築する場合、
いつどこで変更、編集、更新などが必要になる場合があります。(正確には今後予想されます)
そうなると、「いま家にいないから無理」とか「会社にPC置きっぱだよ」みたいなことは
ナンセンスですよね。

まぁいいこと尽くめに書きましたが、良くない点も多々あります。
一番は、Windowsの環境でのWebデザインチェックができないことですね。
Boot Campなどを利用して、仮想的にWindowsを動かすこともできるのですが、
これにはさらに金もかかるので検討中ですね。




さーてさて、今回は、ガジェットを中心に書いたのですが、
それには理由があります。
最後に書いた"Windows環境でのチェック"というのが、
いまカネコが抱えている最大のテーマだからです。
それを次回の更新までに克服したいと思います。

ということで次回の課題!!!
●Windows IEでの表示バグを克服する
になります。

さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 18:30 | comments(0) | trackbacks(0)