映像の中でリアリティのあるデザイン
こんにちは、Gaji-Labo UIデザイナーの今西です。
フィクションの中のUIデザインに考えたいと思います。 映画や海外ドラマを見るのが好きで、作中に登場するガジェットを見るのも楽しみのひとつです。
将来的にあったらいいなの夢のようなデザインがあったり、ありえないと感じるものがあったり…。夢のようなデザインは見ているだけでワクワクします。ありえないデザインはツッコミどころとして楽しんでいます。
Answer to the Ultimate Question of Life, the Universe, and Everything
= 42
Google検索のイースターエッグとしても有名なAnswer to the Ultimate Question of Life, the Universe, and Everything (生命、宇宙、そして万物についての究極の疑問の答え)は「銀河ヒッチハイクガイド」から生まれました。「銀河ヒッチハイクガイド」はラジオドラマから始まり、小説、BBCドラマ、映画などの作品があります。
映画の『銀河ヒッチハイクガイド』は私のお気に入りの作品です。
映画『銀河ヒッチハイクガイド』に登場する“銀河ヒッチハイクガイド”について観察してみます。
“銀河ヒッチハイクガイド”は電子ブックで、宇宙を旅行するため知識を集めた百科事典です。 ちなみに 同名のタイトルにはなっていますが、ストーリーとして“銀河ヒッチハイクガイド”を語るものではなく、“銀河ヒッチハイクガイド”という特徴的なガジェットという扱いです。
ガイドはブック型の折りたたみタブレットでできており、「パニクるな(Don’t Panic)」と外面に書いてあります。
調べる項目をガイドに向かって話すと説明するコンテンツが始まります。
ガイドの中身のデザインは、フラットでかなりモダンな感じです。
メニューから項目への移動を表現するデザインとモーションが、情報のツリー構造を楽しく表現していて良いです(上記クリップの8〜16秒あたりの箇所)。このガイドが目次がある構成であること、動きがフリップで展開されることから、あくまでブックあることがわかります。
ガイドコンテンツはグラフィカルなアニメーションで内容の説明がなされます。アニメーションのオブジェクトの入り方やシーンの切り替わりは画面の左右上下の移動でされています。このガイドが宇宙で一番売れているガイドだという説明が、このガイドとしてのハイライトになっているのがいやらしくて面白いところです。
洗練されたビジュアルの説明をメインのコンテンツへ、ブック感のあるモーションで表現された細かなUIで滑らかに繋いでいて、楽しいつくりになっていると思います。
1978年に始めて描かれたこの“銀河ヒッチハイクガイド”はタブレットコンピュータを予見していたと言われています。
また“銀河ヒッチハイクガイド”の体験は、今でいうところのSiriでWeb検索された
編集員の好みも反映されているとのことなので、Wikipedia的なところもありそうです。
少し想像できる未来のガジェット
“銀河ヒッチハイクガイド”の体験は、今でいうところのAlexaに呼びかけて言葉の意味を説明してもらう感じに近いと思います。 “銀河ヒッチハイクガイド”のように説明するビジュアルがアニメーションされるともっと情報量も増えてわかりやすそうです。 ガイドのコンテンツについては宇宙各地からデータを送っている調査員の意向も反映されているとのことなので、ガイドはWikipediaに近いところもありそうです(編集長はいるようですが)。
「銀河ヒッチハイクガイド」はガイドだけでなく、人格が人間に近すぎてうつ病気味のマーヴィン(RadioheadのParanoid Androidの元ネタ)や耳の中に装着する翻訳魚のバーベルフィッシュなど、想像できそうな近さと近未来のテクノロジーを感じるものが登場して楽しいです。
1978年のラジオドラマで始めて描かれたこの“銀河ヒッチハイクガイド”は、タブレットコンピュータを予見していたと言われています。
ガイドが電子ブックになった理由はプリントだとかさばるので持ち歩くには不便だからと説明されています。本を読むのがプリントからキンドルなどの電子ブックに移り変わる理由と同じで説得力があります。
作者のダグラス・アダムズは、イギリスで一番始めにMacを買ったも言われているほどの人物なので、未来のテクノロジーの予見を持っていたのかもしれません。 アダムズは映画の完成前に亡くなったので、その後のスマートフォンやAIアシスタントを知らないままでしたが、もし今の状況を見たらどう次の世界のガジェットを考えただろうと思います。
映画やTVドラマの映像作品で少し先の未来のテクノロジーとそのつくりについて思いを馳せるのと、作品世界をより深く考えたり観察することができます。
そのデザインの理由を考えると、デザインを考える参考になります。
最後に本の紹介になりますが「SF映画で学ぶインタフェースデザイン」は、UIデザインの観察やロジックが紹介されていてとても実践的にも参考になるのでお勧めです。
今すぐの転職でなくてもOKです!まずはお話しませんか?
現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。
- React, Next.js を得意とするフロントエンドエンジニア募集要項
- シニアクラスのフロントエンドエンジニア募集要項
- 抽象的な物事を具体的な機能にビジュアライズできるUIデザイナー募集要項
- UIデザイナーとして手ざわりのいいUIを作りたい業務委託パートナーさん募集(Wantedly)
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでの面談でお話しましょう。ぜひお気軽にお問い合わせください!
話をしてみたい!