週刊Webテク通信

2009年4月第1週号 1位は,クリエイティブでリッチなUIとそれを作る方法/気になるネタは,ガチャピンが Googleマップのアドバイザーに就任!

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

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

1. 10 Creative & Rich UI & How to Create Them | Noupehttp://www.noupe.com/design/10-creative-rich-ui-interfaces-how-to-create-them.html

クリエイティブでリッチなユーザーインターフェイスが使われているサイトを紹介し,そのインターフェイスを実現するためのライブラリやテクニックへと誘導しています。

そのサイトで実際に使われているスクリプトそのものを紹介しているわけではないので,同じものを簡単に実現できる方法ではありません。ご注意を。

クリエイティブでリッチと題していますが,凝った動きをするというよりグラフィックの作りがいいことでインターフェイスが洗練されて見えるサイトが多いようです。

スライドする領域,ドラッグできるフッタ,アニメーションするメニュー,スライドショー,アコーディオンなど,よく見るテクニックのうまい使用例の紹介と考えることもできるでしょう。

図1 うまく作られたUIのサイトが10個紹介されています

図1 うまく作られたUIのサイトが10個紹介されています

2. [JS]jQueryの効果的な使い方を実例から学ぶ -Use jQuery | コリスhttp://coliss.com/articles/build-websites/operation/javascript/js-usejquery.html

jQueryを利用したサイトのショーケースUse jQueryの紹介記事です。ここで取り上げられてからまだ一週間ちょっとしか経っていませんが,レイアウトなどがリニューアルされていました。

スライダー,スライドショー,テキスト置換,などのカテゴリーで絞り込んでサイトを探すことができます。実際にサイトで使われているJavaScriptのコードを見ることができ,使われているプラグインへのリンクも用意されています。

今回1位で取り上げた記事同様に,よく見るユーザーインターフェイステクニックのうまい使用例を見つけることができるでしょう。

図2 現在のUse jQueryは色やメニューの位置も変わっています

図2 現在のUse jQueryは色やメニューの位置も変わっています

3. 25 Scripts for Dropdown Navigation Menus | Vandelay Design Bloghttp://vandelaydesign.com/blog/tools/dropdown-navigation-menus/

ドロップダウンメニューを実現するスクリプトが多数紹介されています。個人的にはあまりWebサイトにドロップダウンを使うのは好きではないのですが,海外のサイトではちょっと流行っているようにも感じます。

先週取り上げた記事に,Make a Mega Drop-Down Menu with jQueryというのがあったのですが,その関連としてMega Menus: the Next Web Design Trend 」という「メガメニュー」の紹介記事もありました。
メガメニューというのは,ドロップダウンでかなり大きな領域のサブメニューが開くものを指すようですが,これからのWebデザインのトレンドとなるんでしょうかね?

また,ドロップダウンに限らずjQueryを使ったメニューを紹介した10 Best jQuery Menu Plugins | AjaxLineという記事もご参考に。ここで取り上げられているのもほとんどはドロップダウンです。やはり流行っているのかも。

図3 ドロップダウンメニューが大量に紹介されています

図3 ドロップダウンメニューが大量に紹介されています

4. InfoQ: Expression Web SuperPreviewで様々なブラウザの同時テストが可能にhttp://www.infoq.com/jp/news/2009/04/expression-web-superpreview

マイクロソフトから登場した複数ブラウザ表示チェックのアプリケーション「Expression Web SuperPreview」の紹介記事です。

そもそもマイクロソフトが複数バージョンのIEを同時に起動できるようにしてくれればいいとも思いますが,Web SuperPreviewは複数ブラウザの表示結果を横並びで比較できたりと,表示チェックに特化したアプリケーションのようです。

現在プレビュー版でIE6,7,8のチェックしかできないようですが,Firefoxなど他ブラウザにも対応予定で,さらにクラウドサービスと連携して他OSのブラウザのプレビューもできるように開発しているんだとか。実現すると,かなり便利そうです。

複数のIEでプレビューするためのソリューションはいろいろありますが,先週の記事にもIE1, 2, 3, 4, 5, 6, 7, 8の確認が同時にできる -Internet Explorer Collectionというのがありました。

また,Breaking: Internet Explorer 8.1 Eagle Eyes Leakedによると,IE8.1ではFirefoxのアドオンが使えるようになるそうです。Web SuperPreviewとIE+Firebugで表示チェックはバッチリ! なんて時代がすぐそこに迫っているんでしょうか?

図4 Expression Web SuperPreviewに関する翻訳記事です

図4 Expression Web SuperPreviewに関する翻訳記事です

5. 100+ Massive CSS Toolbox | CSS Tools | Toolshttp://www.tripwiremagazine.com/Tools/CSS-Tools/css-mega-toolbox.html

CSSに関するチュートリアルやツール,テクニックなどの膨大なリンク集です。

数えていませんが100以上あるという英文のリンク集なので全部見るのは大変だと思いますが,キャプチャー画像を眺めていくうちに興味のあるものを発見できるんじゃないかと思います。

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から,Adobe Photoshopのチュートリアルを2つ紹介します。

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

SaveIE6: Help us save the best browser aroundhttp://saveie6.com/

Webサービスではありませんが,面白サイトとして「Save IE6」を紹介します。

何かとやっかいもの扱いのIE6ですが,そんなIE6を救おうというのが「Save IE6」。しかし,「Download now」を押したあとに仕掛けがあって,なかなかダウンロードに行き着けないというジョークのようです。

図5 Download nowボタンを押すと…

図5 Download nowボタンを押すと…

今週の気になるWebネタ

Google Japan Blog: ガチャピンがGoogleマップのアドバイザーに就任!http://googlejapan.blogspot.com/2009/04/google.html

ガチャピンが Googleマップのアドバイザーに就任したそうで,ストリートビューの人型アイコンがガチャピンアイコンになりました…。というのはエイプリルフールネタだったようで,今は元のアイコンに戻っています。このアイコン,よく見ると動きが妙で面白いですね。

このアイコン画像は一枚のPNGファイルにまとめられていて,Googleお得意のCSSスプライトテクニックで必要な箇所を表示しているようです。この画像を変えるだけなら,アイコンの変更も簡単そうですね。ガチャピン以外の別バージョンも期待したいです。

せっかくならこのアイコン,ユーザーでカスタマイズできるようにすると面白いですよね。自分のサイトに埋め込む地図には自分の好きなアイコンを選べるとか,自分の作ったアイコンを使えるとか。

Googleスマップとかいって5種類のSMAPアイコンが使えるってのもいいかも。あ,これ来年のエイプリルフールネタにどうでしょう?

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入