週刊Webテク通信

2010年6月第3週号　1位は，ユーザビリティやユーザーエクスペリエンスの落とし穴と回避方法，気になるネタは，CSSだけで描いたTwitterのクジラのイラスト

Webテク, Webデザイン, Web広告, CSS, ブログ, jQuery, JavaScript, HTML, Twitter

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

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

1. 9 Usability And UX Pitfalls, And How To Avoid Themhttp://www.1stwebdesigner.com/development/usability-ux-pitfalls-howto-avoid/

ユーザビリティやユーザーエクスペリエンスに関する落とし穴とその回避方法をまとめた記事です。

「悪いウェブサイトは不機嫌そうなセールスマンのようなもの」というヤコブ・ニールセン（ユーザビリティ研究で有名なお方）の言葉を引き合いに出し，良いセールスマンとなるためのサイトの改善ポイントを解説しています。

以下の項目に分けて説明しています。

矢印以下に解決策の一部をまとめています。詳しくは元の記事を参照してください。

  1. 興味のあるコンテンツを探しにくい
    →検索機能を付ける／タグとカテゴリを使う／論理的なラベル名を付ける
  2. 貧弱なレイアウト
    →デザイナーを雇え
  3. まぎらわしいメニュー
    →メニューを論理的に／ユーザビリティテストを行え
  4. メニューのレイアウトとデザインがお粗末
    →アクセス解析を参考に改善せよ
  5. 現在地がどのあたりかを示すものがないか分かりにくい
    →ユーザーが今どこにいてゴールまであとどのくらいかが分かるようにする
  6. お問い合わせ先が明記されてない
    →問い合わせフォームなどを用意する
  7. どんなサイトでもソーシャルメデイアと連携しようとする
    →戦略を持ってソーシャルメディアを使え
  8. 選択肢が多すぎる
    →シンプルであれ
  9. リンク，フォーム，ボタンが動かない
    →テストを繰り返せ

図1　ユーザビリティやユーザーエクスペリエンスの落とし穴と回避方法

図1　ユーザビリティやユーザーエクスペリエンスの落とし穴と回避方法

2. Analyzing and Comparing Popular Blog Designs | Design Shackhttp://designshack.co.uk/articles/css/analyzing-and-comparing-popular-blog-designs

有名なブログのデザインを分析して比較した記事です。

カラムの幅やCSSでの文字の指定の仕方，画像の扱い方などを調査しています。

文字は純粋な黒ではなくグレーを使うというのは定番ですが，大きな見出しほどグレーを薄くしているというSmashing Magazineの例は参考になりますね。

図2　ブログデザインの分析と比較

図2　ブログデザインの分析と比較

3. 10 jQuery Plugins and Techniques for Doing More with Images | Resourceshttp://webdesignledger.com/resources/10-jquery-plugins-and-techniques-for-doing-more-with-images

画像を扱ったjQueryプラグインとテクニックを集めたリンク集です。

覚えておくと，画像の見せ方のバリエーションが広がるでしょう。

図3　画像関連のjQueryプラグインとテクニック

図3　画像関連のjQueryプラグインとテクニック

4. Best of Breadcrumbs and How They Enhance Your Website | SpyreStudioshttp://spyrestudios.com/best-of-breadcrumbs-and-how-they-enhance-your-website/

パンくずリストによるナビゲーションのススメと実例紹介。

AppleのサイトやDeliciousにあるような，ナビゲーションメニューとして使われているパンくずリストの記事です。

パンくずリストを使うメリットや，使った方がいいケースなどについて解説してあります。

図4　パンくずリストのススメ

図4　パンくずリストのススメ

5. 80 Dazzling Examples of Illustration Websites | inspirationfeed.comhttp://inspirationfeed.com/2010/06/80-dazzling-examples-of-illustration-websites/

Webサイトで使われているすばらしいイラストのショーケースです。この手のショーケースでよく見かける定番のサイトが結構ありますね。

「昭和の日　オフィシャルサイト」という日本のサイトも紹介されていました。

図5　Webサイトで使われているイラストのショーケース

図5　Webサイトで使われているイラストのショーケース

そのほか先週の記事から，iPad関連の記事を2つ紹介します。

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

jsdo.it - share JavaScript, HTML5 and CSShttp://jsdo.it/

ブラウザ上でJavaScript／HTML5／CSSを書き，共有するサービスです。

面白法人KAYACが提供しています。ActionScriptを投稿／共有できるwonderflというサイトもあるのですが，それのJavaScript版といった位置づけのもののようですね。

自分の書いたコードにアドバイスを求めたりできる，質問＆回答（Q＆A）機能もあります。

共有されたJavaScript／CSSのコードは，ライブラリとしてこのサイトから呼び出すことができます。

投稿数が増えてくると，どんどん便利になりそうなサービスですね。

図6　JavaScript／HTML5／CSSを共有するサービスjsdo.it

図6　JavaScript／HTML5／CSSを共有するサービスjsdo.it

今週の気になるWebネタ

Pure CSS Twitter Fail Whale - Subcidehttp://www.subcide.com/articles/pure-css-twitter-fail-whale/

Twitterのメンテナンスや混み合っているときに表示されるクジラのイラストを，CSS3だけで描いた人がいました。

以前も，CSS3だけで描いたOperaロゴやドラえもんが話題になりましたね。IEでの見た目のキャプチャーがオチというのも共通しています。

こういったことに心血を注ぐ人は嫌いじゃないんですが，これを喜ぶのもごく一部の人ですよね。ふつうの人には「なんのこっちゃ」という理解不能な話題でしょう。

ネットで話題の動画やテレビで話題になったり，iPadマジシャンがテレビに登場したりしていますが，こういった技術的なネタがテレビの話題になるようなことはないんだろうなと思った次第です。

Webテク, Webデザイン, Web広告, CSS, ブログ, jQuery, JavaScript, HTML, Twitter

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote