The Bar Mariage Webサイト制作│案件

メインビジュアル

トップページ

下層ページ

SPサイト

制作内容：

The Bar Mariage様のWebサイト制作をしました。
https://thebarmariage.studio.site/

作品のコンセプトやポイント：

来店を検討している段階で、
「このお店で過ごす時間」を直感的に感じてもらうことを目的に設計したWebサイトです。

The Bar Mariageは新規オープンの店舗であり、
Webサイトには「店舗としての信頼感」「ブランドの世界観」「来店前の心理的ハードルを下げる役割」が求められていました。

参考サイトは共有いただいていましたが、
競合調査を行う中で、バー業態のWebサイトは
クラシックでレスポンシブ対応が弱いものが多いという課題が見えてきました。
そこで、Webのトレンドは押さえつつも、今どきすぎない落ち着いた佇まいを意識し、

新規店舗としての鮮度と長く使える安心感の両立を目指しています。

クライアント様が掲載したい情報を整理し、
ファーストビューからフッターまで一貫した流れで伝わる情報設計を行いました。

来店前に不安を感じやすい導線については特に配慮し、
店舗が空中階（4F）にあることから、
アクセス情報では入口写真に
「エレベーターより4Fへおあがりください」という案内を明記。
また、住所検索の手間を省くためGoogleマップを埋め込み、
初めて訪れる方でも迷いにくい設計としています。

内装の特徴（白い砂浜、ハンキングチェア）や
カクテルのビジュアルの魅力を最大限に伝えるため、
ファーストビューには写真を贅沢に使用し、
お店の雰囲気を直感的に伝える構成としました。

ロゴ制作時に作成したムードボードをもとに、

色使いやトーンをWebサイトにも落とし込み、
ブランドとしての一貫性を重視しています。

「満ちる心、寄り添う空間」というコンセプトをWeb上でも体感できるよう、
円形モチーフがゆっくり回転するアニメーションや
テキストと画像が横に流れる穏やかな演出、
フェードイン・フェードアウトを中心とした控えめな動きなど、
サイト全体で時間がゆったり流れる感覚を統一しました。

実装にはSTUDIOを使用し、
表現上の制約がある中でも世界観を損なわない構成を工夫しています。
また、Newsはクライアント様側で更新できるようCMSを導入し、
運用しやすさにも配慮しました。

クライアントの公式リンク：

制作年月日：2025/9~12

制作時間：デザイン（TOP、下層4P）40h、STUDIO実装（TOP、下層4P） 36h

使用ソフト：Illustrator、Photoshop、Figma、STUDIO

制作領域：情報設計、ワイヤーフレーム、ライティング、デザイン、実装（STUDIO）、公開作業

製作期間の目安：打ち合わせから3か月程度

制作費の目安：100,000～