TADF MAGAZINE 🔴🟢🔵 - #9 芸術祭公式サイトの制作裏

長谷川泰斗（長谷川）：実行委員長
多辺田風香（多辺田）：副実行委員長
田中陽（田中）：デザイン統括
熊澤佑悟（熊澤）：デザイナー
以上の4人で、今回の芸術祭のメインサイトについて振り返ります。

1.コンセプトについて

長谷川「今年オンライン開催が決まって、サイト作らなきゃじゃんていう話をしていた序盤の頃からもう横スクロールは決まってたよね。もう初期の陽くんが作ったサイトの時点と、それを踏まえて作った熊澤くんのサイトの時点で横スクロールだったから、、、」

初期段階の頃のデザイン

田中「1番最初のラフはまだ縦だったけど2こ目からもう横だったね。」

長谷川「いったんラフ組んでから議論してたのが、迷うサイトを作ろうっていう話があったねそういえば。あれが今回のサイトの初期の初期のきっかけだったよだね。なんか多辺田が迷うサイトどう！？って突然言い出してどういうこと！？ってみんなで言ってて（笑）」

多辺田「なんかメニューとかがなくてどこを押したらいいかわからないサイト面白いんじゃないかなって」

長谷川「うんうん。サイト制作する上で、オンラインで実際に芸術祭に来てるような感覚を味わってもらいたいなっていうのを結構考えてて、オフラインでやる芸術祭って、どこに何があるかわかんない状態で手元でパンフレットを見ながら目的地を目指すっていうあの感覚が文化祭とか学園祭の一つの醍醐味だよねってなって。

かと言ってほんとにずっと迷い続けちゃうようなサイトになると、たどり着きやすさによって作品の平等性とかが保たれなくなっちゃうから、だからある程度迷うとかちょっと使いにくいっていうコンセプトを残しつつ、ちゃんとサイトとしても成り立つようなものを目指そうってなったね。そこから生まれたのが三階建ての建物をサイト内に作るっていうのだね。」

初期構想の頃に作っていたデザイン

田中「意味わかんないもんね。（笑）」

長谷川「んね。でもなんやかんや最後までこれは貫き通したね…」

熊澤「最初、建物の話を言われた時どうすればいいの？ってなりましたもん（笑）」

田中「なんか迷うっていうのから歩くとか不便益の方向にシフトしていったんだよね。」

長谷川「委員会のみんなで話した時も指先でフリックしただけで終わっちゃうんじゃなくて、わざわざ作品を見るためにそれがどこにあるのか探すっていう少しの苦労が作品への敬意にもつながるんじゃないかなっていうことは話してて。で結果今のサイトの形になったっていう。

大体のサイトはグローバルナビゲーションでどこを押したらどこに行くっていうのが当たり前になってるけど今回はサイトの両端に階層メニューがあるだけっていう。あとは全部その人の指で行きたいところにいってもらうっていうスタイルに完全にシフトしていったね。なかなか思い切ったと思う。」

サイト内には1F, 2F, 3Fに移動するナビゲーションのみが用意されている

田中「こういう発想が出るのも提供したいオンラインの体験の形があったからこそで、意味のあるおかしなことができたね。」

2.デザイン過程

長谷川「初期のサイトはエディトリアルベースだったんだけど、そこからだんだんスマホっぽくなっていったんだよね」

RGBを全面に押し出した、デザイン

熊澤「どっちかというとアプリっぽいデザインですよね。」

長谷川「そうそうそう！この時はまだ企画ごとに色を用意するのは想定してなくてRGBゴリ押しだったよね。これもこれでカッコよかったけど、

廊下をあるいて、ここではこんな企画やってるんだみたいな体験ができたらいいなって話してて。あとあえて横のスクロール量を増やしたいなっていうのも考えて今の形のサイトになったね。やっとここら辺が決まったの9月後半なんだよな…」

熊澤「俺夏休み実家で作ってた記憶あります（笑）」

長谷川「時間かかったけどいろんなパターンのデザインを試し他からこそ今の形にすごい落ち着いたよね。」

田中「スクロールの速さで見逃しちゃうことがない様にっていうのは本当考えられたサイトになったと思う。建物構造だから、芸祭メンバーで何階のどこにこの企画あるっていう感じで話した時に、このサイト体験はいいなって思ったよね。（笑）オフラインらしさをサイトに組み込めたというか、場所っていう概念がオンライン上にあるのがいいなって思った。」

長谷川「サイトマップをつくろうって話が出た時に、ああこれ面白くなりそうだなって思ったよね。オンラインなのに何故かマップを見ながらサイトを回るっていう。」

サイト内のスクロールバーをクリックすると、ミニマップが表示され、自分が今どこにいるか把握しながらサイト内を移動できる

3.完成形について

長谷川「本当に初期コンセプト変わってないね。美術館の入り口っぽい見せ方に変わったと思う。」

