WORKS

Article thumbnail

Cultivera（カルティベラ）コーポレートサイト

2026.7

WordPress、JavaScript、HTML、CSS
【概要】新規コーポレートサイト（農業技術開発企業）
【機能】カスタム投稿「PROJECT」／カスタムフィールドによるページ構築／レスポンシブ対応
【担当作業】テクニカルディレクション、設計、難所実装、リードコーディング、コードレビュー、仕上げ
【制作期間】約3ヶ月（実装稼働）
【URL】https://cultivera.jp/

 

成果と反響

  • 待望の公開：Cultivera代表より、公開後に各方面から反響が寄せられていると伺いました。デザイナー・クライアントともに公開を待ち望んでいた、思い入れの深いサイトです。
  • デザイナーからの評価：本プロジェクトでの実装を non Editions・青山希望さんに評価いただき、別のお仕事にもつながりました。

 

はじめに

「自然の叡智で『生きる』を拡張する。」——独自の栽培技術 Moisculture を軸に、未来の農業を切り拓く企業「カルティベラ」様のコーポレートサイトです。

デザインを手がけたのは、non Editions の青山希望さん。掲げるビジョンを、格調高く・静かに・力強く伝える世界観がつくり込まれていました。

スケジュールのリスケを挟み、構想から公開までには長い時間をかけたプロジェクトです（実装の稼働自体は約3ヶ月）。それでも青山さんのデザインは色褪せることなく、2026年6月の公開時点でも古びない完成度でした。私たち山キノコロリ Web事業部が担ったのは、その世界観を損なわずWebとして立ち上げる技術的な役割です。

 

1. 制作前の課題 ― デザインの世界観を、Webでそのまま成立させる

  • デザインは、モノクロを基調に、スクロールやホバーの操作で少しずつ色づいていく繊細なコンセプト。静止画のカンプだけでは伝わらない「動き」を、Web上で自然に再現する必要がありました。
  • レスポンシブの中間幅など、カンプに存在しない状態を、世界観を壊さずに補完する必要がありました。
  • 「PROJECT」は投稿形式のため、一覧ページと詳細ページで見せる情報が異なり、さらに文章や画像が増減してもデザインの美しさが崩れない設計が求められました。

 

2. 施策 ― 世界観の再現と、破綻しない設計

施策

具体的な実装

デザインの世界観（モノクロ→色づく動き）を再現

青山さんのデザイン意図を読み取り、スクロールやホバーで色が差していく動きと、レスポンシブの中間状態を丁寧に補完。デザイナー本人が納得する再現度まで作り込みました。

「PROJECT」の設計・品質担保

多数のカスタムフィールドを要する「PROJECT」で、一覧ページと詳細ページで見せる情報が異なる構造を整理。文章や画像が増減しても破綻せず美しさを保つ設計方針を定め、品質を管理しました。

チーム開発の統括

テクニカルディレクション・リードコーディング・コードレビューを担い、難所を自ら実装。全体の仕上げまで統括しました。

 

3. 担当範囲 ― 良い座組で、完成度を最大化

項目

担当

デザイン

non Editions・青山希望さん

ロゴモーション

永尾仁さん

テクニカルディレクション・設計

山キノコロリ Web事業部

難所実装・カスタムフィールド／
カスタム投稿設計

山キノコロリ Web事業部

リードコーディング・
コードレビュー・仕上げ

山キノコロリ Web事業部

コーディング（実装協力）

ギガデザイン yanagi

 

まとめ — 優れたデザインを、優れた実装で“翻訳”する

このプロジェクトで山キノコロリ Web事業部が果たしたのは、青山さんの世界観を読み取り、動きやレスポンシブの中間状態まで補完して、デザイナー本人が納得する形でWebへ翻訳する役割でした。

  • カンプの「動き」「余白」まで読み取り、静止画にない状態を世界観そのままに補完。
  • 多数のカスタムフィールドを扱う「PROJECT」の設計方針と品質基準を定め、チームで作っても破綻しない仕組みを統括。
  • テクニカルディレクション・リードコーディング・コードレビューで全体の品質を担保。

デザインの完成度をそのままWebで再現するには、静止画にない動きやレスポンシブの状態まで補うプロセスが欠かせません。デザイナーの意図を正確に読み取り、世界観を損なわずWebへ翻訳すること──それが、私たち山キノコロリ Web事業部が最も大切にしている仕事です。

公開にあたり、デザインを手がけた青山さんは、こんな言葉を綴ってくださいました。

「長きに渡り丁寧に実装してくださったコーダーの山田さんにも感謝です。」

 

ご相談ください

デザイナーさん・制作会社さんから、こんなご相談をよくいただきます。

  • デザインの世界観を崩さずWeb実装したい
  • カンプにない動き・レスポンシブの中間まで詰めたい
  • カスタムフィールド設計で、更新しても破綻しないCMSにしたい

カンプの“外側”まで意図を汲んでWebに立ち上げる──翻訳と実装のパートナーが必要なときは、お気軽にご連絡ください。ご要望とご予算を伺い、最適なプランをご提案します。

▶ お問い合わせフォーム

BACK