プロフィール

バジさん

Author:バジさん
 
所在 : 東京某所
職業 : Webディレクター
性別 : 男
 
課題 : 早起き
 
目標 : 株で生活

カテゴリー
推薦図書 その1

Webディレクション標準ガイド

■HTMLリファレンスなどと一緒にいつでも手の届く場所に置いておきたい一冊。
推薦図書 その2

Web標準の教科書

■全てのWebクリエイターに必携の書
FC2ブログランキング
ブロとも申請フォーム
35歳以上のための「Web2.0」
またもや更新が止まってしまいました・・・

W杯真っ最中のこの時期にプライベートがほぼゼロの状態でした。
終電かタクシーの帰宅がずーっと続いており、更新できず。
本日も休日出勤なのですが、職場からちょこっと。


読まれた方も多いと思いますが、こないだの『週刊東洋経済』(6/24号)に面白い特集が組まれていました。
中吊りで発見して、下車後すぐに売店で買ったのですが、

■ 35歳以上のための「Web2.0」

この特集がなかなか面白かったのです。別に20代が読んでも十分楽しめます。
まず引用すると、

Web2.0をどう理解するかは、まさに十人十色。
「ネット業界を元気づけるキャッチフレーズ」という人もいれば、
「単なる流行語」と切り捨てる人もいる。
 

このような入りからはじまり、Web2.0を理解するための7つのキーワードをあげています。
このキーワードには色々なくくりがありますが、ここでは以下の7つ。

【 7つのキーワード 】
1.グーグル
2.ロングテール
3.SNS
4.CGM
5.SaaS
6.マッシュアップ
7.ポスト2.0


これらのキーワードで1限から7限の時間割を作り、各時間を以下の方たちが解説していくわけですね。

【 Web2.0の時間割 】
1限 グーグル日本法人社長 村上憲郎(グーグル)
2限 アマゾンジャパン社長 ジャスパー・チャン(ロングテール)
3限 グリー社長 田中良和(SNS)
4限 フォートラベル社長 津田全泰(CGM)
5限 コネクティ社長 服部恭之(SaaS)
6限 はてな副社長 川崎裕一(マッシュアップ)
7限 ネオテニー社長 伊藤穰一(ポスト2.0)


面白そうなメンツじゃないですか!?

さらに特別講義が3つありまして、この特別講義がまた面白かったです。

エリートサラリーマンより主婦の方がWeb2.0の世界を理解している
(ようするにリアルの世界で恵まれている人は、ウェブの面白さがわからない、ということだそうです)

とか、日本の企業はウェブの怖さに気づいていない
(内容が優れていても、インターネット時代には生き残れない、コアコンピタンスを追求する経営が必ずしも成り立たない、ということだそうです)
とか・・・

『ウェブ進化論』が信じられない勢いで売れたことからも、新しいWebの在り方が注目されていることは間違いないでしょう。
正しい情報、誤った情報など様々な情報が飛び交うネット時代において、必要な情報を取捨選択する能力が求めらることは言うまでもありません。
Web2.0をどう捉えるかも自分たち次第ってことでしょうねぇ。
『週刊東洋経済』はまだ次の号が出るまで何日かありますので、興味をもたれた方は是非読んでみてください。

ただ、私自信はいろんな会社面接の場や、ディレクターとしてどうありたいか?のような問いには常に
「常に、新しいWebの在り方を意識し、新しいサービスを考えたい」
ということを言い続けてきています。

スポンサーサイト



知識の共有 | 【2006-06-24(Sat) 21:25:17】 | Trackback:(0) | Comments:(0)
自前サイトの「脱テーブルレイアウト」【編集後記】
無事に各ブラウザでうまく表示され、メデタシメデタシと思われた「脱テーブル工事」。

が、後日、会社のMacで確認したところ(自宅はWin)なんとMacIE5で表示が崩れているではないですかー!!
しかも表示されていない要素もある・・・
その他のブラウザはMacでもオッケーですが、これにはガックリです。orz
さらに宿題が増えましたねぇ。


自分が実制作していた頃はMacIE5が全盛期で結構苦労した記憶があります。
時間がない時はフルCSSではなく、旧来のきったないソースでごまかしたりしたことも。
当時はフルCSSで作ってあげるのはまだサービスっぽい感があったのですが、現在ではそうもいきません。

今はデザイナーさんからあがってきたソースをチェックする側ですが、その際、使う必要の無いテーブルが入っていたり、フルCSSでやっても難しくないだろ?ってデザインをテーブルで組まれたりしているとやっぱりガックリです。orz
テーブルだけじゃなく、ほんとにWeb標準とかを全く意識していない、もしくは意識しているが超中途半端な勉強嫌いのデザイナーさんもいるんです、実際。
逆にいちいち頼まなくても、ものすごくキレイなソースを書いてきてくれるデザイナーさんも当然いるわけです。

次回発注するとき、どちらに頼みたいか、という点だけみても、常に勉強をする癖がついていない人は自ら仕事を減らしていることになっています。
これはディレクターにも言えることで、納品先(クライアント側)に詳しい人がいてチェックされれば、いい加減なものを納品していれば同じことが起こるわけです。

