カフェのオフィシャルサイト
Web
- 概要
- 架空のカフェサイトを想定して制作した、レスポンシブ対応のWebサイトです。
- 制作目的
- カフェの雰囲気やメニュー、アクセス情報を分かりやすく伝え、来店前にお店の魅力を感じてもらうことを目的に制作しました。
PC・スマートフォンのどちらでも見やすく、自然に情報を読み進められる構成を意識しています。 - 担当範囲
- 構成設計 / ワイヤーフレーム / デザイン / コーディング
- 使用ツール
- Illustrator / Photoshop / HTML / CSS / jQuery
- 制作期間
- 約3日間
- URL
-
https://works-cafe.shio-example.com/
Visit Site
Design Point
デザインのポイント
淡いベージュをベースに、丸みのある写真トリミングや波型のセクション区切りを取り入れ、カフェらしいやわらかく親しみやすい雰囲気を表現しました。
PCでは余白を広く取り、写真とテキストのバランスを整えることで、落ち着いた印象になるよう意識しています。
スマートフォンでは縦の流れで情報を自然に読めるよう、各セクションの見え方や余白を調整しました。
メニュー・アクセス・ギャラリーなど、来店前に知りたい情報をシンプルにまとめ、店舗サイトとして使いやすい構成を目指しました。
PCでは余白を広く取り、写真とテキストのバランスを整えることで、落ち着いた印象になるよう意識しています。
スマートフォンでは縦の流れで情報を自然に読めるよう、各セクションの見え方や余白を調整しました。
メニュー・アクセス・ギャラリーなど、来店前に知りたい情報をシンプルにまとめ、店舗サイトとして使いやすい構成を目指しました。