mobilesite | 学校課題 | 2021
渋谷のカフェ「Forest Cafe」のスマートフォン用サイトを制作。店舗の落ち着いた雰囲気やドリンクの魅力を視覚的に伝えることを意識し、ブランディング重視のデザインと直感的な操作性を両立しました。
店舗の雰囲気や世界観をスマートフォン上でもしっかり伝えつつ、ユーザーがスムーズに情報へアクセスできることを目的に制作。カフェを探しているユーザーがスマホで訪問した際に、メニューやアクセス・営業時間といった必要な情報に迷わずたどり着ける構成を意識しました。
都内でおしゃれなカフェを探している20〜40代の女性層です。SNS映えや雰囲気のよさを重視するユーザーが多く、カフェ巡りを趣味とする人や、デート・女子会などの場として利用を検討している層を想定しています。ストレスなく得られる構成と導線設計を心がけました。
スマートフォンから訪れるユーザーが、直感的に操作でき、必要な情報へ迷わずたどり着けることを重視して情報設計を行いました。最初に表示されるファーストビューでは店舗の雰囲気が伝わる写真を大きく使用し、カフェの世界観を印象づけています。その上で、ハンバーガーメニューから「メニュー」「店舗情報」などの各ページにアクセスできるようにし、ユーザーが知りたい情報(メニュー内容や地図、営業時間)へスムーズに到達できる導線を構築しました。
デザイン面では、カフェの持つ落ち着いた雰囲気と上質さをそのままスマートフォン上でも感じられるように設計しました。ダークトーンを基調とした背景に、商品写真やアイコンを際立たせる余白を意識し、視認性と高級感を両立させています。ユーザーが操作に迷わないように、シンプルで直感的なUIを採用。ハンバーガーメニューやボタン配置は親指で操作しやすい位置に配置し、モバイルならではの操作性にも配慮しました。
企画、WF 6時間
デザイン 2日
制作 1日
Illustrator / Photoshop
↑View more
website | 依頼制作 | 2025
WordPress / Illustrator / Photoshop
WordPress / Illustrator / Photoshop / camera
website | 学校課題 | 2021
Visual Studio Code / Illustrator / Photoshop
↑Now
(非公開サイトにて4作品公開)
著作権の関係上、別ページにてパスワード限定で公開しています。▶
著作権の関係上、別ページにてパスワード限定で公開しています。▼
©︎2025 HIROMU ISHIGE