架空サイト制作

｜制作概要｜

　制 作 時 間 ：1ヶ月

　制 作 範 囲 ：

　・サービスコンセプト設計
　・ターゲット・ペルソナ設計
　・コンテンツ構成検討
　・ワイヤーフレーム作成
　・デザインカンプ作成
　・実装（HTML/CSS/JQuery）
　・ローカル環境での画面表示・動作確認

　使用ソフト：Photoshop、Visual Studio Code（VSCode）

_____________________________________________________

｜目次｜

　1. 要件

　2. 工夫したところ

　3. 制作物

_____________________________________________________

１.要件

□ 目的

カフェ・ギャラリー・ゲストハウスを併設した架空ショップ「quel」の公式LPを制作する。
ショップで実施しているイベントやワークショップ情報を発信し、ゲストハウスの予約ページおよび問い合わせへの導線を設けることで、集客および販促につなげることを目的とする。

□ コンセプト

いつもの暮らしに、ひとさじのときめきを。

店名の「quel」は、
日常の中にささやかな癒やしやときめきを「加える」
という想いを込めて名付けました。

カフェ・ギャラリー・ゲストハウスを通して、
忙しい毎日の中でもふと立ち止まり、
心がほどける時間を提供することを目指しています。

□ ターゲット
・20代後半〜40代の女性
・仕事とプライベートのどちらも大切にしたい
・丁寧な暮らしやライフスタイルに関心がある
・日常の中に「癒やし」や「ときめき」を求めている

□ 内容

・カフェ紹介
・ギャラリー紹介（雑貨販売、ワークショップ、イベント情報）

・ゲストハウス紹介（宿泊予約ページへのリンク）
・ニュース（ワークショップ・イベント開催情報、営業情報など）
・アクセス
・問い合わせ

□ 使用素材
・メインビジュアルおよび各セクションに写真素材を使用
・サイト全体のトーンを統一した画像素材を選定
・ロゴは世界観に合わせて手書きで制作し、デジタルデータ化して使用

□ 指定のフォント
・和文：游ゴシック（システムフォント）
・英文：Brandon Grotesque
　※ Adobe Fonts（Typekit）を使用

□ 指定の配色

メインカラー
・#E4E0DD　（サイト全体の背景色）

テキストカラー
・#333333（本文・見出し・ボーダー・ボタン枠）

サブカラー
・#FFFFFF　（メインビジュアル上のテキスト、背景透過要素）

アクセント・装飾
・rgba(255, 255, 255, 0.5)　（ヘッダー・フッター背景）
・rgba(51, 51, 51, 0.3)　（区切り線、装飾線）
・rgba(51, 51, 51, 0.8)　（ボタン hover 時背景）

2. 工夫したところ

【デザイン】

・サイト全体は、ナチュラルで落ち着いたトーンを意識し、
　背景色にはやわらかいベージュ系を使用することで、
「日常に寄り添う居心地の良さ」を表現しました。

・カフェ・ギャラリー・ゲストハウスそれぞれの魅力が伝わるよう、
　写真を主役にした余白のあるレイアウトを採用し、
　視覚的に世界観を感じられる構成にしています。

・英字見出しや細い装飾線を取り入れることで、
　シンプルながらも洗練された印象になるようデザインしました。

・ロゴは既存フォントを使用せず、
　ショップのコンセプトに合わせて手書きで制作し、
　温かみのある雰囲気とサイト全体のトーンに統一感を持たせています。

【情報設計】

・ユーザーが迷わず内容を理解できるよう、
「Cafe → Gallery → GuestHouse → News → Access / Contact」
という流れで構成し、実際の来店・利用シーンを想定した導線設計を行いました。

・ギャラリー内のコンテンツは
「雑貨」「ワークショップ」「イベント」と分類し、
　提供している体験の種類がひと目で分かる構成にしています。

・各セクションでは、抽象的な説明に偏らないよう、
　営業時間・内容・利用イメージなどを具体的に記載し、
　訪問後の体験が想像しやすい文章表現を意識しました。

・最終的に「問い合わせ」や「宿泊予約」へ自然につながるよう、
　CTA（ボタン）を要所に配置しています。

　3. 制作物
■PCレイアウト

■スマホレイアウト