この記事について

今回ご紹介するのは、東京都東久留米市で「住・食・花・農」を軸としたさまざまな事業を展開する「タネニハ」様のWebサイト制作です。先祖代々受け継いできた土地を「人々の心をやわらげる場所にしたい」という想いから、自然を中心にさまざまな営みをされています。

農業や花屋、飲食店、複合施設、そして動植物と共生できる住まいまで、事業は本当に多岐にわたりますが、その根底にあるのは、自然や命の循環を大切にする一貫した姿勢です。

今回は、これらの事業が今まで以上に繋がりを持ち、より多くの人に共感してもらえるような「案内板」としての役割を目指してWeb制作に取り組みました。
オリジナルイラストを中心に、世界観の表現にもこだわっています。

この記事では、制作を進める中で大切にしたことや、公開までの過程を詳しくご紹介します。

 

ご相談のきっかけと、訪問でのヒアリング

以前、タネニハ様の事業のひとつである「アトリエ華もみじ」のECサイト制作をカズミアでお手伝いさせていただいたご縁があり、今回のサイト制作についてもご相談をいただきました。

まずはヒアリングのため、現地を訪問。
車で各所をご案内いただきました。

東久留米の特徴である「湧き水」のお話から、代々の拠り所となっている樹齢300年のケヤキの木。
みんなが暮らしを楽しむ様子と、そこに集まり会話を交わす人々。生き物と共生する土地・水・空気・・・
都内でありながら常に自然が中心にあり、そこから豊かな関係性や穏やかな時間が自然と生まれている様子を肌で感じることができました。

 

最後には、複合施設「kinone」のカフェでこだわりのコーヒーをいただき、行き交う人々を含めた空間そのものが、とても心休まる場所であると実感したのを覚えています。

 

お話を伺うなかで特に印象的だったのは、今ある活動に留まらず、未来に向けて新しい事業の構想が次々と広がっていること。

また、タネニハ様では、すでに事業ごとのサイトやSNSを運用されているほか、「タネニハ便り」という冊子も発行されています。そこに綴られた写真や文章はどれも魅力的だったので、これらを活かしながらサイトを構成しようと考えました。

新しくタネニハ様を知る方はもちろん、すでに関わりのあるお客様にも、他の活動を知ってもらうきっかけをつくりたい。そんな想いを胸に、タネニハ様の営み全体を俯瞰できるような案内板づくりが始まりました。

 

情報整理と方向性

訪問後はヒアリング内容をまとめ、社内でミーティングを行いました。
タネニハ様の核となるものは何か。現場で抱いた印象を共有し合い、どのようなデザインやイラストがふさわしいか、具体的に話し合いを重ねていきます。

 

ミーティングで出た意見をもとに改めて目的を整理し、目指すべき方向性を検討。

多岐にわたる事業をわかりやすく整理し、一画面で「タネニハとは何か」が伝わること。そして一部の事業しか知らない方でも他の活動に興味が湧くような、回遊性の高い動線を目指しました。

また、キーワードを洗い出し、社内での共通認識を深めていきます。

これらの情報はタネニハ様にも共有させていただき、目指すべき方向性にお互いに相違がないか、足並みを揃えていきました。

 

制作の流れ

ワイヤーフレームとコンセプト

固まった方向性をもとに、サイトに入れる情報を整理し、ワイヤーフレームとコンセプト案を作成しました。初回のご提案では、イメージをすり合わせるために3つの案をご提示しています。

A案「笑顔」
人が集まる様子や活気を軸にした案

B案「循環」
あらゆる命のめぐりを「輪」のモチーフで表現する案

C案「種まき」
蒔いた一つの種から事業が広がる様子を軸にした案

 

お客様とご意見をすり合わせた結果、C案の「種まき」をベースにしつつ、メインビジュアルはB案の「写真を大きく見せる構成」に。さらにA案の「モーダル形式」を取り入れた仕様に決定しました。

全体のキーワードは「循環」。 
キャッチコピーは、この世界観を象徴する「タネが紡ぐ、いのちと地」に決まりました。

 

サイトの仕様

タネニハ様では、今後もさらに新しい取り組みが増えていく予定があるため、各事業のページはWordPressで自由に編集・追加できる仕組みにしています。

そのため、トップページですべてを見せるのではなく、事業を6つのカテゴリーに分類。内容から直感的に興味を持ってもらえるような分類方法を検討しました。

機能面では、トップページからモーダル形式で詳細が開き、そこから各事業の個別ページへ飛べる仕様を採用しています。

