「Chrome+HTML5 Conference~第20回記念HTML5とか勉強会スペシャル~」レポート

デザイナートラックレポート

この記事を読むのに必要な時間:およそ 6.5 分

小久保浩大郎さん「実践CSS3デザイン」

小久保浩大郎さん(Google)は,ウェブアプリではなくウェブサイトの話を,特に調べればわかることは少なめに考え方の話をしたいと前置きして発表を行いました。

画像

始めにCSSの歴史とCSS3の新しいフィーチャーについて紹介しました。仕様が勧告になるのは常にブラウザ実装の後追いであり,ウェブブラウザへの要求が多くなる中で待っていたらいつまでも仕様が勧告できないというジレンマがあるため,仕様のモジュール化で対応していくことになったと振り返ります。そのため,CSS3ではたくさんのモジュールに分かれており,各モジュールの策定具合もブラウザの実装状況も様々なので,実務的な場面においては具体的なフィーチャーごとに考えるべきと述べました。

主だったCSS3の新しいフィーチャーとして,メディアクエリー,CSS3 Selectorその他リッチな表現力(border-image, text-shadow, box-shadow, gradation, transform, transition,透明度,…)などを挙げ,自身の個人サイトではメディアクエリーとtransitionを使ってることを紹介しました。これらのフィーチャーの方向性は,これまでできなかった新しいことができるようになり,これまで難しかったことが簡単にできるようにするためのものであると指摘します。

