週刊Webテク通信

2015年10月第3週号1位は、ユーザーへの道案内のためにユーザーインターフェイス上で色を使う方法、気になるネタは、「Adobe Typekit」モリサワの日本語フォント20種追加-CCユーザーに無料提供

ネットで見かけた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」は、色が道案内としての信号(シグナル)にもなるし、不適切に使うとノイズにもなるということを表現しています。

図1 色を道案内として使うためのヒント
図1 色を道案内として使うためのヒント

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

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

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

図2 Webデザインのための情報源のリンク集
図2 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. ビジュアルを減らす
図3 高解像度ディスプレイ向けWebデザインのヒント
図3 高解像度ディスプレイ向けWebデザインのヒント

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のライブラリです。

図4 アニメーションのためのライブラリMotion UIの紹介
図4 アニメーションのためのライブラリMotion UIの紹介

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

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

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

図5 マテリアルデザインを知るための情報を網羅した記事
図5 マテリアルデザインを知るための情報を網羅した記事

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

先週の気になる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にペーストすればいいというわけです。

図6 複数のアイコンフォントを横断して検索できるサービス
図6 複数のアイコンフォントを横断して検索できるサービス

おすすめ記事

記事・ニュース一覧