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

1. Japanese Web Design: Why You So 2003?http://www.tofugu.com/2012/05/15/japanese-web-design-why-you-so-2003/

「日本のWebデザインはなぜ2003年風なのか」について考察した記事です。

楽天、ニコニコ動画、Gigazineを例に挙げ、なぜ日本のWebサイトの多くは2003年くらいの技術・デザインなのかを考えています。

特徴として挙げられているのが以下の項目です。

• たくさんの文字を詰め込んでいる
• 画像が小さい
• 3段組（3カラム）が一般的
• ホワイトスペースが少ない
• リンクテキストが青
• カオス

そして、以下のようなことが理由ではないかと書かれています。

• 携帯電話によるネット閲覧が古くから普及していたため、細いカラム、テキスト中心、小さい画像が一般的となったから
• コンピュータの買い換えがあまり進まず、IE6を無視できないため

わたしも考えてみたのですが、Yahoo! JAPANの影響力が大きいというのも理由のひとつなんじゃないかと思いますね。

最後は、日本のWebデザインにもすばらしいものはたくさんあるということを紹介するため、ユニクロなどいくつかのサイトが掲載されています。

この記事、「⁠日本のWEBデザイン糞すぎワロタwなんで2003年ぽいんだよwww」といった、あおり気味の意訳タイトルが付けられて、2ちゃんねる界隈で話題となっていました。

2. 5 Useful CSS Tricks for Responsive Designhttp://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

レスポンシブWebデザインのための、CSSテクニックが5つ紹介されています。

動画や画像を可変サイズで配置する方法や、マージンやパディングを可変にすることで柔軟なレイアウトを実現するテクニックなどが掲載されています。

画像サイズの可変に関しては、以下の記事も参考になります。

• Which responsive images solution should you use? | CSS-Tricks

3. 20 Excellent 3D Buttons With Pure CSS3 | CollegeGFXhttp://collegegfx.com/20-excellent-3d-buttons-with-pure-css3/

CSSだけで実装した立体ボタンを各種紹介しています。

ボタンの一部だけがへこむもの、押されたときに奥にめり込んでいるように見えるものや、CSSだけでアニメーションするものなど、バラエティ豊かなラインナップとなっています。

4. 23 Essential iPad Apps for Web Designers and Developershttp://www.awwwards.com/23-essential-ipad-apps-for-web-designers-and-developers.html

Webデザイナーやデベロッパーのための、iPadアプリ集です。

描画、画像編集、モックアップ作成、カラーパレット作成、コードエディターなどなど、iPadで一通りの作業ができてしまいそうな気がしてきます。

5. SASS vs. LESS | CSS-Trickshttp://css-tricks.com/sass-vs-less/

CSSメタ言語のSASSとLESSを比較した記事です。最初に結論が書いてありますが、この記事ではSASSの方がおすすめとしています。

なお、CSSメタ言語とはCSSを拡張したもので、色や値の指定に計算式が使えたり、複数個所で同じ記述を使いたい場合は変数のように定義できたりと、効率的かつ高度にCSSの記述ができるものです。

SASSはCompassというフレームワークが使えるところも魅力とのことです。Compassについては以下の記事が参考になります。

• CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 - howtohp

そのほか、先週の記事の中から、Google関連の話題を紹介します。

• Google+ K-Pop Stars
  Google+にAKB48に続いてK-POPアイドルが登場です
• Google、検索の次のステージへの第1歩「Knowledge Graph」発表 | ネット | マイナビニュース
  「⁠セマンテック検索の実現を見据えた新サービス」とのことです

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

Interaction Design In The Cloud | Smashing UX Designhttp://uxdesign.smashingmagazine.com/2012/05/10/interaction-design-in-the-cloud/

今回は、実際に操作することが可能なプロトタイプやワイヤーフレームを、クラウド上でデザインできるWebサービスを集めた記事を紹介します。

掲載されているのは以下のツールです。

プロトタイプ作成ツール

• InVision
• FieldTest
• ClickDummy

ワイヤーフレーム作成ツール

• Balsamiq
• Mockingbird
• Mockup Builder

いずれも簡単な操作で、メニューを選んだりページ遷移したりといった、インタラクションのあるプロトタイプ／ワイヤーフレームを作ることが可能です。

作成したものは共有してブラウザ上で見てもらえるのも、Webサービスならではの利点ですね。

この記事では、白黒のパーツを組み合わせて作るものをワイヤーフレーム、自分で作ったグラフィックを取り込むなど、最終的なサイトに近いイメージで作れるものをプロトタイプと読んで区別しています。