週刊Webテク通信

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

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

ネットで見かけた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 ロゴ,背景,アイコンなどの画像ジェネレータを紹介

今週の気になるWebネタ

グーグル,「Chrome」ロゴを刷新--より2次元的で幾何学的に - CNET Japanhttp://japan.cnet.com/news/service/35000607/

Google Chromeのロゴが新しくなるそうです。立体的でテカテカしたロゴから,平面的でシンプルなロゴに変わりましたね。

シンプルとはいえ,グラデーションや影が控え目に使われていて,質感は悪くないと思います。大きなサイズで見ると物足りない感じもしますが,アイコンサイズだといいんじゃないでしょうか。

iTunes,App Storeとアップルも平面的な円形アイコンが流行のようですし,今後もこのトレンドが続いていくのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入