NEWS&topics

COLUMN 2022/02/01

とけあって混ざりあう~hug coffee Website story~

はじめまして。

hug coffeeさんのWebサイト（今ご覧いただいているこちらのサイトです）の制作をいたしました株式会社あんどぷらすです。

今回はこのhug coffeeさんのサイトができるまでの制作秘話を書いていきたいと思います。

Webサイトをつくる前に。

Webサイトを作りたい。でもまず何から聞いたらいいんだろう。と思ったら制作会社さんにとりあえずこんな情報を伝えるとスムーズかもしれません。（案件によって異なるため、あくまで参考程度ですが。。。）

・サイト設立orリニューアルの目的
・扱う商材やターゲット
・サイトで実現したいこと
・スケジュール
・予算

何をしたいのか。を明確にしてからお問い合わせいただけると私たちもより最適な形でご提案することができます。

Webサイトの作り方

あくまで一例ですがこのような手順で制作していきます。

hug coffeeを知る

hug coffeeさんからのご要望としては*ECサイトのリニューアル。

ですがECサイトとしてだけではなく、*コーポレートサイトも兼用できるサイトを。というご要望でした。

*ECサイト...ネットショップ、やオンラインショップのこと

*コーポレートサイト...自社サイトのこと、会社の顔となるサイト

あんどぷらすでは、Webサイトを制作する際にクライアントを知る・興味を持つということを大切にしています。

hug coffeeさんのサイト制作をする際もお店の雰囲気などからどんな人が来店するのかなどを知るために制作チームでお店に伺いました。

Webというデジタルでしか閲覧できないものだからこそ、制作する私たちが実物を見ることで伝えられることがあるのかなと思っています。

ワイヤーフレーム

打ち合わせの内容を元にデザイナーがワイヤーフレームというサイトの設計図のようなものを作っていきます。

どのページに何を置くのか、このボタンをクリックしたらこのページに飛ぶ、などサイトの全体構成を目で見てわかりやすくするものです。

デザインカンプ

クライアントにワイヤーを送付、OKが出たらデザイナーはワイヤーフレームを元にデザインカンプと呼ばれるいわゆるデザイン制作に入ります。

hug coffeeさんのサイト制作ではサイトイメージをすり合わせるため、何度も社内で打ち合わせをし、今のデザインが出来上がりました。

デザインする上で大事にしたかったことは、お店で感じた

・人が集まる空間
・あたたかさ
・hug coffeeらしさ

design Vol.01

お店に訪れた際のあたたかさやスタッフの皆さんの親しみやすさを表現したデザインがこちら。

このようにデザインカンプを出して、OKが出ると実装（コーディングをしてWebサイトにすること）となるのですが、こちらのデザインはイメージの食い違いがあり、改めて社内でデザインを練り直すことにしました。

通常、あんどぷらすがサイトを制作する際はいくつものパターンのデザインを作ることはほとんどないのです。

しかし、今回のhug coffeeさんのサイトでは全部で4つのパターンを制作しました。

それはなぜか。

このサイトを公開した2021年で10周年となるhug coffeeさんは、変化を求めそれを柔軟に受け入れ・楽しむ印象がありました。時代の変化とともにお店も人も一緒に成長していくような力を感じています。

両替町店・紺屋町店・南町店とそれぞれ全く違うテイストの店舗やロゴもそんな柔軟なhug coffeeさんを表しているようでした。

デザイン案Vol.1ではhug coffeeさんの「今」の良さを重視してしまったために、これからの「未来」のhug coffeeさんへの意識が足りなかったのかもしれません。

design Vol.02

hug coffeeさんが求めていたシンプル・かっこいい・スタイリッシュという要望を踏まえて制作した案がこちらです。

1案目よりもスタイリッシュでかっこいい雰囲気になりました。しかし、hug coffeeらしさがなくなってしまったのではないか？という意見もあり、再びデザインを見直すことにしました。

hug coffeeらしさとは何か。

社内で話し合ったところ、共通していたことは「人」が繋がる場であること。などキーワードをもとに3案目を制作しました。

design Vol.03

お店に自然と人が集まる様子が光に集まっているように見えたことから「黄色」を生かしたデザインに。

しかし、社内でも色のイメージに差があったことからさらにすり合わせをして具体的な色を決めていきました。

design Vol.04

そうして出来上がったのがこちらのサイトです！

コンセプト

「とけあって混ざりあう」

コーヒーを通じて人と人、カルチャーが集まるハグコーヒー。

互いの個性がとけあって混ざりあい、「ハグ」をつくりあげている。

「コーヒー」「ひと」「カルチャー」どれが欠けてもhug coffeeではなくなってしまう、そんな気がしています。
たくさんのものがとけあって混ざりあうことで今のhug coffeeがある。そしてこれから先もたくさんの個性が混ざりあうことで、変化し続ける。そんなhug coffeeさんをイメージしてコンセプトとしました。