そして、webサイトができるまで。

こんにちは。多摩美術大学情報デザインコース卒業研究制作展2021「そして、」広報班です。

6回に渡って、今年度の卒展は一体どのように作られていったのかご紹介していきます。

5回目となる今回は、先週お披露目したばかりの公式webサイトについてです。この記事を読んでから、ぜひ公式サイトも訪れていただけたら幸いです。

01. インプット

＜2020年9月〜10月＞
まずは、これまでの卒展公式サイトを分析するところから始めました。情報デザインコースに限らず、他学科・他大学も含め約15サイトを比較し、全てに共通する要素を洗い出します。

上の画像は、2015年〜2020年の情デ卒展サイトです。テーマに合わせて独自の表現がされていますが、情報設計はほとんど同じでした。

展示会情報（正式名称・日程・アクセス）
コンセプト
作品紹介
イベント情報
SNS

今年もこのフォーマットを参考に、スクロールすれば全ての情報をキャッチできるシングルページ（1ページ完結型）を採用することにしました。

＜2020年11月＞
要件定義と並行して、表現のインプットも行いました。
大きく4つの観点から、「今年らしい」「webらしい」表現を模索していきます。

特にこだわったのは、コンセプトの伝え方です。
私たちの4年間が終わり、また新しい何かが始まるというストーリーが込められたコンセプトとビジュアルに、webならではの表現を加えたいと考え、線を用いたアニメーション表現が優れたサイトを中心にインプットしました。

02. 新しい骨格を作る

<2020年11月〜12月>
次に、ワイヤーフレームの作成・ラフデザインのフェーズです。優先度を考慮して情報をレイアウトしていくことはそこまで難しくなかったのですが、1つだけ頭を悩ませる問題がありました。

新型コロナウイルスの感染対策についてのセクションです。

例年にはないセクションのため、正解があるわけでもなく、最後まで調整を続けました。アイコンを用いて視覚的に分かりやすくしたり、アコーディオン（開閉式）にすることで、テキストが多くてもすっきりと見せる工夫をしています。

ラフデザインが決まった段階で、デザインの骨格を担うガイドラインの策定も行いました。今回は、フォント・カラー・マージンについて詳しく説明します。

フォント
游ゴシックが全てのデバイスに反映できないという問題があり、モバイルではNoto Sans JPを使用しています。ただ、特に大事にしたい部分はsvgで代用することで、トーン＆マナーを崩さないようにしました。

カラー
背景色のベージュ（#F4EEE9）はディスプレイで最適な色になるよう、慎重に選びました。印刷色よりもやや彩度を高めて、白とのコントラストをつけています。

マージン
レスポンシブを意識し、8の倍数を基準にしました。例えば、見出しは32px・見出しとコンテンツのマージンは40px・セクション間のマージンは200pxなどといった具合です。こうすることで、画面全体の秩序が保たれるとともに、実装もしやすいというメリットがあります。

参考にした記事はこちらです。
https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/

03.今年を象徴するもの

<2020年12月〜2021年2月>
最後に実装のフェーズです。web班は、デザイン担当2名・コーディング担当1名のチームで動いていましたが、ほぼオンラインでコミュニケーションが完結しました。ここにも今年らしさが現れているのかな、と個人的には思います。

上の画像は実際のデザインツール（Figma）の画面で、数字の吹き出しはコメントを表しています。いわば、完成に至るまでの軌跡です。細かな修正の積み重ねで、やっと1つのサイトが完成するということが、この画像からも分かると思います。

実装で特に苦労したのは、背景の線とロゴのアニメーションでした。動作が重くならないように、PCとモバイルでは表示する要素を切り分けたり、次のコンテンツに集中できるようにタイミングを調整しています。

そして、完成したサイトがこちらです。線の動きの気持ちよさ、細かいインタラクションにもぜひご注目ください。

多摩美情デ卒展2021「そして、」

ここまでお読みいただき、ありがとうございました。
次回の更新は2/26(金) です。企画班より、アンケートに答えていただいた方にお渡しする「お土産」の紹介をします。どうぞお楽しみに！

卒業研究制作展2021　広報代表
--------------------------------

事前予約受付中
3/5(金)〜3/7(日)に横浜赤レンガ倉庫１号館で開催する本展示は、予約制を導入しています。詳細はこちら