週刊Webテク通信

2016年5月第4週号 1位は,オンラインツールCanvaで使われているビジュアル効果を解説,気になるネタは,Google,音声認識で家電をコントロールできる「Google Home」を発表

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

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

1. 5 Visual Effects Canva Uses to Thrill Users – Engineering at Canvahttps://engineering.canva.com/2016/05/16/five-visual-effects/

ブラウザ上で簡単にグラフィックデザイン作業が行えるオンラインツール「Canva」で使われている,アニメーションなどのビジュアル効果のテクニックを解説した記事です。

画像をアップロードするときの,ボタンの中に水が満ちていくアニメーションなど,ちょっとした動きながらセンスのいい効果の仕組みを知ることができて興味深いです。

実際のコードはCodePenで公開されており,こういう情報を惜しげもなく提供してくれるCanvaを応援したくなります。

図1 オンラインツールCanvaで使われているビジュアル効果を解説

図1 オンラインツールCanvaで使われているビジュアル効果を解説

2. The Principles of UX Choreography — Experiência do Usuário e Inovação — Mediumhttps://medium.com/@beccau/the-principles-of-ux-choreography-69c91c2cbc2a#.yzzmbwzeo

ユーザーエクスペリエンス(UX)におけるコレオグラフィーの原則についてまとめた記事です。

コレオグラフィーとは「振り付け」のことで,UXにおいて各パーツに動きを付けることを振り付けと表現しているのだと思います。

  1. アクションに対する反応
  2. アクションを受けての次のステップ
  3. 空間を意識させる動き
  4. 部分的に焦点を当てる
  5. そのブランドらしいトーン

といった項目に分けて解説していました。

図2 UXにおけるコレオグラフィーの原則

図2 UXにおけるコレオグラフィーの原則

3. フロントエンド視点:デザイナーと協業して作るスタイルガイドの難易度を下げる | ygoto3.comhttp://ygoto3.com/posts/make-style-guide-easy/

コンポーネントリストやスタイルガイドを,フロントエンドエンジニアとデザイナーが協業して作る場合の,実際の落としどころのヒントが解説してあります。

実際にやってみての経験を元に語られていて,いろいろと参考になります。

図3 エンジニアとデザイナーが協業してスタイルガイドを作るヒント

図3 エンジニアとデザイナーが協業してスタイルガイドを作るヒント

4. 33 Excellent Product Pages Examples for e-Commerce Websiteshttp://line25.com/inspiration/product-pages-examples-e-commerce-websites

ECサイトの商品紹介ページの優れたデザインを集めて紹介しています。

クリエイターが作品共有サイトに投稿したものをまとめてあり,リンク先にページの全体像や別画像が掲載されているものもあります。

図4 ECサイトの商品紹介ページの優れたデザイン集

図4 ECサイトの商品紹介ページの優れたデザイン集

5. 10 Helpful User Experience Tools for Every Designerhttp://codecondo.com/10-helpful-user-experience-tools-for-every-designer/

ユーザーエクスペリエンスのためのツールをまとめた記事です。

ユーザーリサーチ,デザイン,ユーザーテスト,デザインコラボレーションに便利なツールを掲載しています。

図5 ユーザーエクスペリエンスのためのツールいろいろ

図5 ユーザーエクスペリエンスのためのツールいろいろ

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

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

Iconosquare - All Instagram onlinehttp://iconosquare.com/

IconosquareはInstagramの分析を行うWebサービスです。Instagramのアカウントで認証すると,フォロワー数や「いいね!」⁠コメント数の推移など,様々なデータを確認できます。また,Iconosquare上で「いいね!」やコメントなどInstagramの操作も行えます。

「いいね!」やコメントをもらった曜日ごとの時間帯を確認できるので,投稿するタイミングの参考になります。基本有料のツールですが,ログインしなくてもハッシュタグやユーザーの検索機能などは使えます。人気のハッシュタグを探すなど,無料でも便利に使えるシーンはありそうです。

InstagramにはTwitterやFacebookページのような標準の解析ツールがないので,ビジネスで活用するにはこういったサービスの利用も検討する必要があるでしょう。

図6 Instagramの分析を行うサービスIconosquar

図6 Instagramの分析を行うサービスIconosquar

今週の気になるWebネタ

Google,音声認識で家電をコントロールできる「Google Home」を発表 - MdN Design Interactive - デザインとグラフィックの総合情報サイトhttp://www.mdn.co.jp/di/newstopics/45231/

Googleが開発者向けイベント「Google I/O 2016」でいろいろと発表しましたが,新しいハードウエアとしては「Google Home」が気になる存在です。

Google Homeは音声認識による対話で家電などをコントロールできる機器です。話しかけることで部屋の照明をつけたり,検索したYouTube動画をテレビに表示したりできるとのこと。なお,テレビとの連動はChromecastを使うようです。

Amazon Echoのライバルとして注目されていますが,今度はAppleが作る同様のデバイスも見てみたいですね。Apple TV vs Google Chromecast vs Amazon FireTVのような競争を期待したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入