週刊Webテク通信

2009年10月第3週号1位は、サイトをリデザインするための準備と計画、気になるネタは、Twitterはつぶやくという意味の英語なの

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

1. Preparing and Planning for a Redesign | Webdesigner Depothttp://www.webdesignerdepot.com/2009/10/preparing-and-planning-for-a-redesign/

サイトを「リデザイン」するかどうかを決めるためのヒントや、リデザインの計画をするにあたってのポイントがまとめられた記事です。

以下のようなサイトはリデザインが必要とのことです。

  1. 時代遅れの技術が使われている
    ⁠フレーム、イントロページ、フルFlash、テーブルデザイン、昔流行したデザイン)
  2. 2年以上変更されてない
  3. CMSを使っていない
  4. サーチエンジンに見放されている
  5. サイト(サイトの一部)が期待通りにうまくいっていない
  6. 競合するサイトがリデザインをした

リデザインのための計画として、以下の項目を考えるといいようです。

  1. 今のサイトでうまくいっているところはどこか
  2. 今のサイトでうまくいってないところはどこか
  3. 移動すべきページ、合体すべきページ、追加すべきページはどれか
  4. 今のサイトで訪問者を引きつけているものは何かを理解する
  5. 新しいグラフィックや写真が必要か
  6. デザインのイメージを引き継ぐか変更するか
  7. その他の考慮すべき点
図1 サイトのリデザインするための準備と計画
図1 サイトのリデザインするための準備と計画

2. Call to Action Buttons: Examples and Best Practices « Smashing Magazinehttp://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/

ユーザーのアクションを促すボタンの作り方を研究した記事です。

「購入する」⁠ユーザー登録する」といったユーザーの決断が必要なボタンを、いかに押してもらえるようにするかを考察しています。

  • 大きくする
  • はみ出す
  • ほかの要素と大きく離す
  • 色のコントラストで目立たせる
  • 別のボタンを用意して相対的に目立たせる
  • 緊急性を感じさせる
  • 簡単だということを伝える
  • 想定されるユーザーの疑問に答えておく

といった方法が有効なようです。作例画像も豊富です。

図2 ユーザーのアクションを促すボタン
図2 ユーザーのアクションを促すボタン

3. 3 Ways To Find The Best Website Color Schemehttp://www.fivefingercoding.com/web-design/how-to-find-the-best-website-color-scheme

Webサイトのカラースキーム(配色設計)を決める3つの方法です。

  1. クライアントが気に入ったロゴやパンフレットを持っている場合
  2. クライアントにロゴがあるがそれを気に入ってない場合
  3. おまかせされた場合

の3つのケースに分けて説明しています。

それぞれの色が与えるイメージと、その色がどんな業種のサイトに合うのかの解説もヒントになりそうです。

図3 Webサイトのカラースキームを決める方法
図3 Webサイトのカラースキームを決める方法

4. A Few Ways to Customize Your Online Lifestream - The Designedhttp://thedesigned.com/2009/10/12/a-few-ways-to-customize-your-online-lifestream/

ネット上での自分の活動を逐一発信していく「ライフストリーム」のためのツールを紹介しています。

Simple PieはRSSをサイトに表示するために解析/分解/取り出しを行うライブラリです。RSSを配信しているWebサービスやブログなどの更新情報を、まとめて自分のサイトに埋め込む場合に使えますね。

Sweetcronは、ブログやTwitter、flickrなどの投稿を自動でまとめてくれるライフストリーミングエンジンです。自分のサーバーにインストールできるFriendfeed、といった感じのもののようです。

ほかに、Tumblrもライフストリームのためのツールとして紹介されています。

WordPressでライフストリームするためのプラグインの紹介もあります。

図4 ライフストリーミングを行うためのツール
図4 ライフストリーミングを行うためのツール

5. 11 iphone apps every web designer should downloadhttp://blog.webdistortion.com/2009/10/11/11-iphone-apps-every-web-designer-should-download/

WebデザイナーのためのiPhoneアプリを11種類紹介してます。

「CSS Cheatsheet」のようなリファレンスや辞書はパソコンで見ればいいと思うかもしれませんが、iPhoneで見るというのもおすすめです。パソコンが目の前にあるのに電子辞書を使っている人を今まで疑問に思っていたのですが、やはり適材適所な使い分けをしたほうが便利ということが分かりました。

図5 WebデザイナーならダウンロードすべきiPhoneアプリ
図5 WebデザイナーならダウンロードすべきiPhoneアプリ

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

そのほか先週の記事から、リファレンスとして役立ちそうな機能比較記事を紹介します。

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

twiStation(ついすて) - Twitterをもっとおもしろくするウェブサービス検索サイトhttp://twistation.com/

Twitterを利用したウェブサービスを探せるサイトです。

日本のサイト限定というわけではないようですが、登録されているのはほとんど日本のサービスです。

ここ最近で急増しているTwitter関連サービスをチェックするのによさそうですね。

図6 Twitterをおもしろくするウェブサービス検索サイト
図6 Twitterをおもしろくするウェブサービス検索サイト

おすすめ記事

記事・ニュース一覧