Hyotan & Co. website 2019 - MARZ DESIGN Portfolio

Hyotan & Co. website 2019｜グループの核を定義し、信頼を可視化するコーポレート・アイデンティティの再構築

「Hyotan & Co.株式会社」のコーポレートサイト制作において、最大のミッションは、フレンチレストランやセレクトショップといった多角的な事業を展開するグループ全体の「母体」としての信頼性を、デジタル空間に確立することにありました。各事業部が持つ個別のブランドイメージを尊重しつつ、それらを束ねる経営母体としての「理念」と「事業指針」をいかにして論理的に、かつ情緒的に伝えるか。本プロジェクトでは、単なる情報発信の場に留まらない、ステークホルダーとの強固な信頼関係を築くためのBtoB向けプラットフォームとしての機能を追求しました。デザインの根底にあるのは、企業の透明性と持続可能性を示すための「構造の美」です。ブランディングからUI/UX、WEBデザインまで一貫して携わることで、グループ全体の屋台骨としてのプレゼンスを視覚的に定義しました。

事業ポートフォリオを統合する戦略的インフォメーション・アーキテクチャ

グループ理念を体現するビジュアル・ブランディングの策定：複数の事業ドメインを統合するコーポレート・アイデンティティ（CI）を、ミニマルかつ高品位なタイポグラフィと余白設計によって表現しました。各事業が持つ「個」の輝きを支える「器」としての役割を果たすため、装飾を削ぎ落としたグリッドシステムを採用。これにより、BtoBシーンにおいて不可欠な「誠実さ」と「プロフェッショナリズム」を瞬時にユーザーへ印象づける視覚言語を構築しています。
ステークホルダーの意思決定を支援するUXデザイン：取引先や投資家、採用候補者といった多様な属性を持つユーザーに対し、迷いのない情報収集体験を提供することに注力しました。グループ全体の事業指針を「Philosophy」「Business」「Group Profile」という明確なカテゴリーに整理し、トップページから各詳細レイヤーへと至る階層構造（ヒエラルキー）を最適化。各事業へのリンクも、単なる誘導ではなく「グループとしてのシナジー」を感じさせる文脈で配置し、企業の全体像を多角的に把握できるユーザー体験（UX）を設計しました。
デバイスを問わない一貫したアクセシビリティと応答性： BtoBビジネスにおける主要なコンタクトポイントとして、あらゆるデバイス環境下での閲覧性と操作性を担保しました。レスポンシブデザインの実装においては、特に情報の可読性（レジビリティ）を最優先。フォントサイズ、行間、コントラスト比の厳密な管理に加え、ページロードの高速化を図ることで、ストレスのない情報提供を実現しています。これは、企業のITリテラシーと「おもてなし」の精神を間接的に証明する重要なテクニカル・アプローチです。
持続的なアップデートを可能にするシステム・ガバナンス：企業の成長とともに変化する事業内容やニュースリリースに柔軟に対応できるよう、運用の拡張性を備えたインターフェース（Interface）を構築しました。一貫したトーン＆マナーを維持しながらも、情報の追加が容易なモジュール単位のデザインコンポーネントを採用。将来的な事業拡大や社会情勢の変化に対しても、ブランド価値を損なうことなく迅速に情報を更新できる、堅牢かつ柔軟なデジタル基盤を実現しました。

プロジェクトの総括

「Hyotan & Co. website 2019」は、デザインが単なる表面的な装飾ではなく、経営戦略と密接に結びついた「経営資源」であることを体現したプロジェクトです。レストランやショップといった、エンドユーザー向けの華やかなブランドの背景にある「経営の意志」を、静謐かつ力強いデザインで表現しました。このサイトは、公開以来、グループ全体の顔として機能し、新規取引の創出やリクルーティングにおける強力なバックボーンとなっています。ブランディングから実装までを統合的に管理することで、細部に至るまで妥協のないクオリティを追求し、Hyotan & Co.株式会社が歩む未来への羅針盤となるようなデジタルプラットフォームを構築しました。私はデザイナーとして、クライアントの志をピクセルに宿し、その信頼が永続的に続くための「形」を追求し続けています。

Hyotan & Co. website 2019 | Defining the Core of the Group and Reconstructing Corporate Identity to Visualize Trust

In constructing the corporate website for “Hyotan & Co., Inc.,” the paramount mission was to establish credibility within the digital space as the parent organization for the entire group, which deploys multifaceted businesses such as French restaurants and select shops. While respecting the individual brand image held by each business division, the challenge was determining how to logically and emotionally communicate the “philosophy” and “business guidelines” as the management body unifying them. In this project, moving beyond a mere channel for dispatching information, we pursued functionality as a BtoB platform to build robust relationships of trust with stakeholders. At the root of the design lies a “structural beauty” to demonstrate corporate transparency and sustainability. By being involved consistently from branding to UI/UX and web design, we visually defined their presence as the backbone of the entire group.

Strategic Information Architecture Integrating the Business Portfolio

Formulating Visual Branding That Embodies the Group Philosophy: The corporate identity (CI) integrating multiple business domains was expressed through minimal, high-grade typography and margin design. To fulfill the role of a “vessel” supporting the brilliance of each individual business, we adopted a grid system stripped of excessive decoration. Through this, we built a visual language that instantly leaves an impression of “integrity” and “professionalism”—essential in BtoB scenarios—on users.
UX Design Supporting Stakeholder Decision-Making: We focused heavily on providing a seamless information retrieval experience for users with diverse attributes, including business partners, investors, and recruitment candidates. We organized the entire group’s business guidelines into clear categories—”Philosophy,” “Business,” and “Group Profile”—optimizing the hierarchical structure from the homepage down to each detailed layer. Links to individual businesses are positioned not as mere navigation but within a context that evokes “group synergy,” designing a user experience (UX) that allows a multifaceted understanding of the enterprise’s entire picture.
Consistent Accessibility and Responsiveness Regardless of Device: Serving as a primary contact point in BtoB business, we guaranteed readability and operability under all device environments. In implementing the responsive design, top priority was placed especially on information legibility. Alongside strict management of font sizes, line spacing, and contrast ratios, we aimed to accelerate page load speeds, realizing stress-free information provision. This is a critical technical approach that indirectly proves the company’s IT literacy and spirit of hospitality.
System Governance Enabling Sustainable Updates: To flexibly accommodate business content changes and news releases that evolve alongside corporate growth, we constructed an interface with operational scalability. While maintaining a consistent tone and manners, we adopted modular design components that facilitate easy information additions. We achieved a robust yet flexible digital foundation capable of swiftly updating information without undermining brand value, even in the face of future business expansion or shifts in social conditions.

Project Summary

“Hyotan & Co. website 2019” is a project materializing that design is not mere superficial decoration, but a “management resource” closely tied to corporate strategy. Through a serene yet powerful design, we expressed the “management intent” behind the glamorous, end-user-targeted brands like the restaurant and shop. Since its release, this site has functioned as the face of the entire group, becoming a strong backbone for generating new business transactions and driving recruitment initiatives. By integrally managing everything from branding to implementation, we pursued uncompromising quality down to the finest details, constructing a digital platform that serves as a compass for the future path of Hyotan & Co., Inc. As a designer, I continuously pursue the “form” that embeds the client’s aspirations into pixels, ensuring their trust endures permanently.

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