週刊Webテク通信

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

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

ネットで見かけた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ドライブ」

今週の気になるWebネタ

【速報】声がバンド演奏になる神アプリ! Voice Band が凄い件:in the looop:ITmedia オルタナティブ・ブログhttp://blogs.itmedia.co.jp/saito/2010/01/voice-band-5387.html

楽器を選んでフレーズを口ずさむという作業の繰り返しでレコーディングができるiPhoneアプリ「Voice Band」がすごいと評判です。

アプリの機能もすごそうなのですが,使い方を紹介する動画で「♪パーパパパパーパー」と歌っているお兄さんがすごいです。この人の歌のうまさがあってこそ,見事な演奏ができあがってるような気もしてきます。

実際このアプリを使った人のリポートを見ると,⁠音痴では使い物にならない」といった声も。わたしには無理そう…。それなりの音楽の知識も必要でしょうし,使いこなすにはハードルが高そうです。

プロのミュージシャンが曲作りに使うという用途もありそうですね。歌がうまくてiPhoneを使っているミュージシャンといえば,iPhoneをテーマにした「愛ぽんちゃんの歌」まで作った広瀬香美が思い浮かびます。ぜひ彼女に「パーパパ」歌っての曲作りにチャレンジしてもらい,Voice Bandの女王になって欲しいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入