拡張生態系の研究・普及に取り組む一般社団法人シネコカルチャーのWebサイトを制作しました。研究機関や事業会社と連携するなかで、社団としての立ち位置をより明確にし、学術領域と実社会をつなぐWebサイトをつくりたいとのご要望を受け、要件整理・情報設計を起点に、コピーライティング、デザイン、システム開発、既存データの移行まで一気通貫でお任せいただいた事例です。
Discover
本質を言語化する。
シネコカルチャーも拡張生態系も、ひとことで言い表すのがむずかしい概念です。まずは、その本質を理解することから始めました。調べ始めてまず浮かんだのは「生態系に人が介入することで、無耕起・無施肥・無農薬で作物を育てる農法」でしたが、それだけなら、自然農法や有機栽培と何が違うのかよくわかりません。しかし、拡張生態系の射程は農業にとどまらず、都市やヘルスケアにまで及びます。論文を読み込むうちに見えてきたのは、生態系を支える生き物がそれぞれに役割を持ち、人間もまた「設計者」としてその一員になれるということ。その結果として自然状態を超える恵みをもたらすのが拡張生態系であり、それを土台に文明そのものを築こうとする構想がシネコカルチャーでした。打ち合わせで聞いた「拡張生態系は文明装置」という言葉の意味が、ここでようやく像を結びます。
この発見は、そのままサイトのキャッチコピーへとつながります。深く知る前であれば「命を紡ぐ」と書いたであろう言葉が、本質をつかんだあとには「命と紡ぐ」へと変わりました。人が一方的に命を育てるのではなく、ほかの生き物とともに未来を編んでいく。助詞ひとつに、その違いを託しています。
「拡張生態系」という用語を学術領域の外に向けて翻訳した。
Storytelling
共感の接点を見つける。
拡張生態系のように射程の広い概念は、一度に正面から説明しても伝わりません。そこでトップページを、スクロールするほど理解が深まる短い「旅」のように設計しました。入り口に置いたのは、誰もが感じているかもしれない対立への問いかけです。
人類の発展か、環境保護か。二極化した価値観に世界が揺れる今、どちらも尊重できる道はないのか。
Our Story
この問いかけが、声にならない声として人々の胸のうちにあるとするならば、ここで物語に引き込まれるはずです。そして、「自然を超える、自然をつくる。」の一節でバイアスを揺さぶり、拡張生態系の価値を「4つの恩恵」へと翻訳します。生産性、健康、都市、防災。切り口は分かれていても、突き詰めればどれも「健康に生きたい」という誰もが持つ願いです。読み終えるころには、抽象的だった概念が自分の暮らしの話に変わっている。それが、この旅のねらいです。
スクロール一つひとつに、バイアスを揺さぶる仕掛けを設えた。
Art Direction
言葉を絵にする。
植物や木に鳥やミツバチなどの送粉者が集う。その輪郭をかたどったシェイプで、シネコカルチャー農園や都市の写真を切り抜いたスライドショーをサイトの入り口に据えました。このスライドは管理画面からお客さま自身で自由に追加できるため、これから生まれてくるであろうシネコカルチャーな景色が、そのままサイトのカラーとして育っていきます。スライドはリンク要素にすることもできるため、特に見てほしいページへの動線を真っ先に見せることもできます。生き物が互いに関わりながら生態系を編んでいく拡張生態系の世界観を、実際の景色で最初に訴求する。言葉より先に一枚の絵を思い浮かべながら読み進めてもらうための仕掛けです。
シネコカルチャーな景色が、そのままサイトのカラーとして育っていく。
もうひとつ重要なキーワードとして「食・環境・健康のトリレンマ」があります。食料生産、環境保全、人の健康は同時に立てられないという現代の構造問題のことで、この問題を解くのが社団の存在意義です。しかし、言葉だけでは理解しにくいため、「現実にはありえない構造」という概念に噛み砕き、それを連想させる三角形のトリックアートで表現しました。
食・環境・健康のトリレンマを三角形のトリックアートで象徴した。
食・環境・健康のトリレンマをどのように解くのかを伝えることも重要です。お客さまからは「スクロールでアニメーションする三脚のイメージで伝えたい」というご要望があり、ラフ案もいただきました。ただ、そもそもの概念が複数の概念の集まりであるため、図をアニメーションさせるだけでなく、各ステップに説明を加えて自動再生付きのカルーセルで表現することにしました。三脚のアニメーションは、概念を理解するための補助線のような役割を果たします。
トリレンマを解くプロセスを三脚のイメージでアニメーション化した。
学術的な内容を取り扱う性質上、全体的に文字の多いサイトになってしまいます。そこで重要なポイントには、視覚的なサインを表示して専門的な主題をやわらかな表情にしました。ただし、アイコンの線は黒で力強く、塗りはグラデーションの差し色に留めることで、印象が軽くなりすぎないように調整しています。
視覚的なサインを表示して、専門的な主題でも入り込めるように工夫した。
Branding
研究日誌を読みものに。
旧サイトで活発に更新されていたブログは、研究員の方々の日々の活動が親しみやすく綴られた隠れた魅力でした。しかし、「研究者のブログ」という見え方のままでは、その良さが「研究に興味がない人」にまで届かない可能性があります。そこで名前を「シネコな話」と改め、ポップなロゴを添えることで、誰もが気軽に覗ける読みものへと仕立て直しました。少し大胆な提案でしたが、研究員の方々にも受け入れられ、アカデミアと実社会とをつなぐ入り口のひとつになっています。
ブログに名前を付け、ロゴをあしらうことで、誰もが気軽に覗ける読みものへと変貌させる。
CMS
サイトを育てる。
このサイトの要は、日々の発信を研究員の方々の手で続けられることにありました。そこでWordPressの管理画面をシネコカルチャー専用に細かくカスタマイズし、専門知識がなくてもサイト全体を無理なく更新できるようにしています。あわせて、誰が更新してもデザインの一貫性が崩れないようにレイアウトや意匠を設計したことで、発信の積み重ねがそのままサイトの(ひいてはシネコカルチャーの)色になるようにしました。
たとえばプロジェクトページを開けば、そのプロジェクトに誰が関わっているかがわかります。メンバーのページを開けば、そのメンバーがどんなプロジェクトに携わっているのかも一目瞭然です。通常であれば、それぞれのページを手動で更新することになり、二重の手間が生じます。そこで、プロジェクトにメンバーを紐づけられるようにして、メンバーページでもその情報を活用するようにシステムをカスタマイズしました。メンバー情報は一箇所で管理するだけで、プロジェクトとメンバーとのつながりがサイト全体に行き渡り、どこから参照しても常に最新の状態に保たれます。
プロジェクトとメンバーがそれぞれのページで動的に関連づけられる。ひとつの更新が、それ以上にサイトを豊かにしていく仕組みを設計した。
細部までシネコカルチャー専用にカスタマイズした管理画面
Data Migration
2つのサイトをひとつに。
もともとシネコカルチャーのWebサイトは、社団のメインサイトとブログサイトという二つのWordPressに分かれていました。これを一つに統合することも要件のひとつでしたが、ブログ側の記事をそのまま移すとメインサイトのデータとぶつかってしまうことがわかりました。そこでデータ移行のためのスクリプトを組み、ブログの記事を専用の投稿タイプへ、カテゴリやタグも専用の分類へと自動で変換することで、手作業の転記による抜け漏れをなくし、確実かつ短時間でのデータ移行を実現しました。
あわせて、これまで独立したHTMLページとして管理されていたシネコカルチャーマニュアルもWordPressへとデータ移行し、同じように多言語で管理・更新できるようにしました。研究の蓄積を、サイトのコンテンツと同じ場所で管理・公開できるようにしています。
-
119
ブログ記事を統合
別々のサイトにあったブログ記事を専用の投稿タイプへ移行。カテゴリやタグも専用の分類へと自動で割り当てて移行しました。
-
4
言語に対応
日本語版をもとに英語・フランス語・中国語への翻訳版を複製。すでに翻訳がデータベースに格納されている記事はそれを使うように調整しました。
Localization
世界中からの検索を、それぞれの言語で。
旧サイトでは日本語と一部英語で提供されていましたが、今回のリニューアルにあたっては日本語・英語・フランス語・中国語の4言語対応へと拡大しました。4言語への翻訳は膨大な作業になるため、主要なページのみ翻訳し、未翻訳のページには未翻訳である旨のメッセージを各言語で通知することで、お客さま自身で公開後に無理なく翻訳していけるようにシステムとデザインを工夫しました。単純にテキスト表示を切り替えるだけの仕組みではなく、言語ごとに独立したページとして生成されるため、検索エンジンにも、海外から訪れる方にも、適切な言語で届けることができます。さらに、翻訳コンテンツの管理はもちろん、新しい言語の追加も管理画面から行えるため、将来あらたな言語が必要になっても、開発を介さずお客さまご自身で対応できます。
言語ごとに独立したURLを持ち、適切な言語でコンテンツを届けられる。
Accessibility
誰もが迷わず使えるように。
誰もが等しく情報を受け取れることは、社会に開かれた活動を目指すうえで欠かせない条件です。今回は外部の監査こそありませんでしたが、WCAG 2.2 レベル AA 相当のアクセシビリティ水準で設計し、多様な利用者がそれぞれの環境で迷わず情報にたどり着けるようにしています。
お年寄りも、障がいのある方も、誰もが同じようにシネコカルチャーを知れるように。