【Making of “I am”】#03 web
こんにちは。web班の小林と加藤です。
先日、多摩美術大学統合デザイン学科2020年度卒業制作修了展のwebサイトを公開しました。今回はそのwebサイト制作についてのレポートです。
今年の卒展テーマをどのようにwebで表現するか
完成したwebサイト
夏休みにはメインビジュアルのコンセプトは固まりはじめてたので、web上でどのような動きにするかを考えていました。バーのキラキラが背景で動いている、バーの中に入っていく、バーをたくさん敷き詰める、バーを押すとランダムで個人のページに飛ぶなど。
この時は、メインビジュアルが完成というわけではなかったのでざっくりと考えてました。秋頃にビジュアルが完成したので本格的にwebを作り始めました。
決定したメインビジュアルはバーが何本も並んでいるものだったので、画面を横スクロールにする方向性で決まりました。
メインビジュアルの文字スタイルが斜傾だったので、webでは文字が全面アニメーションして読めるようにしよう、と動きも決まりました。
デザインとコーディング
最初の段階ではリサーチをしながらデザインと技術的なことを一緒に制作しながら決めていきました。大枠の方向性が決まってから、デザインを詰めてくのは加藤、コードを最適化・詰めていくのは小林という分担で進めていきました。
はじめは、写真をいれてごちゃごちゃしていました。そこでSNSで情報を発信できる時代に特設サイトをつくる意味を考えました。告知などの情報はSNSで伝えていたので、
webを作る意味＝テーマの世界観をつたえる
というコンセプトに絞りました。画像などの要素を思い切って削り、シンプルな組み方にできたと思います。
情報を全部いれたラフ案
次に横無限スクロールの実装・文字がでてくる判定・最初の横移動のモーションなどを詰めていきました。
横無限スクロールは、教員の奥田透也先生、北田荘平先生、国分宏樹先生、萩原俊矢先生などにアドバイスをいただき、できるだけ遷移がなめらかになるように工夫しました。
文字がでてくる判定は、はじめは細かい条件分岐でやろうとしていたのですが、効率がよくなかったのでライブラリを探したらinview.jsというライブラリがありそれを使用しました。
普通のwebサイトは縦ですし、横スクロールサイトって検索すると「あまり横スクロールサイトはよろしくないよ」という記事もあったので、最初の横移動モーションはかなり大事だなと考えていました。
不安もあり、最初の段階では指アイコンの下に文字を書いてたりしていたのですが、後輩や同級生・先生に触ってもらうと意外と指アイコンの動きでわかるといってもらえて今の形になりました。
はじめのモーション
また、iPhone・iPad版では奥田さんのアドバイスで範囲外で縦にスクロールされた時は最初の1回だけ、アニメーションが作動するという工夫をしました。
右上に固定であるMAPアイコンは菅俊一先生に相談する前はなくて、JP/ENが左上にあっただけでしたが、「固定の要素にSNS・マップに飛べるアイコン欲しい」というアドバイスをいただいて実装しました。
SNSアイコンも配置をしたのですが、各SNSのガイドラインを守るとサイズ感がテーマと合わなかったのでなしにしました。
最後に文字組みとレスポンシブに対応させるための微調整をしました。
数値では同じ位置にあっても目の錯覚で位置がずれて見えるところやバランスを画面サイズごとに直していきました。
メインビジュアル担当の古林さんや広報統括の渡辺さん、サイン班の大槻さんなどに相談・協力してもらいながら詰めていきました。
触ってもらうこと
ある程度完成してきたときに色々な人に触ってもらって反応を観察しました。
横スクロールと気づいてもらうためのアイコンを入れた時と入れなかったときや、見えないところですが触れる範囲を増やしたときとそうでないときの反応が全く違いました。
小さな変更をしただけでおもしろいくらいみんなの反応が変わり、客観的な視点が大切だとあらためて気づきました。
まとめ
・2人で作ることによる客観的視点
・だんだん画面を見慣れてくるので、つくったものを実際に触ってもらいその人を観察する
追記
統合デザイン学科の卒業修了制作展のwebアプリをglideapps で制作しました。
展示される作品の情報がまとまってます。プロジェクトや展示場所、個人名・作品名での検索もできます（例 : プロジェクトAなど）
ぜひ、展示へ行く前の作品チェックや展示会場でお使いください！
web制作
加藤匠馬、小林和貴
協力
有嶋庸子、大槻愛彩、Diego Villamizar Arboleda、古林萌実、渡辺由香