カフェのオフィシャルサイト

カフェのオフィシャルサイト

Web
概要
架空のカフェサイトを想定して制作した、レスポンシブ対応のWebサイトです。
制作目的
カフェの雰囲気やメニュー、アクセス情報を分かりやすく伝え、来店前にお店の魅力を感じてもらうことを目的に制作しました。
PC・スマートフォンのどちらでも見やすく、自然に情報を読み進められる構成を意識しています。
担当範囲
構成設計 / ワイヤーフレーム / デザイン / コーディング
使用ツール
Illustrator / Photoshop / HTML / CSS / jQuery
制作期間
約3日間
URL

https://works-cafe.shio-example.com/

Visit Site

デザインのポイント

淡いベージュをベースに、丸みのある写真トリミングや波型のセクション区切りを取り入れ、カフェらしいやわらかく親しみやすい雰囲気を表現しました。

PCでは余白を広く取り、写真とテキストのバランスを整えることで、落ち着いた印象になるよう意識しています。
スマートフォンでは縦の流れで情報を自然に読めるよう、各セクションの見え方や余白を調整しました。

メニュー・アクセス・ギャラリーなど、来店前に知りたい情報をシンプルにまとめ、店舗サイトとして使いやすい構成を目指しました。

お問い合わせ

お仕事のご相談・ご依頼はこちらから
お気軽にご連絡ください。

contact