週刊Webテク通信

2009年12月第1週号1位は、RGBAカラーの使い方、気になるネタは、思いどおりの日本語入力 - Google 日本語入力

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年11月30日~12月6日の間に見つけた記事のベスト5です。

1. 24 ways: Working With RGBA Colourhttp://24ways.org/2009/working-with-rgba-colour

RGBAカラーを使うためのチュートリアル記事です。AはAlpha(アルファ)のことで、透明度の情報を加えた色の指定がCSS3からできるようになりました。RGBaといった表記をすることも多いようです。

opacityというプロパティも従来からあるのですが、透明度が子要素にも継承するため使いにくいと言われていました。この記事にあるRGBAを使った例では、見出しのh1に対し「背景色は透明度あり&文字色は透明度なし」といった指定の仕方を紹介しています。これはopacityではできなかったことです。

RGBAカラーに対応していないブラウザへの対処法も説明されています。RGBAでの指定は、非対応のブラウザではRGB部分の指定も含め完全に無視されるようです。そこで、非対応ブラウザ用の指定とRGBAでの指定とを、2行に分けて指定するとよいとのことです。

透明度を使った簡単なロールオーバー効果の作り方も紹介されています。

図1 RGBAカラーの使い方の紹介
図1 RGBAカラーの使い方の紹介

2. Pushing Your Buttons With Practical CSS3 - Smashing Magazinehttp://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/

ドロップシャドウやRGBAカラー、角丸といったCSS3の機能をうまく利用したボタンの作り方です。

ブラウザを選びますが、ちょっとしたアニメーションやグラデーションもCSSで操作すれば、簡単にシャレたボタンが作れますね。

ボタンは過度に装飾しないほうがいいですし、サイト内での統一性が必要なので、ボタンのデザインはCSS3でやればいいかと思いますよね。画像としてボタンを作ると、文字の直しがあった場合に面倒ですし。

図2 CSS3を使ったボタンの作り方
図2 CSS3を使ったボタンの作り方

3. Fixed elements in web design with examples ≪ CreativityDenhttp://blog.creativityden.com/fixed-elements-in-web-design-with-examples/

CSSでの固定配置(fixed)の使い方と、固定配置をうまく使ったサイトのショーケースです。

実例として挙げられている、透明度を効果的に使ってスクロールによる変化を楽しめるサイトが印象に残りました。

固定配置はIE6以前では問題があるのですが、IE6 position:fixed の諸問題を解決する jQuery.exFixed.jsという日本人の方が作っているjQueryプラグインもあるようです。

図3 固定配置の使い方と実例紹介
図3 固定配置の使い方と実例紹介

4. Minimalist Web Design: When Less is More | Webdesigner Depothttp://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/

最小限の機能や装飾に絞ったミニマルなWebデザインのススメと、ショーケースやトレンドの紹介です。

紹介されているサイトを見ると、インタラクションに関してはAjaxなどを使った十分リッチなものも多いですね。

図4 ミニマリストWebデザインについて
図4 ミニマリストWebデザインについて

5. 10 front-end techniques to improve your site usabilityhttp://www.catswhocode.com/blog/10-front-end-techniques-to-improve-your-site-usability

サイトのユーザビリティを向上させるためのフレームワークやテクニックを10個紹介しています。

日時表示を「○分前」といったTwitter風のものに変えたり、外部リンクにはアイコンを付けたりといった、小技が中心です。

図5 ユーザビリティを向上させるテクニックの紹介
図5 ユーザビリティを向上させるテクニックの紹介

そのほか先週の記事から、フォーム関連のネタを紹介します。

先週の気になるWebサービス

ニッポンのお茶の間「ピーチク」http://ptic.jp/

「ピーチク」は、テレビ番組・ラジオ番組に関するツイート(つぶやき)を投稿/閲覧できる、Twitterと連携したサービスです。テレビ、ラジオの局別にタイムラインが分かれています。

投稿は「ピーチク」上でTwitterのIDを使いログインして行います。投稿したツイートはもちろんTwitter側にも反映され、独自のハッシュタグと局別のタイムラインへのリンクが追加されるようです。

これを見て、テレビの実況掲示板をリアルタイムで閲覧できるBalloo.jpとBalloo! for iPhone/iPod touchINFOCITY Labs(研究開発プロジェクト|bb2c/balloo!/balloo! Mobile/balloo! for iPhone/iPod/開発者ブログ)を連想しました。

「ピーチク」はTwitterを使っていることから、まったりとして荒れた発言の少ない場になりそうなので、実況掲示板系とは差別化できそうです。

運営会社には、小山薫堂の会社「オレンジ・アンド・パートナーズ」が名を連ねています。売れっ子放送作家で、⁠おくりびと」の脚本家としても知られる小山薫堂が関わっているということで、今後の展開に注目したいですね。

図6 Twitterを利用したテレビ番組へのつぶやき共有サービス
図6 Twitterを利用したテレビ番組へのつぶやき共有サービス

おすすめ記事

記事・ニュース一覧