その結果,画像でやってたことをCSSでデザインできるようになったと言及しました。これにより,転送量が少なくなり(表示が早くなる⁠⁠,内容の変更にダイナミックに対応したり,テキストの修正,コンテンツ量,サイズの変化などにも対応しやすいサイトを作りやすくなったとサンプルを用いて説明しました。このようなメリットを持つCSS3ですが,問題点はやはりブラウザ互換性になるだろうと述べました。

ここで一歩引いて,ウェブデザインとは何であるのかと言うのを考えると,ウェブデザインが達成すべきゴールとして「アクセシビリティ」⁠情報デザイン(情報を正しく分かりやすく伝える⁠⁠情緒価値の訴求(かっこいいやかわいいなど情緒的な体験を提供⁠⁠」の3つの事柄があると言及しました。これらの3つのゴールは,次の図で示すように下のレイヤーがしっかりできていないと上のレイヤーが上手く伝わらないものであるとし,これらをどうバランスをとるのかを考える必要があり,すべて重ねたものがUXであると指摘しました。そしてこのことが,ウェブサイトでの体験をデザインするということだと述べました。

画像

そのような中,現在注目されている手法として,最新の環境を基準としてそれを活かしたリッチな表現を行い,そうでない環境ではその環境なりに問題のない表現を行う「Graceful Degradation」があると挙げました(Progressive Enhancementとは基準の置き方が逆の考え方と説明⁠⁠。また,自身の以前の言葉「Webは,唯一ユニバーサルデザインを実現できる可能性のあるメディア」を引用し,このユニバーサルデザインの実現のための手法がレスポンシブウェブデザインだと言います。これは可変サイズ画像(max-width: 100%の利用⁠⁠,非固定サイズレイアウト,メディアクエリーを組み合わせたものであると説明しました。レスポンシブウェブデザインの例として,Watch This Spaceを紹介しました。

そして具体的に,例えばbox-shadowが有効な場合にはbox-shadowを表示し,そうでない場合にはborderを表示することを考えた場合,振り分け(Feature Detection)が必要になるが,そこで便利なスクリプトがModernizrであると紹介しました。親のセレクタに「.boxshadow」⁠.no-boxshadow」と分けて指定することで簡単に振り分けができるので使ってみてほしいと述べました。

最後に,CSSでデザインができることが増えた結果,役割の変化が起きていると話します。デザイナーは絵をつくればいいとか,コーダーはコードを書ければいいというものではなく,両方どちらのことも分かっていなければいけないと論じました。分かってないとCSS3やHTML5を使えないし,そもそも使う意味がないと言及しました。ディレクターと呼ばれる人もそうで,何ができるのか,どうできるのかを知っていないとディレクションできないと言います。つまり,Photoshopでデザインされただけででは「意図」は伝わらないし,非対応ブラウザでの代替表現も含めてデザインであること,デザインの判断をする人間がCSSを書くべきと指摘しました。また,細かいクロスブラウザ対応,パフォーマンス向上施策は専門の人がやるといいと述べました。

須之内雄司さん「スマートフォン向け開発」

須之内雄司さん(Google)は,綺麗で高速なスマートフォンに最適化されたサイトを作るためのノウハウやツールを発表しました。

画像

まず最初に,フィーチャーフォンからスマートフォンへの移行が進んでいる(2011Q2スマートフォンの売上は前年同期比74%増。これは総売上の25%)とし,そしてこのことはモバイル端末のブラウジング環境がWAPやi-ModeからWebkitベースのブラウザに移行しつつあるということだと言及しました。さらにフィーチャーフォンと比べて,JavaScriptで動的なウェブページ,CSSを利用したデザイン,オフライン機能などを使えるようになるが,PCと比べてネットワークが遅い,レガシーとなるブラウザが少ないという点を挙げました。

端末ごとに操作方法・表示方法が異なるため,スマートフォンでは指で押しやすく,動かしやすいタッチフレンドリーなサイトが良いと言います。そのため,ズームイン・アウトや水平スクロールがない「見やすい・スクロールしやすいページ」⁠Viewportを使うことでページの横幅を指定可能)や,近くにリンクが複数あると間違いやすいので「押しやすいリンク」⁠リンクにパディング(padding)を設定することで領域を見た目より大きめに)が重要だとしました。また,スマートフォンは持ち方などによって,縦長の画面での表示(Portrait)と横長の画面での表示(Landscape)の2種類がありますが,@media screen and (orientation: portrfait)等を利用して画面の状態に応じて異なるCSSを適用できることを紹介しました(なお,Orientationの変更イベントはiPhone(orientationchange)とAndroid(resize)で異なるので注意が必要⁠⁠。

iPhone/Androidでは,ホーム画面にブックマークを登録することが可能で,その際表示するアイコンを<link rel="apple-touch-icon" href="/apple-touch-icon.png">と言った形で指定可能と紹介しました。

CSSの互換性の話になり,-webkit-,-moz-,-oなどのプレフィックスは他のブラウザでは動かないため,フォールバックの記述も必要だと言及しました。youtubeを例に挙げ,のっぺりしてしまうけれどもきちんと見えるとしました。アニメーションは,アニメGIF(古いAndroidでサポートなし,サイズに制限がある⁠⁠,CSS Transition(古い端末でサポートなし⁠⁠,JS+HTML5 Canvas(結構昔の端末でも利用可能)と説明しました。

画像

異なるDPIへの画像については,スクリーンの実サイズはそれほど変わらないが,解像度は320x480から640x960まで大きく違いがあると指摘し,DPIに応じて高解像度用の画像と低解像度用の画像を用意し,高DPIのデバイスに対しては高解像度の画像を(width, height, background-sizeを利用して)低解像度のものと同じサイズに縮めて表示するのが良いとデモで示しながら紹介しました。そのDPI検出については,JSでwindow.devicePixelRatioでDPIを検出可能だし,CSSのメディアクエリーの場合は-webkit-device-pixel-ratioなどを使っても良いと述べました。

最後に,モバイルネットワークは低スループットや高RTTであり,リクエストが増える度に遅延が増えるため,サイトを高速化しようと提案しました。そのためには,⁠外部リソースを削減」⁠HTML,CSS,JavaScriptの圧縮」⁠画像の圧縮」⁠CSSスプライト」が重要だと言います。

外部リソースの削減ではJSやCSSをインラインで記述したり,画像などをdata scheme uriで記述するの一つの手段であると紹介し,またHTTP側でHTTP Expireを使ってコンテンツに期限を設定し,期限内でコンテンツのキャッシュがあれば,それを再利用するようにするのも一つの手段であると紹介しました。外部リソース削減とHTTP Expireを比較した場合,HTTP Expireはキャッシュがある時のみ効果を発揮するため,キャッシュのヒット率はどのくらいか?等を把握して利用するのが望ましいと述べました。

この他,HTML,CSS,JSの圧縮では,gzipしていればそれほど大きくは改善しないがそれほど大変ではないためやったほうが良いとし,minifyやminifierなどで検索してお気に入りのツールを探してみてくださいと述べました。JSに関してはGoogle Closure Compilerがお勧めで,変数名の圧縮などまでやってくれると紹介しました。画像の圧縮では,JPGは画質を落としても大丈夫かを試しながら調整し,GIFやPNGなどは色数を減らしたりpngcrushなどを使って圧縮することを紹介しました。また,リクエスト数が減らせるCSSスプライトも有効であると述べました。

著者プロフィール

高橋和道

gihyo.jp編集部 所属。Gihyo Digital Publishingでは主に,提供するEPUBを設計。

URL:https://twitter.com/k_taka