週刊Webテク通信

2015年9月第2週号 1位は，マテリアルデザインアイコンを作るための10のステップ，気になるネタは，グーグル，国内でも音楽配信サービス「Google Play Music」--3500万曲，月額980円で

Webテク, Webデザイン, Web広告, マテリアルデザイン, CMS, Google

この記事を読むのに必要な時間：およそ 2.5 分

ネットで見かけた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（というマテリアルデザインのギャラリーサイト）にアップする

図1　高品質のマテリアルデザインアイコンを作るためのヒント

図1　高品質のマテリアルデザインアイコンを作るためのヒント

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のようなカードベースのデザインは，ユーザーエクスペリエンスの面で優れていて，モバイルサイトにも合っているとのことでした。

図2　カードベースのデザインについて

図2　カードベースのデザインについて

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

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

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

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

図3　効果的なWebデザインのために感情に訴えることがなぜ重要か

図3　効果的な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年にロシアのデザイナーが作っていたものに似ているという話題があります。

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

図4　Googleとマイクロソフトのブランドカラーの違い

図4　Googleとマイクロソフトのブランドカラーの違い

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

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

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

図5　CMSエンジンのランディングページのデザインギャラリー

図5　CMSエンジンのランディングページのデザインギャラリー

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

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

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

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

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

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

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

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

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

図6　スタイルガイドを作成，共有できるサービス

図6　スタイルガイドを作成，共有できるサービス

今週の気になるWebネタ

グーグル，国内でも音楽配信サービス「Google Play Music」--3500万曲，月額980円で - CNET Japanhttp://japan.cnet.com/news/service/35069877/

Google Play Musicが日本でもスタートしました。「⁠定額聴き放題／曲の販売／手持ちの曲をクラウドに保存」の3つのサービスが提供されます。

定額聴き放題も気になりますが，クラウドに音楽を保存してストリーミングで聴けるのは，Androidユーザーにとってはうれしいでしょう。Android TVやNexus Playerのユーザーにとっても，Google Play Musicは重要なサービスに位置づけられるはずです。

Google Play Music，Netflixと，聴き放題や見放題のサービスがどんどん増えてきました。これらはスマートフォンでの利用について語られることが目立ちますが，実際にはパソコンで使う人の方が多いんじゃないかとわたしは思っています。

Webテク, Webデザイン, Web広告, マテリアルデザイン, CMS, Google

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote