『これからはじめるFireworksの本』とFireworksについて自分なりに思うこと

だいぶ前に頂いていたのにも関わらず、(ブログの更新が滞っているのと共に)長らく紹介できていなかったこちらの本のレビューを。

デザインの学校 これからはじめるFireworksの本 〔CS6対応版〕
#fc0 山本 和泉 藤川 麻夕子
技術評論社
売り上げランキング: 226,074

イベントやセミナー等々で、何かとお世話になったりご一緒させていただく機会の多い、#fc0のお二人が書かれたFireworksの入門書です。

そうです。タイミング悪く、開発終了のニュースが駆け巡ったあとの紹介になってしまいました。嗚呼……。
紹介が遅くなったどころか、こんなタイミングでのレビューで大変申し訳ありません。

Photoshopよりも身近な存在だったFireworks

元々、Web制作の仕事を始めた頃はコーダーだったので、Fireworksを使う機会と言ったら、スライスして画像を書き出す程度でした。あと、簡単なバナーの作成とか変更とか。
ただ、個人的に何かサイトやブログを作ったりする際は、必ず自宅のMacにインストールされたFireworksを使ってました。Photoshopも一応インストールはしてましたが。

何度か試してみたんです。ただ、自分にとっては敷居が高すぎて……。
結局Fireworksに戻ってきてしまうというか。

Photoshopのような多機能さはなかったけど、Webサイトのデザインに必要十分な機能が揃っているという意味で、自分にとって「丁度良い」アプリでした。だから、普段仕事で常用するアプリではないものの、愛着や思い入れのようなものは、そこそこあったりするのです。

1冊通じて、ワークフローの追体験

今回頂いた本では、Fireworksを使って簡単なサイトを仕上げるまで(HTMLやPDFとして書き出すまで)を、分かりやすい解説を元に体験できるような構成になっています。
Fireworksの機能を一通り解説することよりも、ワークフローの中でどういった場面でその機能を使うのかに重点が置かれているので、機能を網羅している訳ではありませんが、その後のサイト制作に応用が利きそうな印象を持ちました。
Fireworksの入門書、という体裁を取られていますが、サンプルの制作を通じて簡単なサイト制作のワークフローを追体験できるという意味で、「これからWebデザインの勉強を始めたい!」という人にオススメできる内容だと思います。

やっぱり「丁度いい」

今回、開発終了のニュースが出てから改めて、この本を読み返してみたのですが、自分がFireworksに抱いていた「丁度良い」という印象がより強くなる一方でした。
スライスの管理のしやすさ、とかマスターページとか、オブジェクトのシンボル化とか。
ここ1-2年はこの本も含めFireworks関連の書籍が何冊も刊行され、Fireworksを取り上げたイベントも度々開催されたりと、こういった良さが再評価されてきて印象がありました。

あと個人的にも、普段の仕事の中で、Fireworksの機能を上手く活用してワイヤーフレームやプロトタイプ制作ができないものか思案していたところでした。
また、Photoshopには無い「ページ」の概念があることや、ページ間のリンクが設定、共通したオブジェクトも管理しやすいですし、リンクを保持した形でPDFで書き出すこともできます。
プロトタイプ制作においても、「丁度良い」ツールだったんです。

普段、Cacooを使うことが多いのですが、どうにか上手いこと活用できないか…………と思った矢先のあのニュースでした。

過渡期だからこそ必要とされるツール

開発終了の一報があって以降、「インブラウザデザイン」といった手法から、Sketchといった代替ツール候補が話題になっています。様々なデバイスからサイトが閲覧され、様々なシチュエーションでサービスが使われている時代に、一枚のデザインカンプを起こし、それをまたコーディングし……というフローが時代遅れになってきていることは、しっかりと受け止めないといけないなと、思っています。

その一方で、Fireworksの「手軽さ」「丁度良さ」はむしろこれから生きてくるんじゃないか、とも思うんです。
デザインカンプベースのフローの中で必要とされなくても、プロトタイプ制作やパーツのデザイン等々で。

開発終了とは言われていますが、しばらくの間はバグフィックスされるようですし、Creative Cloudで引き続き提供されます。

この先どうなるかは分かりません。後継のツールが開発されている件については信じて良いものか分かりませんが、このまま過去のツールとなってしまうのは勿体ないというか、むしろ何かしら別の形ので展開ができなかったものか……と思ってしまいます。

ただ、この過渡期の中で、活用できる場面があるツールだと僕は思っています。
新たなワークフローを試すのと平行しながら、これまでの仕事を効率よく進めていくには「丁度いい」ツールだと思います。
これからはじめるFireworksの本」はそんなツールの適切な使い方を分かりやすく案内してくれるガイド役となってくれると思います。

CSS Nite in Ginza, Vol.44(アクセシビリティ/改正版JIS特集)とって出しレポート(速報版)

さきほど参加してきたCSS Nite in Ginza, Vol.44(アクセシビリティ/改正版JIS特集)の超ざっくりレポートをお届け。レポートというか、ただのメモ書きをそのまま載せてるだけなので、誤字脱字多めですので、予めご了承ください。