ドッグイヤーと言われるこの業界にいる限り、常に勉強は怠れません。
とは言っても、日頃の業務に直結することを中心に勉強するのは仕方ないことです・・・
が、常に忘れないよう心がけたいと思います。
このブログなんかで偉そうなことを書いているのは、自分自身が忘れないようにするためでもあります。

デザイン・コピーの話 | 【2006-06-11(Sun) 00:09:16】 | Trackback:(0) | Comments:(0)
自前サイトの「脱テーブルレイアウト」(最終回)
前回の続きです。

こうなったら禁断(?)の絶対位置指定で!
これは細かなピクセル計算が正直面倒、でも今思いつくのはそれくらいなので。

まずは body 全体の margin と padding を見直し、各ブラウザ間で違いがないように統一。
(今見直すとこの辺、若干手を抜いていたところがありました。反省。)

すでにサイトタイトルやコンテンツ表示部分の位置は決まっているので、絶対位置で指定するのはリスト化したボタン群。
サンプルの図ではボタンは5個しかないですが、実際は14個ありました。

あ~、面倒、と思いながらも、ボタン画像の高さと余白を考慮しながら計算機で各ボタン左上の座標を決定。
計算上はこれで一番上のボタンの上辺と一番下のボタンの下辺が、右のコンテンツ表示部分とバッチリ揃うはず!

これはCSSの position:absolute で実現します。

で、これで完璧じゃろー、と思い表示チェック!
まずIE、おし、完璧!
おそるおそる他のブラウザでもチェック・・・、いやー完璧!
とは言わないまでもおおむねオッケー。

でも、やっぱり微妙に(ほんと1~2px)誤差は発生しました。
図でみると外枠があると思いますが、これもCSSで設定しているし、カウンターの高さが正確かどうか自信なし。
カウンターはISPのサービスを利用しているため、ローカルでは表示して確認ができないのです。
ということでカウンターの width、height属性を決定、これでバリデータでのチェックも点数が上がるだろう。

これにて自前サイトの「脱テーブル工事」は無事終了!
CSSをカットすると気持ちよく左に寄り縦一直線に!
バリデータでのチェックも無事90点を超えました。

ただし、宿題はできました。ボタンの高さを揃えるところですね。
絶対位置での指定はオススメできません。
なぜかというと、これはメンテナンスがめちゃくちゃ面倒になります。

例えば、今回も最後に各パーツの余白を微調整したわけですが、一箇所調整をおこなうごとにボタンの絶対位置を全て再計算しなければなりません。
これではビジネスの場においてはメンテナンス性が悪く最悪です。
今回はあくまでも個人サイトであり、数時間という短い工数であったための妥協ということです。

ただ、前にも話しましたが、このブログのように3列組にするくらいなら、今回苦労した部分は考えなくてもよいわけです。
普通に float で回し込んで余白の微調整をすれば終了です。
高さを完璧に制御しようとした結果、このように煩雑になりました。(しかもあまりよい例ではない)
意味のない画像とはいえどスペーサーの力は恐るべし!です。

以上で長らく続いた連載も終了です。
脱テーブルレイアウトをチャレンジしてみたい方の参考になれば幸いです。

デザイン・コピーの話 | 【2006-06-06(Tue) 00:44:40】 | Trackback:(0) | Comments:(4)
自前サイトの「脱テーブルレイアウト」(その5)
前回の続きです。

さてさて、ここからの微調整でやらなければならないのが、以下となります。
現状の(図4)と完成型の(図1)を比べてみてください。

CSSで回り込みした状態


(図1)の状態にするには以下のことをしなければなりません。

1.サイトタイトルとコピーライトをコンテンツ表示部の右端に揃える
2.リスト化したボタンの前に付いた「●」を取り除く
3.リスト化したボタンの前のインデントを取り除く
4.サイトタイトル上の余白を調整
5.ボタン左とコンテンツ右の余白を調整(センター余白はそれにより自動決定)
6.各ボタンの縦の配置を揃える(最下位ボタンの下辺をコンテンツ表示部に揃える)
7.全体的に各パーツの余白を微調整して完成

方法は必ずしも上記だけではなく、これはあくまでも僕がたてたアプローチ。
バリバリのコーダーさんならもっとうまくやると思います。

さらに、アプローチは同じでも、実際のコーディングはまた人それぞれだったりします。

最初の5つは margin やら padding やらを駆使して(リスト化した部分の対応も)すんなり終了。
問題は6つ目の縦の配置を揃えるところ。ですが、コンテンツ表示部分は幸いにも高さ固定。

しかし6は、時間がかかりました・・・

まず最初に、多くの人が普通に試してみるだろう、margin、padding を駆使しての余白調整。
僕もまずはやってみて、IEではキレイに揃いました!パチパチ~。

で、他ブラウザでの動作確認、Opera、FireFox、etc・・・全てでバラバラです。
ようはIE以外ではちゃんと揃って見えません。

