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

ナターシャからは「デザインの優れたWebサイト」の提案を求められました。同時に、私は「企業がデザインを依頼する際、どのような意図を持っているのか」を考えました。デザインを依頼するということは、クライアントがデザイナーのサービスに対して対価を支払うことを意味します。そのため、単に「優れたデザインセンスを持つもの」を作るだけでは、クライアントにとって意味がない、と考えました。

クライアントが本当に求めているのは、単なる優れたデザインセンスではありません。サービスにお金を払っている以上、提案したデザインが自社に以前よりも大きな利益をもたらすことを望んでいるはずです。つまり、デザイナーとしての私に求められていたのは、既存のサイトを分析した上で、デザインを通じてクライアントの利益向上に貢献することでした。

もちろん、雇われたデザイナーとして、製品自体の品質を向上させることはできませんし、販売代理店として営業活動を行うこともできません。では、どうやってクライアントの利益を増やすことができるでしょうか？それは、クライアントの製品が持つブランド価値を正確に伝えることです。どれだけ美しいデザイン提案であっても、クライアントの期待に応えられなければ価値はありません。逆に、たとえデザインがそれほど洗練されていなくても、その提案がクライアントの利益に貢献できるのであれば、期待に応えることができると信じています。これらの点を常に念頭に置きながら、デザインを制作しました。

77 SpiritsのWebサイトを見たときに、最初に考えたのは「誰がこのサイトにアクセスするのか」ということでした。また、77 Spiritsが消費者に直接ラム酒を販売するB2C企業ではなく、B2B企業であることにも気づきました。具体的には、このWebサイトは、酒類卸売業者、アルコール飲料メーカー、そして（ビジネスを進める上で不可欠な信頼関係を築くための）銀行という、3つの主要なターゲットオーディエンスを念頭に置いて設計されるべきだと結論づけました。

これら3つの業界とのビジネス取引において最も重要となるのは「信頼」です。当然、77 Spirits自身もビジネスにおいて信頼が最優先であることを理解しているはずです。例えば、信頼を築く要素として認定証や受賞歴を掲載することを考えていたかもしれません。それも一つの有効なアプローチですが、同時に「77 Spiritsが想定している信頼の示し方」と「相手が期待する信頼の示し方」が異なる可能性があることも理解しておく必要があります。この両者が一致しなければ、それは単なる自己満足的な発想にすぎず、相手の信頼や期待に本当に応えているとは言えません。

また、クライアントは、デザインの依頼をする際、具体的に期待していることがあります。それは、何かというと、ブランド価値の向上と企業の信頼性向上に焦点を当てました。

まずは、ブランド価値の向上について、です。最初に77 Spiritsの既存のWebサイトを見た際、必要のない情報が含まれている一方で、ビジネスパートナーが本当に確認したい詳細情報が不足していることに気づきました。

例えば、77 Spiritsが自社ブランドにどれほど自信を持っていたとしても、それを証明するためには第3者の声が必要です。その方法として、認定証（Certificate）の掲載は、1つの手段にはなり得るとは思います。取得するまで多くの時間と労力を費やしたと思いますし、価値のあるものとは思います。しかし、Webサイトの訪問者がその認定証に価値を感じているかは、また別です。つまり、その価値を証明する場合、誰が見ても納得してもらえるものの方がベターです。

Current UI: 第三者機関からの認定証
価値はあると思うが、どれだけその価値があるか見ている人に伝わるかは不明

Proposal: 実際に飲んだ人からの推薦の声
利害関係のない人からの推薦の声は、商材の価値を高める効果がある

では、どのようなものが認定証の代替になるかというと、それは「お客様の声」です。お客様という利害関係のない人間から高い評価を得ているのであれば、1度も飲んだことがない人も、試しに飲んでみようと考えるものです。そのためには、モニターを募ってウェブサイトに掲載の許可を頂く必要があるかもしれません。しかし、同業者しか知らない認定証よりも、はるかに高い信頼性と、その信頼を担保する力はあると思います。以上の考えから、認定証を消して、「お客様の声」を載せる方がベターだと判断しました。

