【卒展2022 Making Process】 #03 WEB展開

小笠原 勇人（おがさわら ゆうと）（@ogasawara991025）
多摩美術大学統合デザイン学科5期生
永井一史・岡室健プロジェクト所属

李 雨菲菲（リ ユフェイフェイ）（Portfolio site）
多摩美術大学統合デザイン学科5期生
深澤直人・長崎綱雄プロジェクト所属

こんにちは、今年度の卒業制作展にてウェブを担当させていただいた小笠原勇人・李 雨菲菲です。今回は卒展のウェブサイトをどのように作っていったのかについて書かせていただきます。

1.運営しやすい仕組みの構築

今年度はウェブサイトのデザインを小笠原、コーディングを李が担当しました。

今回のWeb制作では、用意した各素材や文字などをスムーズにコーディングに用いやすくするため、IllustratorなどではなくFigmaを使ってデザインを行いました。

今回使った技術は、HTML＋CSS＋JavaScriptという最も基本的な組み合わせです。
基本のコーディングを行うのが一人であっても、他の人がコンテンツを更新することもあるため、その人が理解できないような複雑な作り方をするわけにはいきません。統合デザイン学科では2年次にウェブデザインの授業を行うため、多くの人がHTML、CSS、そして一部のJavaScriptの知識を持っています。そういった点で、この仕組みだけでウェブサイトを組むことが運用において効率的だと考えました。

主にスマートフォンやデスクトップPCなどの様々なサイズの画面へ表示するためのレスポンシブ対応の作成に時間がかかりました。今回はレイアウト作成にかかる時間を簡略化するためにBootstrapのライブラリを使用しています。BootstrapとはTwitter社が開発したCSSのフレームワークで、通常ウェブサイトをデザインする際は文字のサイズなどの全ての設定を作る必要がありますが、ここにはよく使われるスタイルがあらかじめ用意されてあり、手軽にデザインのページを作成できる、というものです。

2.情報の交差点としてのウェブ

通常の展覧会などではウェブサイト内に展示内容に関する読み物が掲載されていることもありますが、卒展において主に広報の中心を担うのはInstagramやTwitterなどのSNSです。他にもnoteといった長文のコンテンツ、図録の販売サイト、来場予約フォームなど複数のメディアにまたがって展開されるのが特徴です。
これらは別々に展開されるため、１つのメディアから別のメディアへのアクセスが難しいところです。そのため、ウェブはそれらの複数のメディアをつなげるハブとしての役割を重視しました。
どのコンテンツを見ていても、そのプロフィールページに貼られているこのウェブサイトを経由することで他のコンテンツへ飛ぶことができるようになります。それはとても基本的なことですが、その基本を何よりも重視して設計することとなりました。

ウェブサイト自体には検索やログイン、予約などの機能はなく、最初にページを開いた際に表示されるロゴモーション以外に動的な要素は極力省き、純粋にブラウジングするための静的なものとなっています。
またスマートフォン端末でのアクセス時に負荷がかからないよう、ロゴモーションもPC表示の時のみ表示されるものとし、徹底的に軽量化に努めました。

3.整理し、伝達する階層設計

今回は画面を左右で分割し、右側にはマウスオンで文字色が変わる固定メニューバー。左側の部分でページ内容を切り替えるレイアウトにしています。「自分が今どのページを開き、このサイトにはあとどれくらい遷移先があるのか」を感覚的に理解させ、閲覧者の心理的な負担を減らすことを狙いとしました。
スマートフォン端末からアクセスした場合は右側のメニューバーはハンバーガーメニューとして格納されるため、横幅の狭い画面でもコンテンツをストレスなく閲覧できます。

左はスマートフォン版、右はPC版の表示です

またページの階層によって、コンテンツの位置付けを整理し伝達することも大切にしています。

・卒展と同期して更新され続ける「Instagram / Twitter / note」
・人数上限や受付期間がある「来場予約フォーム / 図録販売フォーム」
・長尺の動画であり、卒展の中の目玉となる「特別対談 / 公開講評会」
・統合デザイン学科の卒展を記録した過去年度の「アーカイブページ」

上記のようにページを分割することで、それぞれが違った特性を持つコンテンツであることを伝え、楽しみやすくしたいと考えました。
特に「Instagram / Twitter / note」と「特別対談 / 公開講評会」はページ内のタブによって表示を切り替える方式にし、ページ遷移の手間を少なくしています。

今年度は実務経験などのあるコーディング担当者のアドバイスを受けながらデザイン担当者がページを設計する方式を取りました。予約ページへの遷移がわかりにくかった点など、次年度移行に向けて改善できる点も多いと思いますが、デザイン面での統一感・ウェブサイトとしての見やすさ、コーディングの仕組みなどで良い形の連携を取れたと思います。

ここまで読んでいただきありがとうございました。

デザイン
小笠原勇人

コーディング
李 雨菲菲（リ ユフェイフェイ）

（編集：海保奈那・加藤百華）

3月13日から八王子キャンパスで開催される、美術学部卒業制作展・大学院修了制作展B（ピックアップ卒展）では他学科の作品も同時に鑑賞できる展示となっております。是非ご来場ください！

多摩美術大学 美術学部卒業制作展・大学院修了制作展B（ピックアップ卒展）

会期
3月13日（日）〜3月15日（火）
10:00 - 18:00(最終日15:00まで）
場所
多摩美術大学八王子キャンパス アートテーク
東京都八王子市鑓水2-1723
交通
JR・京王相模原線「橋本」駅北口ロータリー6番バス乗り場より神奈川中央交通バス「多摩美術大学行」（運賃180円）で8分、JR「八王子」駅南口ロータリー5番バス乗り場より京王バス「急行 多摩美術大学行」（運賃210円）で20分
詳細：2021年度 多摩美術大学 美術学部卒業制作展・大学院修了制作展B