- 自主制作
- 架空企業
株式会社 木と日々
架空の住宅会社のWebサイト（複数ページ）
家づくりの不安ごとにページを分けて情報を整理し、どのページからも相談へ進める構成に重点を置いて制作しました。
- Next.js
- React
- TypeScript
Case Study
MELLOW COFFEE
架空のカフェのランディングページ
- 自主制作
- 架空店舗
子ども連れでも行きやすいと感じてもらえる情報の順番と、スマートフォンでも見やすい表示に重点を置いて制作しました。
この作品は、架空の店舗を想定した自主制作です。実在の企業・店舗や受託案件ではありません。
Overview
作品概要
この作品は、架空の店舗を想定した自主制作です。実在の企業・店舗や受託案件ではありません。
- 区分
- 自主制作（架空店舗）
- 種別
- 架空のカフェのランディングページ
- 構成
- HERO（最初の画面） / CONCEPT（コンセプト） / FOR FAMILY（子ども連れ向けの設備） / MENU（メニュー） / SPACE（店内） / FAQ（よくある質問） / ACCESS（アクセス） / CTA（来店の呼びかけ）
- 使用技術
- HTML / CSS / JavaScript
- ※ 店舗の住所・営業時間・設備などは、すべて架空の設定です。
Background
制作の背景と目的
子育て中の保護者に「ここなら子どもと一緒に行けそう」と感じてもらい、実際にお店へ来てもらうことを目的にしたランディングページです。
子育ての合間にひと息ついてもらい、同じように子育てをしている人がいることをリアルな空間で感じてもらう。そのための来店のきっかけをつくるサイトとして設計しました。
コンセプトは「子どもと一緒に、ひと息つける場所。」。「子連れOK」だけでなく、親自身が心地よく過ごせるカフェとして位置づけました。
Target
想定したターゲットと課題
乳幼児〜小さな子どもがいる保護者を想定しました。「カフェに行きたいけれど、ベビーカーや泣き声が気になる」という人を想定ターゲットとしています。
想定した不安
- ベビーカーで入りづらい
- 授乳やおむつ替えができるか心配
- 子どもが泣くと周囲が気になる
- 小さな子どもが食べられる物があるか分からない
- 店内の清潔感が分からない
Design
情報設計・UIの工夫
- 来店から逆算したボタンの設計（CTA）
- 行動を促すボタン（CTA）のうち、メインを「お店へのアクセス」（来店したい人をアクセス情報へ案内）、サブを「お店について」（初めて知った人をコンセプトへ案内）としました。
- 心理の変化に沿ったセクション順
- 「子どもと行けるんだ」（HERO）→「分かってくれてる」（CONCEPT）→「設備も整っていて安心」（FOR FAMILY）→「ちゃんと美味しそう」（MENU）→「綺麗で落ち着けそう」（SPACE）→「細かな疑問も解消」（FAQ）→「ここなら行ける」（ACCESS）→「今度行ってみよう」（CTA）という気持ちの変化に合わせて、情報の順番を決めました。
- 来店判断に必要な情報だけを整理
- 設備（ベビーカー・授乳・おむつ替え・キッズチェア）、空間、メニュー、アクセス（駐車場・段差を含む）、よくある質問に絞り、全部を載せるのではなく判断に必要な情報を見せる構成にしました。
- 必要な体験からUIを選ぶ
- スマートフォンで迷わず移動できるハンバーガーメニュー、情報を詰め込みすぎないためのメニュー詳細モーダル、来店前の不安を必要な分だけ確認できるFAQアコーディオンを、ユーザー体験から逆算して選びました。
- 画面幅に合わせて組み替えるレスポンシブ
- PCでは写真を活かした横方向のレイアウト、スマートフォンでは縦積み・2列化・ハンバーガーメニューで再構成する方針とし、単純な縮小にしないことを意識しました。
Development
実装の工夫
- HTML / CSS / JavaScript による1ページ構成
- フレームワークを使わず、設計したサイト構成どおりに HERO から CTA までの8セクションを実装しました。
- JavaScript で3つのUIを実装
- スマートフォン用メニューの開閉（開いているか閉じているかが、画面読み上げソフトにも伝わるようにする。aria-expanded）、メニュー詳細のモーダル表示、FAQの開閉を実装しました。
- 不安に答える掲載情報
- FOR FAMILY に設備5項目（ベビーカー・授乳スペース・おむつ交換スペース・キッズチェア・広めの通路）を、ACCESS に駐車場と入口の段差の有無を掲載しました（いずれも架空店舗としての設定です）。
- レスポンシブ対応
- 画面幅 768px を境に、レイアウトとナビゲーションをスマートフォン向けに切り替えています。
Reflection
学びと今後の課題
- サイト制作はHTMLから始まるわけではない
- 目的・ターゲット・課題を先に整理すると、必要な情報とCTAが決めやすくなる。
- 情報量より情報設計
- 全部を載せるのではなく、来店判断に必要な情報を整理して見せる。
- セクションには役割がある
- CONCEPT は共感、FOR FAMILY は安心、ACCESS は来店など、各セクションに目的を持たせる。
- ワイヤーフレーム（画面の設計図）は、見た目より骨組み
- 色・フォント・装飾の前に、情報の順番・配置・導線を決める。
Links
リンク
公開サイトを見る（新しいタブで開きます）
https://mellow-coffee.pages.dev
More Projects