週刊Webテク通信

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

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

ネットで見かけた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 dos」「The dont」で左右に分かれているところが面白いです。

特に目新しい内容はないようですし,まだ紹介されてない定番テクニックなどもありそうですが,徐々にコンテンツは追加されているようです。新着情報は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 ブタのキャラクターがかわいいサイトです

今週の気になるWebネタ

施設を「ストリートビュー」で公開しませんか? - グーグルが新プログラム | ネット | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/05/13/031/

動物園,公園,大学,遊園地,屋外市場,スタジアム,記念碑,観光地,レースサーキットなどの施設運営者が希望すると,Googleストリートビューの撮影をして公開してくれる「ストリートビュー パートナー プログラム」が始まったそうです。

これいいですね。施設に行く前の検討やひまつぶしにもよさそうですが,現時で迷ったときにもiPhoneなどで確認できると便利そうです。東京ディズニーランド&シーがストリートビュー化されるといいなぁ。

イラストにも書きましたが,ディズニーシーで迷ったときiPhoneでGoogleマップを見ても何がなんだかわからなかった経験のあるわたし。施設の案内図も地図に載ってるといいなと思います。マイマップで作れないこともなさそうですが。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入