Sony CSL
Syncoculture
Association
Mental
Barrier-Free
Project
Flow
Machines
Smart  Letter
Roju
Posto
Flow
Machines
Reality
Check
Akiko
Kamiyama
Roju
Minami
Aoyama
1 3

拡張生態系の研究・普及に取り組む一般社団法人シネコカルチャーのWebサイトを制作しました。研究機関や事業会社と連携するなかで、社団としての立ち位置をより明確にし、学術領域と実社会をつなぐWebサイトをつくりたいとのご要望を受け、要件整理・情報設計を起点に、コピーライティング、デザイン、システム開発、既存データの移行まで一気通貫でお任せいただいた事例です。

本質を言語化する。

シネコカルチャーも拡張生態系も、ひとことで言い表すのがむずかしい概念です。まずは、その本質を理解することから始めました。調べ始めてまず浮かんだのは「生態系に人が介入することで、無耕起・無施肥・無農薬で作物を育てる農法」でしたが、それだけなら、自然農法や有機栽培と何が違うのかよくわかりません。しかし、拡張生態系の射程は農業にとどまらず、都市やヘルスケアにまで及びます。論文を読み込むうちに見えてきたのは、生態系を支える生き物がそれぞれに役割を持ち、人間もまた「設計者」としてその一員になれるということ。その結果として自然状態を超える恵みをもたらすのが拡張生態系であり、それを土台に文明そのものを築こうとする構想がシネコカルチャーでした。打ち合わせで聞いた「拡張生態系は文明装置」という言葉の意味が、ここでようやく像を結びます。

この発見は、そのままサイトのキャッチコピーへとつながります。深く知る前であれば「命を紡ぐ」と書いたであろう言葉が、本質をつかんだあとには「命と紡ぐ」へと変わりました。人が一方的に命を育てるのではなく、ほかの生き物とともに未来を編んでいく。助詞ひとつに、その違いを託しています。

「命を紡ぐ。」が非活性化され、「命と紡ぐ。」が活性化されている

「拡張生態系」という用語を学術領域の外に向けて翻訳した。

共感の接点を見つける。

拡張生態系のように射程の広い概念は、一度に正面から説明しても伝わりません。そこでトップページを、スクロールするほど理解が深まる短い「旅」のように設計しました。入り口に置いたのは、誰もが感じているかもしれない対立への問いかけです。

人類の発展か、環境保護か。二極化した価値観に世界が揺れる今、どちらも尊重できる道はないのか。

Our Story

この問いかけが、声にならない声として人々の胸のうちにあるとするならば、ここで物語に引き込まれるはずです。そして、「自然を超える、自然をつくる。」の一節でバイアスを揺さぶり、拡張生態系の価値を「4つの恩恵」へと翻訳します。生産性、健康、都市、防災。切り口は分かれていても、突き詰めればどれも「健康に生きたい」という誰もが持つ願いです。読み終えるころには、抽象的だった概念が自分の暮らしの話に変わっている。それが、この旅のねらいです。

トップページの短い「旅」

スクロール一つひとつに、バイアスを揺さぶる仕掛けを設えた。

言葉を絵にする。

植物や木に鳥やミツバチなどの送粉者が集う。その輪郭をかたどったシェイプで、シネコカルチャー農園や都市の写真を切り抜いたスライドショーをサイトの入り口に据えました。このスライドは管理画面からお客さま自身で自由に追加できるため、これから生まれてくるであろうシネコカルチャーな景色が、そのままサイトのカラーとして育っていきます。スライドはリンク要素にすることもできるため、特に見てほしいページへの動線を真っ先に見せることもできます。生き物が互いに関わりながら生態系を編んでいく拡張生態系の世界観を、実際の景色で最初に訴求する。言葉より先に一枚の絵を思い浮かべながら読み進めてもらうための仕掛けです。

シネコカルチャーな景色が、そのままサイトのカラーとして育っていく。

もうひとつ重要なキーワードとして「食・環境・健康のトリレンマ」があります。食料生産、環境保全、人の健康は同時に立てられないという現代の構造問題のことで、この問題を解くのが社団の存在意義です。しかし、言葉だけでは理解しにくいため、「現実にはありえない構造」という概念に噛み砕き、それを連想させる三角形のトリックアートで表現しました。

食・環境・健康のトリレンマを表現した三角形のトリックアート

食・環境・健康のトリレンマを三角形のトリックアートで象徴した。

食・環境・健康のトリレンマをどのように解くのかを伝えることも重要です。お客さまからは「スクロールでアニメーションする三脚のイメージで伝えたい」というご要望があり、ラフ案もいただきました。ただ、そもそもの概念が複数の概念の集まりであるため、図をアニメーションさせるだけでなく、各ステップに説明を加えて自動再生付きのカルーセルで表現することにしました。三脚のアニメーションは、概念を理解するための補助線のような役割を果たします。

