課題制作3

Cafeサイト制作

仕様

  • 店舗は、天白区植田に2024年4月1日にオープンする「ワズカフェ(Was Cafe)」
    ※店名はひらがなや漢字でもOK、「カフェ」を「喫茶」にしてもOK
  • 駅からも繁華街からも離れた住宅地
  • 既存客のいない新規店
  • 想定される競合店は、都心にも郊外にも展開するカフェチェーン、喫茶店、ファミレスなど
  • 一番の目的は、店の知名度を上げて集客につなげること
  • 地域の人たちが気軽に利用できるお店であることをアピールしたい

Cafeサイト制作物一覧

Wasカフェ -ver.1-

WasカフェTOP画像
課題名 新規カフェサイト制作
課題内容

新規オープンするカフェのWEBサイト制作

コンセプト

地域の人たちが気軽に利用できるお店であることをアピールしたいとのことなので、落ち着いた色味を使い、老若男女に受け入れられる印象を心がけた

文字や画像も大きめに配置し、印象的だが視認性のいいサイトを目指した

レスポンシブ対応もし、スマホで見ても崩れないサイト作りを志向

Wasカフェ -ver.2-

WasカフェTOP画像その2
課題名 新規カフェサイト制作 -ver.2-
課題内容

新規オープンするカフェのWEBサイト制作

1つ目を完成させた後、少し余った時間で完成させる

コンセプト

タブデザインにして、4つあったHTMLを1つにし、そこに4ページ分の情報を書き、4ページあるように見せるという設計にした。

ページはほぼ1つ目と同じなのだが、メニューページにちょっと手を加えてあり、メニューの各ジャンルをアコーディオンパネルに収納した。

アコーディオンパネルをクリックするとメニューがずらっと表示され、そのメニューの画像もクリックするとモーダルが開くようになっている。

こっちのバージョンのほうもレスポンシブ対応してあり、デザインもほとんど前のものと一緒だが、ナビボタンを収納せず、タブが上に並んでいるようなデザインにしてある。

総評
1からのサイト制作で今まで習ったことと、自分で調べて実装してみたい機能を時間の許す限り詰めこんでみた。
作っていくごとにあれも入れてみたいとかの思いが出てきたりもしたが、自分の能力が足りずできなかった部分もある。
デザインももっと凝ったものにできればよかったのだが、コーディングのほうに時間を割きたかったためシンプルに。
自分の好み的にはver.2の方が好き。