週刊Webテク通信

2016年12月第2週号1位は、マイクロインタラクションのための5つのテクニック、気になるネタは、任天堂のスーパーマリオラン、12/15の発売後1ヶ月の売上予想は7000万ドル以上

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2016年12月5日~12月11日の間に見つけた記事のベスト5です。

1. Best Practices for Microinteractionshttps://uxplanet.org/best-practices-for-microinteractions-9456211aeed0#.2gupdly9g

マイクロインタラクション作成のためのテクニックを紹介した記事です。実例もGIFアニメで見ることができます。

  1. 習慣の繰り返しパターンを作る
  2. 全てのインタラクションを1つのテーマに結びつける
  3. アニメーションによるフィードバックを使う
  4. ユーモアを用いる
  5. 望まないインタラクションを避ける

ユーザーがどう感じるかに配慮してインタラクションを考え、細部まで細心の注意を払うことがUXを作る上で大切とのことでした。

図1 マイクロインタラクションのための5つのテクニック
図1 マイクロインタラクションのための5つのテクニック

2. How Does a User See Design? | Design Shackhttps://designshack.net/articles/layouts/how-does-a-user-see-design/

一般ユーザーはデザインをどう見ているのかについて解説しています。デザイナー視点ではなく一般人の視点で考えることで、より良いデザインができるというアプローチです。

  1. タイポグラフィは良いか悪いかで判断される
  2. 色の違いは多くの場合気付かれない
  3. ボタンは明白にわかる必要がある
  4. ミニマリズムはデザイナー側が過大評価しがち
  5. 大きな画像はたくさんのスペースを使ってしまう
  6. ユーザーはブランディングを知っている
  7. 動作するかしないか
図2 一般ユーザーはデザインをどう見ているのか
図2 一般ユーザーはデザインをどう見ているのか

3. Top 50 CSS Libraries, Frameworks and Tools from 2016https://speckyboy.com/top-50-css-libraries-frameworks-tools-2016/

2016年にリリースされたCSSライブラリ、フレームワーク、ツールをまとめた記事です。2013年から毎年まとめているそうで、過去記事へのリンクもあります。

スタイルガイド作成のためのツールやHTMLメールのためのフレームワークなども紹介されていました。

図3 2016年にリリースされたCSSライブラリ/フレームワーク/ツール
図3 2016年にリリースされたCSSライブラリ/フレームワーク/ツール

4. Three reasons why my (Windows+Adobe) team moved from Adobe to Sketchhttps://blog.prototypr.io/three-reasons-why-my-windows-adobe-team-moved-from-adobe-to-sketch-2ecf5fdd45d6#.qcvezx50y

8人のUXチームが、Adobe PhotoshopからSketchに移行した理由を解説しています。Windowsを使っており、SketchはMac版しかないという状況ながら、バーチャルマシンでOS X El Capitanを動かして使っているそうです。

  1. Sketchの「シンボルのOverrides⁠⁠ VS Photoshopのリンクオブジェクト
  2. グループ化とシンボルのリサイズ
  3. Invision Craftからのデータと画像の取り込み
  4. テキストスタイルの自動アップデート

3つの理由というタイトルですが、おまけの1つを含めて4つ載っていました。

図4 Adobe PhotoshopからSketchに移行した理由
図4 Adobe PhotoshopからSketchに移行した理由

5. 8 Newsletter Design Galleries To Inspire Your Next Campaignhttp://spyrestudios.com/resource-websites-newsletter-design-inspiration/

HTMLメールによるニュースレターのデザインギャラリーを8つ紹介しています。デザイナー視点でまとめられたものもあれば、マーケティング視点のものもあります。

日本ではWebデザインに関わる人でHTMLメールに注目している人が少ない印象ですが、もっと注目されるべきだと個人的には思っています。

図5 ニュースレターのデザインギャラリーいろいろ
図5 ニュースレターのデザインギャラリーいろいろ

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

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

Patterninja – pattern making applicationhttps://patterninja.com/

Patterninjaは、繰り返しの背景パターンを作成できるサービスです。用意されているベクター素材を使って簡単にパターンを作れます。

あらかじめ用意されている素材かアップロードした、SVGファイルを使って、サイズ、位置、角度などを変更することで直感的にパターンを作成できます。Illustratorにこの機能があったらいいのにと思うほどよくできています。

作成したパターンはSVGかPNGでダウンロードできます。ユーザー登録なども不要です。ベクター素材を使っているので、Webページの背景以外にも、いろいろな要素に使えそうです。

図6 繰り返しの背景パターンを作成できるサービス
図6 繰り返しの背景パターンを作成できるサービス

おすすめ記事

記事・ニュース一覧