77 Spirits
Brand Strategy & Web Design

77 Spirits
利益を生むためのウェブデザイン提案

プロジェクトの概要 (Project Overview)

カレッジの講義で、講師の知人で、77Spirits共同創業者のナターシャからWebサイト（トップページ1枚完結型）のデザイン提案を求められました。その際、講師からは1人で進めるようで指示されました。提供された素材に加え、コンセプトに合致するビジュアルを選定し、Figmaで制作しました。

  • ▪ 課題: 1枚のランディングページ内で、ターゲットに最適化された情報設計を行う
  • ▪ 制約: ページ追加はせず、既存 of シングルページ構造を維持する
  • ▪ 役割: UX/UIデザイン、リサーチ、情報アーキテクチャ設計（単独プロジェクト）

UXパラダイムシフト (UX Paradigm Shift)

表面的な美学（派手なビジュアル）よりも、ビジネスの目標達成を最優先する「タスク優先デザイン（Task-First Design）」へシフトさせ、認知負担を徹底的に排除しました。

UXパラダイムシフト (UX Paradigm Shift)

派手なビジュアルよりも読者が迷わず目的を果たす設計

デザイン哲学: 表面的な美学よりもユーザーの目標達成を優先する

✕
派手な見た目 (Flashy Aesthetics) 高い摩擦と混乱 (High Friction & Clutter)
重要なビジネス情報はどこにあるのか？
  • 構造的な明瞭性を損なう、過剰に装飾されたデザイン要素
  • 視覚的過負荷を引き起こす、不要な認定証や密集したリンク群
  • 取引先に認知的な負担を強いる、整理されていないメニューナビゲーション
✓
タスク優先デザイン (Task-First Design) 摩擦ゼロと直感的な目標達成 (Zero Friction)
信頼の確立
推薦の声 (TESTIMONIALS)
マップの統合 (INTEGRATED MAP)
  • B2Bのビジネス指標に厳密にマッピングされた情報アーキテクチャ
  • クリーンなフォントペアリングと、意図的でバランスの取れた余白設計
  • スムーズな問い合わせを可能にする、摩擦のない入力フォームレイアウト

課題定義とリサーチ (Problem & Research)

クライアントの真のニーズは「単に洗練されたデザイン」ではなく、「デザインを通じたブランド価値の正確な発信と、それによる利益アップ」であると定義しました。

77 Spirtsのビジネス関係者
酒造会社、小売店、その他ステークホルダーを意識したサイト作りをする必要がある

既存サイトを分析し、主要ターゲットを「酒類卸売業者」「アルコール飲料メーカー」「銀行」の3つのB2Bステークホルダーに設定。彼らとの取引で最も重要となる「信頼」を、自己満足ではない形で視覚化することを目指しました。

デザインによる解決策と改善プロセス (Design Solution & Usability)

① 認定証から「推薦の声（Testimonials）」への転換

Before (現状)
[既存デザイン 77Spirits]
After (改善案)
[提案デザイン 77Spirits]

商材の価値の上げ方
全ての人に価値を伝えるには、認定証より「お客様の声」の方が効果的

現状の課題: 一般に価値が伝わりにくい第三者機関の認定証が大きく扱われていた。

解決策: 利害関係のない「実際に飲んだ人の声（推薦）」に差し替え。誰が見ても納得できる社会的証明を掲載することで、商材の信頼性を直感的に高めました。

② 色彩設計の最適化

現状の課題: 黒とカラシ色の背景色が交互に変わり、コントラストが強く視覚的疲労と緊張感があった。

解決策: 黒とクリーム色の背景色にすることで、サイト全体にメリハリをつけることができ、穏やかにサイトを見ることができるようになりました。

③ グローバルナビゲーションの整理

Before (現状)
[既存デザイン 77Spirits]
After (改善案)
[提案デザイン 77Spirits]

グローバルナビゲーションの整理整頓
同じもの、似たものの羅列を避けることで、それぞれ何を意味しているか明確に分かる

現状の課題: 似たような単語があり、何を指しているか分からない。また整理されてなく、圧倒される印象を持つ

解決策: 類似項目を統合し、シングルページ構造に最適化。ステークホルダーが迷う時間を最小限に抑える構造へ刷新しました。

④ 創業者をはっきり区別させる

Before (現状)
[既存デザイン 77Spirits]
After (改善案)
[提案デザイン 77Spirits]

共同創業者を、それぞれ区別するということ
1人ずつ分けることで、名前・役職・仕事内容などが明確に理解できる

現状の課題: 共同創業者の2人が1枚の写真に収まっており、名前（性別を判別しにくい名前を想定）だけではどちらが誰か判別できないリスクがあった。

解決策: 写真を個別に分け、名前・役職・簡単な経歴を併記。取引先が事前に「どんな人物か」を正確に把握し、安心してビジネスを行えるよう配慮しました。

⑤ 問い合わせ方の統一

Before (現状)
[既存デザイン 77Spirits]
After (改善案)
[提案デザイン 77Spirits]

問い合わせ方法について
問い合わせ方法が複数あると、どれが窓口か分からない。1つにすることで迷いをなくすことができる。

現状の課題: 連絡手段（LinkedIn含む4つ）が複数提示され、選択の迷い（認知負荷）を生んでいた。

解決策: 選択肢を削り、シンプルな専用入力フォームのみに統合。何を記入すべきか迷わせない親切なレイアウトにしました。

⑥ フッターへのマップ統合

Before (現状)
[既存デザイン 77Spirits]
After (改善案)
[提案デザイン 77Spirits]

フッターと地図のデザイン
フッターに地図がなく、事務所で商談ができない。地図があれば迷うことなく事務所まで行くことができる

現状の課題: 住所のテキスト表記のみで、初めてオフィスを訪れる取引先が別タブで検索し直す手間があった（プロジェクト当時。現在は住所の記載も削除）

解決策: Googleマップを埋め込み、商談時のアクセスをスムーズ化。遅刻や迷うリスクをゼロにし、ビジネスの時間を尊重する設計にしました。

成果とデザイン案 (Final Design)

Before (現状)
[既存デザイン 77Spirits]
After (改善案)
[提案デザイン 77Spirits]

Proposal: 完成した77Spiritsのウェブサイトのデザイン

情報を適度に絞り込み、「伝えるべきこと」がストレートに伝わるUIへ。決められた条件下で正しく情報を整理・伝達することが、企業の信頼を生み、最終的な利益につながると確信しています。

今後の徹底事項

今回のテーマから、将来また同様の機会があれば、以下の点を徹底したいと考えています。

  • ▪ クライアントと商材の深い事前理解
  • ▪ プロトタイプ提出前の懸念事項の徹底確認
  • ▪ ユーザーに価値を提供し、クライアントに利益を生む提案力の向上