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

1. 新テクノロジー Generator が Photoshop CC に!http://blogs.adobe.com/tnakao/generator-for-photoshop-cc-14-1

Photohsop CCに搭載されたAdobe Generatorという画期的な新テクノロジーを解説した記事です。

レイヤー名に「◯◯.png」などと名前をつけるだけで、画像が自動生成されます。

従来のスライスしてWeb用画像を書き出すという作業が自動化されるわけです。もちろん透過PNGに対応していますし、レイヤーグループを1つの画像にすることも可能です。

ファイル名にパラメーターを設定することで、いろいろな書き出し方ができます。「⁠.png8」で8bitのPNG、「⁠.jpg10」で画質100%のJPEG、「⁠200%」と頭に付けると200%サイズの画像（Retina用）などの記述方法が説明してあります。

Photoshopのレイヤーから自動で画像を切り出すには、Slicyのようなサードパーティのツールもあります。Slicyの方が優れているという声もありますが、追加費用もなくPhotoshopだけで作業が完結するということで、すばらしい機能強化だと思います。

2. hr要素のデザインサンプル 12 | NxWorldhttp://www.nxworld.net/tips/hr-css-design.html

hr要素をCSSで装飾した作例を多数紹介しています。

一部画像を使っているものもありますが、ほとんどの例はCSSだけでデザインしています。

:after擬似要素を用いて記号や文字を追加する方法は、いろいろ応用できそうです。アイコンフォントのWebフォントを使ってもいいですね。

3. 15 Best Websites with Non-Standard Navigation - Designmodohttp://designmodo.com/non-standard-navigation-websites/

変わったナビゲーションのWebサイトを多数紹介しています。

スクロールで見ていくシングルページのものが多いですが、シングルページでも項目の変わり目毎にページ遷移している（ブラウザの「戻る」「⁠進む」で移動できる）など、ユーザビリティに配慮するのが最近の傾向のようです。

4. 34 Creative Examples of Icons in Web Design - Bloom Web Designhttp://bloomwebdesign.net/2013/09/25-inspiring-examples-of-icons-in-web-design/

アイコンが使われたWebデザインのギャラリーです。

Webフォントとして使えるアイコンも最近増えてきましたし、アイコンを効果的に使ったWebサイトは今後も増えそうです。

5. Flat Websites Design | Website Designing | Design Bloghttp://blog.karachicorner.com/2013/09/flat-ui-design-websites/

フラットなUIデザインを使ったサイトのギャラリーです。

ポートフォリオサイトが多いのは、トレンドに合わせてリニューアルしやすいからでしょう。

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

• 【Facebook最新情報】広告・リンク投稿の画像表示を最適化！画像を大きく＆クリック率を上げるために必要な設定基準はコレ！
  各画像サイズなどが紹介されています。
• Google+に部分補正など高度な写真編集機能 ただしChromeにのみ対応 - ITmedia ニュース
  Google+の画像編集機能がSnapseedアプリと同様のものになりました。
• R-style » 「⁠Evernote Web Clipper 6.0 for Chrome」を使ってみたよ
  拡張機能Clearlyと単独アプリSkichの機能が搭載されています。

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

Free vectors icons for download and Icon font | Flaticonhttp://www.flaticon.com/

フリーのベクターアイコンを入手できるサービスです。Webフォント、SVG、PNGでダウンロードできます。

現在32カテゴリーで9000個近くのアイコンが登録されています。カテゴリ別に探したり、フリーワードで検索することができます。

必要なアイコンを選択していき、あとでまとめてダウンロードすることができます。その際にWebフォントにもできるのが便利ですね。Webフォントは、一緒に生成されるHTMLとCSSを指定の仕方の参考にできるようになっています。

トップページの下には、ボタンやメニューなどでの指定例のHTMLとCSSが掲載されていて、こちらも参考になります。