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

1. Cut&Slice me - FREE Photoshop plugin to export your assetshttp://www.cutandslice.me/#jp

Photoshopから画像をスライスして書き出すプラグインです。Photoshopのスライスツールを使うのとは違い、レイヤーごとに自動でPNG画像を生成できます。

レイヤーのグループ名が、書き出されるファイル名となります。グループ名の最後に「@」を付けると透過PNGになるなどのルールがあります。ボタンの場合は、normal、hover、selectedといった状態ごとにグループを分けておけば、全ての状態を個別に書き出せます。Retina用の2倍サイズの画像も生成できます。

同じようなことのできるツールとして、MacRabbitのSlicy（旧商品名LayerCake）という29ドルのアプリケーションがあります。Cut&Slice meと同様に、決められたルールに従って名前を付けたレイヤーグループを用意します。そのファイルをPSDとして保存し、Slicyにドラッグ＆ドロップするとスライスされた画像が生成されるという仕組みです。Retina用の画像も生成できます。

2. Basic Ready-to-Use CSS Styleshttp://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/

シャドウやグラデーションなど、よく使われるパターンのCSSコード集です。

• ボックスの上部に1ピクセルのラインを入れてエンボスにする
• 角丸を利用して円を描く
• ロールオーバーしたらジワッとアニメーションして色が変わるボタン
• フォーカスされると枠や背景が変わる入力欄

といったCSSの記述例が掲載されています。

3. これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer | コリスhttp://coliss.com/articles/build-websites/operation/javascript/bookmarklet-viewport-resizer.html

モバイル、タブレットなど複数の画面サイズでページをプレビューできる、ブックマークレットを紹介した記事です。

ブックマークレットを起動するとメニューバーが登場し、そこから、iPhone、iPhone5、small tablet、table、widescreenとサイズを変更できます。もちろん、縦画面、横画面の切り替えも可能です。

4. Responsive CSS Frameworks You Will love - Creative Beaconhttp://www.creativebeacon.com/responsive-css-frameworks-you-will-love/

レスポンシブなCSSフレームワークを紹介した記事です。

Bootstrap、Foundationを始めとして、多数のフレームワークが掲載されています。

5. 100 Smashing Websites with Full Size Image Background | Design Web Kithttp://designwebkit.com/inspiration/100-smashing-websites-with-full-size-image-background/

背景いっぱいに写真が使われたサイトのギャラリーです。100個ものサイトが掲載されています。

ビジュアルに力を入れているだけあって、インターフェイスやページ遷移の仕方が面白いサイトも多いようです。

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

• comm（コム）/もっとつながる、高音質な無料通話アプリ
  DeNAからLINEのようなアプリが登場です
• “⁠Kindle本⁠”自費出版「Kindleダイレクト・パブリッシング」日本版スタート - ITmedia ニュース
  Kindle本を自分で作って販売できるサービスも開始されました
• HTML上で直接CSSを編集！次世代エディタEdge Code | DECONCEPTER
  Adobeのコーディング用エディタの紹介です

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

Typeform | Create awesome forms & surveys that function seamlessly across deviceshttp://www.typeform.com/

Typeformは簡単に使いやすいフォームを作成できるサービスです。マルチデバイス対応に力を入れた設計で、タッチデバイスで使いやすいように考えられています。

よくあるWebページ上のフォームより、ビジュアル中心で直感的に操作できるフォームが作成できます。並んだ星マークを選んでレーティングするようなパーツ類が、あらかじめ用意されています。

Typeformでどんなことができるかを紹介したムービーの中では、タブレットを使った街頭アンケートの場面があるのですが、まさにそういった用途で威力を発揮しそうです。

現在ベータ版で、使ってみたい人は申請するようになっています。申請すると個別のURLが生成されて、3人以上からクリックされると使えるようになるそうです。わたしもURLをFacebookでシェアして3人以上にクリックしてもらい数日経ったのですが、今のところ招待は届いていません。