「秋田COI-NEXT ソウゾウの森プロジェクト」ウェブサイト制作ストーリー

「秋田COI-NEXT ソウゾウの森プロジェクト」とは

秋田県の豊富な森林資源をさまざまな角度から活用し、世代や産業の枠組みを超えた新しい循環システムの創造を進める「秋田COI-NEXT ソウゾウの森プロジェクト」。

秋田県の3つの公立大学（秋田県立大学、国際教養大学、秋田公立美術大学）に代表される学術機関や民間企業、地方自治体がそれぞれの強みを発揮しながら連携してプロジェクトに取り組んでいます。

neccoでは、その取り組み内容や研究開発課題について発信するウェブサイトの制作をお手伝いしました。

この記事では、お問い合わせから情報設計、デザイン、実装まで、ウェブサイト制作の裏側をお伝えします！

制作期間：2024年6月〜2024年10月（約5ヶ月）
制作内容：ウェブサイト制作（情報設計、言葉づくり、ウェブデザイン、実装、アニメーション）

「秋田COI-NEXT ソウゾウの森プロジェクト」ウェブサイトはこちら

制作実績ページはこちら

neccoへのお問い合わせからヒアリングまで

2024年5月16日、秋田公立美術大学の今中先生からneccoのお問い合わせフォームへご連絡いただきました。その1週間後に初回打ち合わせを実施し、現在の課題や解決したいこと、最終成果物などについてヒアリングを行いました。

このときに先生方からいただいたご要望・課題は、以下となります。

プロジェクトを本格化するために、育成期間で作った現在のサイトをリニューアルしたい
強いメッセージ性を生むために、デザインも実装もオール秋田で進めていきたい
若い人の心をつかむアニメーションを使ったウェブサイトが増えているが、動きすぎず情報が伝わりやすいサイトにしたい
サイトの目的は「研究報告」になるため、しっかり発信でき、活動していることが伝わるサイトにしたい

お話のなかで、neccoにお問い合わせいただいたきっかけは以前ウェブサイト制作をお手伝いしたアーツセンターあきたさまのご紹介だったことを聞き、うれしい気持ちになったことをおぼえています。

後日、neccoからお見積りと提案書を提出し、契約締結。2024年6月27日にキックオフとなりました。

アーツセンターあきたさまのウェブサイト制作実績はこちら

情報設計・言葉づくり

ヒアリングシート

ヒアリングシートは、neccoがお客さまについての理解を深めるために、キックオフ時にお客さまに記入していただくシートです。お客さまのブランドと、neccoが制作する成果物とのデザインにズレが生じないよう、ほぼ全ての案件で作成しています。

質問内容は「組織・サービスの歴史・ストーリー・ルーツ」「ネーミングの由来」「サービスの独自性・提供価値」「理想の顧客像」「大切にしていること」「もやっとした悩み」など。

質問数は多いのですが、お客さまに記入していただくことで、現状の課題や最終目的について、改めて考えていただくきっかけになります。言語化できない悩みなどは、neccoがお客さまと一緒に整理・言語化を進めます。

ソウゾウの森プロジェクトの先生方にもシートに記入いただき、目指す方向性やサイト制作のゴールを共に明確にしていきました。

ウェブサイト制作のゴール

事業内容や事業の成果（研究報告）を正しく・分かりやすく伝え、問い合わせやイベント参加者数が増えること
COI-NEXT（共創の場形成支援プログラム）の採択元であるJST（科学技術振興機構）や、参画機関から高評価を得ること

※COI-NEXT（共創の場形成支援プログラム）は、JST（科学技術振興機構）が推進するプログラムです。知と人材が集積された大学を中心に、企業や地方自治体・市民との産学官共創によって、ありたい社会像の実現を目指すための自立的・持続的な拠点を形成します。

ブランドコンセプト

ヒアリングシートの内容をもとに、ブランドコンセプトの作成を進めました。

ナラティブ：ブランドの要素を網羅し、過去から引き継がれ、未来に続いて「これから起こる」物語
ブランドアイデア：ブランドの核となる考え方を端的に表すフレーズ
ビリーフ：ブランドアイデアを特徴づけ、体現すべき価値観を示唆するキーワード

ブランドコンセプトは実際にウェブサイトで使用するものではありませんが、事業の歴史や考え方、価値観を理解するために重要な要素となります。

サイトマップ

先生方からのご要望をもとに情報を整理し、サイトマップを作成しました。

「ソウゾウの森プロジェクトとは」「何を研究しているのか」「どんな組織・機関が関わっているのか」「課題・目指していること」を明確にするため、情報に網羅性を持たせたページ構成としています。

サイトの要となる発信については、「ソウゾウの森メディア」ページを用意。「お知らせ」「イベント」「活動報告」などの記事をCMSで作成・更新できるようにしています。

ワイヤーフレーム作成・ライティング

