こんにちは〜！ いつもWeb系のお話をさせていただいてますが、今趣味でCG制作を続けていまして、毎日ちょっとずつ作る宇宙戦艦ヤマト。やっとモデリングが出来て、いよいよテクスチャーの制作かな？ ってところです。
FacebookやTwitterに投稿すると、何人かの方に「完成が楽しみです」と言われましたが、ここまで来たら波動砲発射シーンまで作りたいところ。。スクリーンショットがこちら。実はだいぶ手抜き。。
< http://twitpic.com/46tl2r
>
で、話は変わって。僕もちょっと関わらせていただいた、HTML5案件が無事リリースされました。PCブラウザはChromeで動作すればよい、というものでそのあたりはありがたいんですが、当初は「絶対無理だろう！」と思っていました。ほんと、よく出来たな、と。今回でかなり勉強になったと思います。とにかく開発チームに参加出来たことに感謝しています。
さてさて、話を戻して、と。先日の記事にある通り、大阪にありますマイクロソフトさんの会場で、イベントを行ってきました。とてもキレイ、しかもフリードリンク付きなので、来場者の方は好きなだけドリンクを飲めました。
FacebookやTwitterに投稿すると、何人かの方に「完成が楽しみです」と言われましたが、ここまで来たら波動砲発射シーンまで作りたいところ。。スクリーンショットがこちら。実はだいぶ手抜き。。
< http://twitpic.com/46tl2r
>
で、話は変わって。僕もちょっと関わらせていただいた、HTML5案件が無事リリースされました。PCブラウザはChromeで動作すればよい、というものでそのあたりはありがたいんですが、当初は「絶対無理だろう！」と思っていました。ほんと、よく出来たな、と。今回でかなり勉強になったと思います。とにかく開発チームに参加出来たことに感謝しています。
さてさて、話を戻して、と。先日の記事にある通り、大阪にありますマイクロソフトさんの会場で、イベントを行ってきました。とてもキレイ、しかもフリードリンク付きなので、来場者の方は好きなだけドリンクを飲めました。
●CSS3で作るボタンへのこだわり
最近、UX（ユーザエクスペリエンス）という言葉を業界でよく聞くようになりまして、そのセミナーもいくつかあるようです。とても大事なことであって、僕も意識はしていますが、その反面、UIがダサくなってはいけない。よく「見た目だけでなく」ということを言われますが、最近では見た目がスゴく軽くみられていて、「ダサイ」って思えるUIはそんなに気にされない方が増えていないか？ と思う訳です。
やっぱりダサかったらダメです！
というわけで、その日に話をしたのは、質感たっぷりのボタンを作るための考え方です。たまたまテーマがCSS3ということもあり、スライドに仕込んだのはCGで作られたボタンです。
●CGで作られたボタンを観察して、光と影のつき方を理解
──背景の上に文字があって、その文字の影は何色か？
口でいうと簡単なことで誰だって分かる話なんですが、物体に光があたると反対側には影がつく、ということ。しかし、私たちが生活している空間に存在する光は思った以上に複雑です。光源から直接当たっている光のせいだけではなく、他の物体に反射した間接的な光が当てられていることがほとんどです。だから、そこまで考えて「奥行き」を表現することで「質感のあるデザイン」が可能な訳です。
じゃあ影を黒く塗ってしまえば、立体的な奥行きが表現できるのか？ と言われるとそれは違います。例えば、ボタンに文字をのせます。角丸のボックスの中に文字があり、その文字には影がついている、としましょう。その影は「黒」と決まっていますか？ それは違います。
実際は、そのボックスの背景色となる色に影がのせられた色、となるので、もし黄色のボタンだったら、黄色が濃くなるはずです。純粋な「黒」を影の色にするのは「現実的におかしい」ということになります。
──背景に文字が刻印（押し込まれた表現）された質感をCSSで再現
結構簡単そうで実は奥が深くて、軽視されがちな質感を見ていきましょう。
まずは観察からしましょう、こんなCGをつくってみました。
<
>ボタンを斜め上から観察している様子をリアルに表現しています。
これにより、観察した結果
・ボックスの上が白く光っている
・ボックスの下は影がついている
・文字の上には影がついている
・文字の下は白く光っている
というあらましを知ることができます。
だとしたらこれをCSSで表現します。
白い内側の影...box-shadow: inset 0 1px 2px rgba(255,255,255,0.9)
文字の上に暗い影...text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
文字の下に明るい影...text-shadow: 0 1px 1px rgba(255,255,255,0.6)
暗い外側の影...box-shadow: 0 1px 2px rgba(0,0,0,０.7)
ピンと来ない方はこの画像をご覧下さい。
<
>CGのボタンと、CSSを使ったボタンを並べて比べましょう。CSS3まで使うとここまで表現できます。かなりリアルで現実と近いですね。
<
>■
「こんなリアルに作る必要があるのか？」という問いに対しては、決してそうじゃない、って私も思います。ただし、影の表現で奥行きが理解できない、前後の距離感が分かりにくいUIが、ユーザの操作に対してどう影響を与えるのか？考えたら、このような考えは決して無駄じゃないってことです。
◎宿題（なんで？？って思わないでくださいね ^^）
こんな立体感を表現する際は、CSSだとどう書けばよいでしょう？
<
>考えてみてくださいね。
それではどうもありがとうございました！！
【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。