週刊Webテク通信

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

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

ネットで見かけた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 繰り返しの背景パターンを作成できるサービス

今週の気になるWebネタ

任天堂のスーパーマリオラン,12/15の発売後1ヶ月の売上予想は7000万ドル以上 | TechCrunch Japanhttp://jp.techcrunch.com/2016/12/09/20161208super-mario-run-first-month-revenue-projected-at-over-70m/

いよいよ話題の「スーパーマリオラン」がリリースされます。無料で3コースまで遊べて,1200円課金すると全ステージプレイできて追加課金はなしという設定も絶妙だと思います。

ソニーもPlayStationの人気タイトル「みんなのGOLF」「アークザラッド」「パラッパラッパー」「どこでもいっしょ」「ぼくのなつやすみ」のスマホ用新作を2017年春から順次公開していくそうです。

昔の人気ゲームのスマホ用新作というのが,今後増えそうですね。課金していくタイプのゲームが好きじゃないとか,子供に安心して遊ばせられないという人も多いと思うので,「スーパーマリオラン」のように1度の課金のみのゲームが増えていくとうれしいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入