トリレンマを解くプロセスを三脚のイメージでアニメーション化した。

学術的な内容を取り扱う性質上、全体的に文字の多いサイトになってしまいます。そこで重要なポイントには、視覚的なサインを表示して専門的な主題をやわらかな表情にしました。ただし、アイコンの線は黒で力強く、塗りはグラデーションの差し色に留めることで、印象が軽くなりすぎないように調整しています。

Custom-drawn iconography

視覚的なサインを表示して、専門的な主題でも入り込めるように工夫した。

研究日誌を読みものに。

旧サイトで活発に更新されていたブログは、研究員の方々の日々の活動が親しみやすく綴られた隠れた魅力でした。しかし、「研究者のブログ」という見え方のままでは、その良さが「研究に興味がない人」にまで届かない可能性があります。そこで名前を「シネコな話」と改め、ポップなロゴを添えることで、誰もが気軽に覗ける読みものへと仕立て直しました。少し大胆な提案でしたが、研究員の方々にも受け入れられ、アカデミアと実社会とをつなぐ入り口のひとつになっています。

Custom-drawn iconography

ブログに名前を付け、ロゴをあしらうことで、誰もが気軽に覗ける読みものへと変貌させる。

サイトを育てる。

このサイトの要は、日々の発信を研究員の方々の手で続けられることにありました。そこでWordPressの管理画面をシネコカルチャー専用に細かくカスタマイズし、専門知識がなくてもサイト全体を無理なく更新できるようにしています。あわせて、誰が更新してもデザインの一貫性が崩れないようにレイアウトや意匠を設計したことで、発信の積み重ねがそのままサイトの(ひいてはシネコカルチャーの)色になるようにしました。

たとえばプロジェクトページを開けば、そのプロジェクトに誰が関わっているかがわかります。メンバーのページを開けば、そのメンバーがどんなプロジェクトに携わっているのかも一目瞭然です。通常であれば、それぞれのページを手動で更新することになり、二重の手間が生じます。そこで、プロジェクトにメンバーを紐づけられるようにして、メンバーページでもその情報を活用するようにシステムをカスタマイズしました。メンバー情報は一箇所で管理するだけで、プロジェクトとメンバーとのつながりがサイト全体に行き渡り、どこから参照しても常に最新の状態に保たれます。

Custom-drawn iconography

プロジェクトとメンバーがそれぞれのページで動的に関連づけられる。ひとつの更新が、それ以上にサイトを豊かにしていく仕組みを設計した。

Custom-drawn iconography

細部までシネコカルチャー専用にカスタマイズした管理画面

2つのサイトをひとつに。

もともとシネコカルチャーのWebサイトは、社団のメインサイトとブログサイトという二つのWordPressに分かれていました。これを一つに統合することも要件のひとつでしたが、ブログ側の記事をそのまま移すとメインサイトのデータとぶつかってしまうことがわかりました。そこでデータ移行のためのスクリプトを組み、ブログの記事を専用の投稿タイプへ、カテゴリやタグも専用の分類へと自動で変換することで、手作業の転記による抜け漏れをなくし、確実かつ短時間でのデータ移行を実現しました。

あわせて、これまで独立したHTMLページとして管理されていたシネコカルチャーマニュアルもWordPressへとデータ移行し、同じように多言語で管理・更新できるようにしました。研究の蓄積を、サイトのコンテンツと同じ場所で管理・公開できるようにしています。

  • 119

    ブログ記事を統合

    別々のサイトにあったブログ記事を専用の投稿タイプへ移行。カテゴリやタグも専用の分類へと自動で割り当てて移行しました。

  • 4

    言語に対応

    日本語版をもとに英語・フランス語・中国語への翻訳版を複製。すでに翻訳がデータベースに格納されている記事はそれを使うように調整しました。

世界中からの検索を、それぞれの言語で。

旧サイトでは日本語と一部英語で提供されていましたが、今回のリニューアルにあたっては日本語・英語・フランス語・中国語の4言語対応へと拡大しました。4言語への翻訳は膨大な作業になるため、主要なページのみ翻訳し、未翻訳のページには未翻訳である旨のメッセージを各言語で通知することで、お客さま自身で公開後に無理なく翻訳していけるようにシステムとデザインを工夫しました。単純にテキスト表示を切り替えるだけの仕組みではなく、言語ごとに独立したページとして生成されるため、検索エンジンにも、海外から訪れる方にも、適切な言語で届けることができます。さらに、翻訳コンテンツの管理はもちろん、新しい言語の追加も管理画面から行えるため、将来あらたな言語が必要になっても、開発を介さずお客さまご自身で対応できます。

