週刊Webテク通信

2009年5月第2週号1位は、今どきのWebデザインで「すべきこと/ダメなこと」気になるネタは、施設を「ストリートビュー」公開しませんか? - グーグルが新プログラム

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

1. The Do’s & Don’ts of Modern Web Design . Relevant, snacksized web design resourceshttp://webdosanddonts.com/

今どきのWebデザインで「すべきこと/ダメなこと」がまとめられています。

概要が載っているだけで詳しくは他サイトへ誘導しているのですが、まとめサイトとしての見せ方などがよくできていると思います。⁠The do’s」「The don’t」で左右に分かれているところが面白いです。

特に目新しい内容はないようですし、まだ紹介されてない定番テクニックなどもありそうですが、徐々にコンテンツは追加されているようです。新着情報はRSSフィードやTwitterでチェックできるようになっています。

図1 すべきこと/ダメなことで色分けもされています
図1 すべきこと/ダメなことで色分けもされています

2. ASCII.jp:Webデザイン劇的ビフォーアフター09年春版http://ascii.jp/elem/000/000/414/414388/

MSN、毎日.jpなど最近大規模なリニューアルをしたサイトについて、リニューアルのポイントなどを紹介しています。日本の企業サイトのトレンドを知るのにも役立つ記事ですね。

ここで紹介されているリニューアル後の「毎日jp」のTOPページは、膨大なコンテンツが詰め込まれていてすごいです。同じ記事へのリンクが複数載っていたりするのが気になりますが、このアプローチはありだと思います。

図2 リニューアル前後の画面キャプチャー付きです
図2 リニューアル前後の画面キャプチャー付きです

3. 10 Ways To Put Your Content In Front Of More People | How-To | Smashing Magazinehttp://www.smashingmagazine.com/2009/05/12/10-ways-to-put-your-content-in-front-of-more-people/

Webサイトへのアクセスを増やすことよりコンテンツを見てもらうことのほうが大事だよねということで、コンテンツを多くの人の目に触れさせる方法を紹介しています。今やWebサイトはネット戦略の1つのパーツに過ぎず、Webサイトに人が来るのを待っているだけではダメとのことです。

たしかにブログにしろTwitterにしろ、ひとつのコンテンツを見るにもいろいろな道筋がありますし、個々のコンテンツがサイトの枠を越えてネット上で流通しているとも言えそうです。各企業サイトのコンテンツに同様の戦略は使えないかもしれませんが、参考になることは多いと思います。

10の方法を以下に簡単にまとめてみました。

  1. デスクトップアプリケーションを提供する
  2. モバイルへの対応をする
    ⁠モバイルサイトを作る、ショートメッセージを配信、モバイルアプリを作る)
  3. Twitterで情報配信やカスタマーサポートを行う
  4. 他のサイトに寄稿する
  5. Facebookを利用する
    ⁠グループを作る、ファンページを作る、アプリケーションを作る)
  6. WidgetやAPIを開発する
  7. RSSフィードを提供する
  8. 動画、音声などを使用する
  9. ストリーミング配信を行う
    ⁠商品デモ、コミュニティとのミーティング、オンライントレーニング)
  10. Emailも忘れずに
    ⁠RSSを自動でメールするツールなどもある)

日本では、2のショートメッセージは「ケータイ用メルマガ⁠⁠、5のFacebookは「ミクシィ」と置き換えるといいでしょう。

4. Thumbnail In Web Design: Examples And Best Practices | 2experts Design - Web Design and Graphic Design Bloghttp://www.2expertsdesign.com/2009/04/30/thumbnail-in-web-design-examples-and-best-practices/

サムネイル画像の見せ方についてのショーケースです。画像として作っているのかCSSで実現しているのか? その方法は? といったことは抜きとして、単純にデザインの参考のためにピックアップしてまとめられたものです。

もちろんそれぞれのサイトへのリンクがあるので、気になる表現はそのサイトで確認してみるといいでしょう。また、動きのあるものもサイトを訪れてみないとわかりませんね。

図3 サムネイル表現を大量に紹介しています
図3 サムネイル表現を大量に紹介しています

5. Make your HTML elements stand out with jquery exposehttp://www.flowplayer.org/tools/expose.html

特定の領域を目立たせるために、それ以外の部分を暗くする効果を与えるスクリプトの配布サイトです。Mac OS XのExposeで特定のウィンドウだけをハイライト表示しているような感じです。

例として紹介されている、フォームにフォーカスしたときにフォームのエリアだけがハイライトされるもの、ムービーを再生するときにムービーだけがハイライトされるものは、いい使用法ですね。

Lightboxなどで見慣れた効果ですが、ページの一部がクリックでハイライトされるというのは、けっこう新鮮に感じられます。

アクセスと同時にお知らせをポップアップで開くという手法は今はほとんど使われませんが、これを使って目立たせたい部分をページロード時にハイライトさせるという使い方も面白いかもしれません。

図4 デモサンプルは3種類用意されています
図4 デモサンプルは3種類用意されています

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

そのほか先週の記事から、おすすめネタを3つ紹介します。

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

グーペ - 飲食店向け簡単ホームページ作成サービスhttp://goope.jp/

株式会社paperboy&co.が提供する、月額1,050円で飲食店向けホームページが作成できるというASPです。サンプルページを見てみましたが、ちょっとしたAjax的な動きも取り入れたイマ風のいい感じのサイトが作れそうですね。

マニュアルを見ただけですが、管理画面も使いやすそうです。お問い合わせページを作れるのは当然ながら、送られてきたメールの管理、返信作業も管理画面から行えるなど、なかなか機能も充実しています。

図5 ブタのキャラクターがかわいいサイトです
図5 ブタのキャラクターがかわいいサイトです

おすすめ記事

記事・ニュース一覧