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

1. Signal vs. Noise: Color as a Wayfinding Tool | Vigethttps://viget.com/inspire/wayfinding

ユーザーインターフェイスにおいて、ユーザーへの道案内のために色を使う方法について解説した記事です。

ユーザーへの道案内として、少なくとも以下の4つの重要な意義のために色が使われるべきだと説明してあります。

1. 識別：ブランドを識別する、多くの場合ロゴと調和したもの
2. アクション：リンクやボタン、投票や評価などのアクションに使用
3. 定義：自分が今どこにいるのかを示す
4. 通知：何か新しいものがあるのを知らせる

ユーザーを混乱させず正しく誘導するためにも、慎重に意味のある色を使う必要があるとのことでした。タイトルの「Signal vs. Noise」は、色が道案内としての信号（シグナル）にもなるし、不適切に使うとノイズにもなるということを表現しています。

2. Web Field Manual | Designhttp://webfieldmanual.com/

Webデザインに役立つネット上の情報源をまとめたリンク集サイトです。

Webデザインに関するブログやインスピレーションを得るためのギャラリーサイト、ガイドラインやツールなどへのリンクが大量に掲載されています。

3. How to survive high-definition Web designhttp://thenextweb.com/dd/2015/10/07/how-to-survive-high-definition-web-design/

Retinaディスプレイなど高解像度の画面に向けたWebデザインのヒントをまとめています。

1. ベクターグラフィックスを使う
2. HTML5、CSS、JavaScriptでイメージを生成する
3. “止まった⁠”HDビデオを利用する
4. フォーカスの合っていない画像を使う
5. ビジュアルを減らす

4. Introducing the New Motion UI | ZURB Bloghttp://zurb.com/article/1409/introducing-the-new-motion-ui

Webサイト制作のためのフロントエンドフレームワークFoundationでおなじみの、米ZURB社の提供する「Motion UI」というアニメーション用ライブラリを紹介しています。

CSSのtransitionsとanimationsを使ってアニメーションを楽に作るための、Sassのライブラリです。

5. Everything (Almost) You Need to Know about Material Designhttp://www.1stwebdesigner.com/material-design-guide/

マテリアルデザインに関する完全ガイド的なページです。詳細な解説や豊富なリンクで盛りだくさんの内容になっています。

マテリアルデザインの定義やゴールと原則、共通要素の解説や、いろいろな実例などが掲載されていました。

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

• Adobe MAX 2015基調講演：Dreamweaver、Photoshop、Muse、Creative Sync、Typekit、Project Comet――アドビが示したUXデザイン／Web制作ワークフローの未来とは - ＠IT
  たくさんあったモバイルアプリが統合されたり、DreamweaverにReflowが統合されたりしたようです
• Facebook、「⁠リアクション」をテスト -「⁠いいね!」ボタンに6つの感情を追加 | マイナビニュース
  LINEのタイムラインでの「いいね」同様に、絵文字を選ぶスタイルになるようです
• フォント事情 2015（OS X El Capitan‎、Typekit⁠）⁠ - DTP Transit
  El Capitan‎で日本語フォントが追加されたとともに、ヒラギノフォントのウェイトが増え、従来のヒラギノとは別フォントとなりました

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

GlyphSearch: Search for icons from Font Awesome, Foundation, Glyphicons, IcoMoon, Ionicons, Material Design, and Octiconshttp://glyphsearch.com/

GlyphSearchは、アイコンフォント内の個々のアイコンを検索して探せるサービスです。Font Awesome、Foundation、IcoMoonなど7つのWebフォントから検索でき、複数のWebフォントを横断して探せるところが便利です。

フォントを探した後にコードをコピーできるのですが、HTMLのコード、Classの値、名前のみなど種類を選ぶことが可能です。ここで、Unicodeでコピーできるのも嬉しい機能です。

Font AwesomeなどのWebフォントをパソコンにインストールしておけば、PhotoshopやIllustratorなどでサイトのデザインを作る際にWebフォントをそのまま使えます。そういったケースの時に、このサービスでアイコンを探して、UnicodeでコピーしてPhotoshopやIllustratorにペーストすればいいというわけです。