Boulangerie Amande店舗サイト

「Boulangerie Amande（ブーランジェリーアマンド）」は、高級志向の海外風ベーカリーを想定して制作した、架空の店舗サイトです。 本サイトはポートフォリオ用に制作したもので、Webデザインのスキルやブランド表現力を伝えることを目的としています。

• Webデザイン
• コーディング
• 店舗サイト

店舗サイトへ

プロジェクト概要

• カテゴリー：店舗サイト
• 制作種別：自主制作
• 担当領域：構成企画、ロゴデザイン、サイト設計、ビジュアルデザイン、コーディング
• 使用ツール：Figma, HTML, CSS(Sass), JavaScript, git, Github
• 制作期間：1ヶ月
• リンク：店舗サイトはこちら

設計方針

情報設計

競合サイトの分析結果を参考にしながら、今回のサイト制作の目的を考慮して、ユーザーが店舗や商品の魅力を段階的に理解できるように、Topページの構成は以下のようにしました。

• ファーストビュー：印象的な店内ビジュアル写真を押し出し、お店のブランドイメージや雰囲気を印象強く伝える
• こだわり：ブランドコンセプトやこだわりを紹介し、共感を喚起
• メニュー：主力商品を視覚的に魅力的に見せ、購買意欲を促進
• 店舗情報：住所、営業時間、アクセス情報を記載し、来店へのハードルを下げる
• お知らせ：新商品や臨時休業日を載せ、関心を持ってもらう
• お問い合わせ

ビジュアル設計

配色

全体の配色は、高級感と洗練された印象を与えることを意識し、メインカラーにブラック（#1a1a1a）を採用しています。 ただし、モノトーンのみでは飲食店としての温かみや美味しさが伝わりにくいため、アクセントとして深みのあるワインレッドと柔らかさを加えるイエローを使用し、視覚的なリズムとブランドの印象づけを両立させました。 また、全体を通してWCAG基準に準拠したコントラスト比を保ち、視認性やアクセシビリティにも配慮した設計としています。

タイポグラフィー

高級感と洗練された印象を演出するために、本文には明朝系のNoto Serif JPを採用しました。 視認性を保ちつつ、ブランドイメージに合った落ち着いたトーンを表現しています。 フォントサイズは16pxを基準に、基本的には4の倍数単位で階層的に設計しています。 また、読みやすさを考慮し、行間（line-height）は1.5〜1.75の範囲で調整し、文字間隔（letter-spacing）は0.02emで細かく最適化しています。

実装・インタラクション等に関して

実装にあたっては、PCのみならずスマートフォンやタブレットでの閲覧も想定し、各デバイスでの表示崩れが起こらないように設計・調整を行っています。 単にレイアウトが収まるだけでなく、画面幅に応じて余白やコンテンツの幅、フォントサイズといった要素を適切に変化させることで、どの環境で見ても快適に閲覧できるユーザー体験を担保しています。

アニメーションに関しては、ユーザーが読み進めるのを妨げないよう、必要最低限の表現にとどめ、主にフェードインを中心とした自然な動きのみを採用しました。 これによって、ページの表示速度や情報の可視性を損なうことなく、落ち着いた雰囲気の中でスムーズな体験を実現しています。

また、リンクやボタンなどのインタラクティブな要素については、ホバー時に微細なアニメーションを加えることで、ユーザーがその要素がクリック可能であることを直感的に理解できるよう工夫しています。 視覚的なフィードバックを通じて操作性を高めるとともに、UIのアクセシビリティ向上にも寄与しています。

アウトプット

ロゴ

本ロゴは「上質で伝統あるフレンチベーカリー」というブランドコンセプトを視覚化することを目的に設計しました。 安定感のあるサンセリフ体を中心に、補助的な細身のフォントを組み合わせることで、視認性と上品さのバランスを意識しています。 左右のローレルは職人技や伝統の象徴として配置し、構図はシンメトリーにすることで信頼感と洗練された印象を与えるようにしました。

Webデザイン

Boulangerie Amandeの店舗サイトはこちら

フランスのパン作りの芸術を提供する本格ベーカリー「Boulangerie Amande」