週刊Webテク通信

2009年3月第3週号 1位は,パンくずリストのまとめ/気になるネタは,iPhone OS 3.0発表

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

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

1. Breadcrumbs In Web Design: Examples And Best Practices | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

パンくずリストとは何かというところから,パンくずリストの種類,良い例・悪い例などをまとめてある記事です。

ところで,日本では「パンくずリスト」で定着した感がありますが,この記事の文中にはbreadcrumb navigation,breadcrumb trailは出てきますが,breadcrumb listという表現はありませんでした。

パンくずリストはユーザーの利便性のほかに,直帰率を減らす効果があるとのことです。SEO対策になるとよく言われますが,この記事ではそのことには触れられていません。あ,でもコメント欄ではSEO効果について書いている人がいますね。

パンくずリストからプルダウンでメニューが出てくるのはやりすぎじゃないかと感じますが,Deliciousのインタラクティブなパンくずリストや,「Tabcrumbs」と称したタブナビゲーションとの融合は,面白い試みだと思いました。

図1 パンくずリストのまとめページ

図1 パンくずリストのまとめページ

2. 8のjQueryのすごいTIPS[to-R]http://blog.webcreativepark.net/2009/03/17-161250.html

8 awesome JQuery tips and tricksという英文記事に,独自の補足を加えて解説しています。

jQueryといえばプラグインに頼りがちですが,こういう記事を元にコードを意識して使うと,カスタマイズがやりやすく勉強にもなりますよね。

画像のプリロード,ブロックレベル要素の高さを揃える方法,フォントのリサイズなど,使ってみたいテクニックが揃っています。

3. JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌http://phpspot.org/blog/archives/2009/03/jsgx.html

jQuery用のアニメーションフレームワーク「GX」の紹介記事です。

CSSを記述するような感じでアニメーションを設定できるので,簡単に使えそうです。CSSの全てのプロパティに対してアニメーションを適用できるそうです。

この記事,およびGX公式サイトのデモページで実際の動きのサンプルを見ることができます。

図2 アニメーションのサンプルも豊富です

図2 アニメーションのサンプルも豊富です

4. 45+ Best Icon Design Tutorials | Dzine Bloghttp://dzineblog.com/2009/03/45-best-icon-design-tutorials.html

アイコンデザインのチュートリアルのリンク集です。以前,50 Excellent Icon Design Tutorialsというチュートリアル集を紹介しましたが,同様のものですね。

グラデーションを多用した,イマ風というかMac OS X風のものが目立ちます。ツールはIllustratorとPhotoshopが半々くらいです。

立体的なものでも,ほとんど「3D効果」機能は使われていませんでした。3D効果をうまく使ったIllustratorのチュートリアルとして,前回紹介した40 Useful Adobe Illustrator 3D Tutorials and Techniquesもご参考に。

図3 アイコン作成のチュートリアルがいっぱい

図3 アイコン作成のチュートリアルがいっぱい

5. [CSS]ジャケ写をセクシーにスタイリングするスタイルシート | コリスhttp://coliss.com/articles/build-websites/operation/css/music-album-sexy-overlays.html

CDケースなどの画像を,元画像の上に重ねて表示させているだけですが,なかなか面白いアイディアです。透過PNGを使うのも一般的になってきましたし,この手のテクニックは使いどころがありそうです。透過PNG画像の作り込みがポイントですね。

透過PNGを使うには,IE6対策も必要となります。このテクニックでは,IEの独自拡張を使った対策をしています。ほかの対策方法や,IEの透過PNG対策用JavaScriptライブラリなども,検索するといろいろ見つかるはずです。

また,IE7で画像がきれいにリサイズされるように,サイズ変更時のアルゴリズム指定も行っています。このテクニックも覚えておきたいですね。

図4 3種類のかっこいい効果が適用できます

図4 3種類のかっこいい効果が適用できます

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

そのほか先週の記事を振り返ってみると,膨大な量を集めたリンク集が目立ったので以下に紹介します。

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

Poken Japanhttp://poken.jp/

スイス生まれのデジタル名刺ガジェット・ポーケン(Poken)が話題です。自分のブログのアドレス,SNSやTwitterのIDなどのプロフィールを相手と交換するためのもので,ストラップ型のアイテムとWebサイトを連動して使用します。

プロフィール情報の交換はお互いのポーケンをタッチさせるだけ。あとでポーケンをパソコンのUSBに接続し,専用サイトで交換した情報の確認や管理ができるとのことです。Webサイトがあってこそということで,Webサービスがベースになっているともいえるでしょう。

相手によってプロフィールを切り替えたり,プロフィールを渡したくない相手用のモードがあったりと,なかなか考えられているようです。データは暗号化されているのでポーケンをなくしても平気なんだとか。

携帯電話の赤外線通信でもいいだろうと思う人もいるかもしれませんが,タッチさせるだけというお手軽さや,マスコット型というファッションアイテム性,そしてWebとの連動となかなか面白そうな存在です。

図5 サイトもおしゃれな感じです

図5 サイトもおしゃれな感じです

今週の気になるWebネタ

新型iPhoneは今夏発表──「iPhone OS 3.0」はコピペ,プッシュ通知,Spotlightなどサポート - ITmedia +D モバイル
http://plusd.itmedia.co.jp/mobile/articles/0903/18/news032.html

iPhone OS 3.0が発表され,ついにコピペができるようになったと話題です。

待望のカット,コピー,ペースト機能ですが,いざできるようになってもあまり使わないような気も…。とはいえあるとないでは大違いなので,欠点が一つ減ったというところでしょうか。

ユーザー向けの機能強化よりも,開発者向けの新機能の方が重要そうです。アプリ内での決済機能が付いて,日本のケータイアプリ同様の月額課金が可能になります。ピア・ツー・ピア接続で,ニンテンドーDSのように対戦ゲームができるようになるでしょう。

また,アプリから音楽ライブラリーにアクセス可能になるので,自分のiPhone/iPod touchに入れてある曲を使っての音ゲーなんかも出てくるかもしれません。

きっとiPhoneアプリの開発者たちは,新機能を使ってのあっと驚くようなアプリの構想を練っていることでしょう。進化していくiPhoneが,ますます面白くなっていきそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入