カフェのHP メインビジュアル

カフェのHP

WordPress / Design / Coding

Overview

WordPressで、コーヒーにこだわりのあるカフェのサイトを想定して制作しました。
写真の魅力が伝わる余白設計と、「メニュー・店舗情報・アクセス・お問い合わせ」へ迷わず辿り着ける導線づくりを重視しています。

※本作品はポートフォリオ掲載用のデモ(架空案件)として制作したサイトです。

▶ サイトを見る

Design Concept

ブラウンを基調に、木の温もりを感じる落ち着いたトーンで統一。
写真が主役になるよう余白と文字量を調整し、上品で居心地の良い雰囲気を目指しました。
情報は「知りたい順」に整理し、メニュー/営業時間/アクセス/お問い合わせを迷わず見つけられる構成にしています。

Technical Notes

  • 使用ツール: WordPress(Lightning)/ CSS
  • 担当: デザイン調整 / CSSカスタマイズ / ページ構成
  • 制作期間: 約2週間

メニューはWordPress側で更新しやすい構成にし、運用後も手間が増えないように設計しました。
お問い合わせはフォーム(WPForms)で実装し、入力しやすい余白・角丸・ボタンの統一などを追加CSSで調整。
さらに、スクロール時に自然に馴染む軽めのアニメーションを加え、サイト全体の印象をやわらかく仕上げています。
WordPress(Lightning)環境での追加CSSによるカスタマイズを中心に、レスポンシブ・再利用しやすいスタイル設計・UIの一貫性を意識して改善しています。

expand_less