CSS3 デザインプロフェッショナルガイド – 出版記念イベントに出演

css3event1.jpg
本が無事発売されて、出版記念イベントが開催されました。
(写真は左からマイコミ角竹さん、秋葉、小山田さん、外村さん)
「CSS3 デザインプロフェッショナルガイド」
著者は以下の人たちです。
秋葉秀樹, 秋葉ちひろ, 小山田晃浩, 外村和仁, 蒲生トシヒロ, 宮澤了祐 
僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトやその一部を紹介する実践的なセクションです。
アイデアを織り交ぜ、全てのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので思い入れのある作品になっています、よかったら是非手に取ってみてくださいね。
さてさて、先日5/28には東京に行ってきました、この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。
USTREAMでセミナーの内容を見れます。
前編
後編
◎外村さんセッション-前編-
hokamura_session.jpg
トップバッターは外村さん、CSS3のtransitionとanimationを解説しています。
書籍には詳しく解説出来なかったイージングの濃い話もあります。
両方ともアニメーションができるプロパティなんですが、動きをtransitionとanimationの違い、記述の方法などを実際作ったデモで解説しています。
■Transitionsプロパティの解説(外村さんセッション)
transition-durationはアニメーションする時間を指定出来ます、例えば…
 transition-duration: 2s:
とすると2秒かけてアニメーションします。
transition-propertyとは、どのプロパティの値をアニメーションするのか?という指定が出来ます。
例えば…
 transition-property: left;
にすると、leftの値に限定してアニメーションします。
 他にもdelay(遅延)やイージングをコントロールできます。
■Animationプロパティの解説(外村さんセッション)
Transitionsと似ているのですが、大きな違いはいくつもあります。
・キーフレームを指定して、例えば開始から50%のタイミングでCSSの数値状態を細かく指定します。
・無限ループが可能です。
・繰り返す回数が指定できます。
animation-directionとは、アニメーション終了時に繰り返しが指定されていると巻き戻しすることも指定出来ます。
 animation-direction: alternate;
にすると、今までのアニメーションの軌道を巻き戻し再生するという変わったプロパティです。
■イージング(外村さんセッション)
・アニメーションの動き方を指定できます。
・「ずっと等速」「最初ゆっくり、だんだん早く」など
CSSでアニメーションさせるのは簡単にできますが、内部でどういう処理が行われているか?という原理をJavaScriptに置き換えて解説してくださいました。
JavaScriptが分からない人でも、できるだけ短いソースで細かく解説してますので興味のある方は動画を停止しながら一つ一つ確認してみてください。
◎小山田さんセッション
oyamada_session.jpg
まずはCSS3のサポート状況の説明。
古いブラウザへの問題。
■Graceful Degradation(小山田さんセッション)

基準を新しいブラウザに持っていき、古いブラウザには妥協するという考え方。
実際にはTwitterのホームページなどは、角丸やシャドウ、グラデーションなどをCSS3で表現していますが、IE8以前では諦める。
デザインが劣化するけど情報閲覧は可能、機能性も問題ないようにする、といった考え方です。
■Regressive Enhancement(小山田さんセッション)

手法としてPolyfillという方法を使うのですが、Graceful Degradationと違いは古いブラウザへの対応を諦めない、という言い方が正しいかもしれませんが、古いIEなどへの対応を正規のCSS3以外の手法で対応するというもの。
PIEというCSSエミュレータ使って、IE6でもborder-radiusなどを実現できるというもの。
http://www.lawson.co.jp/
などが代表的な例です。
元々背景画像などを指定してPIEで角丸などを使うと、深度の問題で隠れてしまうのでその対策なども紹介しています。くわしくは映像をみてください。
■SVGとSessionStrageを使った実際のサイトの紹介(小山田さんセッション)

