Cafeモバイルサイトデザイン

mobilesite | 学校課題 | 2021 

概要

渋谷のカフェ「Forest Cafe」のスマートフォン用サイトを制作。
店舗の落ち着いた雰囲気やドリンクの魅力を視覚的に伝えることを意識し、ブランディング重視のデザインと直感的な操作性を両立しました。

目的

店舗の雰囲気や世界観をスマートフォン上でもしっかり伝えつつ、ユーザーがスムーズに情報へアクセスできることを目的に制作。カフェを探しているユーザーがスマホで訪問した際に、メニューやアクセス・営業時間といった必要な情報に迷わずたどり着ける構成を意識しました。

ターゲット

都内でおしゃれなカフェを探している20〜40代の女性層です。SNS映えや雰囲気のよさを重視するユーザーが多く、カフェ巡りを趣味とする人や、デート・女子会などの場として利用を検討している層を想定しています。ストレスなく得られる構成と導線設計を心がけました。

情報設計

スマートフォンから訪れるユーザーが、直感的に操作でき、必要な情報へ迷わずたどり着けることを重視して情報設計を行いました。
最初に表示されるファーストビューでは店舗の雰囲気が伝わる写真を大きく使用し、カフェの世界観を印象づけています。その上で、ハンバーガーメニューから「メニュー」「店舗情報」などの各ページにアクセスできるようにし、ユーザーが知りたい情報(メニュー内容や地図、営業時間)へスムーズに到達できる導線を構築しました。

デザイン

デザイン面では、カフェの持つ落ち着いた雰囲気と上質さをそのままスマートフォン上でも感じられるように設計しました。ダークトーンを基調とした背景に、商品写真やアイコンを際立たせる余白を意識し、視認性と高級感を両立させています。ユーザーが操作に迷わないように、シンプルで直感的なUIを採用。ハンバーガーメニューやボタン配置は親指で操作しやすい位置に配置し、モバイルならではの操作性にも配慮しました。

制作期間

企画、WF 6時間

デザイン 2日

制作 1日

使用ツール

 Illustrator / Photoshop

トップページ

メニューページ

アクセスページ

その他WEB DESIGN/8作品

(非公開サイトにて4作品公開)

↑View more

website | 依頼制作 | 2025

株式会社ネクストドリーム

WordPress / Illustrator / Photoshop

↑View more

website | 依頼制作 | 2025

やすらぎペンション 熱海紙風船

WordPress / Illustrator / Photoshop / camera

↑View more

website | 学校課題 | 2021

免許返納呼びかけサイト

Visual Studio Code / Illustrator / Photoshop

↑Now

mobilesite | 学校課題 | 2021

Cafeモバイルサイト

Illustrator / Photoshop

(非公開サイトにて4作品公開)

著作権の関係上、別ページにてパスワード限定で公開しています。▶

著作権の関係上、別ページにてパスワード限定で公開しています。▼

Thank You Watch Site

©︎2025 HIROMU ISHIGE