週刊Webテク通信

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

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

ネットで見かけた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 複数のアイコンフォントを横断して検索できるサービス

今週の気になるWebネタ

「Adobe Typekit」にモリサワの日本語フォント20種追加-CCユーザーに無料提供 | マイナビニュースhttp://news.mynavi.jp/news/2015/10/06/107/

Adobe Creative Cloudユーザーが無料で使えるAdobe Typekitにモリサワのフォントが追加されました。このニュースを聞いて「モリサワパスポートが不要になる!?」と考えた人も多いと思いますが,残念ながら一部のフォントだけでした。

Adobe Typekitの多くのフォントはWebフォントとしても使用可能で,今回追加されたモリサワフォントもWebフォントとして使えます。Creative Cloudユーザーの場合は,追加料金なしでほとんど制限ないレベルでWeb上で使えるようです。

個人で複数台パソコンを使っている場合にも,モリサワパスポートは1ライセンスで1台にしかインストールできないのに対し,Creative Cloudは2台までインストールできます(同時使用は不可など条件あり)⁠なので,サブマシンにモリサワフォントを入れるために,Typekitを使うという利用法も便利だと思いました。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入