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

1. 5 web-design trends tech companies should watch ? Tech News and Analysishttp://gigaom.com/2013/07/25/5-web-design-trends-tech-companies-should-watch/

Webデザインのトレンドについて、5つの項目をピックアップしています。

1. はっきりしたアイコン
2. 大胆な色
3. データの可視化
4. Webフォント
5. パララックス（視差）スクロール

3番目のデータの可視化ですが、これはデータを元にビジュアル化した画像をあらかじめ作るのではなく、データを元にインタラクティブにその場でビジュアル化することです。画像ではないので検索エンジンにインデックスされるというメリットもあるとのことです。

2. Best New Features in Bootstrap 3.0http://antjanus.com/blog/web-design-tips/web-design-elements/best-new-features-in-bootstrap-3-0/

Bootstrap 3の新機能について、以下の項目に分けて解説しています。

• フラットデザイン寄りのはっきりしたUI
• アイコンフォント
• 新しくなったグリッドシステム
• 制御しやすくなったフォームのレイアウト
• リストグループ
• コンテキストパネル

また、Bootstrap 3を利用した実例やチュートリアルをまとめた「8 useful bootstrap 3 examples and tutorials」という記事もありました。

3. Free Flat Design PSD Files for Designers | Freebies | Graphic Design Junctionhttp://graphicdesignjunction.com/2013/07/free-flat-design-psd/

フラットデザインのPhotoshop素材をまとめた記事です。

「25+ Flat Design Inspiration for Designers - Tutorials-Share.com」というフラットデザインの実例をまとめた記事も参考になりそうです。

4. UIkithttp://www.getuikit.com/

BootstrapのようなWebサイト制作のベースとなるフレームワークで、WordPressのテーマなどを作っているYOOthemeというところが開発しています。

用意されているコンポーネントが豊富で、個人的に気になったのはJavaScriptコンポーネントで用意されているOff-canvasです。スマートフォンアプリでよくある、サイドメニューがスライドして現れるとともに画面全体が横に移動するものなのですが、フレームワークに標準で用意されているのを初めて見ました。

5. Google Nexus Website Menu | Codropshttp://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

GoogleのNexusサイトで使われているサイドメニューを実現するためのチュートリアルです。

ボタンにロールオーバーしたときにアイコンだけが表示されて、さらにアイコンにロールオーバーするとメニューがスライドして登場します。

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

• Facebook、投稿のウェブ埋め込み機能「Embedded Posts」をリリース - CNET Japan
  Twitterのようにブログなどにパブリックな投稿を埋め込めるようになります
• 「Google Maps」でパノラマ写真の共有を可能に--グーグル、「⁠Views」を公開 - CNET Japan
  みんなの作ったパノラマ写真を投稿できます
• スマホアプリをすぐに作れる「Yahoo!アプリエンジン⁠」⁠--9月初旬に提供 - CNET Japan
  iOS、Androidアプリを簡単に制作・運用できるCMS。有料での提供のようです

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

embedresponsively.comhttp://embedresponsively.com/

レスポンシブな埋め込みコードを生成するためのWebサービスです。

YouTubeやGoogleマップをサイトやブログに埋め込む際、標準で生成できる埋め込みコードはサイズがピクセルで決まっています。それではレスポンシブなサイトで利用するときに不便なのですが、このサービスを使うと横幅に合わせてサイズが可変するコードが生成できます。

YouTube、Vimeo、Googleマップ、インスタグラム、iFrameに対応しています。レスポンシブにするためのCSSの記述部分は基本同じなので、対応していないサービスでもCSS部分を流用して使えそうです。