11アイコン

Work

Web - カフェサイト

画像の代替テキストを入力

「もし実際にこのカフェが存在していたら、こんなカフェだったのかなぁ」と想像しながらサイト制作を行いました。
制作において最も苦労した点は、各要素を自分の思い通りに配置することでした。中々一発でイメージしたようには行かなかったり、全く違うレイアウトになってしまったりと、何度も調べては修正の繰り返しでした。調べる際は授業で習った内容を振り返るだけでなく、ネットで情報収集することも多かったです。
今回制作してみて、コーディングには様々な手法があり奥が深いことを実感しました。次にWebサイト制作する際は、より効率と品質を上げたものを作り上げたいです。

課題名 飲⾷店(カフェ)のWebサイト制作
課題内容
  • 名古屋市天⽩区植⽥にオープンする(想定)の「ワズカフェ(Was Cafe)」のWebサイト
  • 想定される競合店は、都⼼にも郊外にも展開するカフェチェーン、喫茶店、ファミレスなど
クライアントのご要望
  • 店の知名度を上げて集客につなげたい
  • 地域の⼈たちが気軽に利⽤できるお店であることをアピールしたい
コンセプト
  • 赤茶系の暖かい色合いを使用
  • どんな年代の方にも入りたいと思ってもらえる雰囲気
制作意図
  1. カフェであることをアピール
    • 「このお店は間違いなくカフェである」ということを明確にするため、ロゴのモチーフはコーヒーカップにしました。
    • 色合いはコーヒーを連想させる茶系を選びました。
  2. 気軽に入店できるような印象づくり
    • 茶系の中でも暖かみのある赤味掛かった色を使用し、親しみやすいイメージになるようにしました。
    • 写真は陽の光がきれいに入った明るさのあるものを使用し、明るい雰囲気を演出しました。
  3. シンプルなリンク配置による操作のしやすさ
    • 上下両方に各ページのリンクを配置し、リンクはマウスをあてた時に文字の色が変化するよう、ページ間の移動をしやすくする工夫をしました。
    • スマホ、タブレット用のレスポンシブ版では、メニューはあえて隠しメニューにせず、幅広い年代の方々に分かりやすいようボタン風にしました。
制作時間 デザイン:50時間/ コーディング:80時間
制作環境 Illustrator CS5, CC(2024)/ Photoshop CS5, CC(2024)/ Visual Studio Code

BACK TO TOP ∧

©2023 Webマーケティングデザイナー養成科 第36期生 生徒作品