Custom-drawn iconography

言語ごとに独立したURLを持ち、適切な言語でコンテンツを届けられる。

誰もが迷わず使えるように。

誰もが等しく情報を受け取れることは、社会に開かれた活動を目指すうえで欠かせない条件です。今回は外部の監査こそありませんでしたが、WCAG 2.2 レベル AA 相当のアクセシビリティ水準で設計し、多様な利用者がそれぞれの環境で迷わず情報にたどり着けるようにしています。

Custom-drawn iconography

お年寄りも、障がいのある方も、誰もが同じようにシネコカルチャーを知れるように。

Client
一般社団法人シネコカルチャー
Project type
Branding, Website
Creative Direction
Kazunori Miura
Art Direction
Kazunori Miura
Information Design
Kazunori Miura
Copywriting
Kazunori Miura
Graphic Design
Kazunori Miura
UI/UX Design
Kazunori Miura
Front-end Development
Kazunori Miura
WordPress Development
Kazunori Miura
Launch
2025.11
Related Link
Back to Index
/images/portrait@1024w.jpg
An independent UI/UX designer based in Nasushiobara, Japan.
三浦 和紀(1988-)
Scroll

自己紹介

フリーランスのUI/UXデザイナーです。Web・デジタル領域における事業、製品、メディアづくりのお手伝いをしています。「世の中に知ってもらいたいことがある」— そんなときはご相談ください。

取引企業

ソニーグループ株式会社
株式会社ソニーコンピュータサイエンス研究所
ソニーデザインコンサルティング株式会社
株式会社ソニーAI
株式会社リクルートマーケティングパートナーズ
ファインコードアンドレトリック株式会社
グリーンフィールドキャピタル株式会社
株式会社CRAZY
株式会社 心電
有限会社タングラム
株式会社ケイジェンド・プロダクツ
株式会社クラリティマインド
株式会社ソーシャル・マインズ
レジットデザイン株式会社
株式会社ルーデンスフィールド
株式会社MakeWaves
1977 RECORDS

※順不同

事業内容・サービス

御社のデザインパートナーとして、企画、デザイン、開発、改善にいたるまで、一気通貫して(または一部でも)お手伝いいたします。 個人かつ横断的なスキルセットだからこそのスピード、柔軟性、コストパフォーマンスが強みです。

01.Webアプリケーションデザイン・改善

ヒアリング・市場調査に基づき、ターゲットを定めた上で、理想的なユーザー体験・ユーザーインタフェース、ブランドアイデンティティをデザインし、実装に近いプロトタイプを制作します。 ビジネスサイド、エンジニアサイドと対話しながら、プロダクション後も目標の達成に向けて伴走させていただきます。

事例

料金

お見積もり

02.Webサイトデザイン・開発・改善

顕在・潜在ターゲットを明確にした上で、適切な情報設計、ユーザー体験・ユーザーインタフェース、ブランドアイデンティティをデザインし、アクセシビリティ、SEOを考慮したWebサイトを制作します。 ドメイン取得やサーバー選定、リリース後の保守・運用、改善などもお任せください。

事例

料金

お見積もり

03.新規事業開発・R&D

御社が保有するアセットに新しい価値を生み出すアイデアの発見と実行をお手伝いします。 かつてソニーのトランジスタラジオがロックムーヴメントを加速させたように、どのような事業をつくり、誰を(または何を)エンパワーするのかまで想像した上で、 0→1の事業をデザインし、目標の達成に向けて伴走させていただきます。

事例

料金

お見積もり

04.CXOレター制作・コンサルティング

CXOレターの制作、集客・商談獲得のコンサルティングサービスです。 印刷会社とのパートナーシップにより、印刷・発送はもちろん、不着リストの管理やリストクレンジングまで一気通貫でご提供します。

事例

料金

お見積もり

05.DXサポート

DXに取り組む企業様向けに、オンラインミーティングや電話・チャットツール等を利用したサポートをさせていただくサービスです。 現状のオペレーションや企業文化・慣習を理解し、デジタルに置き換えるのではなく"最適化"するアプローチでDX設計をお手伝いします。

料金

従量課金プラン 月額プラン
Basic Pro
オンラインMTG
チャットサポート -
電話サポート - -
料金 ¥7,500/1h ¥49,800 ¥98,800

※ 月額プランのオンラインミーティングは週1回・1時間です
※ 従量課金プランは必要に応じてサポートをご依頼できるプランです(オンラインミーティングのみ)
※ 料金は税別です

お問い合わせ

Scroll
Welcome👋