今回は、今年公示される見込みの『JIS X 8341-3:2010』がテーマ。2004年版とどのように変わるか、インフォアクシアの植木さんがじっくりと解説されてました。

これまでも改正版JISについては、何度かイベントに参加してきたのですが、あくまで改正の途中経過やコンセプトを理解するに留まっていた印象が強くて実際にどのように使うのか、正直イメージがわかなかったのです。

ただ、今回のプレゼンを拝見して、ようやく新しいJISをどのように使うのか理解できた気がします。原案を読んだだけでは正直難解なイメージが強かったんですが、関連文書との位置づけとか、全体の構成、どのような場面でそれらの文書を使うのか、がかなりハッキリした印象を持ちました。

あとは、早く実際に公示された文書を見ながら実装・検証してみたいです。

では超ざっくりとしたレポートをどうぞ

改正版JISについて

  • 改正版JISは5〜7月に公示の見込み(伸びる可能性も)

1:日本独自 VS 世界標準

  • 既存のガイドラインをマージした独自の仕様から、世界標準へ

【WCAG2.0に合わせる理由】

  • テスト可能(客観的に判断が可能、自治体の調達基準にも)
  • 特定の技術に依存しない(これからの技術やRIAに対応)
  • より広いユーザーニーズに対応(記憶障害や学習障害にも対応)
  • 同じ達成基準
    • WCAG WGのドキュメントをそのまま利用できる
    • WCAG2.0のツールをローカライズしやすい
    • 国ごとにガイドラインが異なるものが、JISに対応すればWCAGにも対応することに
      (※支援技術のレベルは国によって異なるが)
  • JISにしかないガイドラインがWCAG2.0に採用される (例:単語内のスペース・形や位置に依存etc)

2:指標 VS 達成基準

  • 2004年版は指標だったが、改正版は試験・評価可能な達成基準へ
  • これまで「十分な(コントラスト)」「見やすい(色)」などグレーゾーンが多く、人によって判断が様々だった
  • 明確な基準が示される
    • (例:コントラスト比 AA以上の場合 4:5:1 ※ロゴマークや装飾などは除く)
    • (例:背景音と主音声のコントラスト比 20db以上 ※Audacityでチェック可能)
  • 誰がチェックしても判定できる
【testable≠ツールで自動チェックできる】
ツールないしは人間による判断のいずれかで評価可能=自動化できるものは一部だけ(ただし自動化できるものは以前より増えている)

3:具体的な要件 VS 抽象的な達成基準

  • 2004年版にあったスクリーンショットやコードは一切無い<
  • 分かりやすかったが
    • (X)HTML+CSSに偏っている、例だけが正しい実装だと誤解される
    • 5年ごとしかJISは改正できないのに、2003-2004年当時の実装をベースにしてしまっていた
  • 改正版は要件だけに(その分抽象的で難しい)

4:規格票のみ VS 規格票 +関連文書

  • ・WCAG2.0と同じ構成に
    • 本文(=JIS)
    • Understanding文書…達成基準の意図・ユーザーへのメリット・事例・実装のリスト
    • Technich文書…1つ1つのテクニック詳細・テスト手順・判定方法
    • さらにHow to meetというクイックリファレンスも
  • 時間が経っても続けられる規格に
  • 規格=抽象レベルの高い記述
  • 具体例は関連文書で提供(WCAG2.0から全ての技術をカバー、Flash・PDFも)

例)「表組みをレイアウトのために使わない」=読み上げ順序が問題だったのに、テーブルレイアウトがNGだと誤解される
→改正版からは「意味のある順序に関する達成基準」「フォーカス順序に関する達成基準」(HTMLに限らず、Flash/PDFにも当てはまる)

5:必須・推奨 VS 達成等級 A・AA・AAA

  • ・WCAG2.0をそのまま使用
  • ・AAAはハードルが高いため推奨しない
    • 例)手話通訳を動画に含める
    • 例)拡張した音声ガイド(副音声で補助情報を提供し、ムービーをその度に停止)
    • 例)中学校レベルの読解力 etc
  • ・既存のサイトであればA、全面リニューアルであればAAを目指すのが妥当

6:例を参照 VS 関連文書を参照

  • 例示からUnderstanding文書へ
  • JISの達成基準を満たすことのできる実装方法=Sufficient Technique
    • HTMLやスクリプト、CSS、WAI-ARIA、SMIL、プレーンテキストに対応(今後、FlashやPDFも対応、SilverlightやHTML5も?)

【改正版JISのワークフロー】

  • まず達成基準を確認
  • Understanding文書で実装方法を確認
  • テクニック文書に沿って実装・検証

実際に利用者にとって利用可能であることを確認しなければならない。UAがサポートしていない方法では基準を満たしたことにはならない(例:longdec属性)

7:アクセシビリティサポーテッド

  • ・利用者の支援技術にサポートされていること
  • ・利用者が入手可能で、
    • 広く配布されているUAでサポートされている
    • 広く配布されているプラグインでサポートされている
    • イントラ等閉じた環境で利用可能なUAでサポートされている
    • 障害のある人がない人よりも時間労力をかけることなく入手できる

