【自主制作】古民家カフェホームページ

製作期間3日間
使用したツールPhotoshop(ロゴ) / WordPress
依頼内容自主制作

自然が多い場所での古民家カフェをイメージして作成しました。
男女問わず利用いただける場所であり、ゆったりと過ごしていただける空間なので
全体的にゆるっとした雰囲気でありながらも女性らしさにつながらないように意識しました。

全体の色味は自然と安心感をイメージさせるブラウンを基調に選びました。

ヘッダーに電話問い合わせへの動線を考えてボタンを配置しました。
また、SNSは実際にはInstagramと連携させてリアルタイムな情報もご覧いただけるデザインにしました。

要件定義
  • 制作目的
    • 古民家カフェのホームページ
    • 少人数営業のためお問い合わせは電話のみ→基本情報をホームページにまとめる
  • ターゲット
    • 20代~40代の男女
    • 古民家の雰囲気を活かして落ち着いて作業ができるようなカフェ
    • 遠方から来ていただく方もいる
  • トンマナ
    • 男女問わず利用
    • 自然と安心感をイメージ

情報設計について

カフェのコンセプトと空間の連動

「CONCEPT」セクションでカフェのコンセプトを簡潔に伝えており、カフェの雰囲気や目指す方向性を伝えています。テキストをコンパクトにまとめているので、読みやすく内容を一目で理解できるようになっています。「一人でもくつろげる場所」というメッセージが、居心地の良さを強調しています。誰でも安心して訪れられるような雰囲気を、言葉で表現しました。写真との相乗効果で、カフェの温かさと心地よさがしっかり伝えられるデザインにしています。

視覚的に伝わるメニューセクション

メニューの配置は整然とさせ、コーヒーやティー、その他の項目をわかりやすく分類しています。値段が明確に表示されており、来店前に確認したい情報がすぐにわかる設計にしています。メニューの背景がシンプルなので、テキストが際立って読みやすくなっています。メニューごとの区分が明確で、ユーザーが好みの飲み物を探しやすいです。メニュー構成がきちんと整理されていて、視覚的な負担が少ないです。

フッター部分はシンプルなデザインに

フッターには必要な情報だけが配置され、スッキリとしたデザインにしています。SNSリンクがフッターにまとめられており、外部リンクへのアクセスが簡単です。最低限の要素で構成されているため、情報過多にならず読みやすい構成になっています。連絡先や所在地など、重要な情報が最後に再度確認できる構成が便利です。

デザインについて

心地よいビジュアルテーマ

温かみと居心地の良さを表現できる大きなコーヒーの写真をトップに配置しました。カフェのリラックスした雰囲気を視覚的に伝え、閲覧者に安心感を与えています。コーヒーとインテリアの魅力が十分に伝わるように選びました。全体的にナチュラルな配色で統一されており、温かみのあるデザインにしています。落ち着いたカフェタイムをイメージさせる柔らかなトーンにしました。

視覚的な温かみのある配色

全体にベージュやブラウン系の色調を使い、温かみと落ち着きのある雰囲気を演出しています。カフェの雰囲気にぴったり合うように、来店時のリラックス感が伝わるような落ち着いた配色を選びました。背景色とテキストのコントラストは視認性を確保し読みやすくなるように調整しました。全体的に色のトーンが統一し、ページ全体の一貫性をつくりました。

視覚的なSNSギャラリー

SNSの写真が直感的に配置され、カフェの雰囲気を視覚的に伝えています。インスタグラムの画像を使うことで、リアルなカフェの姿が閲覧者に伝わります。写真が定期的に更新されることで、カフェの新しい情報やトレンドが見やすくなります。色調を統一することで、ページ全体に一貫性を生み出しています。SNSを使ってカフェの活気や賑わいを伝え、親近感を演出しています。

この記事が気に入ったら
フォローしてね!

よかったらシェアしていただけると嬉しいです!
  • URLをコピーしました!
目次