WCAN x CSS Nite 2009 SPRING レポート

画像 : WCAN 2009 SPRING

先週末にWCAN x CSS Nite 2009 SPRINGがありました。今回はCSS Niteとの共催セミナーということでセッション数も多めです。テクニックから仕事効率化、ブランディングまで幅広いレイヤーのお話を聴くことができました。

毎度のごとく名古屋国際会議場で。今回も過去最多の200名超の参加があったらしいです。前回が160名程度といことでしたので、どんどん大規模になっていってますね。

[SESSION-1] CSS3+jQueryで行こう!
益子 貴寛 さん (株式会社サイバーガーデン)

益子さんによるCSS3とそれに絡めたjQueryのお話。なんかCSSのテクニック系のセッションって久しぶりだなぁと感じました。

CSS3とJavaScriptで思い出されるのが、2006年のCSS Nite in Nagoyaでのヤスヒサさんのセッション「CSS3をJavaScriptで先取り実装!」でしょうか。当時「nth-childすげー!」といっていた頃からもう2年半ほど立ちますが、未だにCSS3を実務にときくとまだかな、という感があります。しかし、今回のお話のように:nth-child()のような一部の仕様はjQueryで簡単に実装できるようになったので、敷居はだんだんと下がっている気がします。

前置きは長くなりましたが、今回のお話は今すぐつかえるCSS3という切り口でのCSS3の話題です。結構駆け足でお話が進んでいったため、CSS3はどう書けばいいか、ではなく、CSS3(とjQuery)でどんなことができるか、というある意味オーバビュー的なセッションだったと感じました。

僕が気になったCSS3に関する部分を箇条書きで。

  • CSS3のブラウザサポート状況は、実は結構多い(Internet Fucking Explolerファミリ以外)
  • CSS3はcss3.cssのような別ファイルでの管理がいいよ
  • 今すぐ使えるセレクタやプロパティ
    • [attr^="value"]は印刷CSSで、:aftercontentプロパティと組み合わせて
    • hover時に背景に色を付けて画像などにopacityプロパティを設定することで、色が変わったような効果がでてメニューなどに使える。IEはfilter: alphaで対応。
    • border-radiusプロパティはデザインのアクセントに
    • text-shadowプロパティはグロー効果でも使える

特にopacityプロパティの使い方はすごく今風だなと思いました。これは今すぐ使えそう!
続いてjQueryに関することを。

  • IEで使えない:hover, :focusはjQueryでクロスブラウザ対応に
  • マウスオーバーにウインク効果を。fadeTo関数を使うことでリッチに表現
  • ロールオーバーはhover時にimg要素のsrc属性を直接書き換えることで実現可能
  • 他の人の拡張ライブラリを利用する場合はdocument.writeでJavaScriptの読み込みを書くとheadを汚さずできる
  • Google AJAX APIはいざというときがあるのでクライアントワークでは使わない方がいいかも

document.writeでJavaScriptの読み込みを書くのは初めて知りました。確かに後から追加するのが楽になるので便利かもしれませんね。どっちみちJavaScriptですし。

Bulletproofという発想

ここで、Bulletproofという考え方を説明されました。HTML, CSS, JSという順でピラミッドができており、上のレイヤーを組む際は、いかに下のレイヤーでの利便性をあげるか(つまりJSオフ時でのちゃんと伝わるHTML+CSS、CSSオフでも伝わるHTMLを心がける)を考えて設計しなくてはならないとおっしゃいました。

確かにこの通りだと思います。ただ、ロールオーバーの説明に入った際に、益子さんが現在は画像置換はあんまり・・・というような表現をされていたことが気になりました。確かにJSでのロールオーバーはどんどん主流になっていると感じますが、これってbulletproofの考え方に矛盾しているように感じてしまいます。

単なるテキストの画像置換はレガシーなのかもしれません。しかし、画像のsrc属性を書き換える系のJSロールオーバーは、JSオフ時に視覚的な変化をユーザに与えません。
僕の中では、メニューなどに見られる画像置換でのロールオーバーは、JSの役割ではなく、テキストリンクのhover効果と同列でCSSの役割と思っています[1]。実際のところ、ロールオーバーの処理では何が現在の主流(王道?)なのでしょうか?ちょっと疑問に感じました。そして質問する機会を完全に逃してしまいました><

リッチインタラクションの実現によるワークフローの変化

jQueryによる制作についてのまとめとして、

  • CSSセレクタの実装不備を補う
  • CSS3を先取り
  • リッチインタラクションを提供
  • 一方、見た目のリッチさではなく、ユーザに使いやすいかを考えなければならない

