ArtLoomPallete

デジタルハリウッドWEBデザイナー専攻の卒業制作です。クライアントワークではなく実社会の中から課題を見つけ、それを解決する方向性で制作を進めました。自分よがりな制作にならないように、美術館が抱える課題は「令和元年日本の博物館総合調査報告書」をもとに抽出して、WEBサイトの目的設定を行いました。また、美術館に対して敷居が高く感じているが、絵画に興味がある人をペルソナに設定しています。結果として美術館の認知拡大から集客につなげることを目的として、自分の知っていることと絵画を繋げ興味を持ってもらうような題材を取り扱う、オンライン展示会用のサイトとして制作しました。

企画 : 2週間
デザイン : 2週間
コーディング : 3週間

制作ツールとライブラリ

gsap

サイトを見る

概要

「令和元年日本の博物館総合調査報告書」から、博物館が抱える課題を抽出すると、8割の博物館で

‐CTを利用した新しい展示方法が導入できていない
‐WEBサイトなどで資料情報公開が不十分

6割の博物館で

‐広報PRなどが十分ではない

と多くの博物館が「デジタル技術の活用」に必要性を感じているが、取り組み自体ができていない状態でした。
そこで、美術館をお客様として、より多くの人に知ってもらい来館者数を増やす目的でオンライン美術館をWEBサイト上で実現することにしました。また、美術館に対しての堅苦しいイメージを取り除き、直接来場しやすいイメージのWEBサイトを構築しました。

課題や要望

‐ルーブル美術館のようにオンライン上で資料が閲覧できるようにしたい
‐コロナ禍で減った来場者を取り戻したい
‐広報やPRをになる活動をしたい

ターゲット

‐美術館に直接行くのが億劫な人
‐芸術に対して、少し興味を持っているが美術館に行くほどのめり込んでいない人
‐美術館は敷居が高いと感じている人

アイデア・戦略

中長期的を見据えたWEBサイト設計

SNSでの広報と、WEBサイト上でのコンテンツ強化を併せて、中長期的に認知拡大と集客増加のしくみをつくる。
SNSをよく利用する若者をターゲットとして芸術が身近に感じられうように、ユーザー同士が知識をSNS上で共有するための専用＃を利用する。
それに合わせて、WEBサイト上では＃で共有された情報をもととしたコンテンツの展示や、身近なモノと美術作品を結びつけたオンライン展示会を開催する。WEBとSNSを組み合わせて、美術館をより多くの人に知ってもらい来館者数を増やすことを目的としました。

ペルソナの設定

下記のように設定しました。

敷居の高さを抑えつつ、美術館の格式高いイメージは保つデザイン

サイト内の日本語フォントは「Noto Sans JP」英語のフォントは「Neue Kabel」を使用して、モダンながらもポップな印象を与えつつ、配色は北欧インテリアのような居心地の良さを感じられるように白を基調としました。また、美術館や芸術のイメージを崩さないようにメインカラーを紫にすることで、紫自体が持つ神秘的で格式高いイメージを利用しました。
デザインコンセプトを「知識を繋げ、みんなで教え合う、参加型コンテンツ」とすることで、より現代人の価値観に寄り添った美術館のブランド構築を目指しました。
WEBサイト名のArtLoomPaletteのLoomは織り機の意味を持つ単語です。沢山の人の知識が繊維のように重なり、ひとつのものを作り上げる場であること願いサイト名を考案しました。

デザインの実装

堅苦しさはなくも美術館の持つイメージを崩さないようなデザイン

認知拡大のもと最終的に美術館に来場いただくのが目的です。ですが、美術館に対して堅苦しく敷居が高く感じられることが課題でした。そこで、その敷居を下げる役割としてWEBサイトを設立しました。サイト全体では白や淡い色で構成することで、北欧家具のような居心地の良いイメージを持たせて、堅苦しさを排除しています。親しみやすさを出しつつも、淡い紫をメインカラーとすることで神秘性や格式高さを保ち、美術館らしさと両立するようにデザインしました。

オンライン展示会

コンテンツとしてはオンライン展示会を採用して、『身近な関心』と『美術作品の背景』を繋げることで知的好奇心のベクトルを芸術に向けることをネライにしました。オンライン展示会のページでは、黒を基調として横スクロールを採用することで変化を設け、他のページとは違い鑑賞のためのページだとわかるようにしました。スマートフォンでは、縦向きの場合に横向きの閲覧を推奨するメッセージを添えています。

交通手段で切り替わるマップの実装

AboutページのAccessでは、お客様が利用する交通手段ごとに行き方を提示することで、初めて来場される方でも迷いにくくなるようにしました。地図はIllustratorでGoogleMapをもとに簡略図を描き、利用する交通機関ごとの道順を作成しています。伊勢神宮のWEBサイトが、旅行者の利用する交通手段ごとに道順を確認できるようになっており、ユーザービリティが高いと感じ参考にしました。

ユーザーの趣味で探せるギャラリーページ

Galleryページでは、ユーザーの興味に沿って作品を探せるようにしています。タブをクリックすると、掲示作品の数に合わせてスムーズにフェードイン・フェードアウトするようにアニメーションを設定しました。このアニメーションはGSAPで実装しました。
使用するデバイスでサイトの雰囲気が変わらないように、レスポンシブル対応しやすく、ブロックごとに作品を視認しやすいGridレイアウトを採用しました。

サイトを見る

学び

今回は、初めて複数ページのWEB制作でした。CSSのファイル管理が煩雑になると思い、「Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ」を読みながら、コンポーネント設計にチャレンジしたり、0→1でコンテンツ内容や文面を考えたり、GSAPアニメーションの実装をしたりと、幅広く関われました。
実際CSSのファイルをコンポーネントごとに分けて制作することで、修正箇所がすぐに特定でき、保守管理がしやすかったです。「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」CSS設計は今後実務でも必要になるのでより学びを深めて行きたいです。

参考書籍

恋愛制度、束縛の2500年史古代ギリシャ・ローマから現代日本まで

鈴木隆美

参考サイト

オンライン美術館『HASARD』 Google Arts & Culture 福岡県立バーチャル美術館

モックアップの帰属表記

Template designed by Andrew Gray, licensed under CC BY 4.0. Template designed by Onur ileli, licensed under CC BY 4.0.