日々進化していくタネニハ様の活動に合わせて、サイト自体も柔軟に成長していける仕組みをご提案しました。

 

事業イラスト

事業を表すイラストは、ワイヤーフレーム制作の段階からラフを書き起こしていきました。

6つに分類した事業の中身を想像できるように描くこと。
そして、あらゆる命が共生し、めぐっている様子を描くことを大切にして、調整を重ねながら完成させていきました。

 

イラストの中には同じ人物をたびたび登場させることで、人々がタネニハの森を「街歩き」しているような物語性を持たせています。
そのため、細かい内容や位置などは、デザインを進めながら調整していきました。

 

イラストタッチは、「野外スケッチ」のような自然なイメージを目指して進めました。
通常であればラフから清書、着色へと進みますが、タネニハ様がラフ段階の自然な線を気に入ってくださったため、ラフ自体を調整して仕上げることに。
より人の手が感じられる、温かな表情に仕上がりました。

 

その他のイラストとデザイン

６事業のイラストがある程度形になった後は、
デザインと並行しながら、その他のイラスト制作を進めました。

一貫して大切にしていたのは、「人の手で作る自然な表現」をいかにWebへ落とし込むか。温度感を形にするために、試行錯誤を繰り返しました。

 

まずは、ワイヤーフレームとコンセプトをもとに、初稿を制作。
メインビジュアルは、写真を大きく見せるB案のワイヤーフレームをベースに進めました。

特に検証を重ねたのがフォントの選定です。
当初は、情報の伝わりやすさや全体のバランスを考慮し、ゴシック体でデザインを進めていました。
しかし、実際に組んでみるとどこか雰囲気が作りきれず、全体的に可愛らしい印象に寄ってしまうのが課題でした。

 

タネニハ様の持つ、素朴でありながらも人々を惹きつける魅力を表現するために、特にキャッチコピーのフォントについては、いくつもの候補を出し検討。

最終的には、力強さと視認性を兼ね備えつつ、凛とした美しさを持つ明朝体のフォントに辿り着きました。

 

メインビジュアルに入れるお写真は、実際の豊かな活動をより鮮明に想像できるよう、タネニハ様にも選んでいただき、人と自然が交互に現れるようその順番を検討。

また、両サイドのイラストは「タネニハの森」の奥へと入り込む感覚を演出するため、対照的な木のイラストに変更しました。

 

メインビジュアルの下には、地図イラストを掲載。
情報の分かりやすさと、ラフなイラストタッチとの絶妙なバランスを何度も調整しました。

ここでも人や植物、事業を象徴するイラストやアイコンを取り入れることで、場所を正確に伝えるだけでなく、人々が行き交うタネニハ様らしい活気ある空気感も損なわないよう配慮しました。

 

各事業紹介のはじめには、「種を蒔く姿」のイラストを配置。
服装などのバリエーションをいくつか制作し、その中からタネニハ様に選んでいただいたものを採用しています。
蒔いた種からさまざまな取り組みが芽吹き、広がっていくようなストーリーを持たせました。

 

 

全ページに配置するフッター上にもイラストを配置しました。
代々の拠り所となってきたケヤキの木を中心に、人々の営みや、あらゆる命が共生している様子を描いています。

当初は「木と人々」がメインの構成でしたが、タネニハ様からご意見をいただきながら調整。
人々の営みに、あらゆる命が共生する情景を重ねていくことで、タネニハ様の精神を象徴するような一枚を追求していきました。

 

各所には種や虫などの自然なモチーフを取り入れ、細部まで「循環」を意識。

 

キャッチコピーで使用した明朝体とバランスを取るため、本文フォントにはゴシック体を選定し、繊細になりすぎない力強さも持たせています。

イラストを軸にしつつ、タネニハ様のご意見も伺いながらフォント・色・余白感などの検証を重ねていき、こうしてデザインが完成しました。

 

アニメーション

デザイン完成後、実装に向けてアニメーションを考えていきました。
イメージに合う参考サイトなどを探しながら、タネニハ様らしい動きを取り入れていきます。

トップページでは、スクロールに合わせて各取り組みが一つずつふわっと出現。
それぞれの活動が次々と広がり、そして互いに繋がっている様子を体感できるような演出にしました。

また、ハンバーガーメニューのボタンには、土から芽が出るようなホバーアニメーションを。

 

メニュー名をホバーした際には点線が現れたり、スライドアニメーションで写真を印象的に見せたりと、さりげない演出で世界観を深めていきました。

 

実装

今回は、各事業の詳細をタネニハ側で更新していただく運用のため、WordPressのブロックエディタを用いてパーツをご用意しました。基本的に下層ページはWordPressにて構築しています。

