週刊Webテク通信

2010年1月第1週号1位は、実践的なCSS3の使い方、気になるネタは、鳩山首相がTwitterとBlogを開始

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

1. Practical Uses of CSS3 | Viget Inspirehttp://www.viget.com/inspire/practical-uses-of-css3/

実践的なCSS3の使い方をレクチャーした記事です。

角丸、透明度、背景画像の複数指定、ドロップシャドウ、段組、ボーダーの枠に画像を指定といった機能について、シンプルなサンプルをコードとともに詳しく解説しています。

CSS3つながりとして、変形、移動、アニメーションに関しての記述例を詳しくまとめた記事What You Need To Know About Behavioral CSS - Smashing Magazineも興味深いです。

図1 CSS3の使い方のレクチャー
図1 CSS3の使い方のレクチャー

2. Crafting Subtle & Realistic User Interfaces - Flyosity: Mac & iPhone Interface Designhttp://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php

繊細でリアルなユーザーインターフェイスを作るために気をつけることをまとめた記事です。

Subtle(= 微妙な、かすかな、繊細な)というのがポイントのようで、最後に「Reality Is Subtle」という見出しで以下のようなポイントがまとめてありました。

  • ぼやけないはっきりした線やエッジを使う
  • 常に透明度の調整を行う
  • できる限りベクター画像で作る
  • レイヤースタイルで実験する
  • ドロップシャドウは正しく使わないとデザインを壊してしまう
  • 複雑なシェイプをPNGかGIFに保存するときは、レイヤーをスマートオブジェクトに変換してからにする
  • 文字を乗せるときは、1pxの黒か白のドロップシャドウを使う
  • 微妙に角を丸めた方がリアルに見える
  • ものには微妙に影をつけた方がリアルに見える
図2 リアルなユーザーインターフェイスのための考察
図2 リアルなユーザーインターフェイスのための考察

3. Headers and Footers that Grab You Coming and Going | Web Design Ledgerhttp://webdesignledger.com/inspiration/headers-and-footers-that-grab-you-coming-and-going

すばらしいヘッダとフッタを多数紹介しています。フッタのショーケース記事は最近多いのですが、ヘッダとフッタをセットでというのはありそうでなかったですね。

クリエイティブでスタイリッシュなフッタデザインの2009年まとめといった、65 Creative And Stylish Footer Designs of 2009 | Graphic and Web Design Blog -Resources And Tutorialsにもステキなデザインがいっぱいです。

図3 ヘッダとフッタのデザインギャラリー
図3 ヘッダとフッタのデザインギャラリー

4. The Beautiful Art of Japanese Web Design - woorkup.comhttp://woorkup.com/2009/12/30/the-beautiful-art-of-japanese-web-design/

美しいデザインの日本のサイトをまとめた海外の記事です。

ほとんどがFlashサイトというのは、日本でのデザインを重視したサイトの特徴なのかもしれません。

この記事のコメント欄が「beautiful」⁠excellent」⁠ I love Japan」といったメッセージで盛り上がっていたり、リツイート数が800件近いことは、日本人としてちょっとうれしいですね。

図4 美しい日本のサイトのギャラリー
図4 美しい日本のサイトのギャラリー

5. A UI Design and Prototyping Treasure Chest | Web Design Ledgerhttp://webdesignledger.com/freebies/a-ui-design-and-prototyping-treasure-chest

ユーザーインターフェイスをデザインしたり、プロトタイプを作るときに便利な素材を配布しているサイトを多数紹介しています。

ブラウザやOSのインターフェイスのパーツや、ブラウザの枠などを画像ファイルとしてダウンロードすることができます。iPhoneの画面設計のためのパーツもありますね。

Free Sketching & Wireframing Kitというユーザーインターフェイスのパーツをベクターファイルで配布している記事もありました。

図5 UIデザインとプロトタイプ作成のための素材集
図5 UIデザインとプロトタイプ作成のための素材集

そのほか先週の記事から、フォーム関連の記事を紹介します。

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

仕事がはかどるフリーウェブサービス10選:ニュース - CNET Japanhttp://japan.cnet.com/news/media/story/0,2000056023,20405855,00.htm

今回は、⁠仕事がはかどるフリーウェブサービス10選」として2009年の注目のWebサービスをまとめた記事を紹介します。

Google Calenderなどメジャーなものは外して紹介したとのことですが、Dropbox、Evernote、⁠あとで読む」はネット通の間ではかなり有名なサービスですよね。この3つはわたしも便利に利用させてもらっています。

図6 2009年のフリーのWebサービスから10個を紹介
図6 2009年のフリーのWebサービスから10個を紹介

おすすめ記事

記事・ニュース一覧