週刊Webテク通信

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

ネットで見かけた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 スタイルガイドを作成、共有できるサービス

おすすめ記事

記事・ニュース一覧