『大人計画』公式サイトリニューアル – 「らしさ」と「運用しやすさ」を兼ね備える

『大人計画』は、作家、演出家、俳優の松尾スズキ氏が主宰し、宮藤官九郎氏、阿部サダヲ氏なども所属する人気劇団。1988年の旗揚げ以降、『ウーマンリブ』『日本総合悲劇協会』などのシリーズも手がけています。また、『有限会社 大人計画』は芸能プロダクションとしても運営しており、所属俳優のマネジメントも行っています。

10年以上使用してきたウェブサイトを2020年にリニューアルするにあたり、弊社がディレクションからデザイン、実装、各公演ページの制作まで担当しました。

課題背景

大人計画の活動情報を発信するウェブサイトのリニューアルは、2020年9月から年末にかけて約4か月間のプロジェクトとなりました。プロジェクトの大きな焦点となったのは主に3点です。

1. より「大人計画らしさ」が伝わるビジュアルの追求

10年以上前に制作したウェブサイトをそのまま活用していたため、時代の変化に合わせたビジュアル面の表現や対応が難しい状況がありました。そのため今回のリニューアルでは、特にトップページのデザインを中心に「現在の大人計画らしさ」が伝わる演出を加え、インパクトをもたらすことが必要でした。

2. 欲しい情報にスムーズに辿りつけるデザイン

旧サイトはレスポンシブデザインにも非対応で、10年という時間の中で全体の設計にひずみが生じていました。そのため、サイトを訪れた方に適切に情報が伝わりづらい状況にありました。これらの問題を解決し、ファンが見逃すことなくスムーズに公演情報や出演情報にたどり着けるウェブサイトを目指しました。

3. CMSを刷新し、運営に適した使いやすい仕様に

さまざまな公演情報や出演情報を随時更新していく必要があるため、使いやすいCMS（コンテンツ・マネジメント・システム）の構築は非常に重要なポイントです。大人計画の旧サイトでは、CMSの一種であるWordPressは導入していたものの、10年以上前につくったものをそのまま使っている状況でした。htmlを直接編集している部分があったり、仕様が古くなってしまっていたり、担当者にとっては更新作業の手間が非常にかかるものとなっており、その刷新が求められていました。

プロセス

大人計画と弊社との取り組みは、このプロジェクトが初めてでした。そのため、まずはご一緒させていただくにあたって信頼を結ぶためのコミュニケーションからはじまり、大きく4つのフェーズで進行していきました。

1. すべての始まりは、大人計画を理解することから

大人計画の顔となるウェブサイトを刷新することは、大きな決断を要します。大人計画の皆さまも「ウェブサイトのコンセプトをつくるのに、まずは私たちのことを理解していただくことが必要」と考えられており、それに対して抽象的なイメージ画を共有することから始めて、繰り返しフィードバックをいただくことで、イメージのすり合わせを行いました。

やはりどこかで見たことのあるような表現では、独自の世界観を持つ大人計画のユニークさや個性は伝わりません。「村上さんなりに大人計画を解釈して、アーティストとしてのアウトプットを出してほしい」というオーダーもいただいていたので、その言葉をデザイン的に解釈しながら進めていきました。

2. 大人計画らしさを感じるビジュアル表現を追及する

オーダーを受け、まずはトップページのラフイメージを複数案ご提案しました。

文字の裏で常に手描きのアニメーションが動いて躍動感を演出する案など、当時のWebとしては、既視感を持たれづらい表現を多数追及する中で、現行の案をピックアップいただきました。この案では、うねうねとしたシェイプが絶え間なく変形しつづけることで、変化や進化を厭わない大人計画の姿を表現しています。

またシェイプの色の組み合わせについては「色彩構成としておもしろいか」に主眼を置き、膨大なパターンの検証を行いました。当初は色の三原色にヒントを得て「赤・青・黄色」などの組み合わせも検討しましたが、最終的には大人計画の皆様の直感に基づいて現行の3色に決定しました。

この工程では、言葉をベースとして共通認識をつくるのではなく、実際の仕上がりに近いビジュアルイメージをお見せして、「絵で要件定義を行う」というアプローチがポイントとなりました。要件定義やワイヤーフレームなどのWebの制作工程は少々専門的なものであり、慣れていない方にとってはわかりにくいものです。そのため、具体的な絵を示し、それに対するフィードバックを頂いて磨き込んでいくことで、双方の認識をすり合わせていきました。

3. 理想的な動きを求めて、実装で検証を重ねる

