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

1. Web Design Trends Found in Startup Homepages - Treehouse Bloghttp://blog.teamtreehouse.com/web-design-trends-found-in-startup-homepages

スタートアップのサイトから見つけた、Webデザインのトレンドについて解説しています。

Webサービスなどを提供するスタートアップ企業のサイトの多くに共通する要素として、次のような項目が紹介されていました。

• 固定されたナビゲーション
• アイコンを使った機能紹介
• アニメーションで紹介する利用方法や直接試用できる機能
• お客様の声の掲載や紹介記事へのリンク
• 拡張されたフッタ

2. Fireworks後のツールとワークフロー : couldhttp://www.yasuhisa.com/could/article/fireworks-and-workflow/

Fireworksの開発終了を受けての記事です。代替候補となりそうなツールの紹介と、ワークフローをもっと柔軟にしようということが書かれています。

グラフィックツールでまずカンプを作るというワークフローを考え直そうということと、Fireworksの開発終了とはたしかにリンクしているように感じました。

最終的には、機能が特化された小さなツールをワークフローに合わせて選ぶという考え方を推奨しています。

また、PhotoshopでWebデザインを行う場合の設定方法に触れた以下の記事も参考になります。

• 「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について | Stocker.jp / diary

3. Metro Style Scripts and Tutorials for Web Developershttp://inspiretrends.com/metro-style-scripts-and-tutorials-for-web-developers/

メトロスタイルのWebデザインのためのスクリプトやチュートリアルをまとめた記事です。

Windows 8風のUIを実現するためのjQueryライブラリなどが紹介されています。

4. 50 Sites with Pastel/Washed-Out Color Schemeshttp://speckyboy.com/2013/05/02/50-sites-with-pastelwashed-out-color-schemes/

パステルカラー、彩度が抑えめな色の配色をベースとした、Webデザインのギャラリーです。

カラフルな色使いとの相性がいい、フラットデザインのサイトも多数紹介されていました。

5. Web Design Trends of Video Backgroundshttp://smashinghub.com/web-design-trends-of-video-backgrounds.htm

ウィンドウいっぱいの動画が背面に配置されたWebサイトを各種紹介しています。

いきなり音がなるサイトもあるので、職場で見る場合はご注意を。最初は無音で、スピーカーアイコンを押すと音が出るサイトが気が利いていると個人的には思います。

そのほか、最近の記事の中から、便利なツール関連の話題を紹介します。

• 世界でもっともシンプルなWebサイト制作編集ツールBarley-ページ画面そのものを直接エディット | TechCrunch Japan
  シンプルな操作で簡単にWebサイトが作れるツールの紹介です
• Google Fonts（グーグル・フォント）を使ったページプレビューが見れるサイト「Best Google Web Fonts⁠」⁠ : ライフハッカー［日本版］
  ただのプレビューだけでなく、CSSでのいろいろな効果を付けた状態を確認できます。CSSのソースもコピー可能です
• FROONT - Responsive web design, the visual way
  レスポンシブWebデザインのページをドラッグ＆ドロップで簡単に作れるツールです。Adobe Edge Reflowと競合する感じですね

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

Shape Shifterhttp://www.kennethcachia.com/shape-shifter/

文字を入力すると、電車の電光掲示板のような粗いドット（丸）が集合してその文字が表示されます。ドットが集まる様子や揺れるような動きがかわいいです。Canvasで描写しています。

右上の「？」から表示されるヘルプで、機能紹介を見ることができます。カウントダウンや時計表示、アイコンフォントの表示などもできます。

「|」で区切って文字を入力すると、順番にアニメーションされるのが楽しいです。URLの末尾に「?a=」に続いて表示させたいテキストを入れると、自分の作ったアニメーションなどを人と共有することが可能です。