を挙げられました。これに伴ってワークフローにも変化が必要だとおっしゃいました。

  • UIデザインの提案力がアップした
  • デザインカンプの絵コンテ的は発想が必要に
  • プロトタイピング、モックアップがいっそう大切に

これは確かになぁと思います。今までのような、ガッとHTML組んで見せる方式ではなく、UIも絡むのでざっくりとしたものから少しずつ提案していく必要になってきているのですね。
リッチインタラクションもUIの一部なんだから、しっかりとした意図を持って用いなくてはいけないと感じました。

[SESSION-2] CSSレイアウト:IE 6対応のかんどころ
小林 信次 さん (株式会社まぼろし)

小林さんによる、わがままなInternet Fucking Explolerくん応対講座。CSS Niteの再演ということで、以前にスライド等はチェックしていました。
hamashunさんのついったー発言や、矢野りんさんの擬人化IE[2]で会場笑。ぼくは過去を棄てたIE8 beta氏が最高に好きです。

運用を考えてCSSハックを使うという切り口

今回のお話では、益子さんの「CSSハックは薬です」という言葉のもと、テクニックではなく運用時のコストを考えて利用するという切り口でお話を進められました。
例えば、CSSハックを使わないためにdiv要素が増えたりして運用時に困る、CSSハックによってXHTMLの見通しが良くなる、などの運用上のメリットが見込める場合には積極的に利用しましょう、とおっしゃいました。

また、CSSハックの使用法として、

  • スターハック
  • アンダースコアハック
  • 条件コメント

の3種があって、スターハックをオススメされていましたが、どうも海外のサイトをみているとie6.cssのような別ファイル化して条件コメントで読み込ませる、ような流れを感じる[3]のですが、どうなんでしょうか。ただ、条件コメントは「XHTMLに記述が必要かつ、MSは推奨していない」そうで、好ましくないと考えられるのは同感できます。

IE6対応「6つのド定番」

6つのド定番としてIE6のバグを紹介されました。上3つは後方互換モードでのみ出現するバグです。

  • 文字サイズのトラブル
    • px指定で文字サイズを変更できないので、%、em指定
    • table要素に文字サイズが継承されないので、tableにfont-size: 100%;で対策
  • ボックスモデルバグ
    • widthの上書きで対策
  • ブロックレベル要素のセンタリング
  • ボックスの自動拡張
    • CSS3のプロパティword-breakで対策
    • .url {word-break: break-all;}というように指定すればOK
    • overflow: hidden;
  • ダブルマージンバグ
    • display: inline;
  • hasLayout(floatやネガティブmarginなどによる)
    • zoom: 1;

僕はIE6のバグに出くわすとだいたいzoom: 1;やってます。また、現場で出くわすバグとその対策として、

  • 画像の一部が表示されない
    • padding-bottomを指定する
  • キーワードの横並べができない
    • display: inline;zoom: 1;の合わせ技
  • どうしてもなおんないときはむりむり帳尻合わせ

むりむり帳尻合わせしなくちゃいけない状況になるあたり、さすがIE6ということでしょうか・・・。

後半は非常に実践的な内容でかつ簡潔にまとまっていて、IEのバグを復習するにはかなりよいお話だったのではないでしょうか。

しかしながら、僕の関心はどうしてもこちらに向いてしまうのでした・・・。

正式版として真に覚醒した(と信じたい)IE8氏の姿が見たい。あーでもどちらにせよ昔どこぞやに繋がれてたプラグの跡がちらほら見えるんだろうなぁ。

Lightning Talks

今回のLightning Talksは事前に応募されていた3名の方が以下の内容でお話されました。

特にカラーデザイン勉強会の紹介は、はじめ映画の宣伝か何かかと思っていたら、映画(ヨーロッパの歴史もの?)の背景を汲んで出演者のドレスのカラーが選ばれてる、という流れにもっていき、最後にこんな内容を勉強会で話しているので興味があったらどうぞ、という素晴らしい話のもっていきかたでびっくりしました。

[SESSION-3] デザインビュー派? コードビュー派? Dreamweaverでのコーディング再点検
鷹野 雅弘 さん (株式会社スイッチ)

鷹野さんのDreamweaverの効率的な使い方から仕事の効率化のお話。前半は特にDreamweaverの話というよりもむしろライフハック的な、「ムリ・ムダ・ムラ」を省くためのテクニックのお話で面白かったです。

ムダを省くために、制作環境から気をつけることとして、

  • IMEはATOK最強、ATOK Syncでパソコン間で自分が育てた辞書を共有
  • モニタの明るさ、部屋の明るさ
  • モニタやフォント
  • キーボードやマウス