肝となるシェイプの動きの実装にあたっても、何度も検証を重ねて理想を追及しました。自然な動きを感じさせるランダム性と、動きの激しさをつくり出す波形の大きさや長さ、水位の高さなどの要素について、繰り返しさまざまなパターンを試しています。

このときも実装上はパラメーターで数値を設定するわけですが、当然数値で指示やフィードバックをいただくわけではありません。大人計画の皆さまが感じる違和感を解釈しながら、調整していくことが求められていました。

4. 「大人計画らしい遊び心」と「ウェブサイトとしての見やすさ」を両立させる

今回求められていた「大人計画らしい魂がこもった、遊び心のある表現」と「欲しい情報にスムーズにたどり着けるデザイン」は、ともすればトレードオフの関係にある要素でもあります。ビジュアルや動きの追及と平行して、ウェブサイトとしての見やすさ、使いやすさが共存できるよう探っていきました。

なおこの「表現」と「スムーズさ」という2つのオーダーは、それぞれ大人計画の別の方からいただいたものです。さまざまな立場ごとに大切にしたいポイントがあることを理解し、その解決の落としどころとなるデザインを目指しました。

アウトプット

大人計画らしさを表す動きを主役に

敢えて意味を持たないシェイプを動かすことで遊び心を感じさせつつ、ウェブサイトとしての機能性も担保できるよう模索し、現在の表現にたどり着きました。常に不規則に動きつづけるシェイプが活きるよう構成はシンプルにし、文字も極力見やすいものにしていますが、配置やレイアウトには少しだけ遊び心を加えています。

なお事業の性質上、公演や出演作品それぞれにテイストの異なるポスタービジュアルが制作され、ウェブサイトにはそれらが並ぶことが当初から想定されていました。その混在した感じこそ、ある意味大人計画らしさとも言えます。ウェブサイトのデザインとしても、さまざまな要素が入り混じる大人計画の世界観に歩み寄りながら、一方でごちゃごちゃになりすぎない案配を考慮しました。

入力と更新のしやすさを追及したCMS管理画面

フォーマットを遵守するためある程度は制約をかけつつ、更新担当者が使いやすいCMS画面を構築しました。キャスト情報など多くの情報量を入力するのに適した段組みの設計や、キャストの所属情報など、入力が発生しうる要素やそのテキスト量を踏まえて構築を行い、細部まで使い勝手に配慮しています。htmlの扱いに慣れてない方であっても、扱いやすいものを心がけました。

新鮮味を失うことなく、伝えるべき情報を適切に伝える公演サイトのフォーマット

主なページを2020年末に公開した後、各公演の度に制作される公演ページのフォーマットづくりも行いました。公演ページが主に閲覧される期間は、告知から公演終了までの約半年間となり、一般的なウェブサイトに比べるとその実効期間は非常に短いものです。事業上必要なものではありますが、大きな金額をかけられないという事情もあり、制作コストを押さえるためにある程度フォーマットを統一して流用することが求められていました。

フォーマットを揃えることで制作に要する工数は押さえつつ、各公演の世界観を出すことが必要な公演サイトでは、それぞれが同じ印象になりすぎることなくぱっと見て異なるページとして認識できるようなつくりを目指しました。最も公演情報を求めている大人計画のファンの方々は、毎作品公演ページを見ることが想定されるため、そういった方々が見ても毎回公演への力のいれ具合を感じていただけるものにすることが非常に重要でした。

まずはじめに2022年5月の「ドライブイン  カリフォルニア」公演ページを制作し、その中でフォーマットを固めていきました。その後いくつかの公演ページをつくる中で微調整を行い、さらに完成度を高めていきました。

「松尾スズキの芸術ぽぽぽい」特設サイト

成果

「ウェブサイトでチケットを購入する方を増やしたい」という課題に対し、リニューアルの結果、これまで以上に公演ページ経由でチケットが購入しやすくなったという声をいただきました。これは直接的にウェブサイトだけの成果とは言いきれないものの、良いご報告を共有いただいています。

また、公演ページをフォーマット化したことで、制作にかかるコストや手間も削減され、理想的なコストパフォーマンスで運用できるようになったことに対しても好評をいただきました。

CMSについてもしっかりと大人計画側で更新運用がなされており、世界観を示しながら長く活動を続けていくためのツールとして、その役割を果たせるウェブサイトへとリニューアルを図ることができました。

用いたデザインメソッド

・INTERVIEW & ENQUETE -質問調査-

・VISION & MISSION -目的共有-

・DEFINE KEYWORD -言葉定義-

・CLUSTERING -情報分類-

・CONCEPT SHEET -意図記述-

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