« CSS Nite LP, Disk 1 レポート(その2) | トップページ | CSS 3 は Konqueror がアツイ! »

2006-10-14

CSS Nite LP, Disk 1 レポート(その3)

Banner_lp1200200イベントからもう5日も経って、旬も過ぎているのにも関わらず、いまだダラダラと一方的に勝手な意見を並べ立ててますが、CSS Nite LP, Disk 1のレポートも、これで本当にラストです。(^_^;;)

  1. CSS Nite LP, Disk 1 レポート(その1)
  2. CSS Nite LP, Disk 1 レポート(その2)

Charles McCathieNevile: Using CSS to Make the Best Internet Experience, Everywhere(CSSを活用し、最高のインターネット体験をあらゆる端末へ)

Opera2_tOpera の CSO、Charles McCathieNevile さん(以下、Charles)は、W3C に 6年間 名を連ねていた経歴もある、Web標準とアクセシビリティのエキスパートで、この日のプレゼンもテーマは、多媒体間のアクセシビリティを確保するための CSS テクニックに関するものでした。

この Charles、英語・フランス語・スペイン語・イタリア語が使える上に、ごく簡単な日本語までご存知のようで、のっけから驚かされましたが、さすがにプレゼン自体は英語で行われ、長谷川恭久さん(以下、ヤスヒサさん)が通訳するという形が取られました。毎度 感銘を受けるのは、欧米人のプレゼンって、英語で話していても、そこいらの日本語で聴いてるプレゼンよりもわかりやすいことが多いんですよね。この日の Charles もそうでした。(逆にいえば、日本人のプレゼンは、まだまだ改善の余地があるってこと。)ただ、通訳のヤスヒサさんも、淡々と通訳を行うのではなく、適宜、Charles が取り上げた用語の解説や事例紹介などを織り交ぜて、ギャラリーの関心を巧みに引き立ててました。

多媒体間アクセシビリティを実現する3つの柱

さて、Charles のプレゼンの柱は以下の3点。

  1. リキッドレイアウト
  2. CSS の @media
  3. CSS3 Media Query

この3つを駆使して、多媒体間でアクセシブルな CSS を書きましょう!というのが趣旨で、いかにもアクセシビリティのエキスパートらしい内容でした。(リキッドレイアウトは、ウィンドウサイズに合わせて伸縮する Webページのレイアウト法で、ピンと来ない方、また有益な事例をお求めの方はリキッドレイアウトサイト事例集を併せてご覧下さい。リキッドデザインは僕としても目指している方向の一つなので、これからもちょくちょく話題として取り上げて行くと思います。)ただ、Charles の場合、提言に止まらず、プレゼンがそのまま実践の場にもなっていて、実は、このプレゼン全体が一つのデモになってました。この仕掛けに気づかされた時には、「やられた!」と思わず苦笑。(Opera のオフィシャルサイトでも Opera Show として紹介されているので、何をいまさら..と言われてしまうかもしれませんが。(^ ^;) )

Screenshot

プレゼンスライドとデモページが同一 HTML!

これは Opera の表示モードの切り替えと、CSS の @media の合わせワザで、

@media screen { }
@media print { }
@media projection { }
@media handheld { }

を利用して、同一の HTML に対して、媒体ごとに適用する CSS を切り替える仕組みにしていたわけですが、本来は出力する媒体ごとでスイッチはずの CSS を、PC 用 Opera 内部の表示モード切替によってスイッチしていたというワケです。ブラウザ内部の表示モードと @media の間にそんな関係があったことを(厳密には screen と print 以外に関してですが)、僕は初めて知ったので、これはちょっと衝撃的でした。つまり Charles は全く外見の異なる画面を次々と投影していながら、実は終始一貫して一枚の XHTML Strict 文書を表示していただけだったんです。まるで CSS ZenGarden を見たときのような感覚で、この徹底ぶりには思わず脱帽。

@media と Opera 表示モードの対照表
@media適用対象媒体対応 Opera 表示モード
screenPC モニタ
(画面表示用)
ウィンドウ
printプリンタ
(印刷用)
印刷プレビュー
projectionプロジェクタ
(プレゼン用)
フルスクリーン
handheld小型携帯端末
(モバイル用)
スモールスクリーン

