週刊Webテク通信

2010年1月第3週号1位は、うまくアクションをうながすための4つのデザイン要素、気になるネタは、声がバンド演奏になる神アプリ! Voice Band が凄い

ネットで見かけた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. 位置

ということです。

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

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

図1 うまくアクションをうながすための4つのデザイン要素
図1 うまくアクションをうながすための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は自分の今いる位置とその先のゴールへのステップを案内するものだということです。

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

図2 Progress Trackerの作例と解説
図2 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個紹介されています。

図3 フッタに入れる要素のアイデアいろいろ
図3 フッタに入れる要素のアイデアいろいろ

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

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

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

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

図4 Twitter、YouTube、MySpaceの背景画像をカスタマイズする方法
図4 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

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

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

図5 デザイナーサイトのタグラインのショーケース
図5 デザイナーサイトのタグラインのショーケース

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

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

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

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

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

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

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

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

図6 無料オンラインストレージサービス「Nドライブ」
図6 無料オンラインストレージサービス「Nドライブ」

おすすめ記事

記事・ニュース一覧