コンセプトやサイトマップを作成し、目指す方向性が固まってきたら、ワイヤーフレームの作成・ライティングに入ります。

このフェーズで特に気をつけた点は以下となります。

キャッチコピー：プロジェクトを一言で表す、象徴的なコピーを考える
ソウゾウの森プロジェクトの言語化：事業についてテキストで分かりやすく説明する
ソウゾウの森プロジェクトの図解化：「COI-NEXTとは」や「プロジェクトの概要」を図版を使って紹介する
記事ページとの連動：事業と関連記事を紐付けながら、回遊性のあるサイト構成にする

このときに難しいと感じたのが、「ソウゾウの森プロジェクトの言語化」です。

他にはない唯一の事業であり、アカデミックな内容でもあるため、どうしても専門用語や難解なワードを使ってしまいます。
ベースのテキストは先生方からご提供いただいたのですが、それを少しでも噛み砕いて表現できるよう、調整と相談を重ねました。また、図版と組み合わせて説明することで、よりユーザーの理解度を上げるよう工夫しました。

ソウゾウの森ウェブサイトのワイヤーフレーム画像 — 「事業紹介」ページの制作途中のワイヤーフレーム

キャッチコピーは、「秋田の森で豊かな地域社会をソウゾウする」としました。

当初考えた案は「森林に新しい価値を、地域に自律した豊かさを」「秋田の森林資源を新しい価値に変換する」など、ぱっと見では理解できない文章になっていました。

また、すでに「森の価値変換を通じた、自立した豊かさの実現拠点」というタグラインが存在していたため、使用するワードを根本から見直す必要がありました。

そのため、改めてヒアリングシートから読み直すことにしました。そのなかでプロジェクト名の「ソウゾウ」は「想像」と「創造」の2つの意味があることに気づき、キャッチコピーにも使いたい！という気持ちがわいていました。

キャッチコピーでも“ソウゾウ”とカタカナ表記にすることで意味を特定せず、見る人に幅広いイメージを抱いてもらえるのでは？そんな気持ちで作成したのが「秋田の森林で豊かな地域社会をソウゾウする」という案です。

先生方との定例ミーティングで提案したところ、「いいね！」と言っていただき、さらに「“森林”という言葉は林業や資材をイメージさせるため、もっと包括的な“森”を使ったほうがよさそう」というフィードバックをいただきました。こうして現在のコピー「秋田の森で豊かな地域社会をソウゾウする」が完成したのです。

ウェブデザイン

ウェブデザインは、デザイナーの今（こん）さんと、龍神さんがメインで担当。教育機関が主体となり推し進めるプロジェクトの内容・実績をしっかりと伝えるため、「安定感」と「機能」を持ち合わせた誠実なデザインとしました。

画面全体を3分割にしたレイアウトを軸に、3大学の連携を表現しています。

ソウゾウの森ウェブサイトの3大学を表現した画像 — 画面を3分割にすることで、3大学の連携を表現

さまざまな表情を持つ森に差し込む光や木漏れ日をイメージした緑のグラデーションと組み合わせることで、学びや活動が木のようにまっすぐに伸びてゆく様子が伝わるデザインを目指しました。

ソウゾウの森ウェブサイトの事業紹介画像 — 秋田の森をイメージした緑のグラデーション

ロゴデザイン・イラスト・グラフィックは石川先生が担当

ウェブサイトで使用しているかわいいイラストや印象的なグラフィックは、秋田公立美術大学の石川先生が制作されたものを使用しました。

石川先生は美術学部コミュニケーションデザイン専攻の准教授として、タイポグラフィやパッケージデザイン、ウェブデザイン、イラストレーション、広告デザインなど、デザイン分野を幅広く教えていらっしゃいます。

下の「森の価値変換を通じた、自立した豊かさの実現」の図は、石川先生作のイラストをLottieという技術を使って動かしています。担当したのは、デザイナーの長野さん。人々がおしゃべりしたり、木を切ったり、何かをひらめいている様子がアニメーション化されていますので、ぜひ注目してみてください。

下のグラフィックは、「ソウゾウの森会議」の告知用に石川先生が制作されたデザインです。フッターやソウゾウの森会議ページに配置することで、サイト全体に鮮やかなアクセントが加わりました。

また、今回のリニューアルと併行してロゴデザインのリニューアルも進めており、石川先生がデザインを担当してくださいました。定例ミーティングにてロゴに込めた想いや制作過程を共有いただき、neccoとしても大変勉強になりました。

完成したロゴ

（ロゴマークについて / 石川先生より）

一人ひとりの木が対話を重ねながら、ひとつの森をつくっていく

「森」の文字を分解し「対話」をフキダシの形で構築。自律や多様性の発展を願い、単色で表現しています。四季が変化し木々が色づくように、この地から3つのチカラ（3つの大学と産学官）が集結して変わり始める様子を表現しました。
akita-souzounomori.com