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

1. 10 Steps to Create Meaningful Material Design Icons – MaterialUphttp://www.materialup.com/blog/making-professional-material-design-icons

マテリアルデザインアイコンを作るための10のステップと，Q＆A形式でのヒントなどが掲載されています。

1. アイコンの目的を知る
2. 中心となる象徴的なものを決定する
3. 抽象的で幾何学的なものにするか，象徴的なものにするかを決める
4. 奇をてらわずに最もシンプルなものから始める
5. 繰り返し作る
6. ある時点まで色は考えない
7. 見逃している点に気付くためにもクライアントやほかの人からの感想をもらう
8. 全ての要素間のバランスや対称性を調整する
9. 洗練させるとともに細部を確認する
10. MaterialUp（というマテリアルデザインのギャラリーサイト）にアップする

2. Embracing the latest web trend: card-based design | Webdesigner Depothttp://www.webdesignerdepot.com/2015/09/embracing-the-latest-web-trend-card-based-design/

Webデザインのトレンドとして，カードベースのデザインについて解説した記事です。

PinterestやDribbbleのようなカードベースのデザインは，ユーザーエクスペリエンスの面で優れていて，モバイルサイトにも合っているとのことでした。

3. Why emotions are key to impactful websiteshttp://thenextweb.com/dd/2015/08/24/why-emotions-are-key-to-impactful-websites/

効果的なWebデザインのために，感情に訴えることがなぜ重要かを解説した記事です。

以下のような項目で説明していました。

• 感情に訴える方法
• ユーザーの目的を理解する
• ダイレクトに興味を集めるための焦点を定める
• コール＆レスポンス
• 感情を落ち着かせる，または刺激するのによく使われるデザイン要素
• タイポグラフィ
• 色
• パーソナリティとデザイン

4. Is There Any Difference Between Google’s & Microsoft’s Colors?http://colorhunt.co/blog/google-microsoft-brand-colors/

Googleとマイクロソフトのブランドカラー4色を比較した記事です。マイクロソフトの選んだ色は彩度が高く，Googleの色は低いことが紹介されています。

Googleのマテリアルデザインは現実世界をデジタルに置き換えるため，彩度が低い色が使われているとの考察もありました。

なお，Googleの新ロゴとともに登場した「G」1文字が4色で表現されたアイコンですが，2006年にロシアのデザイナーが作っていたものに似ているという話題があります。

• DailyTech - Exclusive: Google's "New" Search Icon Was Created in 2008 by Russian Designer

新たなパクリ騒動かと思ったのですが，どうやらそのロシアのデザイナーとGoogleとで契約が結ばれているとの報道もありました。

5. Landing Page Designs for CMS Engineshttps://webdesignledger.com/cms-landing-pages

CMSエンジンを提供しているサイトのギャラリーです。

ランディングページのデザインギャラリーですが，CMSエンジンのリンク集としても参考になりそうです。

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

• Google Docsに音声入力，テンプレート，スマートシート機能が追加 | TechCrunch Japan
  Google Docsが機能強化，フォームのデザインも洗練されたそうです
• リコーの全天周カメラTHETA（シータ）が高解像度化＆暗闇に強くなって最強に：IFA 2015 - 週刊アスキー
  やっとで高解像度化されました。多くのユーザーが買い換えることでしょう
• ワコム，紙に書くとデータになるノート Bamboo Spark発表。iPadやGalaxy Note用ペン3種も - Engadget Japanese
  同様の製品でヒットにつながったものはないですが，ワコムということで期待したいです

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

Create Free Brand & Design Style Guides with Frontify Style Guidehttps://frontify.com/styleguide

Frontify Style Guideは，スタイルガイドを簡単に作ることができるWebサービスです。

以下のような要素をまとめて見られるスタイルガイドページを作成，共有できます。

• ロゴとイメージ
• カラーパレット
• タイポグラフィ＋Webフォント
• アイコンセット

フォーマットが決まっているので作りやすそうですし，スタイルガイドに必要な要素が分かるという点でも便利です。

以下のようなスタイルガイドページが作れます。

• Style Guide - Frontify

なお，Frontifyはほかにも，Frontify Workspaceという，デジタル素材を管理・共有して，デザイン修正のやり取りをしたり，プロトタイプを作ったりできるサービスも提供しています。