デザイン面では、ラム酒のイメージに調和する色彩を中心としたWebデザインを提案することに焦点を当てました。77 Spiritsの元々の計画では、セクションごとに黒とカラシ色の背景色を交互に使用することになっていました。

黒色を使うことについては、私も良いアイディアだと思います。その理由として、黒色は、信頼だけでなく、上質を表すことのできる色だからです。特に、夜に自宅でラム酒を飲みながら優雅な時間を過ごすということを表す上でも、そのイメージには合っているのではないか、と思います。また、お酒は夜に飲むというイメージはありますし、夜は言うまでもなく黒色を表す色ですから、その点においても背景色に黒色を使うのは良いアイディアだと思います。

その反面、もう1つの背景色のカラシ色で、ラム酒に近い色かもしれませんが、背景色の配色としては少し濃い気がします。黒色を軸にする場合、黒色は濃い色ですから、セットで交互に使うのであれば、もう1つの色は薄めの色の方が、抑揚ができるという点においてベターな選択だと思います。そのため、もう1つの背景色はカラシ色という濃い色ではなく、薄めで近い色にした方がいいと考えました。そして、カラシ色に変わるセットとなる背景色として、私はクリーム色を採用しました

ナビゲーションリスト

まず、ユーザビリティやインタラクション関係で気づいたことは、ナビゲーションリスト（メニュー項目）が非常に多いことでした。ヘッダーナビゲーションを一目でわかりやすくしたいという意図は理解できるものの、情報量が多すぎるために整理されていない印象を受けました。

例えば、「Our Rums（製品情報）」と「ブランド（Brands）」の違いが一目では分かりづらい状態でした。同様に、「Values（価値観）」と「Vision（ビジョン）」がそれぞれ何を指しているのかを瞬時に理解するのは困難です。ナターシャは「読めばそれぞれ理解できる」と言うかもしれません。しかし、大切なことは、ステークホルダーが一目で理解でき、迷うことなく、無駄に考える時間を最小限に抑えられる「読者第一」のサイトにすることです。この考え方に基づき、「読めばわかる」という前提を捨て、取引先の負担や混乱を徹底的に取り除くユーザーフレンドリーな構造を作ることが最善であると判断しました。

Current UI: ヘッダーに用意された多くのグローバルナビゲーション
ブランドが3つもあるため、一目見て違いが分からない

Proposal: 整理されたグローバルナビゲーション
既存のウェブサイトより、ユーザーを迷わせない仕様にになっている

そこで、ナビゲーションリストにおいては、類似した項目を1つにまとめた方がベターだと考えました。特に、77 Spiritsはトップページのみで構成されていることと、トップページのみを考えること、また追加のページを作る必要は無し、というニーズに沿うのであれば、グローバルナビゲーションにある似たような項目を消した上で、必要な情報に適切に移動できると考えました。

創業者セクション

次に、「Founders（創業者）」セクションです。創業者セクションも、極めて重要なセクションです。ビジネスパートナーは、77 Spiritsをどのような人物が運営しているのかに強い関心を持っています。既存のサイトでは、カールとナターシャが1枚の共同写真の中に写っていました。

Current UI: ファーストネーム次第では、どっちがどっちか分からない

カールとナターシャであれば、どちらが男性で、どちらが女性か、ということは簡単に分かります。しかし、名前だけで簡単に判断できない場合もあります。例えば、ステーシーとアンナという組み合わせの場合です。アンナは女性のみが使いますが、ステーシーという名前は男性でも名付けられる場合があります。今回の場合、仮にカールではなく、ステーシーと名付けられた場合、どちらがステーシーなのかが分かりません。同じ例としては、マイケルとチャーリーの場合、マイケルはともかく女性でもチャーリーという愛称で呼ばれることもあるため、どちらがチャーリーなのか分かりません。最後に、サムやアレックスは男性・女性の両方で広く使われるため、余計にどちらが男性・女性なのか分からない、と言わざるを得ません。

男性	女性
ステーシー？	アンナ
デビッド	チャーリー?
サム?	アレックス?

ファーストネーム: 黒色の太字は性別に関係なく使われる
青色・赤色は、一方の性別で主に使われるが、もう一方でも名付けられることがあるため、紛らわしいことがある