どのような内容が入っても世界観を維持できるよう、文字サイズやコンテンツ幅、余白感などを整理。リストアイコンには「種・どんぐり・幼虫・ミミズ」が順に現れる遊び心も取り入れました。

 

また、専用のカスタムパーツとして「店舗情報」の枠を独自に制作。
営業時間やSNS情報などを、簡単に美しく掲載できる仕組みを整えています。

 

今回、特にトップページの「各事業が繋がっている様子」はコンセプトの肝になる表現のため、レスポンシブでのレイアウト調整を丁寧に行い、スマホやタブレットでも一貫した心地よさを感じられるようにしています。

また、日々の発信は外部メディアの「note」を活用されているため、サイト内には最新記事の一覧を埋め込みました。
noteで綴られる「日々の生き生きとした活動」と、サイトで示す「タネニハとしての変わらない土台」。
この両方が合わさることで、より深く、多角的に魅力を知っていただける場所になればと考えています。

こうして制作を進めてきたサイトは、2025年8月に無事公開を迎えました。

 

大切にしたこと

制作を通して大切にしたのは、タネニハ様が培ってきた歴史や想いを深く理解し、その先にいるお客様の姿を想像することです。単に「雰囲気」を似せるのではなく、これまで大切にされてきたことや、未来へ向けた志がしっかりと伝わる形を追求しました。

特に実際の様子や、タネニハ様が発信するあらゆるものから、一貫した世界観や空気感が伝わってきたため、その良さをWebでも感じていただけるよう意識しました。素材一つひとつの魅力を引き立てつつ、多岐にわたる事業を包括した「世界観」と、サイトとしての「見やすさ」の両方を大切にしています。

 

悩んだこと

今回、特に試行錯誤したのは「運用面での使いやすさ」と「世界観」の両立です。

お客様側で自由に更新していただくサイトは、柔軟性がある一方で、細かなデザインのコントロールが難しくなりがちです。汎用性のあるパーツ構成にする必要があるため、表現の幅が狭まることも少なくありません。

それでもタネニハ様の世界観を最大限表現できるよう、色やフォント、細部のあしらいで統一感を保持。随所に小さな遊び心を交えることで、今後更新していく際にも「タネニハらしさ」が保たれる設計を追求しました。

 

タネニハ様からいただいた声

タネニハ様から、制作過程や完成したWebサイトについて、声をいただきました。

以前よりホームページやECサイトの制作でお世話になっておりました。
温かみのあるデザインと、ヒアリングを丁寧に行い、私たちがイメージする世界観を実現してくれようとする懸命な心に安心を抱きました。
打ち合わせもzoomを用いてくださることもあり、細やかな調整を行えました。

特に私たちがこだわったのは、イラストの質感です。
温かみとシンプルさの間を何度も調整し、事業の正解感を表現していただきました。
私たちは写真素材を持ち合わせていたため、撮り直すことはありませんでしたが、写真に載せるイラストを描いてもらうことで、デザイナーさんとの世界観の調整を行えたと思います。

様々な事業がある私たちの取り組みを、視覚的にシンプルにまとめてくださり、ありがとうございました。

多岐にわたる事業でお忙しいなかでも、一つひとつの取り組みや背景を細やかに伝えてくださったおかげで、チーム全員が共通のイメージを持って制作に取り組むことができました。

Webサイトを通じて、これからもタネニハ様の活動がより多くの方へ届いていくことを願っています。

 

これからの制作に向けて

デジタルの活用やAIの普及が進み、効率的に言葉を生み出せる世の中になりましたが、実際にお会いして現場の空気感に触れることでしか気づけない魅力が確かに存在すると感じています。

一度言葉になったものは、すでに一定の解釈が含まれたもの。そうではなく、生の様子を直接見させていただくからこそ、細部のニュアンスまで共通認識を持って形にできると考えています。

これからも、そうした人間らしい感性を大切にしながら、お客様の課題解決や目標達成に真摯に向き合っていきたいです。

 

カズミアがお手伝いできること

カズミアでは、Webサイト制作だけでなく、その世界観の核となるイラスト制作までお手伝いしています。

現場の空気感を丁寧に汲み取りながらイラストに落とし込むことで、言葉だけでは伝えきれない「その場所らしさ」を形にします。

デザイン、イラスト、そして動きの演出まで。一つのチームで一貫して作り上げるからこそ、細部まで体温の通ったWebサイト制作が可能です。

想いを大切にしたい方、自分たちらしい表現を探したい方、どうぞお気軽にお問い合わせください。