navメニューボタン

古民家ベーカリー

「まほーのパン屋さん」様 公式HP

モックアップ
概要
滋賀県守山市の古民家で営まれている、まほーのパン屋さん様の公式サイトを新規で制作しました。
URL:https://maho-no-panyasan.com
制作範囲・期間
企画:2週間
WF・デザイン:2週間
コーディング:2週間
使用ツール
Illustrator、Photoshop、VScode
じっくり見るボタン サッと見るボタン
セクション区切り

process

セクション区切り
  • 課題

    OPENしたばかりでお店の存在を知っている人が少ない。情報発信がInstagramのみでお店の雰囲気や店主の想いがお客様に十分に伝わっていない。営業日の他に臨時休業日もあるため、お知らせできるようにしたい。

  • 目的

    WEBサイト制作により、顧客獲得を目指す。サイト構築の上で店内外の雰囲気や店主の想いがしっかりと伝わるような作りにする。臨時休業日をお知らせできるよう、営業カレンダーを設置する。

  • ターゲット

    近隣住民。またInstagram非利用者。近隣住民にはご年配の方も多く、Instagramを利用されていない方も多いため。

  • コンセプト

    「店主の想いあふれるどこか懐かしくて温かいベーカリー」

  • 情報設計

    サイトコンセプトより「店主の想い」、また課題となっていたお店の雰囲気を知ってもらうために「店舗内外基本情報」を設置、 運営の主としているInstagramにもつながる設計にしている。TOPでは「店主の想い」「商品紹介」「営業カレンダー」「アクセス」の順に配置し、お店についてしっかりと理解や興味を深めたのち、基本情報にアクセスできるようにしている。

  • デザイン

    クライアントの希望するイメージ「親しみやすさ」「温かみ」「清潔感」「快活さ」、かつサイトコンセプトの「どこか懐かしくて温かい」をテーマに表現。
    PAGE TOP画面には、パンのイラストを用い、遊び心のある作りにしている。

    配色

    ベース1
    #FAFAEC

    ベース2
    #FCFCFC

    メイン
    #FFC457

    アクセント
    #9C774C

    フォント
    #333333

    メインカラーはロゴの背景色(#F28907)と近しく、懐かしさや温かみを表せるオレンジを採用。ベースカラーは、メインカラーと合いつつ温かみのあるベージュ色と、清潔感のある白を配置。アクセントカラーはサイト全体がビビッドすぎないよう、締め色で落ち着きあるブラウンを選択。

    フォント

    本文やリードには親しみやすさもあり可読性の高い「Noto sans JP」を採用。コンテンツ名は温かみや懐かしさを与えられる手書き文字「Homemade apple」を採用した。FVは、ロゴに使用されている「にくまるフォント」にトンマナが合うように、同じ丸型の「Zen maru Gothic」を採用した。

セクション区切り

design

  • TOP

    HPのTOPページ(PC版)
    HPのTOPページ(SP版)
  • About

    HPのAboutページ(PC版)
    HPのAboutページ(SP版)
  • Item

    HPのItemページ(PC版)
    HPのItemページ(SP版)
  • Access

    HPのAccessページ(PC版)
    HPのAccessページ(SP版)
セクション区切り

other works

ページトップボタン