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

1. サイトマップをフッタに配置する際のポイントとその効果 | コリスhttp://coliss.com/articles/build-websites/architectonics/usability/modern-sitemap-and-footer.html

Web Designer Wallの「Modern Sitemap and Footer」という記事の紹介と意訳です。

フッタ部分にサイトマップや関連リンク集などを入れるのは，今ではすっかり当たり前になりました。幅800ピクセルオーバーが当然となりカラム数をたくさん使えるようになったこと，CMSやブログシステムなどを利用してフッタをモジュール化して埋め込むことが簡単になったことも影響しているんじゃないかと思います。

フッタにサイトマップを入れて，独立したサイトマップページを持たないのが最近の主流だそうです。わたしはフッタにサイトマップを入れた場合でも，サイトマップページを作っていました。確かに全く同じものだったら，単独ページはいらないですよね。

英文のネタ元ページには，サイトマップ入りフッターデザインの参考となるサイトが解説付きで多数紹介されていますので，そちらもぜひご覧ください。

フッタにサイトマップ全部を載せられない巨大なサイトの場合，コーナーごとにサイトマップを分けるという方法を検討するのもいいかもしれません。アップルのサイトでは，Macのコーナーを見ているときにはMac関連ページのサイトマップが出るようになっているのでご参考にとのことです。

2. Interface Design Inspiration | 36 Beautiful Login Page/Form Designs | Dzine Bloghttp://dzineblog.com/2009/03/interface-design-inspiration-36-beautiful-login-pageform-designs.html

すばらしいデザインのログインページ，ログインフォームを紹介しています。シンプルながら，そのサイトの世界観を感じさせるデザインが多いですね。

この手のものは，基本的な並びや用語は各サイトで統一されているほうがユーザーに取って使いやすいので，基本的な部分はどれも似たり寄ったりです。だからこそ，デザインの腕の見せ所と言えるかもしれません。

インターフェイスデザインのテクニックとして，「⁠Username」「⁠Password」といったラベル文字は入力欄の中に入れてしまうというアプローチを以前紹介しましたが，ここで紹介されている中ではアップルのMobileMe以外にこの方法を採用しているページは，3つくらいしかありませんね。

3. 30 Creative Examples of the Hand Drawn Style in Web Designshttp://sixrevisions.com/design-showcase-inspiration/30-creative-examples-of-the-hand-drawn-style-in-web-designs/

手描き風なビジュアルのWebデザインのショーケースです。紙にスケッチしたようなビジュアルをWebデザインに取り入れるのが，最近のひとつのトレンドのようです。

どのサイトも個性的でインパクトがありますが，手描き部分とテキストや写真とのバランスを取るのが大変そうですし，メンテナンスにも骨を折りそうです。

Webデザインに使用されるイラストのショーケースとしては，「⁠30 Creative Examples of Illustrations in Web Design」も参考になると思います。

4. 28 Web Design Tools and Generators For Easy Web Design | Graphic Fetishhttp://www.graphicfetish.com/28-fantastic-generators-for-easier-web-designing/

Webデザインに役立つツールとジェネレーターサイトを紹介しています。こういったツールが充実してきて，昔よりもWebサイトのデザインが簡単になってきたよなぁというリンク集のようです。

このジェネレーター昔話題になったなぁというものから，こんなことまでオンラインでできるんだというものまで，いろいろありますね。

解説もカテゴリ分けもなく，ひたすらタイトルと画面ダンプだけが並ぶリストです。それだけでもどんなツールかだいたい分かりますが。

5. 8 Javascript solutions to common CSS problemshttp://www.catswhocode.com/blog/8-javascript-solutions-to-common-css-problems

CSSデザインで起こりがちな問題への，JavaScriptを使っての対策がまとめてあります。

例によってInternet Explorer対策が中心です。これまた例によってjQueryを使用した対策がほとんどです。

それぞれの項目ごとに情報源へのリンクがあるので，実際に使用する場合にはネタ元ページの解説も読んだ方がいいでしょう。

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

そのほか先週の記事から，フリー素材の配布サイトを3つ紹介します。

• A Huge Compilation of 60 Free Illustrator Brushes - Vectortuts+
  フリーのIllustrator用ブラシを大量に紹介しています。
• SeamlessTextures.net - Free Seamless Textures
  繰り返しパターンとして使えるフリーのテクスチャー配布サイトです。カテゴリ分けされています。
• iPhone UI Vector Elements | MI Blog
  iPhoneのインターフェイスのパーツがベクター画像ファイルとしてダウンロードできます。

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

Nihongodict: Free Online English ? Japanese Dictionaryhttp://www.nihongodict.com/

オンラインの日本語←→英語の辞書サイトなのですが，シンプルながら快適な使用感ですばらしいです。

検索窓に日本語でも英語でも入力していくと，すぐに候補が出てきて軽快です。しかも，日本語の単語をローマ字で探すこともできます。

収録されている語彙もかなり充実しています。カタカナ用語もいろいろ登録されていますし，「⁠パン屑リスト」まで出てくるのにはビックリしました。これって英語でなんて言うんだろうというのを調べるのにもよさそうですね。

図5　便利な日本語／英語の辞書サイト

今週の気になるWebネタ

グーグルのトップデザイナー辞任の弁：Google's Top Designer Leavinghttp://longtailworld.blogspot.com/2009/03/googles-top-designer-leaving.html

CSSデザインの第一人者Douglas BowmanがGoogleのデザイン責任者を辞任したようです。自らのサイトStopdesignで退社の弁を述べています。

2種類の青で迷ったら41の中間色を作ってテストさせられたとか，ボーダーの幅を3，4，5ピクセルのいずれに決めるかにおいても，その理由を証明する必要があったりと，データ中心主義ともいえるGoogleのやり方に嫌気が差したことが一因となっているようです。

Douglas Bowmanといえば，テーブルデザイン全盛期に米大手ニュースサイトWired NewsをCSSデザインにリニューアルして脚光を浴びた人物。AppleのサイトのCSS化にも関わったりと，CSSデザイン界の重鎮ともいえる存在です。

そんな彼が次に転職すると噂されるのが，今ノリに乗っているTwitter（編注：Twitterに転職されました⁠）⁠。Twitterといえば，あの鳥のイラストはロイヤリティフリーの画像を10～15ドルでライセンスしたものというのが話題になりましたが，Douglas Bowmanがデザインに関わるようになると，あの鳥もリニューアルされるのかもしれませんね。