使いやすく、心地よいホームページには、必ず根拠があります。
「使いやすい」「心地よい」という感覚を生み出す重要な要素の一つが、UI/UXです。
どれだけ素晴らしいコンテンツが用意されていたとしても、UI/UXが優れていなければ長期的に利用してもらうことはできないでしょう。

今回は、ホームページアプリの中で「インターフェイスのデザインやユーザー体験が素晴らしい」と話題になったものご紹介します。

UI/UXが優れている!Webサイト・アプリ9選

1. Stripe Radar

01_stripe.jpg
https://stripe.com/radar
Stripe Radarは、従来の決済システムと異なり、機械学習を取り入れた誰でも簡単に導入できる決済システムです。
トップページはマウスで動かして機能性を確認できる多面体で、傾けて奥行きをつけた動画の配置、紫色が特徴のグラデーション、シンプルなアニメーションなど、見ていて飽きのこないホームページです。

2. Facebook Design

02_facebookdesign.jpg
http://facebook.design
Facebook Designは、Facebook社のデザイナーによるブログ記事・ビデオ・リソースなどのコレクションサイト。
コンテンツ一つずつがカード状になっており、マウスオーバーするとフワっと上がってきます。
また、コンテンツの種類によっては、カード下部のステータスが「VIEW MORE」か、「READ xxx's ARTICLE」で表示がわかれるのもおもしろいところです。

3. Andrea D. Labarile

03_andrea.jpg
http://www.andreadlabarile.it/
イタリアのWebデザイナー兼フロントエンドデベロッパーのAndrea D. Labarille氏のポートフォリオサイトです。
イタリア語で書かれていますが、UI/UXを考える上で非常に参考になります。

こちらもシングルカラム・シングルページですが、スクロールすると様々な要素がユニークな動きでポップアップされます。
ページ上部のハンバーガーメニューもクリックしてみてください。メニューの出現の仕方も独特で記憶に残りやすいデザインです。

4. POLYMAIL

04_polymail.jpg
https://polymail.io/
POLYMAILは、iOS・Mac OS用の高機能なメールクライアントです。ホームページでは、スクロールすると上部の固定化されたメニューバーが水色から白に変化します。

ホームページはもちろん、アプリケーションにもUI/UXが凝られており、着信メールをスワイプすることでメールの振り分けやスヌーズ設定を行うことができます。

5. Google Allo

05_googleallo.jpg
https://allo.google.com/
Google Alloは、iOSのネイティヴのメッセージアプリを彷彿させるコミュニケーションアプリです。
シングルカラム・シングルページのデザインになっており、右上にダウンロードボタンが固定されているので、UX的にもわかりやすいデザインに仕上がっています。

アプリのデモはアニメーションで閲覧することができるので、どのようなアプリなのかも一目瞭然です。
また、Google Assistantを使ったAIとのチャット機能も、新たな体験を生み出してくれます。

6. The Charles NYC

06_thecharlesnyc.jpg
http://thecharlesnyc.com/
ニューヨークの広告代理店であるThe Charles NYCのWebは、非常に優れたUI/UXデザインを設計しています。

ホームページに訪れて最初に目に飛び込んでくるのは、サイレントスクイザーと呼ばれる無音動画を背景としたヒーローイメージです。
少しスクロールすると、キャッチコピーが1文字ずつ現れてきます。
次にいくつかの写真が並んでいますが、その中の何枚かが動画になっており、静止画と動画の組み合わせがユニークです。

ページ下部にスクロールすると、クライアント一覧が現れます。

色調もモノクロとカラーを組み合わせて使用しており、全体的に印象に残りやすいデザインとなっています。

7. Houseparty

07_Houseparty.jpg
http://joinhouse.party/
Housepartyは、FaceTimeにソーシャル機能を持たせたようなビデオチャットアプリです。
ホームページは、iPhoneのデモ画面とロゴとダウンロードボタンとSNSボタンだけのシンプルな構成になっています。

また、アプリそのものも、ビデオ通話中はほとんど余計なボタンが配置されておらず、ミニマルなデザインとしてのUI/UXを目指すには非常に参考になるでしょう。

8. ZYYX

08_zyyx.jpg
http://www.zyyx.jp/

日本のWebシステム・アプリケーション制作会社であるZYYXのホームページです。
トップページに配置されているサイレントスクイザーは、ボケ効果を利用しており、動画だと最初は気づかないかもしれません。

また、コンタクトフォームは、アイコン・社名・入力例を並列しており、入力における煩わしさを極力除こうとしています。

9. Auxy Music Creation

09_auxy.jpg
http://auxy.co/

ドラッグ&ドロップで音楽を作れるiOSアプリです。
ミニマルで、フラットなデザインだけではなく、その操作もタップやドラッグで完結してしまいます。

ダークな背景にビビッドなカラーが映えるUIは、操作性も抜群です。