【WEBデザイン研究所001】株式会社ユートピアアグリカルチャー

■サイトURL

UTOPIA AGRICULTURE | 株式会社ユートピアアグリカルチャー

■MEMO

酪農ー研究ー製品販売まで一気通貫したビジネスを行う企業様のサイト。
構成は主に環境配慮や酪農の課題といった業界を取り巻く現状に触れつつ、自分達の思想や今後の取り組みなどプロジェクトを紹介している。

■フォント

欧文：ITC Benguiat Pro Condensed Bold（https://mall.aflo.com/font/detail.php?product_id=96146）

日本語：デバイス依存
※ただし英数字にはGoogleFontsのHeebo(https://fonts.google.com/specimen/Heebo?preview.text=122334&preview.text_type=custom)を優先的に読みこんでいる。

■カラー

｜ベースカラー：#d9f3e4
｜メインカラー：#0d423b
｜アクセントカラー：#378f3c

■サイトマップ

トップページ
∟ ユートピアアグリカルチャーについて
∟ アプローチ　—　北海道大学農学部との共同研究
∟ ジャーナル（最新情報）
∟ パートナーシップ　—　よくあるご質問
∟ お問合せ
∟ よくあるご質問 
∟ 利用規約
∟ 特定商取引
∟ プラポリ 
∟ プロダクト01 - Cheese Wonder
∟ プロダクト02 - Cheese Wonder Blue
∟ プロダクト03 - Graze Gathering

■デザイン

まず目に付くのはMVの切り絵のような幾何学のグラフィック。酪農という見栄えの難しい業種のデザインを美しく表現している。リアリティは半減するものの、未来へ向けた取り組みなどプロジェクトの根幹を成す側面を表現するのにピッタリはまっている。

アクセントの欧文フォントもそのグラフィックに合わせてデザイン性に富んだものをチョイスしている。グラフィックに合わせてうろこにはさみで切り込んだような鋭さがありつつも、カーブの丸みを保ったフォントでデザインとの親和性が◎

グラフィック自体も、少しザラッとしたパターンが絵に奥行きと温かみを加えている。

そのデザイン性とバランスを保って派手なアニメーションはないものの、要所要所で素敵な動きが盛り込まれている。
・MVのパララックス
・ボタンのホバーエフェクト
・ページ遷移アニメーション
・プロダクトのページは動き多め
中でもボタンのホバーが波打つ表現はとても気持ちいい。

ブログのサムネまでトンマナ統一されていて素晴らしいです。

本日は以上です。
また素敵なWEBサイトをいろんな角度から分析して紹介していきます。