【東京本校/授業レポート】まるで近未来！？空中に浮かび上がるサイトから考えるＵＸとは！？｜東京本校

こんにちは！
デジタルハリウッド東京本校の渋谷です！

みなさんが普段Webサイトを見る時に使用するのは
PC？ iPad？特に多いのは、スマートフォンでしょうか？

サイトデザインをするときには

・どれくらいの大きさの画面で見られるだろう？

・ターゲットは誰にしよう？

・どんな色とフォントを使おう？

・操作しやすい見せ方は？ など、考えなければいけないポイントがたくさんあります。

では 空中に浮かび上がるサイト をデザインするとしたら、どんなデザインが良いでしょう？

空中に浮かび上がるサイトから考えるＵＸとは！？

ここからは「本科UI/UXD専攻の授業」を担当された横井講師にお話しを伺いながら、

実際に受講生の方々が制作した作品も合わせてご紹介していきます！

Q. まずは、今回の課題テーマを教えてください。

A. 今回の課題テーマは 「デジタルハリウッドの申し込みフォームにアクセスするためのランディングページ」 の制作です。その制作にあたって、4人程のチームでアイデア出し、デザインの元となるワイヤーフレームの構成を考えてもらいました。そこからは個人制作に移り、デザイン、コーディングを行い、今回の発表を迎えました。（横井講師）

Q. 今回、ランディングページを表示させる装置として使用した『空中サブモニター』とは、どんなものなのでしょうか？

A. 一言で言うと、アニメや映画に出てくる 「ホログラム」 です。近未来的な表示装置と思っていましたが、すでに世の中に実在しています。その開発・販売を行っているのが株式会社アスカネットで、今回はそちらからデモ用の装置をお借りました。実際に触ってみると、とても簡単に扱うことができ、電源を入れて、ケーブルを繋ぐとホログラムが表示されます。さらに驚くことに （空中に浮かんだ）ホログラムを指で操作することが可能です。 （横井講師）

Q. この『空中サブモニター』を使用した、ランディングページの提案・制作には、どのような効果があるのでしょうか？

A. 空中サブモニターを用いた最も大きな理由は、 ユーザー体験（UX）を考えること です。授業の中で、デザイン、コーディング、プログラムの技術をお伝えすることは出来るのですが、UXを考慮して、企画～制作までの一連の過程を実施することは難しいと感じていました。そこで、新しい表示媒体を利用することで、体験の具体性が増し、 どこで、どのように使用するのか を、明確に想定できるようになると考えました。実際、デジタルハリウッドに入学した時の想いを新たにして、感情の起伏がどう動くのかを想定しながら、制作を進めて頂けたと思います。 UIについても、表示媒体に合わせて、文字やボタンのサイズを大きくするなど、自分たちで気づいたことを形にする ことが出来ていました。（横井講師）

▼空中に浮かび上がるサイトを操作する様子はこちら

サイトをデザインするときは、サイトに訪れた人が 「使いやすい！」と思える 仕組みかどうか等、

ユーザー体験を意識してデザインできているか ということも、重要なポイントなのですね！

では、実際に受講生の方々が、どんなサイトを制作したかご覧いただきましょう！

受講生作品紹介

◆本科UI/UXD専攻上田菜穂子さん

「楽しく働いているところをイメージできるようなサイトにしました。女性らしい配色にし、文字量を抑え写真や画像多めにして見やすいサイトを意識した所がこだわりポイントです。（上田さん）」

https://nahokoueda.github.io/LPdesign_airdisplay/

◆本科UI/UXD専攻榎本暉子さん

「“次のキャリアをスタートしたい女性の背中を押すランディングページ”をコンセプトとしました。気持ちの温度感の高まりを可視化できそうな「グラデーション」を採用し、将来へのワクワク感・ポジティブな印象を表現しています。空中サブモニターで見せることを想定して、全体的にフォント/ボタン/余白を大きめにして、「読みやすく、押しやすい」を心がけたところもポイントです。（榎本さん）」

https://runrunkiko.github.io/Mid-termTask_new/

いかがでしたか？

普段何気なく見ているWebサイトですが、様々な視点を考慮してデザインされていると分かると、

見え方が少し変わってくるのではないでしょうか？