gihyo.jpサイトのロゴ

週刊Webテク通信

2016年5月第2週号1位は、UXデザインの背後にある心理学、気になるネタは、Twitter、有料化の予定は「ない」 繰り返すデマに「おやめください」

2016-05-12

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

1. Reading minds: the psychology behind UX design | Webdesigner Depothttp://www.webdesignerdepot.com/2016/05/reading-minds-the-psychology-behind-ux-design/

UXデザインの背後にある心理学を解説した記事です。

  • 社会的な裏付けとして、ユーザーレビューや「これをチェックした人はこんな商品も買っています⁠」⁠、商品に興味を持つ他のユーザーを確認できる機能などが有効
  • 視覚により無意識による情報処理が行われるので、動画の方がテキストや写真より注目を集める。女性と赤ちゃんの顔は注目を集めやすい

といった、心理学的な視点によるユーザーにアピールする要素が紹介されていました。

また、行動を引き起こすための3つの要素、モチベーション（Motivation⁠）⁠、行動するための能力（Ability⁠）⁠、行動を起こすトリガー（Trigger）についても解説しています。

図1　UXデザインの背後にある心理学
図1　UXデザインの背後にある心理学

2. 28 Creative Menu with Material Design - ninodezign.comhttp://ninodezign.com/28-creative-menu-with-material-design/

マテリアルデザインによるメニューを28種類まとめています。実例ではなく、コンセプトデザインとして動画で作られているものの紹介です。

UIデザインにおいては、こういった動きのあるデザインカンプを素早く作る必要性が高まりそうです。

図2　マテリアルデザインによるメニューデザインいろいろ
図2　マテリアルデザインによるメニューデザインいろいろ

3. A Comparison of Animation Technologies | CSS-Trickshttps://css-tricks.com/comparison-animation-technologies/

Webのためのアニメーションの技術を比較した記事です。

CSS、Canvas、SMIL、Web Animations API、WebGLの良い点／悪い点がまとめられています。また、アニメーションのための各種ライブラリについても解説しています。

図3　Webのためのアニメーション技術を比較
図3　Webのためのアニメーション技術を比較

4. 22 Best Website Builders to Create Your Own Websitehttp://line25.com/articles/best-website-builders

Web制作のスキル不要でサイトを簡単に作れるサービスをまとめています。WIX、Jimdo、Squarespaceといった定番のものをはじめ、22種類も掲載されていました。

日本ではこの手のサービスは最近あまり話題にならないように感じますが、世界的にはどんどん種類が増えているようです。

図4　Webサイトビルダーいろいろ
図4　Webサイトビルダーいろいろ

5. 50 Ridiculously Cool & Useful Freebies for May 2016http://designwoop.com/2016/05/50-useful-designer-freebies-for-may-2016/

Webデザインに役立つフリー素材を大量に紹介した記事です。

アイコン、フォント、背景素材、モックアップ素材、テンプレート、UIキットなどが掲載されていました。

図5　フリー素材を大量に紹介
図5　フリー素材を大量に紹介

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

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

WTFIT - Discover your surroundingshttp://www.wtfitbot.com/

WTFITは、Facebookメッセンジャーで写真を送ると、何が写っているかをテキストで答えてくれるbotです。Facebookのアカウントがあれば、何の設定もなく使い始めることができて便利です。

写真を送ってしばらく待つと、写っているものを「何色の○○」という感じで教えてくれます。目の見えない人に、何が写っているのかを説明する感じです。

有名人の写真を送ってみたところ、髪の色や服装や持っているものの説明が返ってきました。また、カルボナーラスパゲティの写真を送ったら、「⁠黄色い麺」といった返事で、固有名詞をズバリ答えるような考え方ではないようです。

図6　写真に何が写っているかを答えてくれるFacebookメッセンジャー用のbot
図6　写真に何が写っているかを答えてくれるFacebookメッセンジャー用のbot

おすすめ記事

記事・ニュース一覧