田中「うんうん。あと最終的な企画数が15個になったの、ちょうどよかったね。」

長谷川「あと話変わるけどサイトの読み込みの早さにはマジでこだわった。（笑）なるべく早くみれる様にって。」

田中「そうね、見えない地味なところもしっかりとね。委員長が実装してくれてね、、、」

長谷川「そうなんですよ今回実行委員長が実装してるんですよ。わけわからなくないすか（笑）」

田中「校長が教えてるみたいになってる（笑）」

長谷川「でも本当細かい挙動までこだわったからコンセプトとか空間性が細部まで伝わるサイトになったと思います。」

田中「あとは企画ごとの色をその企画をやってる人たちに聞いて決めることでサイトの雰囲気にも関与してもらえた感あってよかったね。」

長谷川「最初の頃から作品の作者のことは考えてたけど企画者については考えられてなかったよねって。そこからサイトに企画を出してくれた人がちゃんと企画を出したっていう実感が持てるにはどうしたらいいかなっていうので出たアイデアだったねそういえば。色を選ぶっていう簡単なことでも、うまくワークしたんじゃないかなと思う！サイト全体の色使いもよく考えたと思う。」

各企画に象徴する色を指定してもらうことで、企画ごとに色のあるビジュアルを実現

4.オープニングアニメーションについて

田中「あれは本当にね、悪夢だったね。」

長谷川「最初熊澤くんに作ってもらったアニメーションがうまく書き出しできなくて、やばいってなって改めて作り直したわけだけど」

田中「いや制約の多さがすごかったよね本当に。lottie書き出しするために使えるエフェクトが限られてくるし、スマホでもタブレットでもパソコンでもレスポンシブ対応できる画面作りしないといけないしっていう。」

出来るだけ綺麗なアニメーションを見せたいという要望から、今回はlottieを使ったアニメーションを実装しています。

長谷川「どこで切り取られてもおかしく見えない様にしないといけないのは本当無茶なお願いしちゃったね」

田中「最初の構成がすごく難しくて、真ん中に収めすぎちゃうとパソコンで見た時寂しいし、全体に広げすぎちゃうとスマホで見た時にすごいはみ出てる感でちゃうし。しかもRGBで構成しないといけないっていう（笑）」

長谷川「至る所で苦しめられるねRGBに（笑）」

田中「ぱっと見だとさらっと流れちゃうかもしれないけど、本当に制約の中でがんばりました。」

長谷川「アニメーションでRestart.Remote.Remakeていう単語を選んだ理由とかってあったりする？？」

田中「前ポスター作るかなんかの時に代表的なReと3つ決めようっていうので決まってたやつそのまま採用したかな。この３つが1番Reのイメージを具体的に出せる気もして。あと単語が出る順番はめちゃめちゃ考えた。去年の中止から一年たってRestartして、でもRemoteになっちゃってどうしよってなったけど新しいものを一からRemakeするっていう。（ルー大柴みたいだなby執筆者）」

長谷川「加えてさ、各単語に三角形、丸、四角形を当ててるけど、これはどういう関係があるの？」

田中「やっぱりグラフィックは必要だなと思っていて、何かを当てることは決めていたんだけど、

Restartは、再生ボタンを模した三角形をイメージして、再生を繰り返すようなアニメーションにしたかな。

Remoteは、ひとつに固まっていたものが、一気に離れていって、場所を変わっていく中で葛藤する様子にした。

Remakeは、一回作ったものを取り壊して、もう一回新しい軸で、再度作る、より良くするといったイメージで作った。」

長谷川「三角、丸、四角というおでん的なシェイプで、さらにRGBという三色の構成で、単語の意味やビジュアルを力強く表現できているよね。シンプルだけど、力強いというか。」

田中「サイトに突然有機的な形が入ってしまうと全然違う雰囲気になってしまうから、出来るだけソリッドで、イメージに合うような原点的な形を使うっていうことはかなり意識したかも。だからすごく魅せづらいという点で難しかったけど、結果的には動きをうまく制御して表現できたと思う。」

長谷川「いやぁ...ほんと半年間ぶっ続けで関わってきただけに、公開されるのが少し寂しいくらいだね笑　でも沢山の人がこのサイトを通して楽しんでくれると嬉しいな」

ということで今回は、芸術祭のメインサイトに関するインタビューでした！長い間模索してきた横スクロールタイプのサイト構造や、エディトリアルをベースとしたUI設計など、随所にアイデアが散りばめられているので、是非楽しんでください！

筑波大学 芸術祭 2021 公式サイト🔴🟢🔵

筑波大学 芸術祭 2021 / TSUKUBA ART&DESIGN FESTIVAL 2021
11/6-7 ONLINE開催
公式サイト：https://tadf.site/2021/
Twitter：https://twitter.com/TADF_2021
Instagram：https://www.instagram.com/tadf_2021/

執筆者：多辺田風香