週刊Webテク通信

2010年5月第1週号 1位は,CSS3の新機能をIEでも実現させる方法,気になるネタは,1年で70億枚の顔写真をスキャンしたFace.comが顔認識APIを無料で一般公開

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

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

1. CSS3 Solutions for Internet Explorer - Smashing Magazinehttp://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

CSS3の新機能と同様のことをInternet Explorerでも実現するためのテクニック集です。

透明度,角丸,ドロップシャドウ(テキスト/ボックス)⁠グラデーション,複数の背景画像,回転を,IEでも実現するためのコードや注意点が解説されています。

テキストに影をつけるtext-shadowプロパティに関してはjQueryプラグインを使ってJavaScriptで実現していますが,ほかのものはIE独自のfilterプロパティやbehaviorプロパティを使った例を紹介しています。

IE独自のプロパティを使うと標準に準拠したCSSではなくなるなど,それぞれの欠点や制限もくわしく説明されています。

回転やグラデーションについては,filterを使ってもCSS3で可能なことの全てはカバーしきれないそうです。

図1 CSS3の新機能をIEでも実現する方法

図1 CSS3の新機能をIEでも実現する方法

2. 15 In-Depth Examples of Addictive User Experience | Design Shackhttp://designshack.co.uk/articles/inspiration/15-in-depth-examples-of-addictive-user-experience

印象深いユーザー体験を与えるインターフェイスデザインを集めた記事です。

Webサイトに限らずiPhoneアプリやデスクトップアプリケーションからもピックアップされています。

使っていて心地よさを感じるソフトは特別な存在になったりしますよね(わたしにとってはCSSEdit,Espressoがそう)⁠Webサイトでも心地よいユーザー体験を与えてファンになってもらえるのが理想かもしれません。

図2 くせになりそうなインターフェイスデザイン集

図2 くせになりそうなインターフェイスデザイン集

3. 30 Useful Web-Based Applications for Designers | Most Inspired: Design Inspiration Bloghttp://www.mostinspired.com/blog/2010/04/27/30-useful-web-based-applications-for-designers/

デザイナーの役に立つオンラインアプリを紹介した記事です。

カラーパレット作成ツール,CSS編集ツール,メニュー/背景パターン/ダミーテキストのジェネレーターなどが紹介されています。

図3 デザイナーのためのオンラインアプリいろいろ

図3 デザイナーのためのオンラインアプリいろいろ

4. Excellent Tutorials to keep Your Css Skills Up to date | Designer Wall | The Best of Css, Web Design, Tuts & Inspirationhttp://designerwall.co.za/2010/04/excellent-css3-tutorials-to-keep-your-css-skills-up-to-date/

CSSのスキルアップに役立つ,おすすめのCSS3チュートリアル集です。

CSS3の新機能のレクチャーや,今までJavaScriptを使っていたような効果をCSS3だけで実現したもの,jQueryと組み合わせた高度なインタラクションなど,いろいろなチュートリアルが紹介されています。

図4 CSS3のチュートリアル集

図4 CSS3のチュートリアル集

5. 97 Beautiful Navigation for your Inspiration | TutToasterhttp://www.tuttoaster.com/97-beautiful-navigation-for-your-inspiration/

グローバルナビゲーションメニューを中心とした,美しいナビゲーションを大量にまとめたショーケースです。

図5 美しいナビゲーションのショーケース

図5 美しいナビゲーションのショーケース

そのほか先週の記事から,気になるニュース記事を3つ紹介します。

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

Fonts.com Web Fontshttp://webfonts.fonts.com/

Fonts.comがウェブフォントサービスを始め,現在ベータ版として公開されています。

Web Fontsを使いサーバー上のフォントをCSSで読み込ませるため,ユーザーの環境にインストールされていないフォントを,ブラウザ上で表示できるサービスです。

このFonts.com Web Fontsは,日本語のフォントにも対応しているのがうれしいところ。今のところ,平成明朝,平成角ゴシック,平成丸ゴシックの3書体が使えます。

全てのメジャーなブラウザに対応していて,Internet Explorer 4以上に対応しているところもいいですね。

使い方も簡単で,どのセレクタに対しどの書体を指定するのかはブラウザ上で設定します。HTMLに追加するのは生成されるJavaScript一行だけで,CSSファイルをいじる必要もありません。

一度JavaScriptを追加してしまえば,その後のフォントの変更や追加は全てFonts.com Web Fontsの管理画面からできてしまいます。便利ですね。

使い方などは,ついにウェブでも有名書体が使える!ウェブフォントサービス Fonts.com Web Fonts β版が運用開始 - フォントブログに詳しく説明されています。わたしも参考にさせていただきました。

日本語フォントの使えるウェブフォントサービスとして,デコもじという日本のサービスもスタートしましたね。こちらはブログをやっている個人向けのようで,手書き風文字などかわいい文字がそろっています。

図6 Fonts.comによるウェブフォントサービス

図6 Fonts.comによるウェブフォントサービス

今週の気になるWebネタ

1年で70億枚の顔写真をスキャンしたFace.comが顔認識APIを無料で一般公開http://jp.techcrunch.com/archives/201005037-billion-scanned-photos-later-face-com-opens-up-to-developers/

Facebook上で使える顔認識アプリケーションにも使われているFace.comの顔認識技術が,APIとして一般に無料公開されたそうです。

Facebookの写真アルバム上で,認識された人の顔にタグ(名前)を付けるという機能があるそうなのですが,1年で70億枚の写真を処理して5200万人の顔を認識しているそうです。スゴイ。

公開されたAPIによって,だれでも顔発見/顔認識技術を利用したサービスを作れるようになるということですね。iPhone/Androidアプリで面白いものが次々と出てきそうな予感がします。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入