カフェのWebサイト作成

制作意図

クライアント要望の"知名度の向上"を印象に残るサイトであると捉え、はっきりした色使いで見やすいデザインを意識しました。フッター部分ではカフェの概要がわかる内容を入れ、営業日時やSNSリンク、すべてのページにつながるナビを配置し、ユーザビリティを意識しました。

サイトロゴ

カフェの名前である「WAS」の文字を縦に並べ、変形させてコーヒーを焙煎する炎をイメージしたロゴを作成しました。色は黄色から赤色のグラデーションにすることで炎を表現しました。この炎にはカフェが「落ち着ける空間」「ゆっくり過ごせる空間」「あたたかい空間」であるという意味を持たせています。

サイトカラー

ベースカラーは白#fffを選びました。これは、新規開業の店舗ということで"信頼""清潔"をイメージしました。メインカラーのオレンジ#F7931Eは、カフェコンセプトの「誰もがハッピーな気持ちになれる」から"幸せ""明るい"をイメージして選びました。

制作時間・使用ツール

60h
Illustrator(cs5/cc)、Photoshop(cs5/cc)、Visual Studio Code

感想と反省

このカフェサイトが初めて自分がマーケティング、デザイン、コーディングを通して制作した作品です。実際にやってみると、デザインした内容がコーディングで実現できない部分があったりして、組み方を想定しながらデザインすることの難しさを実感しました。完成したものをクラスの皆さんの前でプレゼンしたときには、達成感も得られ、時間をかけてじっくり制作できる機会もなかなかないと思うので、よい経験になったと思っています。
たくさんページをつくったことでコーディングがとても大変でした。特に大変だったなあと感じた箇所は、フッター、ハンバーガーメニュー、写真レイアウトです。