週刊Webテク通信

2009年10月第1週号 1位は,検索結果ページのデザイン/気になるネタは,キー局がなぜ今,YouTubeに

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

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

1. Search Results Design: Best Practices and Design Patterns « Smashing Magazinehttp://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/

検索結果ページのデザインと機能について,多くの事例をもとに最良なパターンを探った記事です。

以下の項目に分けて,それぞれの検索画面についてポイントを解説しています。

  1. 検索エンジンでのトレンド
  2. 動画共有サイトでの検索結果
  3. ソーシャルメディアやミニブログでの検索結果
  4. オンラインショップでの検索
  5. 写真共有サイトでの検索結果
  6. IT業界サイトでの検索結果
  7. ニュースサイトでの検索結果

最後に,検索結果のデザインに関するアドバイスがまとめられています。見た目のデザインよりも,機能面での話が多いですね。

図1 検索結果のデザインについて考察した記事

図1 検索結果のデザインについて考察した記事

2. YUI CSS Framework Tutorialhttp://www.thewebsqueeze.com/web-design-tutorials/yui-css-framework-tutorial.html

米Yahooが提供するYUI CSS Frameworkのチュートリアル記事です。

YUIはYahoo! User Interface Libraryの略で,ユーザーインターフェイスを実装する手助けとなるライブラリです。YUIを使うと,ドロップダウンやスライダーなどを簡単に作ることができます。

その中の,CSSに関するフレームワークがYUI CSS Frameworkというわけです。この記事では,YUI CSS Frameworkを使って,段組みレイアウトを作る方法を紹介しています。

YUI CSS FrameworkのCSS Gridを使うと,ページ全体の段組みを簡単に作ることができ,その変更も楽になります。たとえば,divに付けたclassの値を変えるだけで,2カラムレイアウトの左右のカラムの入れ替えや幅の変更ができるんです。

記事の中で作成したHTMLとCSSのセットはダウンロードできるので,そのHTMLをいじってみると理解が早いでしょう。

この記事はYUI2をベースに書かれていますが,現在YUI3という新しいバージョンも公開されています。

図2 YUI CSS Frameworkのチュートリアル

図2 YUI CSS Frameworkのチュートリアル

3. 10 Creative Magazines With Blog & Twitter Friendly Websites | Inspired Magazinehttp://www.inspiredm.com/2009/10/01/10-creative-magazines-with-blog-twitter-friendly-websites/

ブログとTwitterの両方で情報発信している雑誌のサイトを10個紹介しています。日本の雑誌でもブログをやっているところは多いと思いますが,Twitterまでやっているところはあまりないでしょう。

雑誌サイトだけあってどれもデザインに凝っていますが,構成としてはシンプルなブログスタイルに落ち着いているものが多いようですね。

図3 ブログとTwitterの両方で情報発信している雑誌サイト

図3 ブログとTwitterの両方で情報発信している雑誌サイト

4. Styling Blog Comments: Correct Markup and Free Examples - Templaticahttp://templatica.com/post/25/styling-blog-comments-correct-markup-and-free-examples

ブログのコメント欄のマークアップの仕方と,CSSによるデザインサンプルの紹介です。

4種類のデザインのHTML(+CSS)&画像ファイルのセットをダウンロードすることもできます。

コメントは番号付きリストでマークアップし,投稿者の名前や日付などの情報はまとめて「入れ子」にしておくと良いそうです。たしかにこれだと,CSSが適用されなくても見やすいですね。

Twitterのタイムラインも番号付きリストでマークアップされていますし,発言が並ぶようなコンテンツの場合はこういう組み方が主流なのでしょう。

図4 ブログのコメント欄のデザインについて

図4 ブログのコメント欄のデザインについて

5. 30 Gorgeous Horizontal Menus for Inspiration | Quenesshttp://www.queness.com/post/744/30-gorgeous-horizontal-menus-for-inspiration

デザインの優れた水平ナビゲーションメニューのショーケースです。作り込まれた,凝ったデザインのものが多いですね。

図5 水平ナビゲーションメニューを30個紹介

図5 水平ナビゲーションメニューを30個紹介

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

そのほか先週の記事から,jQueryを使ってフォームの機能を拡張するチュートリアルを二つ紹介します。

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

User Heat : どこが読まれているか見える!無料ヒートマップ・ツールhttp://userheat.com/

User Heat(ユーザーヒート)は,訪問者がWebページのどこを読んでいるのか/どこをクリックしているのかを可視化する無料のサービスです。

  1. マウスの軌跡
  2. クリックが多い場所
  3. 熟読エリア

の3パターンの画像を,ページ上にオーバーレイ表示することができます。

よく読まれている場所は,マウスの動きやスクロール操作,文中のキーワードから統合的に推測しているそうです。サーモグラフィ風表示が非常にそれっぽいですね。

無料アクセス解析ツール「なかのひと」で知られる株式会社ユーザーローカルが運営しています。

図6 無料ヒートマップツール「ユーザーヒート」

図6 無料ヒートマップツール「ユーザーヒート」

今週の気になるWebネタ

キー局がなぜ今,YouTubeに テレ朝とTBS,“かつての敵”と手を組む - ITmedia Newshttp://www.itmedia.co.jp/news/articles/0909/29/news077.html

テレビ朝日とTBSテレビがYouTubeとパートナー契約を結び,公式チャンネルを開設しました。YouTubeに勝手にアップされたテレビ番組動画にお墨付きを,というわけではないですね。むしろ違法動画の取り締まり強化に,テレビ局側がプレッシャーをかける意味もあるようです。

テレ朝もTBSも今のところYouTubeで配信しているのはニュース動画が中心で,自社サイトでも無料配信しているものがほとんどとのことです。

TBSのYouTube上のチャンネルは,自社のニュース映像配信サイト「TBS News i」の名前をそのまま使っていますね。別館的な位置づけなんでしょうか。

ところで,TBSのCS放送「TBSチャンネル」は,TBSのキャラクター「ブーブ」がつぶやくという設定でTwitterを利用しています。元々はTBSチャンネルで放送されるウルフルズラストライブのキャンペーンの一環として開始したそうです。

このブーブのTwitterですが,ほかのユーザーとコミュニケーションを取ったり,TBSやTBSラジオの宣伝もしたりと,本来の目的を忘れて楽しんでいるように見えます。Twitter界ではもうTBSの顔になっていると言えるでしょう。

このブーブのキャラクターを,YouTubeをはじめ他のTBSのネット展開でも活かせばいいのになと思いますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入