PC Talkerが見出しスキップをサポートしてないように、テクニックのサポートについて検証・統一見解をまとめる作業を進めている

※スキップリンクを今までは非表示にしている事例が多かったが、WCAG2.0では「常に表示」または「フォーカスを受け取った際に表示」となっていることに注意

8:JIS対応 VS 自己適合宣言

  • JIS適合の方法としては、JISマークと自己適合宣言(自分チェックして満たしていると宣言する)の2種類
  • JISマークは現時点ではハードル高いので、自己適合宣言が現実的

【自己適合宣言】

  • 試験結果を表示
  • ページ単位かサイト単位(全ページ/ランダム/ランダムじゃない選択)で表示
  • サイト単位の場合のページ数の指定は無し

※「自己適合宣言」で検索すれば、薬品などの事例が出てくる

9:依存しているウェブコンテンツ技術

  • 2004年版ではJSが無効の場合の代替コンテンツを用意する必要があった
  • 改正版では、場合によっては提供しなくても良い
  • 「依存している」場合、JSなどが有効になっていることが前提でOKに(ただし、それがアクセシビリティサポーテッドであることが前提)

10:第三者によるコンテンツの例外

  • Webメールの内容やブログのコメント、自動的に挿入される広告など、自分たちではコントロールできないコンテンツは例外にできる

まとめ

  • JIS適合≠アクセシブル
  • ガイドラインは全てのニーズを満たせない。世界中や様々な企業で同じルールを使うことが重要
  • JIS適合はゴールではない。情報サービスを提供するためのスタートラインに立つこと

制作・製作・作成?

「Web制作会社」とは良く言いますが、「制作」に似た響きの単語に「作成」とか「製作」があって、たまにこの3つのどれが適切なんだか良く分からなくなります。他人のスケジュールに、この辺の単語が混在してたり、人によって選択してる単語が違ったりして、たまに「ん?」と思うのです。

ページ作成?ページ製作?ページ制作?

この場合「作成」が一番しっくり来る気がします。でも、ニュアンスの違いはいまいちピンと来ません。なんか似たような意味に聞こえます。

…てか、そもそもどういう意味なんでしょうか。Macの辞書機能でちょっと調べてみました。

制作
芸術作品などを作ること。
製作
道具や機械などを使って品物を作ること。「家具を―する」
映画・演劇・テレビ番組などを作ること。プロデュース。制作。「記録映画を―する」
詩文・美術作品などを作ること。制作。
作成
計画や書類、また文章などを作ること。「予算案の―」「報告書を―する」
《保険業界で》社員が顧客の名を借りて契約を結び、保険料は自分が負担すること。

んー「作成」は明らかに違うとして、「製作」・「製作」はちょっと微妙に似てるというか…。少なくとも「ページ製作」「ページ制作」は違う気がします。そもそも「Web制作」って言葉が正しいのかすら考えてしまいます。芸術作品、なのかぁ…。

小さいことは気にするな(わかちこわかちこ)的なことなのかもしれませんが、妙に気になってしまう今日この頃です。

セミナーに参加する前に予習しといた方が良いかもしれない件

今朝「野菜たっぷり」って書いてあるレトルトの味噌汁を作ったら、正確には「麩とワカメたっぷり(ねぎもあるよ!)」でした。ネコゼです。

えー、新年早々、真面目なエントリーを上げてしまったが故に、それ以降ブログの更新が億劫になるといういつものパターンに突入しかけているので、軽めのエントリーをこまめにアップしていくことにします。

だいぶ前に『面倒くさがりやのあなたがうまくいく55の法則』という本を買って、そのまま積みっぱなしにするという面倒くさがりっぷりを発揮していたのですが、最近ようやく一通り読みまして、結構腑に落ちる話が多くて本に付箋を貼りまくってました。

で、その本の中の「法則48:面倒くさいから聞く前に調べる」という章があるんですが、ここでWeb制作系のセミナーやイベントに参加する時に参考になりそうなことが書いてあったので、ちょっと引用。

わたしは、初対面の経営者とお会いするときには、その会社のホームページをしっかりと読み、もし著者があるならそれを熟読してから、お会いするようにしています。

たったこれだけの「面倒くさいこと」をやっておくだけで、お互いの時間を無駄にせずに済むし、面会の中身をより充実したものにすることができるのです。

セミナーに参加するときも同じです。わたしは事前に必ず関連書籍を読む、ネットで下調べをする、などしてから参加するようにしています。

質問するときも、せっかくお金を払ってセミナーに参加するのですから、「ここでしか聞けない情報」を聞くようにしています。

ここで言ってるセミナーはビジネス系のものだと思うので、CSS NiteとかWeb制作系のイベントはとは性格が異なるとは思うのですが、とはいえ、ある程度下調べというか予習はしておいた方が良いのかもなぁ、と。