ちなみ @media screen では一枚の Webページとして表示されてますが、@media projection にする時にはページ単位でスライドが切り替わるようにしなくてはなりませんよね。このあたりの処理は、以下のようになっています。

@media projection {
div.slide {
page-break-after: always;
margin: 0em 3em 0em;
padding: 0.2em 2em;
height:80%;
overflow: visible;
}
}

つまり、slide という値の class を持った div 要素ごとにページを区切る..という仕掛けになっているわけです。Opera のフルスクリーンモードでは、スペースバーを叩くとページが切り替わるようになっているようなので、これで 1枚の (X)HTML 文書をプレゼンのスライドとして利用してたんですね。

補足情報

CSS 3 の Media Query については、いずれここでもエントリーを一本用意したいと思ってますので、詳しい説明はそちらにまわしますが、一行あたりの文字数、もしくは文字の大きさを、画面サイズに合わせてコントロールしにくいといった、リキッドレイアウトの欠点を補う有力な選択肢として注目すべき規格です。CSS 3 Selectors と共に、まだドラフト段階ですが、Opera 8 以上と KHTML(Konqueror や Safari のブラウザエンジン)のナイトリーバージョンが、目下 先行実装しています。

矢野りん: サイトデザインの2大要素を徹底的にお勉強しよう

Yano矢野りんさんも境さん同様、著作の多い人ですが、あまりこういう場には出てこられないそうで、ファンの方にはたまらなかったのではないでしょうか。かくいう僕も、矢野さんの著書は何冊か持っていて、折に触れて勉強させていただいてます。特に『ウェブデザインの教科書』が個人的にお気に入り。(笑)(ただ、矢野さんの本って、判型が特殊なものが多くて、もう少し、本棚の収納にやさしい、標準的な判型にしていただけると、とってもうれしかったりします。(^ ^;) )

後半の色彩講座は、基本のエッセンスが凝縮

矢野さんの講演は、文字色彩という2つのデザイン要素に関するものでしたが、詳細は ITpro@日経BP がすでにレポートを上げているので、是非、そちらをご覧ください。

特に、後半の色彩デザインのお話は、色相・彩度・明度による色のコントロールの仕方など、初めて聴く方には、基本のエッセンスが凝縮されてて非常に濃い内容だったのではないでしょうか?僕も含め、彼女の著書を読まれた方々には既知の内容だったかもしれませんが(あるいは、そういう人向けの付加価値として例の「宿題」があったんでしょうか?)、個人的には "伝える" という技術面で、色々とヒントをいただきました。というのも、基本的な知識を「知っている」と口にするのは簡単なことですが、それをキチンと消化して、多くの人に短時間で、わかりやすく、正確に伝えられるようにするとなると、尋常な難易度ではないですよね。実際、Web の世界って、コミュニケーションをとる機会が多いので、デザイナーやプログラマー、果てはクライアントに対して説明を要する場面が出てきた時に、手短に適確な説明ができることって、とても大事だと思います。だから、たとえ既知の事柄であっても、この手のお話は、何度聞いても飽きないもんです。(もちろん、例外はありますが。)

余談になりますが、色彩デザインについては、矢野さんの著書以外でいえば、最近だと web creators 2006年8月号が色彩デザインの特集を組んでいて、論理的な色彩デザインのキーポイントがまとめられています。Web 媒体にこだわらなければ、色彩検定の参考書なんかも参考になるかと思います。

和文書体の特性

矢野さんの『デザインする技術』の中身を僕はまだ見ていないので、あるいはそこに書いてあるのかも知れませんが、個人的に目新しかったのは、前半の文字のお話でした。ただ、こちらは矢野さんご自身も懸念されていたように、僕も何点か疑問が残りました。

まずは書体の疑問。というか、この部分、僕的に矢野さんの意図を理解できた自信がイマイチありません。(以下、ITpro のレポートからの引用。)

書体には大きく明朝体とゴシックがあるが,Webサイトはゴシックを使っていることが多い。明朝体はディスプレイで読みにくいと一般に考えられているためだ。

しかし矢野氏は「Webにはゴシックが最適という考え方は絶対ではない」と指摘する。日本人は単語が集まってできた図像として文字を認識する。このため「明朝体のほうが頭に入りやすいことがある」という。

