UIと未来の世界

12598 ワード
CSS アニメーション UI CSS テキストリンク

はじめに

web業界にいると、日常的にUIという言葉をよく耳にします。

UIデザインというと、ユーザビリティを意識して情報や機能をアイコン化したり、レイアウトを考えたりしていますが、私たちにとってUIとはどのくらい重要なものなのでしょうか？
本記事は、サイトやアプリといったwebの世界から飛び出して、UIとその未来の世界について触れてみたいと思います。

そもそもUIってなに？

ユーザーインターフェイス（User Interface）の略というのはみなさん知っていると思いますが、具体的にいうとなんでしょうか。
webデザイナーをしていると、なんとなくその意味付けを「使用感を意識したサイトやアプリの視覚デザイン」に終始してしまいますが、もっと噛み砕いて調べてみると、

User = 使用者/利用者
Interface = 境界面/接点/つなぎ目

といった言葉に翻訳されます。つまりその本質は、ユーザーがデバイスを操作する時の、コミュニケーションをつなぐものということになります。
人は何かモノを利用する時には、それをつなぐUIを利用していることになりますね。

UIの歴史と進化

CLI（コマンドラインインターフェース）
↓
GUI（グラフィカルユーザーインターフェース）
↓
NUI（ナチュラルユーザーインターフェース）
※現在の社会に浸透しているUI
↓
OUI（オーガニックユーザーインターフェース）
※今後NUIに取って代わるといわれているUI。

CLI（コマンドラインインターフェース）

テキストベースのインターフェイス。Windowsでいうコマンドプロンプトとか、Macでいうターミナルとか、いわゆる「黒い画面」のアイツです。

黒い画面にコマンドを入力して、デバイス（PC）を操作をします。
多くのコマンドを覚えて実行するため、UIという部分では不親切で遮断された印象がありますね。

GUI（グラフィカルユーザーインターフェース）

情報をアイコンなどのグラフィック要素に置き換え、CLIよりわかりやすくしたもの。
WYSIWYG(what you see is what you get)というデザイン原則があり、見たままが得られるというもの。
普段から利用しているPCで例えると、ファイルやフォルダをわかりやすくアイコン化したことで、より直感的に操作できるようになりました。

NUI（ナチュラルユーザーインターフェース）

人間にとって、より自然で直感的な操作が可能なUI。アクションしたことがそのまま返ってくるため、GUIよりも直感的なものになります。WYDIWG（what you do is what you get）というデザイン原則があり、行ったままが得られるというもの。
例としては、電車の券売機やデジタルサイネージのタッチパネル、スマホのスワイプ操作、音声入力でのgoogle検索、ジェスチャーを使ったゲーム機など。現在はこのUIが多く社会に見られるようになりました。

OUI（オーガニックユーザーインターフェース）

今後のUIの形と言われているもので、MicrosoftのDennis Wixonさんによると、OUIの概念は以下になるようです。

「オーガニックユーザーインターフェイス（OUI）とは、物理的な入力によって変化する、平面ではない表示装置をもっているユーザーインターフェイスである。OUIは、いかなる形にも変化可能な、出力装置であると同時に入力装置としても使えるディスプレイによって特徴づけられる。（An organic user interface (OUI) is a user interface “with non-planar displays that actively or passively change shape via analog physical inputs.” OUIs are characterized by displays that can change or take on any shape and their ability to use the display as an input device.）」

平面ではない表示装置？？というのが想像できませんが、手のひらがデバイスになったり、空間とセンサーを利用した新しいUI表現になるんですかね…。その実態はまだまだ謎です。
映画のような世界観が実現されるのも近いのかもしれません。

UIの進化で暮らしが変わる！私たちの未来の世界

みなさんはMicrosoftが毎年公開している「productivity future vision」というのをご存知でしょうか？今後のテクノロジーがどう進化して、どのようにライフスタイルが変化していくのか…。その年の10年後の未来をテーマに映像を公開しています。