どうしても、初めて聞くような内容だと、スライドなり話なりを追いかけるので精一杯で、そのプレゼンに対する疑問とか考えとかをまとめるに至らないことが結構あって、イベント後に公開される資料を読み返しても、その資料に書いてある事以上の情報が思い出せなかったりすることもしばしば…。

そのセミナーでのトピックにもよりますけど、そこでどんな話を聞きたいのか、何のために参加したいのかを、予め明確にしておく作業は確かに必要かもなー、て思います。

で、そんなことを書きつつ、早速、明日 CSS Nite LP8に参加して来るのです。だいぶ時間は限られていますが、アクセス解析関連の本を何か1冊流し読みくらいはしておこうかなと思います。何分、なじみの無いトピックなので…。

Web Directions East:ワークショップ『上級 CSSスタイリング』に参加してきました

IMG_1016

怒濤のWeb系イベント4連発の1つ目は、Web Directions Eastのワークショップでした。

去年もEric Meyerのワークショップに参加させてもらいましたが、今回は"Transcending CSS"(日本では『Webデザイン プロフェッショナルワークフロー・バイブル 』というタイトルで発売中)の著者として知られる、Andy Clarkeのワークショップに参加させてもらいました。

今回は、ほぼCSS3にターゲットを絞った内容で、実際にAndyが手がけた事例を見ながら、このタイミングで具体的にどこでCSS3を使っていくのか、そもそも何故使うのか、細かく解説してくださいました。

CSS3の仕様に関しては、前回のWDEのカンファレンスでもワークショップでも触れられていたのですが、今回は完全に「実際に使うことが前提」で話が進んでいる印象を受けました。「遠い未来の話」ではなく、現在の話として捉えている、そんな感じがしました。

ちなみに、今年から同時通訳から随時訳(随時、WDEの菊池さんが補足をいれつつ翻訳してくれる)形式に変わったため、進行がゆっくりになり、かつ翻訳も丁寧で(同時通訳だとどうしても、技術的な説明が分かりにくくなってしまうので…)、非常に分かりやすくなってました。これはかなりありがたかったです。(去年はなんどか挫折しそうになったので…)

当日の内容をざっくりと

当日の内容をすべてレポートするにも、かなりのボリュームだったので(なんせ8時間もあったので…)、どんな内容だったか、概略だけまずはご報告。

みんながCSS Working Groupについて誤解していること
ブラウザベンダーが集まって仕様を作っているというよりも、ベンダー各々が欲しい機能を突き通そうとしている。W3Cはその調整役。仕様策定の中で新しい技術が生まれるのではなく、それはブラウザベンダーが推し進めることによる。
すべてのブラウザが同じCSSを実装される日は来ない
CSS3はモジュール化されていて、ブラウザベンダーがどれをいつ実装するかは自由=だから、仕様が決まってからみんな一斉に……なんてことは絶対に起きない。紙とWebは違うメディアであるということを社内外の人に理解してもらう必要がある。
ブラウザ・レンダリングエンジンの種類について
主にレンダリングエンジン別にブラウザを紹介。各ブラウザでのCSSの実装状況についても解説あり。モバイル端末のWebkitやGoogle Chromeの動向についても。
全部のブラウザで見栄えが揃っている必要はない
前述の通り、実装のタイミングはバラバラ。車の燃費や形が違うように、同じ見た目に作るのがデザインではない。ギークはブラウザの違いを見るが、世の中のユーザは一つのブラウザしか使ってない。違いに気付かない。
そもそもクライアントにブラウザごとの実装の違いについて十分に説明している?
CSS3:色について
"color: rgb(赤,緑,青);"といった色の指定や、HSL・RGBa/HSLa・Opacityについて解説。
RGBと比べたHSLの利点(数値だけでどんな色か分かる)や、RGBa/HSLaとOpacityの違いについても。
CSS3:背景画像について
背景画像の複数指定についてや、背景の拡大縮小・比率の設定、ボックスモデルの変更などについて。
CSS3:ボーダーについて
主に角丸(border-radius)について。border-radiusに対応してないブラウザでも、角ができるだけであって、レイアウトが大きく崩れるわけではない。
CSS3:影について
text-shadowやbox-shadowについて。影を重ね合わせることで立体的な表現が可能に。
CSS3:カラムレイアウトについて
新聞のようなコラム分けをWebで実現できる方法(css column)について。
CSS3:グラデーション
画像を使わずCSSのみで可能なグラデーションの設定について。background-imageの値として設定することで、複数のグラデーションを重ね合わせることも可能(複数の背景画像が指定できるから)。
CSS3:マスクついて
マスク効果について。
CSS3:変形・動きについて
移動や拡大・回転・ゆがみの設定が可能に。さらに変形にかかる時間や、アニメーションのタイミング・ディレイも設定可能。ここで、まるでFlashのような動きをするデモを見せられて、自分、完全に言葉を失いました…。
JSを使ったブラウザ間の違いサポートについて
IE7の開発に着手した際、IE7.jsがそのまま参考にされた、という話があるようにブラウザを作るのはベンダーだけじゃない、自分たちだけで拡張できるようになった。
今回は「Modernizr」というライブラリを紹介。ブラウザがどのプロパティを実装していないのかHTML要素にclassを付加する形で返してくれるので、実装していないものについては別のスタイルを当てることが可能に。
Universal Internet Explorer 6 CSS
IE6を切り捨ててしまうと、表示が大きく崩れる=その会社が駄目になったととらえられてしまう。でも、企業はIE6対策のために予算を確保している訳ではない。
そこでタイポグラフィだけでもこだわったスタイルをIE6向けに用意することで、壊れた印象を回避する試みが"universal-ie6-css"。
デザイナーへのメッセージ
多くのデザイナーは勇気が足りない、頭の中で問題を大きくしてしまっている。まずは意見を言ったりトライする必要がある。最近2-3年でWebがエキサイティングになってきた。チャレンジする良い機会だ
クライアントに対して自分が何をしているか説明すべき、ブラウザの見た目が同じである必要がないことを伝えるべき。
デザインにPhotoshopは必要ない
AndyはPhotoshop上でデザインはしない。ブラウザ上でいきなり組み始めてどんどん調整する。
背景にグリットを置いて、まずは要素をおいて、タイポグラフィを組み、その後にレイアウトに入る。
クライアントに進捗をリアルタイムで見せる。どれだけ仕事が進んでいるか見せられるし、いきなり完成形をみせて驚かれることがない。

