Reishi 2002 website design：東洋の知恵と機能美が融合する先駆的UI/UXデザイン
Webデザインの黎明期である2002年、ブランドの世界観をデジタル空間で表現することは先進的な挑戦でした。 本プロジェクト「Reishi 2002 website design」は、伝統的な東洋の植物由来成分をモダンなスキンケアへ昇華させたブランド「Reishi」のポートフォリオ用Webデザイン事例です。 クライアントの核心的コンセプトである「セルフメディケーション（Self Medication）」をビジュアル化し、当時の技術的制約の中で最大限の機能美と直感的な操作性を追求しました。デザインコンセプト：「Self Medication」を導くインターフェース
本デザインにおいて最も重視したのは、ユーザーが自らの肌と向き合い、最適なケアを選択するプロセスを論理的にサポートするUI/UX設計です。ファーストビューには、ブランド精神を象徴する「Self Medication」のタイポグラフィを大胆に配置。洗練されたフォントの組み合わせにより、伝統と先進性を感じさせるトーン＆マナーを確立しました。 左側には透明感のある女性のビジュアルを大きくレイアウトし、ピンクやパープルを基調としたカラーパレットによって、オーガニックな温かみと高機能スキンケアとしてのクリーンな先進性を同居させています。思考の根拠：商品価値を直感的に伝えるビジュアル・ハイアラキー
メインエリアには、ブランドを代表する4つのプロダクト（美容液、ソープ、ローション、サプリメント）を、正方形のグリッドに沿って規則正しく整列させています。 各製品が持つ色彩やフォルムを際立たせるため、背景はシンプルに保ち、ユーザーの視線が自然と集まる「視覚的階層（ビジュアル・ハイアラキー）」を緻密に計算しました。 これにより、過度なテキスト説明に頼ることなく、製品のプレミアムな質感や、インナービューティーとアウターケアの融合というストーリーを直感的に理解させるインターフェースを実現しています。サイト構造とナビゲーションの最適化
画面下部に配置されたナビゲーションバーは、ユーザーが迷うことなく目的の情報にアクセスできるよう、グリッドシステムに基づいて機能的にマッピングされています。各メニューには象徴的なイメージカットを挿入し、視覚的な誘導効果を高めました。- reishi & shops：ブランドの根源である東洋の知恵を伝えるコンセプトページ、および世界観をリアルに体験できる店舗情報（ショップリスト）へのスムーズな導線を確保。
- products & skincare：製品の詳細な成分を網羅した製品カタログと、ユーザーの肌悩みに応じた最適なスキンケアステップを提案する領域の配置。
- publisity & campaign：メディア掲載実績などのパブリシティ情報を集約して信頼性を高めると同時に、最新の限定キャンペーン情報を発信してユーザーのアクションを喚起。
- faq：ユーザーの疑問や懸念点に先回りして答えるカスタマーサポート領域を設置し、購入前の心理的ハードルを軽減。
時代を超えて息づく、美学と機能性のパーフェクトな調和
「Reishi 2002 website design」は、単なる製品紹介サイトにとどまらず、デジタル空間におけるブランド体験（Brand Experience）の価値を高める役割を果たしました。 美しさを追求するだけでなく、ユーザーが自発的にケアを選択していくという思想を、UI/UXデザインの力で具現化した好例です。東洋的な美学と、論理的なウェブ構造が完璧に調和したこのデザインアプローチは、トレンドが目まぐるしく変化する現代においても、デザインの普遍的な価値と「思考の根拠」の本質を物語っています。Reishi 2002 website design: Pioneering UI/UX Design Fusing Eastern Wisdom and Functional Beauty
In 2002, during the dawn of web design, expressing a brand’s worldview in the digital space was an advanced challenge. This project, “Reishi 2002 website design,” is a web design portfolio case study for “Reishi,” a brand that sublimated traditional Eastern botanicals into modern skincare. Visualizing the client’s core concept of “Self Medication,” we pursued maximum functional beauty and intuitive operability within the technical constraints of the era.Design Concept: An Interface Guiding “Self Medication”
The highest priority in this design was placed on a UI/UX layout that logically supports the process of users confronting their own skin needs and selecting optimal care. In the first view, the typography for “Self Medication,” which symbolizes the brand spirit, is boldly positioned. Through a sophisticated combination of fonts, we established a tone and manners that evoke tradition and innovation. On the left, a translucent visual of a woman is largely laid out, and through a color palette based on pinks and purples, organic warmth coexists with the clean innovation expected of high-performance skincare.Design Rationale: A Visual Hierarchy Intuitively Conveying Product Value
In the main area, four flagship products (serum, soap, lotion, and supplement) representing the brand are regularly aligned along a square grid. To accentuate the colors and forms unique to each product, the background is kept simple, and a “visual hierarchy” where user gaze naturally converges was meticulously calculated. Consequently, we realized an interface that allows users to intuitively comprehend the premium texture of the products and the narrative of fusing inner beauty with outer care, without relying on excessive textual explanations.Optimizing Site Structure and Navigation
The navigation bar positioned at the bottom of the screen is functionally mapped out based on a grid system, ensuring users can access targeted information without confusion. Symbolic image cuts are inserted into each menu item to enhance visual guidance effects.- reishi & shops: Secures smooth user flows to the concept page conveying Eastern wisdom—the root of the brand—and to store information (shop list) where users can experience the worldview in the real world.
- products & skincare: Positioning a product catalog covering detailed ingredients alongside a section proposing optimal skincare steps tailored to users’ skin concerns.
- publicity & campaign: Enhancing credibility by consolidating publicity information such as media coverage, while simultaneously driving user action by dispatching the latest limited campaign details.
- faq: Establishing a customer support section that proactively answers user questions and concerns, mitigating psychological hurdles prior to purchase.
A Perfect Harmony of Aesthetics and Functionality Outlasting Time
“Reishi 2002 website design” went beyond a mere product introduction site, playing a vital role in elevating the value of the Brand Experience within the digital space. It serves as a prime example of leveraging the power of UI/UX design to materialize a philosophy where users proactively select their care, rather than simply pursuing beauty. This design approach, where Eastern aesthetics and a logical web structure perfectly harmonize, speaks to the universal value of design and the essence of “design rationale” even in today’s dizzying environment of shifting trends.■ 本WEBサイトに掲載されている、会社名、商品名、サービス名、ブランド名、ロゴマーク、サービスマーク、スローガン、キャッチコピー等の著作権・商標権は、各権利所有者に帰属します。■ 本コンテンツは、著者の制作実績およびスキルの紹介を目的として掲載しており、権利を侵害する意図はございません。■ 制作実績のうち、直接取引以外の案件につきましては、広告代理店、コンサルティング会社、制作会社等のパートナー企業様との提携、あるいは仲介による制作実績となります。■ 本ポートフォリオへの掲載に問題がある場合は、お手数ですがお問い合わせフォームよりご連絡ください。迅速に対応をさせていただきます。
