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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

こんにちは!

今週の【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/

デザイン

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...