Chrome+HTML5 Conferenceに参加してきました 3

セミナー HTML5


Googleお昼ごはん。
結構美味しかったです。 足らないと言っていた人も居ましたね。


実践CSS3デザイン (13:00-13:45)

CSS3や「ウェブデザイン」について、とても良く理解が深まりました。
技術の発展と共に色々とやれることは多くなりますが下位互換に関する
問題であったり、アクセシビリティの問題であったり。


やはりユーザー目線に立った「デザイン」は重要ですね。
私もアプリケーションを開発する際には、アクセシビリティや
情報デザインについては重視して開発を行っています。
（まぁ、情緒的なデザインが出来ないというのもあるんですが）


小久保浩大郎(kotarok)
Google ウェブマスター


いまはポジション的にはいわゆるWeb担当だが、何でもやる。
話すことは、会社の業務とは基本的に関係ない個人的な経験と
見解に基づいたものになります。

  • 3D transform
  • transigion and animation
  • flexbox


といった高度なことはやらず、ウェブアプリではなくウェブサイトの話をする
CSS3を使ったウェブデザインの実践の話。
調べれば分かることは少なめに、考え方の話をして行く。


主催者側からは初心者向けに、という要望だったので分かりやすい
プロパティの紹介をしようと思っていたが、
検索して分かることも多くあるので、CSS3を使うにあたって
難しい部分、考え方の話をしたい。


アジェンダ

CSS3の概要
  - CSSの歴史とCSS3の新しいフィーチャー
  - CSS3を使う上での問題点
「ウェブデザイン」とは何か
  - ウェブデザインが達成すべき3つのゴール
  - ユニバーサルデザインの夢
CSS3を実際に使う
  - Feature Detection
  - ビジュアルデザインとコーディング


CSS3の概要

CSSの歴史

1995 CSS1の最初の草案公開
1996 CSS1が勧告になる
1997 CSS2の最初の草案公開
1998 CSS2が勧告になる
2002 CSS2.1の最初の草案公開
2005 CSS3の仕様策定に向けて動き出す
2005 CSS3マルチカラムレイアウトモジュール草案
2009 CSS3セレクター勧告候補
2011 CSS2.1がやっと勧告に
※適当に抜粋

仕様が勧告になるのは常にブラウザ実装の後追い
なぜなら「実装が２つ以上あること」というのが勧告になる条件だから
しかし、ウェブブラウザへの要求が多くなる中で
そんなことを待っていたらいつまでも仕様が勧告できない


だが、また独自拡張の世界に戻るのは困る
　→ 仕様のモジュール化を行うことに
　（出来ているところから、仕様を固めて行く）


CSS3の仕様はフィーチャーごとにモジュール化されている。
→ モジュール化されたCSS3仕様
　とにかくたくさんのモジュールにわかれている
　仕様策定具合もブラウザの実装状況も様々かつどんどん変わって行く。


CSS3の新しいフューチャー
Media Query
- @mediaルールの中で、より詳細な条件分岐
CSS3 Selector
- より複雑なセレクタ結合しや、動的な要素選択が可能な疑似クラス
その他、リッチな表現力
http://slides.html5rocks.com/#css-selectors


Media Query と Transitionを組み合わせることで、
これまではJavaScriptでしか出来なかったことが実現できるように。


CSS3の新フィーチャーの方向性
◆ これまでできなかった新しいことが出来る
- Transform、透明度付きカラー
- 新セレクタによる動的選択
◆ これまで難しかったことが簡単にできる
- メディアクエリーによるマルチデバイス対応
- 画像でやっていたことがCSSで出来る
　　→ これの何がいいのか？


画像でやってたことをCSS化する利点
・転送量が少なくなる（表示が早くなる）
・内容の変更にダイナミックに対応できる
- テキストの修正、コンテンツ量、サイズの変更など


CSS3を使う上での問題点
　→ ブラウザ互換性



「ウェブデザイン」とは何か

ウェブデザインが達成すべき３つのゴール


1. アクセシブルな情報を提供する（アクセシビリティ）
2. 情報を正しく分かりやすく伝える（情報デザイン）
3. 「かっこいい」や「かわいい」など情緒的な体験を提供する（情緒価値の訴求）


デザイナー以外の人には、3.こそがデザインだと思われがちだが、そうではない。

1.アクセシビリティ
 → 2. 情報デザイン
  → 3. 情緒価値

1.から順番に達成されていなければ、上位のものには何ら価値が発生しなくなってしまう。
アクセシビリティには、表示速度なども含まれる。
それぞれをどれくらい重視するかは、プロジェクトの方向性に依存するが、
重ねたスコアこそが必要だと考える。


どれが欠けていてもダメだが、1.から欠けていると
以降のものにも価値が減ってしまう。

いくら見た目が可愛かったりするサイトでも、必要とする情報に辿り着けなかったら
それを目的としていた人は離れてしまう。

また、見た目のデザインが優れていても極端に動作が遅いページであったり、
無駄に読み込みで時間がかかるようなウェブサイトでは
優れたウェブデザインとは言えなく、相対的に価値が下がってしまう。
※私の付け足し


ウェブサイトの体験をデザインする

- 「ウェブデザイン」とはウェブサイトの見た目をつくることではなく
　ウェブサイト上での体験をデザインすること。
- プロジェクトによって各レイヤーの重要度のバランスは変わってくるが、
　それでもこの順序は変わらない
- 下のレイヤーが達成されていなければその上のレイヤーは加点されない


Graceful Degradation

  • 最新の環境ではそれを活かしたリッチな表現をし、そうでない環境ではその環境なりに問題のない表現を行う
  • 基本的にはProgressive Enhancementの逆の考え方。基準の置き方が違うだけ。
Progressive Enhancement
2003年に発表された手法で、WebサイトやWebページ開発の手法として広く知られている。
基準となる表現レベルを規定し、そこからより上位のブラウザに対しては
よりリッチなユーザーエクスペリエンスを提供するという考え方


実装者のこだわりとしては頑張ってインタラクションを表現するのはありなのかもしれないが、
逆にユーザーエクスペリエンスが下がる可能性が高い。
（重くなったり、ブラウザがクラッシュしたり）


そんな無茶な頑張りをするよりは、最新のブラウザを使っている人には
リッチな体験を。そうでない場合にはそれなりの体験をしてもらう方が良いのではないか。

なぜか、というと先ほどの「アクセシビリティ」、「情報デザイン」、「情緒価値」などの考え方に戻る。
「アクセシビリティ」などが達成されていなければ、結局ウェブデザインの価値が下がるだけ。
（クライアントや、外部のディレクターに分かってもらいやすい考え方）

使えるなら使えばいいが、使えないなら使わないでユーザーエクスペリエンスを保つ


ユニバーサルデザインとは

- どんな人でも公平に使えること
- 使う上で自由度が高いこと
- 使い方が簡単で、すぐに分かること
- 必要な情報がすぐに分かること
- うっかりミスが危険につながらないこと
- 身体への負担がかかりづらいこと（弱い力でも使えること）
- 接近や利用するための十分な大きさと空間を確保すること

Webは、唯一ユニバーサルデザインを実現出来るメディア
リアルなプロダクトでは実現することが難しかった。


どんな人にも公平に使えることというのは、

- 背の高い人にも低い人にも
- 男性にも女性にも
- 両手が使える人にも片手しか使えない人にも

つまり、どんな人にも公平にちょっと使いにくい中途半端なものになる。


しかし、ウェブならそれが可能

ユーザーの手元に届くのは「コード」
それがどのような表現になるかはブラウザに依存する
 - 大画面のモニターを使っているユーザー
 - スマートフォンを使っているユーザー
 - 音声ブラウザを使っているユーザー

ウェブサイトの情報をなるべく「コード」の状態で届けることで様々な可能性が開ける。
そのためには、視覚表現の部分もなるべく画像ではなくコード(CSS)で
届けることが重要になってくる。


レスポンシブウェブデザイン
(反応する、とかそういう意味。ユーザーの動きに反応して）
Media Queryを使っていい感じに表現しようよって言うこと。
画面のサイズを拡大縮小することによって、デザインも見やすく動的に変化する



CSS3を実際に使う

Feature Detection
　例えば、box-shadowというCSS要素をサポートしているかの
　有無によるふりわけなどが行いたい場合。


Modernizr
http://www.modernizr.com/
→ アレが出来て、これが出来ないということを判断してくれる。
　 このライブラリを入れていると、例えばboxshadowならば存在しない場合、
　 no-boxshadowなどが実行されるように、など処理分岐をしてくれる


役割の変化

 - デザイナーは絵を作ればいい？
 - コーダーはコードを書けばいい？

両方どっちのこともわかってなきゃダメ
本当に分かってないとCSS3やHTML5を使えないし、
そもそも使う意味が無い。かえってコストがかかる。


ディレクターと呼ばれる人もそう。何ができるのか、
どうできるのかを知っていないとディレクションできない。

→ 簡単なデザインの調整などもコーダーが出来ないと、分業が出来ない
→ ディレクターも、クライアントに対して出来る、出来ないも言えない。


役割の変化

 - PSDでは「意図」は伝わらない
 - 非対応ブラウザでのだいたい表現も含めてデザイン
 - デザインの判断をする人間がCSSを書くべき
 - 細かいクロスブラウザ対応やパフォーマンス向上施策は専門の人がやるべき