UI/UXが優れている！2016年オススメのWebサイト・アプリ9選
- 2016年10月27日
- 1,668
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
Facebook: ryoxsakai
Twitter: @ryoxsakai
使いやすく、心地よいホームページには、必ず根拠があります。
「使いやすい」「心地よい」という感覚を生み出す重要な要素の一つが、UI/UXです。
どれだけ素晴らしいコンテンツが用意されていたとしても、UI/UXが優れていなければ長期的に利用してもらうことはできないでしょう。
今回は、ホームページやアプリの中で「インターフェイスのデザインやユーザー体験が素晴らしい」と話題になったものご紹介します。
UI/UXが優れている！Webサイト・アプリ9選
1. Stripe Radar
https://stripe.com/radar
Stripe Radarは、従来の決済システムと異なり、機械学習を取り入れた誰でも簡単に導入できる決済システムです。
トップページはマウスで動かして機能性を確認できる多面体で、傾けて奥行きをつけた動画の配置、紫色が特徴のグラデーション、シンプルなアニメーションなど、見ていて飽きのこないホームページです。
2. Facebook Design
http://facebook.design
Facebook Designは、Facebook社のデザイナーによるブログ記事・ビデオ・リソースなどのコレクションサイト。
コンテンツ一つずつがカード状になっており、マウスオーバーするとフワっと上がってきます。
また、コンテンツの種類によっては、カード下部のステータスが「VIEW MORE」か、「READ xxx's ARTICLE」で表示がわかれるのもおもしろいところです。
3. Andrea D. Labarile
http://www.andreadlabarile.it/
イタリアのWebデザイナー兼フロントエンドデベロッパーのAndrea D. Labarille氏のポートフォリオサイトです。
イタリア語で書かれていますが、UI/UXを考える上で非常に参考になります。
こちらもシングルカラム・シングルページですが、スクロールすると様々な要素がユニークな動きでポップアップされます。
ページ上部のハンバーガーメニューもクリックしてみてください。メニューの出現の仕方も独特で記憶に残りやすいデザインです。
4. POLYMAIL
https://polymail.io/
POLYMAILは、iOS・Mac OS用の高機能なメールクライアントです。ホームページでは、スクロールすると上部の固定化されたメニューバーが水色から白に変化します。
ホームページはもちろん、アプリケーションにもUI/UXが凝られており、着信メールをスワイプすることでメールの振り分けやスヌーズ設定を行うことができます。
5. Google Allo
https://allo.google.com/
Google Alloは、iOSのネイティヴのメッセージアプリを彷彿させるコミュニケーションアプリです。
シングルカラム・シングルページのデザインになっており、右上にダウンロードボタンが固定されているので、UX的にもわかりやすいデザインに仕上がっています。
アプリのデモはアニメーションで閲覧することができるので、どのようなアプリなのかも一目瞭然です。
また、Google Assistantを使ったAIとのチャット機能も、新たな体験を生み出してくれます。
6. The Charles NYC
http://thecharlesnyc.com/
ニューヨークの広告代理店であるThe Charles NYCのWebは、非常に優れたUI/UXデザインを設計しています。
ホームページに訪れて最初に目に飛び込んでくるのは、サイレントスクイザーと呼ばれる無音動画を背景としたヒーローイメージです。
少しスクロールすると、キャッチコピーが１文字ずつ現れてきます。
次にいくつかの写真が並んでいますが、その中の何枚かが動画になっており、静止画と動画の組み合わせがユニークです。
ページ下部にスクロールすると、クライアント一覧が現れます。
色調もモノクロとカラーを組み合わせて使用しており、全体的に印象に残りやすいデザインとなっています。
7. Houseparty
http://joinhouse.party/
Housepartyは、FaceTimeにソーシャル機能を持たせたようなビデオチャットアプリです。
ホームページは、iPhoneのデモ画面とロゴとダウンロードボタンとSNSボタンだけのシンプルな構成になっています。
また、アプリそのものも、ビデオ通話中はほとんど余計なボタンが配置されておらず、ミニマルなデザインとしてのUI/UXを目指すには非常に参考になるでしょう。
8. ZYYX
日本のWebシステム・アプリケーション制作会社であるZYYXのホームページです。
トップページに配置されているサイレントスクイザーは、ボケ効果を利用しており、動画だと最初は気づかないかもしれません。
また、コンタクトフォームは、アイコン・社名・入力例を並列しており、入力における煩わしさを極力除こうとしています。
9. Auxy Music Creation
ドラッグ＆ドロップで音楽を作れるiOSアプリです。
ミニマルで、フラットなデザインだけではなく、その操作もタップやドラッグで完結してしまいます。
ダークな背景にビビッドなカラーが映えるUIは、操作性も抜群です。
まとめ
様々なジャンルから、UI/UXに優れているホームページ・アプリを紹介しました。
実際、UI/UXはWebを超えて、プロダクトデザインやインストラクションデザインの世界にまで広がっています。
しかし、平面で操作するホームページやアプリにおいては、すべてのUI/UXを考える上で参考になります。
重要なのは、ユーザーにとって心地いいか、煩わしさが取り除けているか、ということです。
今回取り上げた9つの事例を参考にして、ぜひあなたにとってベストなUI/UXを考えてみてください。