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

1. 18 Cool Concept Designs (Facelift) of Notable Websiteshttp://www.hongkiat.com/blog/concept-design-facelift-notable-websites/

FacebookやYouTubeなどの有名サイトを設計し直したコンセプトデザインを紹介しています。

作品の多くは、クリエイター向けポートフォリオサイトに掲載されているものです。各画像からリンクされている元ページを見ると、実際に操作しているデモ動画や、原寸大の画像、細かい解説などが載っているものもあって、より楽しめます。

装飾を加えすぎることなく、すっきりと機能的にまとめた、最近のトレンドが詰まっているような作品ばかりです。Facebookは特に、デザイン的に不満の声が多いので、こんな感じになるといいのになぁと思ってしまいますね。

2. Bootstrap, from Twitterhttp://twitter.github.com/bootstrap/

Twitterが提供する、Webアプリケーションやサイトを作るためのツールキット「Bootstrap」が登場しました。

CSSを使ってデザインされた、グリッドシステム、文字指定、表組み、フォーム、ボタンなどを利用することができます。

この手のフレームワークはいろいろありますが、Twitterが提供しているということで、安心感がありますね。継続的なアップデートに期待したいと思います。

CSSを拡張するLessを使っていて、オリジナルの「.less」ファイルも公開されています。Lessを使うと、変数を使うなどして複雑なCSSの記述を簡単に行えるそうです。LessファイルはコンパイルしてCSSにする必要があるのですが、ここではJavaScript版のLessを使う方法が紹介されています。

3. スマフォサイトでよく見るパーツのコードサンプル集 | 07design.bloghttp://07design.net/blog/?p=477

スマートフォンサイトでよく使われるユーザーインターフェイスのコードを各種掲載しています。

HTMLとCSSでメニューやリストなどを実現するための記述が紹介されています。動きのあるものに関しては、JavaScript部分も掲載されているものもあります。

スクリプトを使って動きを付ける処理に関しては、「⁠スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ」という記事も参考になると思います。

余談ですが、スマートフォンを「スマホ」と略すのに違和感があるのですが、「⁠スマフォ」派も増えてきているようですね。どっちにしろ違和感はありますが…。

4. 【レポート】デザインやアイデアの参考になる日本のFacebookページ 10タイトル (1) デザインの参考に! Facebookページ 5タイトル | ネット | マイコミジャーナルhttp://journal.mycom.co.jp/articles/2011/08/17/fbpage201108/index.html

デザインやアイデアの参考になる、日本のFacebookページを紹介しています。

デザインの参考として5つ、アイデアの参考として5+1つのサイトが掲載されていました。市役所のサイトをFacebookに完全移行した佐賀県武雄市のFacebookページが、「⁠+1」としておまけ的に取り上げられていますね。

5. Photoshop VIP ― 本家Google+のインターフェースをそっくり再現できるPhotoshop無料PSDキットhttp://photoshopvip.net/archives/28142

Google+で使われているインターフェイス素材がセットになった、Photoshopファイルを紹介した記事です。

また、Google+風ボタンをCSSで作るフレームワークも紹介されていました。

そのほか、先週の記事の中から、気になるニュース記事を紹介します。

• Evernote が Skitch を買収 #evernote_etc ≪ Evernote日本語版ブログ
  Mac用キャプチャーツールのSkitchがEvernoteに買収され、無料で提供されるようになりました。
• 米TIME、2011年のベストWebサイト50を発表 | ネット | マイコミジャーナル
  10のジャンルに5つずつで、ベスト50のサイトが紹介されています。

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

10 Excellent HTML5 coding Tools Many Users Don’t Know Abouthttp://smashinghub.com/excellent-html5-coding-tools.htm

今回は、HTML5のコーディングのためのツール各種が紹介されている記事を取り上げます。

「Initializr」は、HTML5でサイト作成を始めるための、ひな形となるHTML、CSSとJavaScriptファイルのセットを生成するWebサービスです。HTML5に対応していないブラウザ対策としてのJavaScriptも一緒に生成されるので、スタート時の手間がかなり軽減できそうです。

ほかに、HTML5のリファレンス的なものや、フレームワークも紹介されています。