http://www.kirishima.co.jp/aji/2011/spring/01/
PolyfillとはCSSだけでなく、HTML5の技術にも対応する考え方です。
例えばこのあたりのライブラリを使うことで古いIEにもHTML5の技術を使うことが可能になります。
◎秋葉のセッション
akiba_session.jpg
この言葉を使わなかったんですがHTML5の「Web Socket」を使ってアンケート投票をしました。
双方向通信の面白さが伝わったらうれしいなあ、と。
こちらはスライドも用意しましたので、USTREAMとあわせて見てみてください。
スライドURL(PDF: 3.9MB)

それでは、本をぜひ、よろしくお願いします!!
cover2.jpg
「CSS3 デザインプロフェッショナルガイド」

坂本貴史さんのIAシンキングセミナーに参加

坂本貴史さんのIAシンキングセミナーで使った用紙

坂本貴史さんのIAシンキングという本がリリースされたタイミングでこのセミナーに参加させてもらいました。

坂本さんは横文字をよく使う。本人もそう言われていました。

僕はあまり使わない方。
というより、スキルがない。

だから用語があまり分からないまま参加したけど、
用語の意味を知る事が目的じゃなく、目的さえ果たすことがこの勉強のゴールって思ってたのであんまり、出題された問題に対して出来なくても気にはならなかった。
(「出来なかった人」って言われて手を挙げたのは僕くらいだったよ、、、)
ノートもロクに取らなかった。
全然後悔はしてないどころかそのほうが集中出来るからだ。

目的とは?
サイトの情報を設計する?
いやいや、言葉ではそういうけど、、、、僕にはそれ自体がピンと来ない。

僕はクライアントの目的を果たすための手段のたった一部分に過ぎないWebって媒体を使って顧客を適切に誘導し、クライアントにメリットを与えるってことが出来ることが目的だし、そのためのデザインであり、HTMLってものはそのためにあるようなものだと考えて仕事させてもらってるので、今日は自分のためになったと思う。

ワークショップでは、家電メーカーのデジタルテレビのトップページを設計するという課題で、自分だったらテレビを売るサイトをどう設計するか?ある程度自由に考えていいというものだった。

僕が考えた企画は以下の通り。

【対象】
テレビはいっぱいある。
だからどれを選んで良いかわからない、買う気になってるのに、判断するスキルがない。
買って後悔しないテレビを買う、僕の購買という行動の背中を押してほしい。

【そのためのサイトの設計】
◎人気順ユーザレビュー
 たくさんあるテレビ、選ぶのに悩む。
 通常レビューというのは、批判的なコメントもレビューだが、「人気順」というタイトルをつけることで、ちょっとズルいけど、批判的なコメントは軽減出来る可能性がある。
 買った人がどう思ってるのかはこれから買う人のフラットな参考材料。

◎キレイな画面を他社製のテレビと比較できるコンテンツ
 実際に「超解像度」とうたっている割には素人にはピンと来ない。
だったら視覚で訴求したい。走査線が見えるレベルまで拡大した画像や動画を用いて、ここまでキレイに見えるテレビなんだってアピールしたい。
HTML5のvideo要素やFlash Videoでもいい、技術的には充分可能。

◎次世代テレビをマウスで疑似体験
 機能が増えると「使いこなせるのかな?」という不安が。
 そこで、Web上にテレビ画像を入れて、マウスで擬似的にリモコンを操作したりして、操作に慣れてもらう。要はシミュレーター。
 ブラビアとか、人が離れると電源が切れます、Webの疑似体験ではマウスが離れると画面が消える、とか。
 あと、操作方法は「ここを押してみましょう、録画を開始します」という音声ナビを入れて、マウスでテレビを操作させることで、簡単なトレーニングになるので、ウチのオカンみたいに、携帯メールすらろくに送れない人でも安心して購入の意思を持つ事が出来るんじゃないか?と。

そんな感じで汚い絵を書いたのが上の写真です。

企画自体は我ながら面白いと思ったんですが、目的は導線。
このままでは楽しんで終わり、になりそう。
だから自分の採点では50点くらい。購入まで誘導するにはもうちょっと訓練が必要かな?