■2017年度発表 Microsoft productivity future vision
https://www.youtube.com/watch?v=w-tFdreZB94
IMAGE ALT TEXT HERE

出典 https://www.youtube.com/watch?time_continue=14&v=w-tFdreZB94

Microsoftは、次の10年間にインパクトを与えるモノは、既に10年前からあるものと考えており、
映像の世界は、今あるテクノロジーで表現できると言われています。

Microsoftの映像の世界では、UIは以下に要約されています。

・ UIはマウスとキーボードを超えたフィジカルインプット
  ・ タッチデバイス
  ・ 音声入力
  ・ ジェスチャー

・ 情報のビジュアライゼーション
  ・ アイコンや画像を使用した視覚化

・ 個人の行動と目的に合わせた案内表示（パーソナライズサインシステム）
・ 異なるデバイス間での連携が可能
・ インタラクション

映像の世界では圧倒的な未来感が演出されてますが、ひとつひとつを紐解いてみると、今の社会でもすでに実現している世界がありますね。

UIを盛り上げるアニメーションサンプル

ボタン

html
<div class="btn"><a href="#">button</a></div>
css
.btn{
  width: 190px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -95px;
}
.btn a{
  width: 190px;
  height: 50px;
  display: table-cell;
  background: #40aefb;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
}
.btn a:hover{
  animation: pulse 1s ease-in-out forwards;
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  10% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  20% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.05, 1.05, 1.05);

  }
  40% {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
    background: #187dc3;
  }
}

お気に入り

html
<div class="favorite animated"><img src="asset/svg/favorite.svg" alt="お気に入り"></div>
css
.favorite{
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -24px;
}
.animated {
  animation: bounceIn 1s infinite;
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: ease-in-out;
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.8, .8, .8);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.9, .9, .9);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

メニュー

html
<nav class="menu">
  <input type="checkbox" class="menu-check" name="menu-check" id="menu-check"/>
  <label class="menu-button" for="menu-check">
    <span class="hamburger h-menu-01"></span>
    <span class="hamburger h-menu-02"></span>
    <span class="hamburger h-menu-03"></span>
  </label>
</nav>
css
.menu {
  background: #45aef7;
}
.menu-check{
  display: none;
}
.menu-check:checked + .menu-button .h-menu-01{
  transform: rotate(-45deg);
}
.menu-check:checked + .menu-button .h-menu-02{
  opacity:0;
}
.menu-check:checked + .menu-button .h-menu-03{
  transform: rotate(45deg);
}
.menu-button{
  display: block;
  width: 40px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -20px;
}
.menu{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
}
.hamburger{
  width: 40px;
  height: 4px;
  background: #fff;
  display: block;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -20px;
  transition: all 0.25s ease;
}
.h-menu-01{
  transform: translateY(-10px);
}
.h-menu-03{
  transform: translateY(10px);
}

未来はすぐそこ！UIと私たちの未来

現在のUIとテクノロジーで実現できているものを集めてみました。
わくわくする世界は、もうすぐ目の前にあるのかもしれませんね！

■パナソニック Wonder Life-Box 2020〜2030年のより良いくらし
https://www.youtube.com/watch?v=F9GN7u15fjk
IMAGE ALT TEXT HERE

出典 https://www.youtube.com/watch?v=F9GN7u15fjk

■ジェスチャーで反応するソニースマートスピーカー
https://www.youtube.com/watch?v=o6wa5XSUOn4
IMAGE ALT TEXT HERE

出典 https://www.youtube.com/watch?v=o6wa5XSUOn4

■スマートテーブル
https://www.youtube.com/watch?v=cH52aiXoD7A
IMAGE ALT TEXT HERE

出典 https://www.youtube.com/watch?v=cH52aiXoD7A

■冷蔵庫とキッチン
https://www.youtube.com/watch?v=ijWg-huUwLQ
IMAGE ALT TEXT HERE

出典 https://www.youtube.com/watch?v=ijWg-huUwLQ