「当たり前」の環境を疑え

今回、いちばんの収穫は、「今この段階でなぜCSS3を使って良いのか」その根拠がようやく理解できたこと、に尽きます。

結局ブラウザによって実装のタイミングも種類もバラバラで、仕様の策定のプロセスも、1つの仕様をみんなで検討するというよりも、互いの利害を調整しながらのもの。
だからこそ、今後「どのブラウザでも同じ見た目に」はどんどん難しくなる。それよりも、そのブラウザでより良いものを提供する、ブラウザ間のちょっとした違いは当然ある、という考え方が必要。

その仕様が固まり実装されるまでのプロセスから、「同じ見た目にする必要はない」ということについて解説されていたので、ようやくこの考え方について納得がいきました。

「同じ見た目にする必要はない」という考え方は、これまで、いろんなイベントで話を聞きましたし、Web上でも何度も話題になりました。でも、どうしても「理想論」的なイメージが強かった。「結局、IEがサポートするまで、待ったほうが現実的で正しい」、と正直思っていました。

でも、「すべてのブラウザが同じCSSを実装される日は来ない」とAndyは言い切った訳です。当日。そうなると、「IEがサポートするまで、待つ」ことが(今は正しいとされていても)いずれ正しい選択ではなくなるのかもしれません。

AndyがCSS3を実際に使っているサイトは、どれもIE6で大きく崩れることはないそうです。でも、先行して実装しているブラウザでは、たとえばhoverでDVDのディスクか回転して出てきたり、Flashのアニメーションのようにポップアップが表示されたり、そのブラウザだからこそ可能な演出がなされていました。

どういったプロパティを使用するのかは、その人のセンスやアイデア次第だと感じてます。表現の幅が広がったとはいえ、それで何を表現するか発想できなければ意味がない。そこは単にデザイナー・コーダーという分業ではなく、コラボレーションが必要だと思います。Andyはだからこそ、ブラウザでいきなりデザインを始め、リアルタイムに調整を掛けながらメンバーと進捗を共有する、という手法を採ったのだと思います。

ワークショップの中でなんどもAndyが繰り返していましたが、企業はIE6対策のために予算を確保している訳ではありませし、そのつもりもない。この経済状況で、お金も時間も限られている中で、その企業の目的を実現させるために、どのようにそのお金や時間を有効に使うのか。その際にIE6で同じ見た目に合わせることが、どれだけの意味を持つのか。

Andyは何度もクライアントと一緒に考え、説明すべきだと主張されてました。結局、そこを考えることを避けてきたのが、今自分が働いている現状なのかもしれません。

今、当たり前とされている状況や環境を当然と考えるのではなく、自分から考え行動しないことには状況は変わらない。それは、ディレクターやプロデューサーという立場に限らず、デザイナーやコーダー・マークアップエンジニアにも言える話なのだと感じました。

周りの環境をいきなり変えることは難しいと思います。Andyのようなワークフローを実践してる会社はごく少数でしょう。でもまずは自分の足下を見つめ直し、そこを疑い、どうすべきなのか考えることから始めようと思ってます。それは無駄には終わらないと思います。

怒濤のイベント・セミナー4連発、を終えて(レポート予告編)

この前の火曜日から、Web制作系のイベントを立て続けに4つも参加してきました! たぶん、1週間で参加したイベントの数としては、自己最多。おかげで、会社を2日もやすむはめなりました。本当はこんなに詰め込むつもりは全くなかったのですが、気付いたらこんなことに……。

参加したイベントは以下の通り。

