週刊Webテク通信

2009年6月第3週号1位は、リッチでクリエイティブなユーザーインターフェイス/気になるネタは、Opera、Webブラウザ内サーバ機能「Opera Unite」発表

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

1. 7 Rich & Creative User Interfaces and How to Create Your Own | Noupehttp://www.noupe.com/design/7-rich-creative-user-interfaces.html

ユーザーインターフェイスのパターン7つに対して、そのステキな実例とテクニカルな情報へのリンクとがまとめてあります。

7つのパターンは以下の通りです。

  1. Modal Windows(モーダルウィンドウ)
  2. Sliding Layouts(スライドするレイアウト)
  3. Hover(マウスオーバー時の効果)
  4. Slideshows(スライドショー)
  5. Embedded Audio and Podcast(オーディオやポッドキャスト)
  6. Search(検索)
  7. Tabbed Navigation(タブナビゲーション)

ちょっとしたしかけで「おお!」と思わせるような効果のあるサイトをいろいろ紹介しているとのことで、デザイン的にもステキなサイトばかりです。

図1 実例の紹介だけでなく、チュートリアルなどテクニカル情報も充実しています
図1 実例の紹介だけでなく、チュートリアルなどテクニカル情報も充実しています

2. 10 astonishing CSS hacks and techniqueshttp://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

クロスブラウザでの先進的なCSSテクニックを10個紹介しています。

全てのブラウザで同じ見た目を目指すというより、ブラウザは限定するけど簡単なコードで実現できる便利なテクニックが多いようです。

「1―Cross browser inline block」でのテクニックは、高さが違うブロックが混じっても横並びのボックスのレイアウトが崩れないというものですが、これはIE6にも対応だそうで興味深いですね。

図2 短いコードのテクニック中心です
図2 短いコードのテクニック中心です

3. 16 Best Photoshop Tutorials for Creating Web Designs | Web Design Ledgerhttp://webdesignledger.com/tutorials/16-best-photoshop-tutorials-for-creating-web-designs

WebデザインのためのPhotoshopチュートリアルの厳選したリンク集です。

メニューやボタンを作るためのものと、ページ全体をデザインするものとに分けて紹介しています。

図3 Webページ全体をデザインするチュートリアルが豊富です
図3 Webページ全体をデザインするチュートリアルが豊富です

4. 35 Excellent Websites for Downloading Free CSS Template | Desizn Techhttp://desizntech.info/2009/06/35-excellent-websites-for-downloading-free-css-template/

フリーのCSSデザインのテンプレートがダウンロードできるサイト集です。HTMLとCSSだけでなく、編集可能なPSDファイルも一緒に入手できるものもあるようです。

テンプレートによっては、クリエイティブ・コモンズのライセンスが記載されていたりするので、使用の際はご注意ください。

図4 35種類の配布サイトが紹介されています
図4 35種類の配布サイトが紹介されています

5. Top 5 Twitter Related Trends to Watchhttp://mashable.com/2009/06/14/twitter-trends-3/

Twitter関連のトレンドの紹介です。

  1. リアルタイム検索エンジン
  2. 本人確認されたアカウント
  3. つぶやいて景品をもらう
  4. Twitterを利用した広告
  5. Twitterチャット

の5つについて解説されています。

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

そのほか先週の記事から、その他のオススメ記事を紹介します。

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

TweetTabs : Realtime Twitter trends and Twitter searchhttp://tweettabs.com/

TweetTabsは、あるキーワードでのTwitter上の検索結果をほぼリアルタイムで追って行けるWebサービスです。そのキーワードを含むストリームだけがフィルタリングされて表示されるようなイメージですね。

キーワードごとに一列のストリームが「タブ」で表示され、このタブをどんどん増やすことができるわけです。また、タブは順番を入れ替えたり消したりできます。

検索結果が自動で更新されてスクロールして行く様は、なかなか面白いです。このリアルタイムに人々のコトバを見ている感じは、iPhoneアプリのBaloo!を見ているときと似てるなぁと思いました。

なお、自分のフォローしている人を追いかけることはTweetTabsではできません。また、日本語での検索もできないようです。

参考にさせていただいたTweetTabsは、Twitterを準リアルタイムで検索するすごいサービスという記事によると、TweetMemeというTwitterのランキングサービスを行っているところが開発しているそうです。

図5 日本語検索はできませんが、日本語表示は大丈夫です
図5 日本語検索はできませんが、日本語表示は大丈夫です

おすすめ記事

記事・ニュース一覧