Web自主制作
クラフトビールバルのHP

制作期間:2ヶ月
使用ツール:Photoshop/Visual Studio Code2
使用言語:HTML/CSS/jQuery/Javascript

制作概要

架空クライアントワークとして、観光地にあるクラフトビールを豊富に取り扱うクラフトビールバルのHPのリニューアルをしました。

サービス設定

観光地にあり、地元で作られた新鮮なご当地ビールを取り扱っている。 地元の人だけでなく観光客も入りやすいカジュアルで開かれた雰囲気のお店。

制作目的

観光客への周知
地元のバルというと一見入りづらい印象があるが、観光地にあるため誰でも入りやすく、旅の合間にひと息つける居心地のいい安らげる場所、かつ親しみを感じられるような開かれた場所であることを、 HPを通して感じてもらい、観光のついでに行ってみたい、寄り道してみようかなと思わせられるようなHPを目指す。

ターゲット設定

ペルソナ1 30代男性/会社員/既婚/子どもはいない
趣味はお酒を飲むこと、サーフィン、観光
最新の流行やファッションにアンテナを張っていて、ライフスタイルへの意識は高め ペルソナ2 40代女性/会社員/独身
趣味は観光、グルメ
休日は友人や一人で食べ歩きや観光をしている

情報設計

ここでしか飲めない、新鮮なクラフトビールがうりであるということをメインビジュアルで見せて、キャッチコピーで、観光客も入りやすいカジュアルな雰囲気であることを伝えます。NEWSセクションでは、営業日や最新情報を上げることで店への安心感、来店へのハードルを下げます。メニューセクションでは、下層ページへ飛びビールの詳しい銘柄を紹介することで、ビール好きの人の興味をそそっています。

デザインコンセプト

大勢でワイワイするような店ではなく、一人、または気心の知れた人と旅の合間にゆっくりするような場所であるというコンセプトから、
 ⇨あまりかっちりしすぎず、でもカジュアルすぎない
 ⇨居心地がいい、落ち着いている、親しみがある
 を意識して下記のように制作しました。
・フォントはゴシック体
・余白を多めに取る
・写真と文字の要素をずらして配置、筆記体の装飾を置きカジュアルな印象を演出 配色