週刊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」も興味深いです。
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の黒か白のドロップシャドウを使う
- 微妙に角を丸めた方がリアルに見える
- ものには微妙に影をつけた方がリアルに見える
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」にもステキなデザインがいっぱいです。
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件近いことは,日本人としてちょっとうれしいですね。
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」というユーザーインターフェイスのパーツをベクターファイルで配布している記事もありました。
そのほか先週の記事から,フォーム関連の記事を紹介します。
- Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form | Dzine Blog
ユーザー登録フォームページのギャラリーです。 - RMSforms - A flexible CSS Forms Framework to Help Style Those Pesky Forms
フォーム用のCSSフレームワークです。 - 10 Useful jQuery Form Validation Techniques and Tutorials : Speckyboy Design Magazine
jQueryによるフォームの値チェックのテクニックとチュートリアルを紹介しています。
先週の気になるWebサービス
仕事がはかどるフリーウェブサービス10選:ニュース - CNET Japanhttp://japan.cnet.com/news/media/story/0,2000056023,20405855,00.htm
今回は,「仕事がはかどるフリーウェブサービス10選」として2009年の注目のWebサービスをまとめた記事を紹介します。
Google Calenderなどメジャーなものは外して紹介したとのことですが,Dropbox,Evernote,「あとで読む」はネット通の間ではかなり有名なサービスですよね。この3つはわたしも便利に利用させてもらっています。
今週の気になるWebネタ

鳩山首相がTwitterとBlogを開始 - livedoor ニュースhttp://news.livedoor.com/article/detail/4529550/
1月1日に鳩山由紀夫首相がツイッターとブログ「鳩cafe」を開始しました。
「1日1ツイート」が目標だと言ってみたり,秘書官付に送信を依頼しているものの「基本的に私が書いています」と説明したりと,ツイッターを活用している人から見るとちょっとズレた印象を持たれそうです。
とはいえ,ツイッターやブログで首相個人として情報発信にチャレンジする姿勢はいいですよね。今後の展開に期待したいです。
豊富な芸能人ユーザーを武器に「Amebaなう」が追い上げてくる中,首相の登場はツイッターにとってはいい宣伝材料になりそうですね。
週刊Webテク通信
- 2010年1月第4週号 1位は,CSSの総合的な情報サイト「CSS HappyLife ZERO」,気になるネタは,週刊ダイヤモンドでツイッター特集
- 2010年1月第3週号 1位は,うまくアクションをうながすための4つのデザイン要素,気になるネタは,声がバンド演奏になる神アプリ! Voice Band が凄い件
- 2010年1月第2週号 1位は,ブラウザ上でのモックアップ作成のススメ,気になるネタは,Google Nexus One(ネクサス・ワン)ついに発表
- 2010年1月第1週号 1位は,実践的なCSS3の使い方,気になるネタは,鳩山首相がTwitterとBlogを開始
- 2011年12月第2週号 1位は,はじめてのCSSメタ言語はLessがおすすめ!,気になるネタは,グーグル,Flipboard対抗アプリ「Currents」を発表
- 2011年11月第2週号 1位は,CSSのみでテキストにグラデーションやリフレクトをかけるテクニック,気になるネタは,Adobe,モバイル向けFlash Playerの提供中止を発表
- 2011年11月第1週号 1位は,jQueryでつくる,動きのあるWebページ,気になるネタは,アドビ,iOSとMacで利用できる写真用クラウドサービス「Carousel」提供開始
- 2011年10月第3週号 1位は,いますぐ使えるCSS3テクニック集,気になるネタは,アップル,Siriの日本語版を2012年に提供開始する予定
- 2011年9月第4週号 1位は,仕事に役立つjQueryプラグインの実装方法,気になるネタは,Facebook,タイムラインを発表

