週刊Webテク通信

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

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

1. Creating HTML Emails ? How To And Design Inspiration | Design your wayhttp://www.designyourway.net/blog/inspiration/creating-html-emails-how-to-and-design-inspiration/

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

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

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

  • インラインスタイルを使う
  • 横幅440pxがおすすめ。600pxを超えないことを推奨
  • 背景画像は使わない
  • floatは使わない
  • ボタンに画像は使わない

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

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

図1 HTMLメールを作るためのテクニックとギャラリー
図1 HTMLメールを作るためのテクニックとギャラリー

2. Web Culture: Grid-based Layout Designs | Webdesigner Depothttp://www.webdesignerdepot.com/2011/03/web-culture-grid-based-layout-designs/

グリッドベースの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週号で紹介したものです。

図2 グリッドベースのレイアウトデザインについて
図2 グリッドベースのレイアウトデザインについて

3. 48 Ultimate Web 2.0 Adobe Fireworks Styles for Modern Web Graphicshttp://smashingwall.com/freebies/48-ultimate-web-2-0-adobe-fireworks-styles-for-modern-web-graphics/

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

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

図3 Fireworks用のスタイルファイルの紹介
図3 Fireworks用のスタイルファイルの紹介

4. Portfolio Design Showcase / 15 great Portfolio Designs | Weblovers - We love the Webhttp://www.web-lovers.de/portfolio-design-showcase/

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

図4 ポートフォリオサイトのショーケース
図4 ポートフォリオサイトのショーケース

5. 110 Inspiring Single Page Website Designs | Designs Mag(Designs Magazine)http://www.designsmag.com/2011/03/110-inspiring-single-page-website-designs/

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

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

図5 シングルページWebデザインのショーケース
図5 シングルページWebデザインのショーケース

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

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

ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個|Webparkhttp://weboook.blog22.fc2.com/blog-entry-240.html

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

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

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

図6 ロゴ、背景、アイコンなどの画像ジェネレータを紹介
図6 ロゴ、背景、アイコンなどの画像ジェネレータを紹介

おすすめ記事

記事・ニュース一覧