2009年11月10日(火)
CSS Nite 4周年記念イベント(Vol.40 reprise)
2009年11月11日(水)
Web Directions East(ワークショップ)『上級 CSSスタイリング/Andy Clarke』
2009年11月11日(水)
デザイン勉強会 2nd
2009年11月13日(金)
Web Directions East(カンファレンス)

最近、イベントのレポートを怠りがちなんですけど、今回ばかりは絶対にまとめないと!と思ってます。ここ何度か、自分のこれからの仕事についてエントリーを載せましたけど、正直考えがだいぶ変わりそうな気がしてます。それくらい、内容が濃かったですし、考えさせられることも、自分と同じ立場の人達と共有したいことも沢山ありました。

初めてCSS Nite(初期)に参加した時の気分に似てるというか…。イベント中、何度も「自分もなんとかせねば!」って思ってました。別に何か作りたいものがあるという訳でもないのに。

という訳で、参加したイベントのレポートを随時アップしていくので、気長にお待ちください。

CSS Nite LP6に参加しますよ(予告編)

はいどうも、こんばんは。

えー、エントリーのタイトル見て、「他のブログでも何度か見掛けてるけど、またアレ?」と思ってる方。そうです。アレです。事前に紹介エントリー書いて、かつ、事後レポートをアップすると受講料が割引になる、アレですね。…それはさておき。

6月27日(土)に開催される、CSS Nite LP6に参加します!…という話です。

CSS Nite LP, Disk 6「CMSリベンジ編」(2009年6月27日開催)

実はここ最近、CSS Niteはレギュラー回でさえ、なかなか足を運べずにいたので、今回はひさびさの参加です。

今回は、「CMSリベンジ編」ということで、国産のCMSを取り上げる内容になってるそうです。すなわち、CMSとしてよく使われてるMovable TypeとかWordPress以外のCMSについて丸1日掛けて検証しようって訳です。

個人的に、MTやWordPressについては触れる機会があるので、ある程度は分かっているものの、それ以外の選択肢についても知っておかないと、と思ってました。というか、お客さんにCMSの導入を提案するにしても、手持ちの選択肢が2つだけってどうよ? と。

自分がお客さんに直接提案しないにしても、ディレクターから「こういうことをしたいんだけど、丁度良いCMSってある?」って聞かれたときに、最適な提案ができるんだろうか、とも思ってた訳ですよ。はい。

ちょうど、SOY CMSaBlog cmsが一部のブログで話題になってますし、MT・WP以外の選択肢をちゃんと知る良い機会だなと思って、今回このLP6に参加しようと思ったのですよ。

詳しくは後日レポートします

ここまで書いといてなんですが、LP6、すでに定員に達してしまったため現在はキャンセル待ちだそうです。その前に定員をかなり増やして、それでもあっという間に席が埋まってしまった模様です。

なので、「興味があるけど、キャンセル待ちって…」という方もいらっしゃると思いますんで、ちゃんとイベント参加後、レポートをアップします。

国産のCMSは、MT以外の選択しになりうるのか、どんな案件やどんな規模のサイトに適しているのか、このイベントで見極めたいと思ってます。

………この、イベント前にエントリー書くのって、結構良いかもですね。(ここまで書いたんだから、真剣に話聞かないと…、って気分になってきた)

『マイクロフォーマット』出版記念セミナーと「Swap Skills」に参加して思った事を取り急ぎ…

金曜日に開催された『マイクロフォーマット』出版記念セミナー、そして土日連続で開催された「Swap Skills for The Happy Web Weekend」と3日連続でイベントに参加してきました!

1つ1つ細かくレポートしていきたいんですが、とりあえず、参加して思った事を書き残しておきますよ。

参加して良かった!

まず、いきなりですが、コレに尽きます。 正直、「マイクロフォーマット」にしろ、「CSS3」にしろ、「HTML5」にしろ、「普及するのは当分先の話でしょ」とか「普及するかどうか保証がないのに、今実装してどうするの」とか思ってました。

よくある「Web標準のためのワークフロー」とか「現場で役立つ最新テクニック」みたいな、「現場で」「すぐ使える」類いのテーマではなかったので、ちょっと、どこまで期待していいのか微妙に思ってたところもあったんですよ。もちろん、海外から著名な方が来日される!直接話が聞ける!という気持ちもあったんですが。

それが、参加してみたら、……いやいや、すごく満足度の高いプレゼンだったのですよ。

すごく良いプレゼンを聴けたイベントは、帰り道に必ず「自分、これからどうしていこうか…。ていうか、このままでいいのか…。」みたいなテンションになり、軽く凹みます。軽く凹んでいるのは良い兆候です。イベント的に。

未来をどんどん先取りしよう!試そう!

で、じゃあ、何がそんなに良かったかっつー話ですが、未来だ未来だ言ってた話は、もう足下に広がってるってことが実感できたってことです。

CSS3は最新のブラウザ(ベータ版含む)ではかなり実装が進んでいるし、マイクロフォーマットも、米Yahoo!でSearch Monkeyというサービスが始まったり、Firefox3でAPIレベルで実装されていたり、徐々に明るい材料が揃い始めていたりするんです。HTML5にしても、最近動向が追えてなくて良く分かってなかったけど、いや、これはちょっと凄いわって思いましたよ。

