Peche de Hyotan website 2019 - MARZ DESIGN Portfolio

Peche de Hyotan website 2019｜グループの美学を継承し、健やかなライフスタイルを提案するデジタル・ブランディング

Hyotan & Co.株式会社がプロデュースするオーガニックセレクトショップ「Peche de Hyotan」のウェブサイト構築において、核となったのは「グループ全体の統一感」と「ショップ独自の親しみやすさ」の高次元での融合です。先行して制作されたレストランやコーポレートサイトと地続きのトーン＆マナーを維持しながら、オーガニック製品が持つ「優しさ」や「信頼性」をいかにデジタル空間で表現するか。本プロジェクトでは、ブランドのアイデンティティを再定義し、感度の高いユーザーの心に響くインターフェース（Interface）を追求しました。単に商品を陳列するだけのEC・紹介サイトに留まらず、Hyotanグループが掲げる「上質な日常」というフィロソフィーを、オーガニックという切り口から翻訳・具現化することを目指しています。

一貫性と独自性を両立させる戦略的クリエイティブ

グループ・アイデンティティを基盤とした視覚言語の構築： Hyotan & Co.が展開する各事業に共通する「静謐な美しさ」を継承しつつ、セレクトショップとしての温もりをプラスしました。グリッドシステムに基づいた秩序あるレイアウトをベースに、オーガニックな素材感を連想させる柔らかな質感の写真表現を組み合わせることで、ブランドとしての信頼感を担保。ロゴタイプや余白の取り方に共通のルールを持たせることで、グループ間の相互送客を促す視覚的な一貫性を実現しました。
「ストーリー」から「購買・体験」へ繋げる直感的なUI/UX：オーガニック製品を選択するユーザーは、その背景にある「物語」を重視します。そのため、単なるスペック紹介ではなく、生産者の想いや選び抜かれた理由に触れられるコンテンツ構造（Information Architecture）を設計。複雑な商品カテゴリーを直感的にナビゲートできるUIを実装し、ユーザーが自身のライフスタイルに合ったアイテムをストレスなく見つけられる動線を構築しました。これは、実店舗での接客体験をデジタル上で再現する試みでもあります。
ブランドの「温度感」を伝えるエモーショナルな質感設計：デジタルデバイス特有の無機質さを排除するため、色彩設計やフォントの選定において、人間の手触りが感じられる「温度感」を重視しました。自然光を活かしたシズル感のあるビジュアルを主軸に据え、スクロールに伴う優雅なアニメーションを微細に調整。これにより、サイトを訪れること自体が、ショップを訪れる際と同じような心地よい「体験」となるよう設計しています。ブランドへの愛着を醸成する、情緒的なエンゲージメントを強化しました。
閉店後も色褪せない「記録」としてのデジタル・アーカイブ： 2022年11月の閉店後も、本サイトの役割は「制作実績」以上の意味を持ちます。当時のトレンドやグループの変遷、そして一貫したデザイン哲学がどのように各事業へ最適化されていったかを示す重要なアーカイブとして機能するよう、構造化を維持。特定の時期に存在した美しいショップの記憶を、UI/UXデザインの観点から永続的に参照可能な形として保存できるよう、情報の整合性を保った設計を貫いています。

プロジェクトの総括

「Peche de Hyotan website 2019」は、多角経営における「ブランドの統率」がいかに重要であるかを示す好例です。オーガニックショップという、ともすればカジュアルに寄りすぎるジャンルにおいて、Hyotanグループ特有の品格を損なうことなく、ターゲット層へ深くリーチするデザインを具現化しました。ブランディングからUI/UX、WEBデザインまで一貫して手がけることで、細部に至るまで一寸の狂いもないブランド体験を提供できたと自負しています。たとえ店舗がその役目を終えたとしても、ここで構築されたデザインの「なぜ」という思考の根拠は、グループ全体の資産として、また私のポートフォリオにおける重要なマイルストーンとして残り続けます。

Peche de Hyotan website 2019 | Digital Branding Inheriting Group Aesthetics and Proposing a Healthy Lifestyle

