宮崎県日南市「小村寿太郎記念館」展示コンテンツのGUI制作

「小村寿太郎記念館」は、日本の近代外交の礎を築いた明治の外交官小村寿太郎の遺徳・功績を顕彰する施設として1993年に開設され、2022年3月にリニューアルオープンしました。

展示コンテンツの中には、小村寿太郎の出生地で、記念館のある宮崎県日南市飫肥（おび）の「飫肥城下町」を紹介するエリアがあります。

飫肥は、天正16年（西暦1588年）から明治初期までの約280年間、飫肥藩・伊東氏5万1千石の城下町として栄えました。武家屋敷を象徴する門構えや風情ある石垣が残る街並みは1977年に重要伝統的建造物群保存地区に選定されています。

弊社では、飫肥城下町に関する３つのコンテンツのGUIを制作しました。

課題背景

今回GUIを制作した3つのコンテンツは、飫肥の歴史や観光スポットを紹介する内容になっています。

制作にあたって、下記の点を考慮しました。

• 歴史ある飫肥の要素を取り入れながら、「踊り」や「まちめぐり」などのコンテンツに合わせた、親しみやすい賑やかさや柔らかさのあるグラフィック
• 3コンテンツそれぞれのデバイスや展示環境に合わせた使いやすいUI設計

制作にあたり、コンテンツのコンセプトや飫肥についてのリサーチからはじめました。

プロセス

コンテンツのコンセプトを理解し、デザインの方針を決める

コンテンツ１「あなたが登場!?泰平踊」

「あなたが登場!?泰平踊」は、自分の顔をはめたキャラクターが踊り出す動画が作れるコンテンツです。くすっと笑えるようなコンテンツなので、楽しく賑やかなトーンにすると出来上がった動画との親和性が出ると考えました。

楽しく賑やかなコンテンツを表現するために、背景に楽しげなイラストを使用したり、平面部分に細かな装飾を施すなどの工夫によって、なるべく余白を作らず賑やかなデザインにする方針にしました。

コンテンツ２「飫肥のまちめぐり」・３「飫肥のデジタル日めくり」

「飫肥のまちめぐり」と「飫肥のデジタル日めくり」は、制作前のヒアリングを通して、展示されるフロアはポップで柔らかいトーンになる想定とうかがいました。

そのため、この2つのコンテンツは、展示場所に合わせて全体的に柔らかさのある色合いやモチーフを意識しつつ、画面に表示されるボタンやロゴに動きを付けてポップさを出す方針にしました。

飫肥についてリサーチ

まず、泰平踊について、実際に踊っている様子やお祭りの様子を動画を見せていただきました。それによって、「鶴組」「亀組」といった2つの流派があることや、それぞれの家紋である「九曜紋」と「庵木瓜」、衣装の色が特徴的であることなどを知りました。

さらに、飫肥の観光名所などをリサーチし、かつて城下町として栄え、今もなお武家屋敷の門構えや風情ある石畳が残る、歴史ある街ということがわかりました。それによって、歴史ある飫肥の雰囲気を感じ取ったり、観光名所である「飫肥大手門」などのモチーフを見つけていきました。

アウトプット

にぎやかなグラフィックと飫肥ならではのモチーフを掛け合わせ、コンセプトに合わせたGUIに

飫肥の歴史ある町を紹介するコンテンツに合わせたGUIを制作しました。

コンテンツ1「あなたが登場!? 泰平踊」

概要

泰平踊（たいへいおどり）は、日南市飫肥に江戸時代中期から伝わる郷土舞踊です。全国でも珍しく、侍と町人が共一緒に踊るという特徴があります。

このコンテンツでは、その泰平踊を紹介するアニメーションのキャラクターに来館者の顔写真を合成する「顔ハメ」ができます。来館者がアニメーションに登場する体験によって、ただ歴史を学ぶだけでなく、楽しく思い出に残るコンテンツになっています。

動画が表示されるスクリーンの前に顔を撮影する端末があり、来館者が顔を撮影するとルーレットで6人の登場人物のうちの誰かに選択されます。顔ハメの撮影が終わると、自分たちの顔をした登場人物たちが、泰平踊を踊りながら歴史を紹介するアニメーションが表示されます。

同時に6人まで顔ハメが可能で、グループで撮影しても、一人全役になっても楽しめるコンテンツです。

デザインの意図

GUIは、賑やかなアニメーションや、楽しげなアニメーションに合わせたトーンを意識しました。また、泰平踊に登場する「九曜紋」や「庵木瓜」をあしらい、泰平踊ならではのグラフィックになっています。

UI設計は、視線の流れや操作しやすいオブジェクトの形や大きさなどを意識して制作しました。

コンテンツ2「飫肥のデジタル日めくり」

概要

鎌倉時代から現代まで、飫肥と伊東家に関わる出来事を日めくり形式でまとめた電子カレンダーです。

デザインの意図

「飫肥のまちめぐり」と同じく街並みに合わせた和風のテイストを取り入れつつ、リニューアルした記念館に合わせ優しくポップな雰囲気にしました。歴史の紹介をするコンテンツとして、文章の読みやすさや日付選択のしやすさを検証しながらGUIに落とし込んでいます。

ロゴは飫肥の名所「飫肥城大手門」をモチーフに制作し、飫肥の歴史を紹介するコンテンツらしさを意識しています。

コンテンツ3「飫肥のまちめぐり」

概要

飫肥は歴史・文化・レジャーとさまざまな魅力の詰まった観光地です。「飫肥のまちめぐり」は来館者の好みに合わせて9つの観光マップを見ることができるコンテンツです。

デザインの意図

飫肥の町に合わせた和風テイストのデザインを取り入れました。

また、観光マップというコンテンツから連想してお土産の箱を開けていくような体験になるようデザインを制作しました。タイトル画面は、箱の包装紙のようなイメージでイラストを散りばめたり、リボンにタイトルが乗っているような表現にするなどの工夫をしています。また、コース選択は色々な形のボタンや色合いにすることで、菓子折りのように「どのコースを選ぼうか？」といったわくわく感を演出できるようにとデザインを制作しました。

また、イラストのトーンに合わせて、全体的に可愛らしい色合いや形を使用しました。

実際にUIを操作している様子は、『モンブラン・ピクチャーズ株式会社』の記事をご参照ください。

小村寿太郎記念館

（チームメンバーの役職などについては、プロジェクト当時のものです。）