そして、それらを「いつか使える日が来るといいね」ではなくて「もう、ガンガン使っちゃおうぜ!」というのが、John Allsopp氏が繰り返し言ってたことだと思うんですよ。

CSS3を先行実装しても、古いブラウザに悪影響は及ぼさない。最新のブラウザに向けて異なる効果を与えても、情報は失われない。より良い視覚を提供できるにこしたことはないじゃない……と。

John Allsopp氏と名刺交換した時に、"I love CSS3!!"って言ってたのが妙に頭に残ってます。プレゼンの時のテンションの高さといい、ホントに好きなんだなと。自分の仕事に情熱を持ってるんだなと。圧倒されました。

何のために仕事をしているか、誰のために仕事をしているか

「Swap Skills for The Happy Web Weekend」の締めのプレゼンでの一言。(※同時通訳聴きながらのメモなので、間違いがあったら指摘してください)

どこにいようとも何をしようとも、Webはそこにいる。この5年間でそうなっていく。 今の楽観的な考えを維持して、ラップトップ上のウェブではなく、どこにでもあるウェブを想像していてください。

今、自分が仕事をしている理由は、自分の人生に何らかの意味付けをしたいから。 Web・仕事を通じて、自分の生活をよりよくしたいし、人々の生活をよりよくしたい。

自分って、目先の事で頭がいっぱいになりがちで、「何のために、誰のために仕事してるの?」ってことは、結構ないがしろにしてるのかなって思いました。マイクロフォーマット等々の話もそうですけど、もっと前を向いて、仕事を通じてどんなことをしたいのか、Webを通じて何をしたいのか、無謀な事でも良いから思いを巡らしていいんだなと思いました。

もちろん、今手持ちの仕事をスムーズに進めることとか、目先の問題を解決する事も大事ですし、それをどうでもいいなんて言えないですけど、それ以外の事も忘れちゃだめだし、もっと、わくわくする未来を想像してそれを現実に引き寄せるために仕事をできたら、それは素敵なことなんじゃないかって思います。

セミナー・イベントはただ知識を得るための場所ではない、と思う

イベントを通じて良い刺激が得られるってことは、ホント大事なんだなと思います。

それこそ、新しい知識を得るなら、ウェブ上にいくらでも情報はあります、やろうと思えばいくらでも学べると思うんです。でも、生でプレゼンを聞いて、直接本人と話して、他に参加された方とその内容について話すことは、こういうイベントでしか得られないって思うんですよ。

なんだかテンション高めに書いてるので、明日の昼くらいに後悔しそうな内容になってそうなのですが(※過去の傾向より)、参加できてよかったです! …あと、「ランチパーティー微妙」みたいなこと言ってすいません!むしろ懇親会とか打ち上げよりも良かったです!(参加者がほぼ全員揃ってるなかで名刺交換とかできるし)

11月に何やら大変なイベントが…

まだオンラインでの告知が無いので、先取りでご報告。

John氏が主催している「Web Directions」というイベントが、11月8日から11日という日程で日本に上陸するそうです。(当日、東京ミッドタウンと発表がありましたが、変更になる可能性が高いとのこと)

すでに一部のスピーカーが発表されたのですが、そのメンツが大変です。鳥肌立つとか、そういうことです。分かる人は立つと思う。こんな方々です。海外から、この規模で日本にやってくるのは前代未聞なんじゃないかと!

  • Eric Meyer
  • Dan Cederholm
  • Jeremy Keith
  • Jeffery Veen

さらに、日本からもスピーカーが参加。HTML・CSS関連のセッションと、JS関連のセッションが予定されていて、カンファレンスが2日・ワークショップが2日、計4日間行われる予定とか。

詳細はまだまだこれから決めていくみたいですけど、かなり楽しみです!

「リセット用CSSを使わない」ことが流行ってる(らしい)理由

ちょっと前の話になるんですが、先月参加してきたCSS Niteで、大藤幹さんが「Web Designing」の連載で海外のサイトをチェックしていて分かった傾向として、こんなことを挙げられてました。

CSSのリセット

リセットしているサイトは、 昨年12月号より0
英語圏を除けば、約1年間から0

これって、個人的にはすごいショッキングなデータだったんです。てっきり、ブラウザのスタイルをリセットするのが主流だと思ってましたから。しかも「0」。

ただ、なぜ「ブラウザスタイルのリセット」が流行らなくなっているのか(少なくとも海外では)、その根拠が良く分からないでいたのですが、先日"No CSS Reset"という、そのものズバリな記事を発見。
それによると…。

"The problem I've had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns out, I'm perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to have bolded text."

え、えーっと、超英検準2級レベルの読解力で解説しますと、「せっかくブラウザ側でデフォルトのスタイルを持ってるのに、そのスタイルをばっさり切ってしまうのはもったいなくないか?」って具合でしょうか。「そのブラウザ側のスタイルが邪魔」という理由ででてきたのが、リセット用のCSSだった訳ですが、いつの間にかこういう流れになってた訳ですねぇ。…で、さらに。

