ウェブサイト

東京大学浮体式洋上風力エネルギーと関連技術国際連携研究機構|公式サイト構築・VI開発支援

  • 企画・設計
  • ビジュアルデザイン
  • ロゴデザイン
  • フロントエンド
  • CMS
  • 保守運用

東京大学浮体式洋上風力エネルギーと関連技術国際連携研究機構の公式サイト構築とVI開発を支援しました。組織の発足前からヒアリングを行い、キービジュアルの制作も担当しました。

ウェブサイトトップのファーストビュー

プロジェクトの背景

東京大学浮体式洋上風力エネルギーと関連技術国際連携研究機構(以下、UT-FloWIND)は、2025年10月1日に発足した東京大学の研究組織です。風力発電、浮体工学、電力・グリッド、港湾・船舶・海洋工学、ICT、HPC(High Performance Computing)、海洋政策・エネルギー政策等といった東京大学の総合知を結集し、台風が多く厳しい環境下でも効率的に安定して稼働可能な「日本モデル」の浮体式洋上風力発電システムの実現に向けた総合的な研究と人材育成を行います。

新設の組織のため具体的な活動情報は発足後に段階的に拡充することとし、まずは組織発足に関する情報発信と問い合わせ窓口として機能する必要最小限の内容でリリースすることになりました。

問題解決までのアプローチ

海上での風車のスケール感を伝えるキービジュアル

UT-FloWINDが目指す、「日本モデル」の浮体式洋上風力発電システムの未来予想図としてのスケッチを制作しました。浮体式洋上風力発電の風車は海上に出ている部分だけでも都庁ビル(高さ230m)と同程度の高さがあり、まずはその巨大さを表現することが必要でした。またその風車が十何基も縦横に連なり立つ様子を描くことで、洋上風力発電施設のスケール感が伝わるようにしました。

風車には浮体やブレードの形態に複数の種類があり、ある特定のモデルを描くとそのイメージに固定されてしまうため、あくまで抽象的な浮体式洋上風力発電のイメージを描く必要がありました。しかし抽象的とはいえ直接目にしたことがない海上の巨大建造物をすぐに絵として落とし込むことはなかなか難しく、まずは1/100スケールのモックアップを作成し、色々な角度からその写真を撮ることで徐々にイメージを膨らませていくというステップを踏みました。

今回開発したウェブサイトのキービジュアル
風の後流を生むタンデム配置された風車をイメージ。メンテナンス船を描くことで巨大さを表した

東京大学との関連性とUT-FloWINDの特徴、どちらも表現するVI開発

シンボルマークはイニシャルの「F」「W」をモチーフとして洋上の風と波を表現し、力強さと柔らかさが共存するデザインとしました。「W」の底辺は、あえて高さを揃えないことで浮体の揺れをイメージしています。

ロゴタイプはアカデミックな場で機構としての信頼性を表現するため、個性を抑えたニュートラルな印象で、かつ小さなサイズでも視認性が高いサンセリフ体を採用しました。

色についてはシンボルマークに東京大学のVIと同じカラーリングを採用しました。学会やシンポジウムの発表資料ではスライド一枚の中に所属団体のロゴを並べることから、東京大学のロゴと横並びにした際に関連性を一目で分かりやすくするためです。

今回開発したUT-FloWINDのロゴ

フロントエンド構築フェーズの短縮

本プロジェクトではFigmaでのUI制作から速やかなコード化を行えるよう、コード自動生成ツール「Locofy」を使用して構築時間の短縮を図りました。

クリエイティブのポイント

  • 新設の組織のため必要最小限の内容でリリース
  • 未来の浮体式洋上風力発電システムを表すキービジュアルを制作
  • 東京大学との関連性とUT-FloWINDの特徴の両方を視覚化したVI開発
  • コード自動生成ツール「Locofy」を使用したフロントエンド構築時間の短縮

Credit

  • Client:東京大学浮体式洋上風力エネルギーと関連技術国際連携研究機構
  • Director:折坂聡彦(マイロプス)、松永健太(マイロプス)
  • Designer:泉佳子(マイロプス)
  • Front Engineer:市川彬(マイロプス)
  • Illustrator:泉佳子(マイロプス)

お仕事のご相談、採用についてなど、お気軽にお問い合わせください。