Proposal: はっきり分けた上で名前・役職・簡単な自己紹介があると、整った状態になり、各々の人となりも分かる

そうではなく、カールとナターシャを個別の写真に分け、それぞれの名前、簡単な経歴を並べて掲載すべきです。これにより、二人の個性やキャリアの背景を知ることができ、ビジネスパートナーがより安心して取引を進めやすくなります。

お問い合わせセクション

また、「Contact Us（お問い合わせ）」セクションにも改善を加えました。

WebサイトではLinkedInを含む4つの選択肢が提示されていましたが、これではユーザーは「どれを選ぶべきなのか」が分かりません。「選ぶことができる」という見方もできますが、余計に考える時間を与えているため、Webサイトに来た人の時間を奪う形になっています。この点を考慮し、Contact Usセクションにはシンプルな問い合わせフォームのみを表示するのがベストであると判断しました。

Current UI: 連絡手段が複数あり、どれを使うべきか迷う

Proposal: メールのみにし、必要事項を予め示すことでユーザーの迷いを消す

また、メールアドレスをただ記載するのではなく、名前や返信用メールアドレスなど、最低限必要な入力欄をあらかじめフォームとして用意する方が親切です。そうすることで、何を入力するべきなのか、というのが分かるため、余計なことを考えることなく、問い合わせをすることができます。

フッター

最後に、フッターにもいくつかの変更を加えました。フッターを確認した際、取引先が77 Spiritsのオフィスで商談を行う可能性を考えました。既存のフッターには住所が記載されていましたが(2026年5月現在では削除)、それだけでは明確な道順や目印が分かりません。特に初めて77 Spiritsを訪れる人にとって、アクセスの方法が一目で分からないのは非常に不便です。住所をコピー＆ペーストして、別のタブでマップを検索しなければならないからです。

Proposal: 住所だけでなく地図も付けることで、77 Spiritsの事務所に行く人が迷うリスクを抑えることができる。
迷ったせいで遅刻する可能性も限りなく0になるため、2人にとっても、時間を奪われる可能性が低くなる。

この手間を防ぐため、あらかじめWebサイト内にマップを埋め込んでおくことで、取引先の負担をなくし、オフィスへのアクセス方法を一目で明確にできるようにしました。そうすることで、取引先の担当者が、初めて77 Spiritsを訪ねる場合でも、迷う可能性を極力低くできたのではないか、と思います。

完成したデザイン案

こうした考えの元で、作っていき完成したデザインは以下のようになります（下の画像はクリックできます）。

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

大きな違いとしては、伝える情報を適度に絞っている、ということです。「私たちが提供している商品はどれだけ素晴らしいか」を消費者、取引先に知ってもらうために、伝えるべきことを伝えることは大事なことです。その反面、1度に、色んなことを知ってもらおうと思っても、必ずしも相手が全てを1度で知ってもらえるとは限りません。伝える情報量が多すぎるせいで、結局のところ、何を伝えたかったのか、ということが分からなければ、それはウェブサイトとしての役割を果たしていません。むしろ情報が多いせいで、整理できていない印象すら感じることもあります。UIなどのデザインもそうですが、決められた条件下の中で正しく情報を盛り込み、伝えることは、信頼を作る上で必要なことです。魅力的に伝えつつ信頼ができれば、それは会社の利益にもつながると考えます。

Vol.１: 自分からコンタクトを取ること

このプロジェクトを通じて気づいたことは2つあります。1つは、デザインの作業を進める前に、クライアントが「具体的にどのようにデザインを改善したいと考えているのか」をもっと深く掘り下げるべきだったということです。プロジェクトの準備段階で、共同創業者であるナターシャから、会社の概要や展開しているビジネスについての説明を受けました。それに基づいて、既存のサイトよりも優れたWebデザインを提案してほしいと依頼されました。個人的には、事前準備をもっと念入りに行っていれば、よりクオリティの高い提案ができたと考えています。

ポール（このプロジェクトの評価を担当した講師）が、数週間前の授業でナターシャについて話していたため、事前にポールの協力を得て、彼女の人柄やビジネスについて詳しく尋ねることも可能でした。それを知っていれば、事前にナターシャのビジネスについて深くリサーチしておくことができました。さらに、その準備を活かして、彼女が具体的にデザインのどこをどのように改善したいのか、現状の何に不満を感じているのかについて、より踏み込んだ質問をすることができたはずです。そうすることで、表面的な不満だけでなく、彼女自身も気づいていなかった潜在的なストレスやニーズ（隠れた要望）を特定することができたでしょう。

もっとも、全てのプロジェクトでそれができるとは限りません。プロジェクトマネージャーを通さないといけないことがあると思います。また、仮に直接尋ねることができたとしても、クライアントも忙しいものです。返信は相手の時間を奪う行為ということを意識すべきです。相手の性格や考えを見抜いた上で、1度に尋ねて問題ない質問数とクライアントとやりとりする回数を見極めるべきです。

何が最も重要で、ナターシャが具体的に何に不満を感じているのかを事前に深く理解できていれば、彼女を真に満足させるWebデザインを最初から提案できたはずです。彼女が教室に姿を見せたのは、会社の概要を説明するための最初の講義と、その1ヶ月後に課題を提出するための講義の計2回だけでした。それでも、本人と連絡をとって質問をするといったことをするべきだったと思います。

Vol.２: 今回以上に高いことを要求された場合を考えること

また、今回は、77 Spiritsのデザイン提案で、ウェブサイトもトップページのみということ、また追加ページのデザインの提案をする必要なし、ということでしたので、トップページのみを考えれば、それで問題はありませんでした。

しかし、これからウェブデザインの提案を依頼された際、トップページしかないけど、それに加えて別ページのデザインの提案をしてほしいと言われることもあると思います。その際、今回、削除した項目もウェブサイトに含める必要が出てくると思います。例えば、「認定証」を今回消しましたが、載せることで権威づけをさせることもできますし、ブランド力を高める方法として有効なものだと思います。ですので、そういうものがあることをどのように見せるか、ということを考える必要があります。ナビゲーションバーに表示するというのも1つの方法です。そして、ただ「お客様の声」と「認定証」と文字だけで見せるのではなく、それぞれ写真や画像を使って視覚的にアピールすることで、よりクリック率を上げる方法を取るのも1つの方法だと思います。

Example: RBC銀行のグローバルナビゲーションサイトから。
最も多くのお客様がお金を払ってくれる商材、または最も大きく利益をもたらしてくれる商材を強調する時に、
写真を使って目を惹く形で誘導する

例えば、RBC銀行のように、グローバルナビゲーションに、ただ文字を羅列するだけでなく、特に強調したい、ユーザーを誘導させたいページがあるなら、それはどこか、またどのように見せて誘導させるのか、ということを考えることは大事なことです。特に、RBC銀行の例でいくと、銀行口座の開設を促すことは、銀行の利益につながります。口座開設を促すリンク先とポジティブな印象のある写真を強調することで、アクセスしたくなるように促すことは、会社に利益をもたらす上で、デザイナーとして非常に重要なことです。

今回は、トップページのみのデザイン提案で、それ以上を望んでいる訳ではありませんでした。ただし、だからそれで良いと思うのではなく、クライアント様からの追加のニーズ、難易度の高いニーズに応えるためには、どうすればいいのか、ということを日々考え、また自分なりの引き出しを増やしていくことは、今後、デザイナーとしてキャリアを重ねていく上で、重要なことだと、今回のプロジェクトを通じて感じました。

また、できる限り商材や会社のことを理解することも大事なことだと思います。In-houseのデザイナーはもちろんのこと、Webエージェンシーの会社で働く場合でも、クライアントのことを理解することは、とても大切なことです。クライアントが望んでいないことを無理にする必要はありませんが、どのような商材を扱っているのか、どのようなものが最も利益を生んでいるのか、ということを理解することは、実は潜在的なニーズの掘り起こしができる可能性はあります。それによってクライアントですら気づいていない提案ができる可能性もあります。そうしたことを常に考えることは、新たなお客様の創出や取引先と信頼関係を強くできるだけでなく、所属先の会社にも莫大な利益をもたらすことにつながると思います。