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

1. 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templateshttp://www.1stwebdesigner.com/design/20-css3-html5-frameworks-tools-templates/

CSS3＆HTML5のフレームワークとツール、テンプレートを紹介しています。

960 Grid Systemをはじめとした、グリッドレイアウトを実現するためのCSSフレームワークが以前は流行していました。最近では、グリッドレイアウトだけでなく、スマートフォンにも対応していたり、ブラウザサイズに合わせてレイアウトや画像サイズが変化するなど、多機能なフレームワークやテンプレートが増えているようです。

角丸やドロップシャドウをクロスブラウザで利用するには、CSS3で複数ブラウザ分の記述が必要だったり、対応していないブラウザでの代替手段を考えるなど面倒です。たとえば、G3 Frameworkというフレームワークでは、JavaScriptフレームワークなどを組み合わせて、クロスブラウザ対応の角丸やドロップシャドウを実現しています。

全てを自分でコントロールした方が自由度は高いですが、こういったフレームワークをうまく使ってサイト構築を効率化できる選択肢もあることはうれしいですね。

2. 30 Awesome Web Designs That Create an Illusion of Depthhttp://sixrevisions.com/design-showcase-inspiration/30-awesome-web-designs-that-create-an-illusion-of-depth/

奥行きを活かしたWebデザインのショーケースです。

奥行き／立体感は、ここ1、2年のWebデザインのトレンドともいえます。「⁠Tips and Trends on Creating Depth in Web Design」という、奥行きのあるWebデザインのTipsとトレンドをまとめた記事を以前紹介したこともありました。

3. 30 webdesign tendances pour Mai 2011 - webdesign-inspirationhttp://www.blogduwebdesign.com/webdesign-inspiration/30-webdesign-tendances-pour-mai-2011/429

2011年5月のWebデザインのトレンドと題したギャラリーです。フランス語のブログですね。

紹介されているサイトは英語のものが中心なのですが、これまでこの手のギャラリー記事で見かけたことのないサイトばかりで新鮮です。

4. 15 fresh Photoshop & Illustrator Tutorials to kick-off this week | hangaroundthewebhttp://hangaroundtheweb.com/2011/05/15-fresh-photoshop-illustrator-tutorials-to-kick-off-this-week/

最近公開された、PhotoshopとIllustratorのチュートリアル記事をまとめています。

チュートリアル集のサイトからピックアップされていて、キャプチャー画像に赤い帯でどのサイトに掲載されたコンテンツかが書いてあります。

5. すべて無料！Chromeにインストールしたいウェブアプリ21選！ | gadget or gimmickhttp://gadget-or-gimmick.com/archives/2011-05-19/115739.html

Chromeウェブストアからインストールできるアプリを紹介した記事です。定番のものが中心ですが、おすすめのもの21個が掲載されています。

ここで紹介されている「はてなブックマーク」は、通常のWeb版とは違ったインターフェイスとなっています。「⁠TweetDeck」もデスクトップ版とは違います。

なお、Chromeウェブストアにあるアプリの中には、普通にURLからアクセスして使うときと動作が変わらないランチャー代わりのようなものもあります。とはいえ、iPhoneのようにWebサービスのアイコンが並んでいて、そこから起動できるのは新鮮な感じがしますよね。

そのほか、先週の記事の中から、ソーシャルメディアに関する記事を3つ紹介します。

• Twitter初心者のための、8個の「ない」｜fuuri.net
  今さらかもしれませんが、とてもいいエントリーです。初心者の人に勧めたい。
• ソーシャルメディアの企業公式アカウント、検索結果の20位に表示されるのは3割：FacebookページにおけるSEOの超基本 - the Public Returns - 続・広報の視点
  Facebookページをサーチエンジン向けに最適化する方法も紹介されています。
• ＜講演報告＞『Facebookのマーケティング活用のススメ⁠』⁠／CSS Nite LP, Disk 15「ソーシャルメディア特集」:GaiaXソーシャルメディア ラボ／Facebook・twitterの企業利用法についての研究機関
  セミナーの講義内容の紹介。来場者の書いたブログ記事へのリンクもあります。

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

mokk.mehttp://mokk.me/

スマートフォン向けWebアプリのモックアップを作れるWebサービスです。

iPhoneを模した画面の中に、テキストやフォーム、ボタンなどをドラッグ＆ドロップで配置していきます。

テキストは日本語でも問題ありません。写真も入れることができ、URLを指定することで任意の画像に変更することもできました。

作ったモックアップは「Save」して「Test」ボタンを押すと、スマートフォンから確認するためのURL＆QRコードと、ほかの人とシェアするためのURLが生成されます。しかし、ベータ版だからか、このURLにアクセスしてみても作ったページは表示されませんでした。

ほかにも、ここで作ったモックアップのHTMLやCSSのコードを取得できるように書いてあるのに、どこにも見当たらなかったりと、まだまだ開発途中のようです。今後の機能アップに期待しましょう。