In constructing the website for “Peche de Hyotan,” an organic select shop produced by Hyotan & Co., Inc., the core challenge was fusing a “group-wide sense of unity” with the “shop’s unique accessibility” at a high level. The objective was to determine how to express the “gentleness” and “credibility” unique to organic products in a digital space while maintaining a tone and manners directly connected to the previously produced restaurant and corporate websites. In this project, we redefined the brand’s identity and pursued an interface that resonates with highly sensitive users. Moving beyond an e-commerce or introductory site that merely displays merchandise, we aimed to translate and materialize the Hyotan Group’s philosophy of a “high-quality daily life” through the lens of organics.

Strategic Creatives Fusing Consistency and Originality

Constructing a Visual Language Based on Group Identity: While inheriting the “serene beauty” shared across each business deployed by Hyotan & Co., we infused the warmth expected of a select shop. Grounded in an orderly layout based on a grid system, we secured brand credibility by combining it with photographic expressions showcasing soft textures that evoke organic materials. By establishing common rules for logotypes and margin allocations, we achieved visual consistency that encourages mutual customer traffic among group businesses.
Intuitive UI/UX Connecting “Story” to “Purchase and Experience”: Users who choose organic products place great importance on the “narrative” behind them. Therefore, rather than a mere introduction of technical specifications, we designed an information architecture that allows users to touch upon the producers’ passion and the reasons behind the selection. Implementing a UI that intuitively navigates complex product categories, we built paths that allow users to find items matching their lifestyle without stress. This is also an attempt to replicate the real-world store customer service experience digitally.
Emotional Texture Design Conveying the Brand’s “Sense of Temperature”: To eliminate the inorganic nature characteristic of digital devices, we prioritized a “sense of temperature” where human touch can be felt in color selection and typography. Centering on high-quality visuals utilizing natural light, we minutely calibrated elegant animations accompanying scrolling behavior. Through this, the site is designed so that visiting it itself becomes a comfortable “experience” akin to stepping into the actual shop. We strengthened emotional engagement to foster brand attachment.
A Digital Archive Serving as a “Record” That Fades Outlasted by Closing: Even after closing in November 2022, this site’s role holds meaning beyond a mere “production achievement.” The structuring was maintained to ensure it functions as an important archive demonstrating the trends of the era, the transition of the group, and how a consistent design philosophy was optimized for each business. We adhered to a design that preserves information consistency so that the memory of a beautiful shop that existed during a specific period can be permanently referenced from a UI/UX design perspective.

Project Summary

“Peche de Hyotan website 2019” serves as a prime example showing how critical “brand governance” is in diversified operations. In a genre like an organic shop, which can easily lean too casual, we materialized a design that deeply reaches the target audience without undermining the unique dignity of the Hyotan Group. By handling everything consistently from branding to UI/UX and web design, I take pride in having delivered a flawless brand experience down to the finest details. Even if the store has completed its role, the design rationale—the “why”—established here remains a group asset and an important milestone in my portfolio.

Related Projects: Hyotan & Co. Group

This project was produced as part of multiple digital branding initiatives deployed by Hyotan & Co., Inc. Please view the case studies of each sister site as well. ▼ Hyotan & Co., Inc. Corporate Site: “Hyotan & Co. website 2019” Hyotan & Co., Inc. A highly reliable BtoB platform defining the entire group’s philosophy and business guidelines. ▼ Restaurant Hyotan Service Site: “Cheval de Hyotan website 2019” Cheval de Hyotan A French restaurant for adults. Replicating a counter-centric, serene space digitally. ▼ Organic Select Shop Operated by Hyotan Service Site: “Peche de Hyotan website 2019” Peche de Hyotan A case study of an organic select shop. *Closed in November 2022.

■ 本WEBサイトに掲載されている、会社名、商品名、サービス名、ブランド名、ロゴマーク、サービスマーク、スローガン、キャッチコピー等の著作権・商標権は、各権利所有者に帰属します。■ 本コンテンツは、著者の制作実績およびスキルの紹介を目的として掲載しており、権利を侵害する意図はございません。■ 制作実績のうち、直接取引以外の案件につきましては、広告代理店、コンサルティング会社、制作会社等のパートナー企業様との提携、あるいは仲介による制作実績となります。■ 本ポートフォリオへの掲載に問題がある場合は、お手数ですがお問い合わせフォームよりご連絡ください。迅速に対応をさせていただきます。