( PROJECT )

飲食店　公式サイト

URL

https://seatable2022.com/

クライアント

Sea Table様

担当範囲

ディレクション, デザイン, コーディング

使用ツール

Figma, Photoshop

制作期間

企画

：

1週間

一部撮影

：

1日

デザイン

：

2週間

コーディング

：

2週間半

( DETAIL )

概要

三重県伊勢市にある海鮮料理を提供する飲食店、「Sea Table様」の新規ホームページを作成しました。地元の漁師と提携しているため、新鮮な季節の魚を一番美味しい状態でお客さんに提供できることを強みとされています。

ターゲット

20代〜70代の幅広い年齢層の方。家族連れや観光客、地元の方々。

課題

ひとりでお店を営業しているため、お客様にお料理に対するこだわりを伝えきれていない。

目的

お料理に対するこだわりや想い、漁師さんについて知ってもらい、集客に繋げる。

情報設計

01 来店までの思考の流れを整理した設計

飲食店のWebサイトにおける来店判断である、「どんなお店か」「何が食べられるか」「行けるかどうか」という段階的な思考の順番を軸に情報設計を行いました。そのため、ユーザーが迷わず判断できるよう、来店可否に関わる主要情報をTOPページ内で完結させる構成としています。

02 世界観と読みやすさを両立した設計

TOPページではセクションの切り替えに海の写真を配置することで、スクロール時の単調さを避けること、お店の世界観を強めることを狙いとしています。全体的にテキスト量を抑えることで堅苦しい印象を与えず、情報がスムーズに目に入ってくるようにしました。

03 コンテンツごとの役割を明確にした設計

情報の優先順位についても、コンテンツごとに考え、整理しました。「わたしたちのこと」のページでは、お店の背景や想いを丁寧に伝えるため、文章を主軸とし、写真は世界観を補足する役割に留めています。一方、「お料理のこと」「お店のこと」のページでは、視覚的な情報が来店動機に直結すると考え、写真を大きく配置し、第一印象で魅力が伝わる設計としました。

デザイン

01 実店舗の空気感の再現

実店舗で感じる空気感をWeb上で再現するため、海や店内の様子、料理写真をバランスよく配置し、空間の広がりや体験の流れが自然に伝わる構成としました。また、余白を大きく取り、色味や写真のトーンを揃えることで、落ち着いた店内の雰囲気や居心地の良さを表現しています。

02 素材の良さを引き立てる表現

写真は彩度やコントラストをやや抑えることで、派手さよりも素材の良さや丁寧な印象を与えられるようにしています。また、背景色や見出しの文字サイズについても、強く主張する色味やサイズは避け、画面全体が穏やかに見えるようバランスを調整しています。

03 ゆとりを感じさせる余白設計

全体的に過度な演出をあえて避け、行間や余白にはあえてゆとりを持たせ、情報を詰め込みすぎないレイアウトにしました。視覚的な圧迫感を軽減すると同時に、「ゆっくり食事を楽しめそう」という店舗体験を疑似的に感じてもらうことを意図しています。