人の心を揺さぶるということが出来るのはわくわくするのですが、今回は最終到達という 部分では自分のスキルに不満を憶えたけど、ユーザのメリットをクライアントのメリットに反映させるスキルとしていいキッカケになったかな?と思いました。

参加して良かったです。
ちなみに僕は、この作業、Webデザイナーと呼ばれる人の仕事だと勝手に思っています。
(つまり自分です)

サイト設計者の意思をデザイナーに適切に伝えることも仕事だって坂本さんは言ってたけど、それを言われた通りに作るデザイナーではなく、意思を汲み取ってビジュアルデザインすると、わずか1pxの違いにも「意思」を持ったビジュアルを構築できるデザイナーの仕事が出来る。

そこが本当の意味のWebデザイナーという仕事だと思う。
ここに行き着くには、コーディングのスキルではなく、ヒューマンスキルを要求されると考えられます。

一般ユーザはWebに満足することは求めていない。
Webを使って得たもの(今回は自分に合ったテレビ)を買うことが目的だ、ということを忘れてはいけないのです。

・・・と、勝手に思いました。

Chrome13.0.767.1 devはCSS3の3D Transformをサポート

前回の記事でもそうだったんだけど、例えば-webkit-perspectiveとか、Safariだけしか動かないって言われてますが、Chrome13.0.767.1 devだと、ちゃーんと動いているみたいですね。知らなかった。
(CSS3の3D関連はここに仕様が書いています。[ http://www.w3.org/TR/css3-3d-transforms/ ]) 

以下は参考サイト[ http://css-3d.org/space-cube-1.htm ]をスクリーンショットしてみました。
view_on_safari.jpg
Chrome13.0.767.1 devで確認、CSS3 3D transformsが効いています。

view_on_FF.jpg
Firefoxだとこんな感じ
ただ、Chromeの開発段階のバージョンってあって、レンダリング中、画像が欠けたりする場合があります。ちなみに下の画像はそのスクリーンショット。
僕の場合大きな画像を使ったせいかもしれませんが、いずれにせよ、CSS3の3Dtransforms関連はSafariが安定してますね。

view_on_chrome2.jpg
(Chromeで見た不具合、たまにポリゴンが割れているような見え方になる時がある)
もうすぐChromeもサポートされるようになるんですかね。きっと。
今後も他のブラウザに期待、今日はここまでです。。

CSS3 -webkit-perspectiveで地図上空を立体的に見回しちゃう

えーっと、本を書きました、5/28に毎日コミュニケーションズから発売される「CSS3デザインプロフェッショナルガイド」という本を共著で、SOY CMS2の開発者、宮澤さんと、東京のWeb制作会社、ピクセルグリッドの小山田さんや外村さん、そしてITプロフェッショナルの蒲生さん、そして弊社とみたと僕、といった豪華(?)メンバーで執筆しました。
amazonではすでに公開されています。
どういうコンセプトかというと、大きく3つの章に分けられています。
入門的な章と、リファレンス的な章と、ビジュアルサンプルの章。
僕はビジュアルサンプルを担当しました。
始めは、そもそもCSS3ってどんなものか?とか、どんな場面でうまく使うべきか?などを主に蒲生さんが担当してます。
これはどちらかというと、私たちフロント周りの制作をしている人やデザイナーさん向けなので、
今までの書籍などを読んで、どうしても難しく考えがちな人に読んでもらいたいです。
そして小山田さんや外村さんはとてもCSS3周りの仕様書などに詳しく、CSS3のリファレンスを担当しています。
彼らの実績豊富な知識と常に新しい情報を発信しているCSS3の最新の動向などを、分かりやすく解説したものです。
そして僕が担当したビジュアルサンプルでは、実際CSS3で作ったサンプルを公開してます。
単に画像を使わずにボタンを作ったり、アニメーションや3Dゲームの応用を解説したり、商品ギャラリーの見せ方だったり、フォームをカスタマイズしてもっと便利にしたり、出来るだけ分かりやすく、マニアックにならないように作ったつもりです。
実は、執筆途中でFirefoxのバージョンが4になったり、Operaのバージョンが11になったり、それによって書き直しが発生したところが大変でした。
例えばFirefox、3.6までは遷移(アニメーションのようなもの)を行うtransitionプロパティがサポートされてなかったけれど、4でサポートされだした、とか。
OperaではCSS3グラデーションが11から直線グラデーションだけサポートされたとか。
対応ブラウザの確認をしたり、不具合やクセがないか確認したり。
そんな中こんどはInternetExploler 10の発表があって、Platform Previewがダウンロード出来るようになってるので、そっちも調べたり。
本当に過渡期なんですね、まさにまっただ中。
さてさて、今日はとても簡単なサンプルなんですが、Safariで実装されているCSS3の3Dトランスフォームを試したいと思います。
書籍では、3Dカードゲームのサンプルを執筆していますが、これはもっと簡単なもの。
平面の広大な地図を上空に見おろし、視点を回転させるようにしてみましょう。
CSS3にカメラオブジェクトなんてないですね。だから地図を立体回転させて、自分が回っているようにみせます。
image.png
ただ、この画像はちょっと使用上問題があるので、実際のサンプルでは「白地図、世界地図、日本地図が無料【白地図専門店】」さんからダウンロードさせていただきました、ありがとうございます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”UTF-8″>
<title>CSS3 地図を上空から眺める</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script src=”3d.js”></script>
</head>
<body>
<div class=”world”>
<img src=”world_ga_kabegami1_1024.gif” alt=”地図”>
</div>
</body>
</html>
これだけ、つまり地図をdivタグで囲っただけです。
そこでCSSにより、横軸(X軸)を50度回転させます。
div.world {
-webkit-transform: rotateX(50deg);
}
Safariで見るとこんな感じです。
no_perspective.jpg
これでは、縦がつぶれて見えるだけです

ではこれに「遠近感」をつけます。
CSS側で、まずbody要素に遠近感をつけます。
body {
-webkit-perspective: 300px;
}
結果、Safariではこう見えます。
perspective.png
気になるのは、300pxという数値ではないでしょうか?
この数値、実は大きくなればなるほど、平面的に近づいていきます。
ゼロだと、まともに見えることが出来ません、数値が小さければ、遠近感もキツくなります。(このあたりは書籍を読んでいただけたら。)
さて、それではキーボードの左右(←と→)で視点を360度回転するようにしましょう。
回転させる対象はdiv.worldです。
そして回転する軸ですが、これはrotateZになります。
これは元々地図を真っ正面から見るとZ方向の奥に軸を置いて回転させることになりますよね?
それが親のbody要素にperspectiveがかかっているせいで、Y軸と勘違いしそうですが、Z軸を回転させることが正しいのです。
この値を4度ずつ足したり引いたりすると、地図が回ります。
サンプルはこちら
サンプル(Safariで見ましょう)
では、カクカク動くのは毎回、角度が更新されているので、瞬間で角度が変わるのではなく、それをつなげるようにアニメーションさせたいので、ここではCSS3のtransitionプロパティを使います。
CSSファイルにはdiv.worldに以下を記述します。
div.world {
-webkit-transition: -webkit-transform 0.3s linear;
}
上記は「linear」がポイントです、イージングすると「くいっくいっ」と、変な動きになるので、ここはイージングなしでいきます。

今度はカクカクせず、動きます。transitionが効いているからですね。

サンプル(Safariで見ましょう)

でも、これだとキーを押したタイミングで一回回転したら止まります。
ここは一つ、transitionを使わずに、JavaScriptで一定間隔で数値を入れ替えた方が良さそうです。
角度が入っている変数に、プラスかマイナスのスピードを都度加算するといいかな?と。
サンプル(Safariで見ましょう)