カフェサイトモックアップ

課題1 カフェサイト制作

課題概要

クライアントの要望

  • 一番の目的は、店の知名度を上げて集客に繋げること
  • 地域の人たちが気軽に利用できるお店であることをアピールしたい
  • 顧客を限定するような極端に個性的・先鋭的なものは望まない

サイト仕様

PC版サイズ
幅1280px程度のブラウザで違和感なく閲覧できるサイズにすること
レスポンシブ対応
対応するのが望ましい
ページ構成
トップページを含む全4ページ
グローバルナビの構成を考えて、全ページに配置
その他
コンセプトに合ったテーマカラーとロゴマークを作成する

制作環境

使用OS
windows10
使用ソフト
Photoshop CS5 CC , Illustlator CS5 CC , Visual Studio Code
制作期間
2023/3/9 ~ 2023/3/31(約65 時間)

制作の意図

落ち着いた暖かみのあるカフェをイメージした配色

ベージュにブラウンというコントラストがありつつ目に優しい見やすさを意識しました。濃いブラウンに濃い赤という色の組み合わせは色覚障害のある方には見分けづらい配色になってしまうので、赤の彩度と明度を落として見づらくならないように意識しました。

必要な情報が手に入りやすく

ホームページにアクセスしてくださるお客様は、すでにWAScafeに興味があるお客様です。お客様が実際に店舗に足を運んでくださるための情報がすぐに手に入るよう、オープン日時、おおよその住所をファーストページのすぐ下に配置しました。

こだわりの商品に合わせてメニューページを構成

コンセプトページを見ていただけるとわかるように、WAScafeの売りの商品はコーヒーとパンです。売りの商品がより多くの人の目に触れるように大きめの写真を配置し、食べ物系メニューの一番上に配置しました。