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

1. 4 Design Elements Behind a Good Call to Action | letscounthedayshttp://www.shayhowe.com/web-design/designing-call-to-action/

ユーザーの次のアクションをうながすボタンなどを良いものにするための、4つのデザイン要素の解説です。

その4つとは、

1. サイズ
2. 形
3. 色
4. 位置

ということです。

それぞれの要素について気をつけるべきことが紹介されています。ページ内の別の要素と差別化することや、リンクされていることがはっきり分かることなどが共通したポイントのようです。広告と間違われないことや、ボタンの周りに十分な余白を取ることも気をつけましょう。

色や大きさはページ内の別の要素との相対的なものなので、その調整はデザイナーの腕の見せ所でもあります。なのに、クライアントから「ボタンを赤に」「⁠ボタンをドーンと大きく」などという絶対的な指定が来ると悲しくなっちゃいますよね。

2. Progress Trackers in Web Design: Examples and Best Practices - Smashing Magazinehttp://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

ユーザー登録や支払いなどが複数ページに分かれている場合に、自分が今どの段階のページにいるかを示すデザイン要素をProgress Trackerと呼ぶそうです。その、Progress Trackerに関する解説と作例です。

Breadcrumbs（パンくずリスト）が自分のたどってきた道筋、あるいは階層構造を示すのに対し、Progress Trackerは自分の今いる位置とその先のゴールへのステップを案内するものだということです。

いろんなパターンの作例が掲載されています。悪い例が紹介されているのも参考になりそうですね。

3. ウェブサイトのフッタを魅力的にする10のシンプルなアイデア | コリスhttp://coliss.com/articles/build-websites/architectonics/usability/10-simple-ideas-for-your-footers.html

「10 Techniques for a Fantastic Footer」という記事の翻訳です。魅力的なフッタを作るために、フッタに何を配置するかのアイディアが10個紹介されています。

4. HOW TO: Create Custom Backgrounds for Twitter, YouTube, & MySpacehttp://mashable.com/2010/01/14/custom-twitter-youtube-myspace-backgrounds/

Twitter、YouTube、MySpaceの背景画像をカスタマイズする方法と、画像の作り方についての記事です。

各サービスでの背景画像の具体的な設定方法や、適切な画像サイズとファイル容量の制限なども紹介されています。

デザイナー向けの記事ではないのですが、実際の背景画像の例なども参考になると思います。

5. 40+ Taglines and Hero Areas by Designers and Agencies. | Feedgridshttp://feedgrids.com/page/40-Taglines-and-Hero-Areas-by-Designers-and-Agencies

デザイナーとデザインエージェンシーのサイトから集めた、タグラインやキャッチコピーのショーケースです。

ヘッダのロゴの近くに書いてあるキャッチフレーズやスローガンの文字をタグラインといいます。日本の企業サイトにはタグラインがないことも多いのですが、個人的にはタグラインはあったほうがいいと思います。

そのほか先週の記事から、いろんなチュートリアル集を紹介します。

• 60+ Fresh Hot New Tutorials From Around The Web | designrfix.com
  最近公開されたチュートリアル記事を紹介しています。
• 15 useful jQuery plugins and tutorials
  jQueryのプラグインとチュートリアルを紹介しています。
• 41 Useful Adobe Illustrator Video Tutorials For Creative Designers | Graphic and Web Design Blog -Resources And Tutorials
  Illustratorのビデオチュートリアルを紹介しています。

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

NAVER Nドライブhttp://ndrive.naver.jp/

検索サービス「NAVER（ネイバー⁠）⁠」を運営するネイバージャパンから、無料オンラインストレージサービス「Nドライブ」が登場しました。

最大5GBまでのファイルをオンライン上に保存できます。専用のドキュメントビューワーが用意されており、ブラウザ上でエクセルやワードのファイルを確認できるそうです。

画像ファイルは「フォトアルバム」ツールで管理でき、スライドショー表示などもできます。

iPhoneにも対応していますが、専用アプリではなくブラウザからのアクセスです。ファイルの閲覧と削除だけが可能とのことで、iPhoneで撮った写真をNドライブにアップというような用途には現状使えないようですね。

なお、「⁠Google Docs（Googleドキュメント⁠）⁠」にもオンラインストレージ機能が追加されました。無料で使えるのは1GBまでで、有料で容量の追加が可能とのことです。