予想していたことなので、次に無駄な改行コードをなくして誤差をなくして行こう!と。
結果、あ~、やはりそれでもダメかぁ。
もしかしたら、それだけでもちゃんとできるのかもしれませんが、なんせ工数がありません。
新たに調べてやってる暇はなし。
(後日に調べる!宿題ができました。)

自分の覚えている範囲でなんとかする方法はないか・・・

(最終回へ続く)

デザイン・コピーの話 | 【2006-06-04(Sun) 22:28:13】 | Trackback:(0) | Comments:(0)
自前サイトの「脱テーブルレイアウト」(その4)
前回の続きです。

話を戻して脱テーブル工事、まずは下準備です。

テーブル内に含まれているものを外に出すので、まずそれらをタグでくくってやる必要があります。
以下の(図3)のような形にまずしてみます。

テーブルを解除、タグでくくりなおす


本来不要なものは削除なので、当然スペーサーも削除です。
しかしスペーサーを無くしたことにより、後々予想以上の工数を発生させました。
ですが、やはりスペーサーを使うのはあまりにも美しくありません。

この時点ではCSSはまだ設定していません。
ここからCSSでテーブルレイアウト風に見せていくわけです。
個人的にはレイアウト済みのデザインからCSSをカットしてやって、ずらっと縦に各要素が並んでいくのを見るのは気持ちよいので好きです。

完成型は“自前サイトの「脱テーブルレイアウト」(その2)”で紹介した(図1)です。
これだけ余白バランスをデザインとして取り入れていると結構面倒なもんです。

CSSでテーブル風レイアウトを実現する場合のポピュラーな方法は以下のようなものがあります。

・float による回り込み
・position で絶対位置を指定


完成型は余白が多いのでどちらでやっても面倒ですが、今回は float での回り込みを選択。

では、どこをどう回しこむのでしょう?
って、(図3)を見れば簡単にわかってしまいますが、リスト化したメニューボタンのブロックとコンテンツのブロックを左右に並べてやります。
リスト化したボタン群とコンテンツ部分をそれぞれ div でくくってやりブロック要素とします。

このような時には div(ブロック)や span(インライン)はとても便利ですが、あまり div を使いまくったソースを書いていると「divマニア」とか言われたりするのでご注意を。

このブロックを float を使って左右に配置してやれば、一気に完成型に近づきました。
あとは(図1)に近づけるべくCSSでレイアウトしていきます。
ですが・・・、何気にここからの微調整が面倒なのです。
ブラウザ間によって微妙にCSSの解釈の仕方が違うのが問題です。

(その5へ続く)

デザイン・コピーの話 | 【2006-06-02(Fri) 00:28:53】 | Trackback:(0) | Comments:(2)
自前サイトの「脱テーブルレイアウト」(その3)
前回の続きです。

たいしたもんではないですが、現状のテーブルの答えです。

テーブルの表示


テーブルに画像をぶちこみ、余白などを完全に消す場所とそうでない場所を作ります。(図では見やすいように全ての箇所に余白が入っています。)
ボタンとボタンの間にスペーサーを置き、コンテンツ表示部分との高さをきっちり揃えていく方法です。

ということで、現状のトップページは画像とFlashのみをテーブルに詰め込んだだけ・・・
う~ん、とてもじゃないけど同業の方には見られたくありません。

一応当時から可能な限りCSSで、という方針でやっていたので、バリデータではそれなりに高得点が出ていますが、やはり意味のないテーブル使用(レイアウト目的の)は苦痛を感じます。

ここで少しWeb標準の話を書いてみますと・・・

HTMLのタグはどのように使ってもモニターで見た時キレイなら問題ないやん!
というのが少し前までは普通でした。
逆にそれを利用して、文章を表現するだけだったWeb上での表現を、これだけデザイン的なものにしてきたのです。

簡単に書くと・・・
適切な内容を適切なタグで囲む、見た目に関するデザインはCSSでおこなう!
これが現在の主流となっています。

これにより得られる恩恵は様々なものがあり、逆にWeb標準を無視することによるデメリットは計り知れません。

どのような恩恵があるか知らない人は自分で調べよう!
というか、知らない人は絶対調べてください。(仕事にしたい人は)
現在のWeb制作では無視できない大事なことばかりで、この知識ゼロで仕事をするなんてのは論外です!

僕は最近多いWeb標準信者でも脱テーブル信者でもありません。
よって、何がなんでもテーブルレイアウトを使わない、というのが絶対とは思いません。
が、できることならテーブルを本来の目的以外で使わないようするにこしたことはありません。
信者でなくとも、現在はWeb標準でアプローチするのが当たり前なのであります。

(その4へ続く)

デザイン・コピーの話 | 【2006-06-01(Thu) 00:50:40】 | Trackback:(0) | Comments:(2)
カレンダー
05 | 2006/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
月別アーカイブ
ブログ内検索
RSSフィード
最近の記事
最近のコメント
最近のトラックバック
リンク