キウンクエ Website

type : Website
Creation Date : 2024.9
url : https//chiunque.com/

サイト画像

石川町の裏路地にひっそり佇むバー「キウンクエ」様のHP(架空)を制作させていただきました。
敷居が高く入りずらいというバーのイメージを持たせないよう茶色をメインに使用し、カジュアルで落ち着いたお店の雰囲気が伝えられるサイトデザインを目指しました。

ターゲット
お店近隣に住んでいるもしくは働いており(生活圏内)、 日々の忙しさの中にホッと一息付ける場所を探している30~40代男女
目的
求めている客層へお店のイメージを伝え、来店してもらうため
バーへの入りづらさをなくし信頼感をupさせるため
情報設計
Topページはこのお店を知らない人が確認したい情報を順に案内しています。メインビジュアルでは写真の上に店の場所を掲載し、サイトを訪れて最初に確認できるようにしています。

このお店は不定休で、お店の基本情報はInstagramにて公開されるので最初のセクションに持ってきました。また、ボタンは汎用的に使用できるように設定していますが、Instagramのボタンはサイト外リンクなので色を反転させて他とは違うことを示しています。

ドリンクセクションはお店のこだわりを画像と文字で伝えています。画像の下に最低料金を示すことで、価格帯の予想をしやすくしメニューボタンへ誘導できる導線にしました。フードはドリンクと似たデザインにしつつ、スタイリッシュさを表現するためスライドショーを組み込みました。

アクセスは全ての基本情報が分かりやすく、視覚的にも確認できるようにアイコンを使用しています。また、お店の入り口が分かりづらいので比較的大きな画像を挿入しています。

Aboutページは2,3回来店している方向けに、店主の想いやこだわりを画像とテキストで表現しました。
デザイン

配色は茶色をメインに使用することでカフェのような優しい雰囲気のサイトを目指しました。サイト全体を柔らかい印象にするため、優しく自然な印象を与えられる丸ゴシックのフォントを使用しています。また、見出しに太いフォントを使用しないこと、行間を広めに設定することで、上品な繊細さを表現しました。

カラーイメージ
制作時間
ワイヤーフレーム・デザイン : 17時間
コーディング : 61時間
使用ツール
Photoshop / Figma / Visual Studio Code