"One of the principles I took away from the Web Standards community was the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear. With CSS and progressive enhancement, it was okay that things might look a little different from one browser to the next because of variations in what they supported."

「どのブラウザでも同一の見た目にするのは、テーブルレイアウト時の負の遺産」「若干ブラウザ間で見た目に違いがあってもいいじゃない」…ってことでしょうか。

個人的には、既存のテーブルレイアウトとCSSレイアウトが混在するようなレイアウトの場合(リニューアル時に、一時的にヘッダーとフッターだけCSSレイアウトに移行する場合とか)に、リセットCSSが何かと表示の不具合の原因になることが多かったので、それが理由かなと思ってたんですが、もっと根本的な話っぽいです。

ブラウザ間の見た目の違いよりも、ブラウザが既にもっているスタイルを有効利用しよう、という考え方なんでしょう。たぶん。

CSS Niteで大藤さんもおっしゃってましたけど、単に「流行ってるから」という理由でその手法に飛びつくのではなくて、自分の案件・サイトにどのようなメリットがあるか考えて、最適な手法を選択すれば良いのかなと思います。

だから、画像置換にしろ、リセットCSSにしろ、CSSハックにしろ、なぜそれを使うか・使わないか、っていう根拠というか思想がマークアップエンジニアには必要なんだなと思った次第です。それについて、1つブログのエントリが書けるくらい。最近、lightboxやスムーススクロールが邪魔、みたいなエントリーが話題になってますけど、要は何のためにそういう手法を選択したか、って話なのかなと。

英文の解釈が間違ってたらすいません…。

取り急ぎ、追記

思いのほかコメントやブックマークを頂いていて、若干テンパっているネコゼです。

取り急ぎ追記なのですが、別に「リセットCSSを使わない事を薦めてる」訳ではないので、その点ご了承を。…って説明が足りないよって、話ですよね。失礼しました。

当日の大藤さんのプレゼンでの説明で、具体的にどういう話があったかというと…

リセットCSS
最近は見かけない(!)。 連載で取り上げたサイトでは、英語圏以外では1年前くらいからゼロ件。 ただしこれは、一括してリセットしていないという意味で、marginとpaddingだけはリセットしたり、必要な箇所だけでリセットしているサイトはあるとの事。 でも、本当に全くリセットしていないサイトもあって、そのサイトはブラウザによって若干の表示差異はあるとの事。

CSS Nite in Ginza, Vol.23のまとめ | Blog hamashun.com

…ということで、「リセットCSS」の定義がごっそり抜けてました。スライドだけの引用だと、だいぶ誤解される内容でした。これも失礼しました…。(あと、ブックマークのコメントでも指摘を頂いてますけど、リセットCSSを使わない理由として、「ブラウザに負荷を掛けない」って意図もあったかなと)

「デザイン勉強会」に参加してきました!(総括)

さて、総括です。…といっても「その1」で総括的なことを既に言っていたりするので、改めて何か描かなくても良い気もしますが、……でも総括します。

とにかく、感想は「よく、ここまでのイベントができたなー」ということに尽きます。

だって、twitterって、その名の通り、みんながあちらこちらで囁いてる(呟いてる)訳ですよ。そんな小さな小さなやりとりが、どんどん密になり、このイベントの開催までに行き着くって、心から凄いなと思うし、不思議にも感じます。

mixiのようにコミュニティが存在してる訳でもないですから、みんな、followしてる人から見聞きして、イベントの存在を知り、そこからさらに広がって、結果として3−40人という人数の参加者が集まった訳ですよ。

これは単に「twitterすごい」って話ではなくて、まめこさん始め、準備に携われたみなさんのつながりあってこそであったり、そのつながりを支える信頼だったり、そういう所の「すごさ」なのかなと。

懇親会では早くも「プログラム勉強会」とか「マークアップ勉強会」とか、いろんな話が出てました。

これからも、もっと、こういう草の根で、というか自然発生的な勉強会がどんどんあると面白いし、どんどん参加してみたいです。そして、それが東京だけじゃなくて、いろんな場所で起きるといいなぁと。それをUstreamで配信して、チャットで参加するとかも面白そうだし!

「デザインへの抵抗がなくなった」ことは「その1」で話したとおりです。仕事じゃなくても、仕事につながらなくても、「何か自分で作ってみたい」と思った時に、それにトライする楽しさが味わいたいなと感じてます。何から始めるかは考え中ですけど、…何か試してみたい。うん。何か試してみたい。

とにもかくにも、参加できて良かったです!主催・運営されてた皆さん、当日参加されてた皆さん、お疲れ様でした!

中の人、ご紹介

制作会社でマークアップ芸人、改め、うっかりIA(自称)をやってます。CSSとかHTMLとかでもご飯食べてます。気が弱くて省スペース設計。でも小言が多い、環境に優しくない32歳です。

過去のイベント出演暦