矢野さんも言及されていたように、(少し整理して換言しますが)紙媒体などを対象としたある程度 大きな解像度の文字の場合、一般的には sans-serif(和文ではゴシック系)は視認性(見やすさ)に勝り、serif(和文では明朝系)は可読性(読みやすさ)に勝るとされています。この部分は確かに異論の余地はないでしょう。しかし、ITpro の記事でも「明朝体はディスプレイで読みにくいと一般に考えられているため」と書かれているように、これが PC のモニタが対象となると、画像化していないベタのテキストに明朝体を積極的に利用するのは、Windows 上でいまだにビットマップフォントが使われていることを考えれば、僕にはあまりに時期尚早のように思えます。特に画数の混み合った漢字などは、明朝体のウロコがノイズになって、かえって可読性を損なうケースが多々あります。

Fonts

ただ、矢野さんのこの一件に関する論調は、「絶対ではない」、「頭に入りやすいことがある」など、ところどころで表現をボカしていて、実は Webページの和文フォントに明朝体を利用することを、必ずしも "(積極的に)推奨している" とまで言えないんですよね。だいいち、当の矢野さんのスライドで使われていたフォント自体、ゴシック体でしたし。(笑) ま、もしかしたら、これは明朝体の可読性をことさら強調するために、わざとスライドにゴシック体を利用されたのかもしれません。にしても、イマイチ、僕は矢野さんの真意が読み取れませんでした。おそらく、どこかで、明朝体の方が適していると感じさせるような場面が、矢野さんにおありだったんだとは思うんですが、そのあたりの特殊なケースについて、もう少し掘り下げてお聞きしたかった気がします。

字体・字形

こちらは、矢野さんの今回の講演の趣旨からすると、かなり些末な話になるので、以下の疑問は軽くスルーしていただいても構いません。ただ、僕の理解と多少異なる部分があったので、一応、書き留めておくことにしました。

矢野さんのお話では、字体は「日本語の正しい有様に対する定義のこと」で「字体が違うと意味が変わる」もの、字形は「日本工業規格が定めた文字の形のこと」でこちらは字形が変わっても意味は変わらないとのことでしたが、実際はそんな単純なものではなかったように記憶してます。これらは国語科や文字コード業界でよく使われる術語で、僕はいまだに字体と字形の明確な区別というか定義が理解できていないんですが、少なくとも字体や字形に差があっても意味は原則として変わらなかったかと。矢野さんのおっしゃった「字体」というのは、文字そのもの、もしくは「字種」と呼ばれているものに相当するんじゃないでしょうか?「吉」と「𠮷」(化けたらスミマセン)、「歓」と「歡」のようなものが字体の違い(同じ文字の別体)、「矢」と「失」、「末」と「未」などは字種の違い(まったく別の文字)になると思います。詳しくは以下のリソースを参照。

また、字体・字形の定義の中で「日本語」「日本工業規格」、さらに広く取るなら漢字(+仮名)に限定してしまっている点も、少々絞りすぎているような気がします。特に文字と言語は、別のレイヤーになるので、切り分けが必要のように思います。

(自分で言うのも何ですが、これじゃ揚げ足取りもいいところですね。スミマセン。(- -;;ゞ)

全体として有意義な一日に

僕がこのテのイベントに参加したのが、今回がはじめてだったこともあるのかもしれませんが、ここではとても書けないような細々とした部分でも、色々と勉強になったり、刺激を受ける部分があって、とても有意義な一日になりました。あらためて、講演者や主催者の皆さまに感謝申し上げます。また会場のあのアツい雰囲気を浴びて、モチベーションを高められる日が今から楽しみです。

|

« CSS Nite LP, Disk 1 レポート(その2) | トップページ | CSS 3 は Konqueror がアツイ! »

[Web]XHTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/3798474

この記事へのトラックバック一覧です: CSS Nite LP, Disk 1 レポート(その3):

» CSS Nite LP, Disk 1レポート [WEB・ゲーム・CG・映像・IT業界の仕事探し応援サイト withD(ウィズディー)]
10/10に津田ホール(千駄ヶ谷)で行われた同イベントの第5部、「サイトデザインの2大要素を徹底的にお勉強しよう」をレポート。... [続きを読む]

受信: 2006-10-18 19:56

« CSS Nite LP, Disk 1 レポート(その2) | トップページ | CSS 3 は Konqueror がアツイ! »