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

1. 2013 Web Design Trends Infographic | Enfuzedhttp://enfuzed.com/2013-web-design-trends-infographic/

2013年のWebデザインのトレンドを、インフォグラフィックスとしてまとめています。

取り上げられている項目は以下の通りです。

• レスポンシブ
• メトロ
• ミニマリズム
• タイポグラフィ
• パララックス（視差）
• 無限スクロール
• 固定ヘッダ
• シングルページ
• 大きな背景画像
• コンテンツファースト

2. Website Designs based on Solid Single Colored Background - Designmodohttp://designmodo.com/websites-single-color-background/

はっきりした単色の背景をベースとした、Webデザインの事例を多数紹介しています。

以下のような効果があるとのことです。

• テキストが認識しやすい
• 前面の要素の補足をする
• 清潔さと精密さを追加する
• バランスを取る
• ミニマルなスタイルにする
• 複数のエリアを区別する

3. Nifty Modal Window Effects | Codropshttp://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

いろいろな効果を使って開く、モーダルウィンドウを作成するチュートリアル記事です。

フラットデザインでシンプルながら、ちょっと面白みのあるモーダルウィンドウが作れます。

4. Terms of Service; Didn't Readhttp://tosdr.org/

各種Webサービスの規約から、ポイントになりそうな部分を抜き出して紹介しているサービスです。良い箇所、悪い箇所をピックアップして、その数からA～Eまでランク付けしています。

取り上げられているのは、Google、YouTube、Facebook、Twitterなどの規約です。

5. 適切に改行を行う - Weblog - hail2u.nethttp://hail2u.net/blog/webdesign/responsive-line-breaks.html

レスポンシブWebデザインの場合に、幅のサイズによって改行を入れたり無くしたりするCSSの例を紹介しています。

見出しをセンタリングにしている場合など、サイズによって改行をコントロールしたいというケースは確かにありますね。

そのほか、最近の記事の中から、いろいろと気になる記事を紹介します。

• WordPressのリアルな工数と見積もりの話をしようじゃないか！ | WP-D
  見積もりのひな形なんかも載っていて、大変興味深い記事でした
• New Features of Adobe Illustrator CC - Designmodo
  Illustrator CCの新機能の紹介です
• CSS3で実現するアローアイコン - to-R
  ボーダーを45度回転させてアローアイコンにするテクニックです

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

Creonomy Board: your visual inspiration folder - Welcomehttp://board.creonomy.com/

Boardは、Pinterestのような感じに画像をストックできるサービスです。Pinterestと違ってソーシャルメディア的な要素はなく、非公開の状態で使うものです。ちなみに、Pinterestも今では非公開のボードを作ることができるようになっています。

ローカルの画像をアップする際には、フォルダをドラッグ＆ドロップして複数画像をまとめて追加できます。ブラウザ拡張機能を使って、閲覧しているページ内の画像を追加したり、任意の箇所をキャプチャーして追加、Webページ全体をキャプチャーして追加することが可能です。

インスピレーションのための参考画像をまとめたり、ビジュアルブックマーク的に使うと便利そうなサービスです。複数人で同じボードを管理することもできるので、サイト制作時の参考イメージを共有するケースなどで使えそうですね。