2011年3月第3週号　1位は、HTMLメールを作るためのテクニックとギャラリー、気になるネタは、グーグル、「Chrome」ロゴを刷新--より2次元的で幾何学的に

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

HTMLメールを作るときのテクニックの解説と、優れたデザインのHTMLメールのギャラリーからなる記事です。

最近のWebデザインではHTML5とCSS3が話題ですが、HTMLメールを作るにはそれらは忘れるべきとのことです。様々なメールクライアントの対応状況を考えると、テーブル組みとインラインスタイルを使った、1999年頃のコーディングがベストということでした。

HTMLメール作成のテクニックの中から、抜粋して以下に紹介します。

しっかりデザインされたHTMLメールの実例が大量に紹介されており、こちらも大変参考になります。

日本語で書かれたHTMLメール制作のノウハウ記事としては、2010年7月第3週号で紹介した、「⁠誰でも作れる！“⁠崩れない⁠”HTMLメルマガ作成術（1/4⁠）⁠- ＠IT」がやはりオススメですね。

グリッドベースのWebレイアウトに関して、その歴史やメリットにはじまり、フレームワークの紹介までまとめられた長文の記事です。

やはり今でもグリッドシステムのフレームワークとしては960 Grid Systemが定番のようで、大きく取り上げられています。

YAML（Yet Another Multicolumn Layout⁠）⁠、YUI（Yahoo! User Interface Library）をはじめとした有名なCSSフレームワークも、多数紹介されていました。

960 Grid Systemの使用方法については、「⁠The 960 Grid System Made Easy」が参考になります。偶然ですが、この記事も2010年7月第3週号で紹介したものです。

Adobe Fireworksでそのまま読み込んで使えるグラデーションのスタイルファイルをダウンロードできます。

ボタン、検索ボックス、フキダシで使用した場合のサンプルと、Fireworksへの読み込み方法が紹介されています。

デザイナーのポートフォリオサイトのショーケースです。背景が暗い色のもの、テクスチャーを使っているものが多いですね。

単ページで完結するWebデザインのショーケースです。デザイナーのポートフォリオサイトに多いのですが、ページ遷移なしに1ページ内で全ての情報を見られるように構成されたサイトが多数紹介されています。

項目ごとのブロックを積み重ねた縦に長いページを作り、ページ内リンクで各ブロックにスクロールさせるという作りのページが多いようです。

そのほか、先週の記事の中から、チュートリアル記事を3つ紹介します。

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

今回は、Webデザインに役立つ画像を作成するWebサービスを、厳選して紹介した記事を取り上げます。

背景、Ajaxローディング、ロゴ、faviconなどを作るためのジェネレーターが、合計20個紹介されています。

プロ向けとはいえないものやお遊び系のものもありますが、うまく使えば時間短縮につながるジェネレーターも少なくないと思います。