バーチャルなアイトラッキング、可変フォント、プロトタイピングツール、LPまとめ、カーデザイン(デザインとUX/UIのウィークリーまとめ)

バーチャルなアイトラッキング、可変フォント、プロトタイピングツール、LPまとめ、カーデザイン(デザインとUX/UIのウィークリーまとめ)

こんにちは!

今週の【UX・デザイン】の情報共有です。

UI ・UX

アイトラッキングのシミュレーションツール

みなさんは「アイトラッキング」という技術はご存じですか?

エンドユーザがUIを見ている間、その視線の動きを記録する技術が「アイトラッキング」です。
初見でどこを見ているのか、その次はどこを見るのか、そしてそれを何秒間見ているのかといった情報が分かるんですね。ただし、導入コストはとても高い……。
そこで、従来のアプローチとは異なるビッグデータとAIを使ったアルゴリズムを開発したことで、コストを下げることに成功したのが下記のサービス。このアルゴリズムは、人間の目動きを91%もマネすることができるのだそうです。

使い方はいたってカンタン。
UIのスクリーンショットをアップロードすることにより、このアルゴリズムがバーチャルな人間の閲覧を行います。そして、その結果のレポートが提出されるというもの。多くの大手企業がこのサービスを使っているらしいです。

URL
http://www.feng-gui.com/

CSSの可変フォント

現在、フォントもレスポンシブにしたい場合、「vw」や「vh」といったユニットを使えばいいですよね。

HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」 でも当たり前なこととして扱われています。ただし、この技術はフォントのサイズしか変更できない模様。正直なところ、私にはそれでも充分なものであると思っていますが、現在ではビューポートのサイズによってフォントの外見(ファミリ、ボルドなど)も変えることのできるCSSを開発中なんだそうです。

それが「Open Type Font Variations」というものだとか。
1つのフォントだけで複数の外見をサポートすることか可能に。2018年には一般なブラウザにも導入されるらしいです。さらに詳細情報(※英語ですが……)と分かりやすいアニメーションは下記のリンクをご覧ください。

URL
https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497

コーディング不要の開発ツール

最近、「ORIGAMI」というプロトタイピングツールを勉強しています。
ただし、このツールには少々残念なところが。なんとコードエクスポート機能が無いんですね。
しかしつい先週、この「ORIGAMI」に代わる新しいツールがローンチされました。

それが「SUPERNOVA STUDIO」というツールです。
「ORIGAMI」とは異なり、ソースのアウトプットも可能。AndroidとiOSにも対応しています(ただし、REACTのエクスポートは開発中)。ドキュメンテーションの出来が素晴らしく、なかなか良い感じです。現在、絶賛フリートライアル中!

URL
https://supernova.studio/

デザイン