Designer meets Designers 01 レポート
基礎から応用、そしてTipsまで。
CSSのノウハウを完全網羅!
web creators編集部とWEB STRATEGY編集部が贈るまったく新しいイベント、それが「Designer meets Designers（D2）」だ。記念すべき初開催となる今回は、これからのWebクリエイターにとって欠かせない「CSS」がテーマ。基本的なルールから意外なワザまで、たっぷり5セッション、5時間にわたってそのノウハウが披露された。
※本コンテンツ中の社名表記や肩書きなどは、イベント開催当時のまま表記されています。あらかじめご了承ください。
六本木ヒルズで幕を開けた
新しいイベント
そしていよいよ、第5回目のD2がスタート。
約5年にわたり、Webクリエイターの勉強・交流の場となってきた「Web creators Conference」が、今回から完全リニューアル。今までにないまったく新しいWeb系イベント「Designer meets Designers（D2）」として開催されることとなった。
場所は六本木アカデミーヒルズ。IT企業のビジネスマンやクリエイターなどが多く訪れる空間で、イベントホールのほか、会員制のライブラリやワークスペースが備えられていることでも知られている。洗練された空気と、地上49階のホールから広がる抜群の眺め。いままでのコンファレンスとは一味違った雰囲気に、参加者たちもみな興奮した様子を見せていた。
ちなみに当日は気温約35度という猛暑日だったにもかかわらず、ほぼ満席という盛況ぶり。多くのクリエイターたちが期待に満ちた表情で開演を待ちわびる中、まずは弊誌編集長の佐藤弘基が登壇し、開演のあいさつを述べた。
続いて、待ちに待ったSESSION1がスタート。ドリームラーニングの島根未央氏が壇上に上がり、CSSのもっとも基本的なルールをわかりやすい言葉で解説していった。そもそもCSSとはいったいどんなものなのか、そしてCSSのメリットとはどんなところにあるのか……。
意外と忘れがちな基本事項がていねいに説明されていき、ベテランクリエイターにとっては良いおさらいに、駆け出しクリエイターにとっては基礎の確認になった様子。
一方でCSSには、「ブラウザによって表示が変化してしまう」という大きなデメリットがあることもしっかりと説明された。
「CSSでWebサイトを制作している人がもっとも悩んでいるのが“ブラウザによる表示の違い”だと思います。ブラウザが変わるとそれだけで文字の大きさが違ったり、ひどいときはレイアウト自体が重なってぐちゃぐちゃになってしまったり……。こうした事態を避けるためにも、ブラウザによる表示の違いをきちんと理解し、事前にしっかり対策を立ててほしいなと思います。いきなりCSSでWebサイトをつくるのではなくて、まずは見出しのレベルや余白などの構造をしっかりと考え、簡単な画面設計図を制作する。こうして整理整頓したうえで実制作に取りかかるようにすることが大事です」こう語ると、続けてidやclass名のつけ方のコツや、Dreamweaverなどのツールを使う際の注意点など多彩なノウハウをレクチャー。
最後は「CSSの基礎を覚えたからといって、すぐに完璧なWebサイトがつくれるようになるわけではありません。これからもいろいろなトラブルやバグに悩まされることと思いますが、日々少しずつ勉強して、どうにかWeb標準の形でつくれるように頑張っていきましょう!」と、力強い言葉で締めくくった。
もっとも使いやすい
Web制作ツールは?
続くSESSION2では、フリーのライター、デザイナーとして活躍する矢野りん氏が登壇。「CSS生成ツールとしてみたDreamweaver CS3 VS. Expression Web」という非常に興味深いテーマで、講演が進められた。
まずは会場の参加者に挙手をしてもらい、DreamweaverCS3（以下、Dreamweaver）の使用者と、Expression Webの使用者を確認。いずれもごく少数のクリエイターが使用しているにとどまり、大多数の参加者が、現在もDreamweaver8以下を使用していることが判明した。これを受けて矢野氏は、手始めにDreamweaver、Expression Web、それぞれの商品を紹介。通販番組のような明るいノリで会場の笑いを誘いつつ、テンポよくそれぞれの特徴を解説していった。
一通りの紹介が終わったら、次はデモンストレーションにシフト。Dreamweaverのテンプレート機能を用いて、簡単なWebページを制作していく。軽快な操作でどんどんWebページができていき、会場の参加者たちも驚いた様子。特にDreamweaver未体験のクリエイターにとっては参考になったようだった。
「テンプレートを使うとこんなに簡単にCSSを用いたWebページができてしまうんです。しかも、テンプレートでつくったCSSのソースコードに、まるで先生のようなコメントが自動で挿入される。このコメントを参考にすれば迷うことが少ないですし、なにより勉強になるんですよね」Dreamwerverのポイントをこうまとめると、続いてExpression Webのデモを開始。
Dreamwerverと同様に簡単なWebページを制作し、手際よくDreamwerverとの違いを解説していく。「Expression Webの魅力は、生成されるコードの記述を確認しながら、ウィザード形式でスタイルをつくっていけるというところですね。ほかにも、idやclass名からピンポイントでスタイルへとジャンプできる点や、つくったスタイルをドラッグ&ドロップで簡単に移植できる点などポイントが盛りだくさん。一度書いたCSSの修正が手軽にできるのが魅力です」
Dreamwerverは“比較的小規模なサイトを勉強しながら制作する際”に、またExpression Webは“テキストエディタのようなインターフェイスに慣れている人が使うときや、他人が書いたCSSを修正する際”に、それぞれ有効。結局は使う人が、自分に合わせたツールを選ぶべきなのだろう。 「“DreamweaverCS3 VS. Expression Web”なんていう衝撃的なテーマを掲げてみましたが、結論としては、どっちがいいとは言いにくい。好みや仕事のスタイルに合ったものを選ぶことが重要なんじゃないかと思います」 矢野氏がこのようにまとめを述べると、参加者たちも納得した様子。DreamwerverとExpression Web、それぞれの魅力を認識し、「より自分に合ったツールを選ぶ」という視点を得られる講演内容だった。
マークアップのプロが語る
作業効率アップのコツ
10分の休憩を挟んで開始されたSESSION3に登場したのは、アイエイトワンの小林信次氏。数々のCSSコードを書き続けてきた、いわば「マークアップのスペシャリスト」だ。
「CSSのことを説明する前に、まずXHTMLの大切さを認識しておいてほしいと思います。よく書籍や雑誌の特集などで“XHTML+CSS”という文言を見かけますが、逆の“CSS+XHT ML”は見かけない。それだけXHTMLは優先度が高く、大切なものなんです。つねにCSSの前にあり、CSSを支えるのがXHTML。それだけ忘れないでくださいね」
こうマークアップエンジニアらしい前置きを述べると、いよいよ本題へと突入。「CSSの作業効率、生産性」を高める方法を、次々と披露していった。
「なかには使い慣れているテーブルレイアウトのほうがラクだという人もいるかもしれません。が、ルールを統一すれば大丈夫。CSSでWeb標準に従った美しいソースコードを書くには、とにもかくにも書式やプロパティコードを統一し、それを文書化してチームで共有することが大事なのです」こう語るように、小林氏自身も多くのルールをチーム内で取り決め、そして把握しているという。
「セレクタのあとに半角スペースを入れる」、「開始ブレイス（{）のあとで改行」、「プロパティの前にタブを入れる」、「値の前に半角スペース入れる」などなど……。いずれも基本的なことではあるが、こうしたルールを決めているか、決めていないかで、のちのちの作業負担が大きく変わってきてしまうのだ。
そのほかにも管理しやすいCSSの構成例や、必要と思われるルール・事柄が盛りだくさん。コーダーやデザイナーをはじめ多くのクリエイターが熱心にその話に聞き入っていた。
「自分たちでつくった“チームのルール”が頭の中に入っていて、すぐに使えるようになれば、あなたも立派なCSS使い。ぐっとスピーディに、効率よく作業が進められるようになりますよ。“面倒だからいいや”ではなくて、ぜひ明日、ルールをつくってくださいね」 こう語る小林氏。講演中何度も「先延ばしにせず、明日ルールをつくりましょう」という言葉を強調し、SESSION3を締めくくった。
ブラウザの互換性を保つため
すべきこととは?
SESSION4のテーマは「CSSデザインの落とし穴」。多彩なCSS関連書籍を著している、こもりまさあき氏が登壇し、CSSで陥りがちな悩みやトラブル、それを解決する方法をじっくりと解説していった。
「最初のSESSIONで島根さんもおっしゃっていましたが、CSSでもっとも問題になるのが、“ブラウザによってつくったページの表示が変わってしまうこと”です。だいたいの人はここでハマってしまい、苦しむことになる。だからといって、“問題のあるブラウザだからサポートしません”というわけにもいきませんから、表示の問題をできるだけうまく乗り越える方法が必要になってくるわけなんです」
こう語ると、表示の問題を回避・解決するための具体的な方法を次々とピックアップ。「CSSでデザインするならモダンブラウザを使う」、「シンプルなことから始めてみる」、こうした基本的なことをしっかり実行し、そのうえで「CSSによって起こりうる問題を知ることが大切だ」と説明した。
そのほか、多くのクリエイターが悩まされているInternet Explorer（以下、IE）に対処する具体的な方法や、IE7の特徴、起こりうるバグ、IEのプログラム内で問題を引き起こしていると考えられるhaslayoutの存在と操作方法、そしてブラウザチェックの方法などなど……。1時間強のSESSIONに「これでもか」というほどの実用的な情報が盛り込まれ、そこかしこで参加者がメモを取ったり、うなずいたりしている様子が見受けられた。SESSIONの終盤ではデモを交えつつ、CSSを使ったレイアウトのポイントを説明し、まさに至れり尽くせりの内容。
最後は「結局のところ、CSSに必要なのは応用力なんです。CSSが難しいのではなく、ブラウザの互換性を確保するのが難しいだけ。そのことをしっかり理解して、怖がらずに柔らかい頭で取り組んでいきましょう」というコメントでまとめあげた。
世界中の事例が
六本木ヒルズに集結する!
D2のラストを飾るSESSION5は「CSSデザインの『型』で見る視覚表現テクニック」がテーマ。多くのセミナーで講演活動を行うインストラクショナル・デザイナー、境祐司氏が登壇し、まずはCSSの歴史について軽快なリズムで紹介していった。
「CSSの歴史は意外と古いんです。僕が初めてCSSを使ったWebサイトを見たのが、1997年。アトランタオリンピックの公式サイトがCSSでつくられていて、その後初めて、CSSの関連書籍が出版されました。翌年にはもう構造化の話が出始めて、ビジュアルだけでなく情報整理やアクセシビリティなどの要素が求められるようになってきた。しかし結局、このときは、IEとネットスケープのブラウザ戦争による独自拡張仕様が原因で業界自体が混乱していて、CSSは広まりませんでした。そんな混乱期を経て2002年、WIRED NEWSのWebサイトが、しっかりとしたCSSレイアウトでとても美しいWebサイトをつくったのです。これを見て世界中のWebクリエイターが『CSSでここまでできるんだ』と驚いた。
それからですよね、CSSの時代が本格的に幕を開けたのは」 豊富なビジュアル資料を用いてこのように説明すると、参加者たちも一気に境氏の世界に引き込まれた様子。
続いてWeb制作やCSSについての最新情報が、どういった経路で、どのように世界中に広まっていくのかが解説され、そして本題の「CSSレイアウト」が次々と紹介されていった。さまざまなタイプ別に世界中のWebサイトをピックアップ。話題になったものやユニークなもの、お手本になるような美しいレイアウトや、珍しいテクニックを使ったデザインまで……。数々の事例が息つく間もないほどのスピードで会場前方のスクリーンに映し出されていく。もちろん、各レイアウトの特徴や制作上のポイントなどもレクチャー。さらにTips的なノウハウまで披露され、会場の盛り上がりも最高潮に。
「いろいろなレイアウトを紹介しましたが、いちばん大事なのは基礎デザインです。まず基礎をしっかり固めて、あとはできるだけいろいろなWebサイトに触れること。たくさんのWebサイトを見て、どういうふうにつくられているのか考えましょう。それが上達の近道だと思います」 約400枚という怒涛のスライドが駆け足で紹介されたあと、最後に境氏がこう締めくくると、会場からは大きな拍手が沸き起こった。
そして、5時間にわたって行われた初のD2が無事終了。5つのSESSIONに分かれていたにもかかわらず、ほとんどのクリエイターがすべてのSESSIONに参加するという盛況ぶりで、熱気の冷めやらぬ中、幕を閉じることとなった。
■ゲストプロフィール
 |
島根未央氏 |
 |
矢野りん氏 |
 |
小林信次氏 |
 |
こもりまさあき氏
|
 |
境 祐司氏
|
文＝秋山由香（（株）Playce）
撮影＝片桐 圭