フォントのお話では、鷹野さんはCodaに同梱されているPanic SansをDwに設定しているとのことでした。僕はDroid Sans MonoskEditに設定して使っています。

これらはBitstream Vera Monoというフォントをベースとした派生フォントですが、他にもEspressoに同梱されているEspresso Monoや、DejaVuなどがあります。それぞれ微妙に違っていますが、どれも視認性が高く、コーディングにはもってこいのフォントです。ぜひお試しあれ。

また「コード入力のムダを省く」として、Dreamweaverのお話では、デザインビューを利用することによるコーディングの手間を省く方法などが紹介されていました。Dw使いではない僕には詳細は把握できませんが、デザインビューとコードビューの左右分割での作業はとても便利だなぁと思いました。

最後の方でお話されていた、環境やツールのテクニックで制作の効率化は図れるものの、Webで成果を出すためにはリアルに関わっていくことが重要、ということにはとても納得しました。あと、セッション頭のリラックス法などプレゼンのスタイルで学ぶところが多いセッションでした。

[SESSION-4] ブランディングの正体
古庄 正尚 さん (モンキーワークス株式会社)

モンキーワークスの古庄さんによるブランディングのお話。「ブランディング」というカテゴリのお話は多分はじめて聴いた気がします。難しいお話もありましたが、新鮮な話題で楽しかったです。

ブランディングの「正体」とは

まず、「Brand(ブランド)」という言葉はBurn(焼き印)という言葉から来ているのは知らなかったです。そして現在では、「他社との差別化を象徴する言葉」として使われています。
そして、「差別化」を表すブランドとは、つまり世間に勝手に作られるイメージの総体であり、Brandingとは、このブランドを戦略的に高めることを示す言葉だと説明されました。

つまり、真のブランディングは、絆を結び、そして絆を深めてファン・信者を増やすことである「ブランディングの正体 = 信者を増やす活動や仕組みづくり」であると述べられました。
特に、「信者」の文字を縮めると「儲かる」になり、信者を作ることが儲かることに繋がることを端的に表しているよ、という話は今後お客さんに提案するツカミとして使えそうだなーと思いました。

仕組みづくりの3つのアイデンティティ

次に、信者を作るための仕組みづくりに大切である3つのアイデンティティについて、モンキーワークスの業務を例に挙げながらお話されました。

MI(Mind Identity)
企業理念や企業の方向性の統一化
BI(Behavior Identity)
従業員の振るまいや発言、技術やサービスの統一化
VI(Visual Identity)
ロゴマーク等の各種ツールの視覚的表現の統一化

「統一化」という言葉がキーワードですね。
普段のWeb屋の仕事としては、3番目のVIを担当する部分が多いが、モンキーワークスでは、ヒヤリングなどを通してBIさらにはMIの統一化が必要である場合には、そちらも担当するとおっしゃっていました。

今回のお話の中で、個人ブランディングの重要性についても触れられていました。「個人ブランディング表」というものが参加者に配られ、下記の項目を埋めることで自分のブランドを確認しようというものです。ううーん、まさに言ってしまえば自己分析。今の僕の十八番です;-P

何者(ドメイン)
就活でいう 自己紹介
得意技・ウリ(コアコンセプト)
就活でいう 自己PR
保証(バリュープロミス)
就活でいう 自分の強み・長所
キャッチコピー(ステートメント)
これはそのまま
デザインコンセプト
就活でいう やりたいことの軸
ロゴ
就活でいう 証明写真とか自分を表している写真?

できれば就活前に聴きたかったお話だったなぁというのが個人的な感想です。笑

懇親会

これまで好例の世界の山ちゃんで。ある方が、この数ヶ月に一度の山ちゃんが中毒性を帯びてきている、とおっしゃっていてドキっとしました。僕も最近無性に山ちゃんの手羽先が食べたくなって行ったりしていたので・・・。

今回密かに期待してたトライデントさんの学生さんたちは、みんな未成年とのことで、結局懇親会でもお話することはできませんでした。勉強会でも話してる時間なかったし、残念でした。次回に期待。

久しぶりに益子さんや鷹野さんとお話できたり、一度社会に出て、現在スクールに通ってWebを勉強されている学生さんをお話できたり、もうすぐWCAN婚する2組の方とお話したりと、やっぱり懇親会は楽しい。
就職活動でも思ったけれど、やはりコミュニケーションの基本は人と人が対面して対話する、ということに尽きますね。インターネットを日々創っているWeb屋といっても、やはり人と話す機会は最も重要だと再確認しました。

  1. リンクでない画像の単なる変化のためや、リッチなロールオーバー効果をJSで実現することはともかく [back]
  2. この記事この記事参照 [back]
  3. 僕も最近はそういうやり方です [back]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA