バーチャルなアイトラッキング、可変フォント、プロトタイピングツール、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/

デザイン

海外のLPギャラリー

海外のLPのデザインをまとめたサイトがコチラ。
カテゴリー別になっているので分かりやすく、制作の参考に重宝するのではないでしょうか。

URL
https://land-book.com/gallery/landings?from=month

スポーツカーのデザイン

スポーツカーに関心のある方はいらっしゃいませんか?

最近撮ったスポーツカーの写真を(おまけで)追加しました。「NISSAN CONCEPT 2020」というプロトタイプカーなのですが、素晴らしいデザインでかなり感動しました。ちなみに銀座のNISSAN CROSSINGで実車を見ることができますよ。

URL
https://www.flickr.com/photos/cc0/albums/72157683611917513

今回は以上です!

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント