週刊Webテク通信

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

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

ネットで見かけた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 日本語検索はできませんが,日本語表示は大丈夫です

今週の気になるWebネタ

すべてのPCをサーバに:Opera,Webブラウザ内サーバ機能「Opera Unite」発表 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0906/17/news022.html

Operaの次期バージョン「Opera 10」のOpera Uniteという機能には驚きました。自分のPCをサーバーとして稼働させ,他のPCと直接コンテンツのやりとりができるようになるそうです。

ファイル共有,音楽ストリーミング,共有メモ,写真共有,チャット,Webサーバーといったサービスを有効にでき,接続する側のブラウザはOperaでなくてもいいとのこと。今はまだテスト版なので,まだまだできることは増えるのかもしれません。

友人知人間でのちょっとしたファイル共有などを想定しているようですが,そもそも普通のユーザーがこのためにOperaを使うのかはちょっと疑問ではあります。むしろ企業内でのファイルのやりとりなど,ビジネス用途の方が需要があるのかもしれません。

セキュリティに関する懸念の声があったり,Google Waveのほうがいいんじゃないのみたいな意見もあるようですが,なんにせよ楽しみな技術です。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入