Cafe

RIVARNO

カフェのウェブサイトデザイン

プロジェクト概要

Description

カフェのブランドアイデンティティを表現するウェブサイトのデザインおよびコーディングによる実装

期間と規模
12 時間、 15 画面
チーム
個人プロジェクト
役割
UI/UXデザイン、グラフィックデザイン、プロトタイプ、コーディング
使用したツール
Figma, Visual Studio Code

プロトタイプ

ビジネスプラン

About
企業名

Cafe Rivarno (架空)

場所

キツラノ、バンクーバー、カナダ

ターゲットユーザー

年齢: 20-50 歳、性別: 全性別、年収: 低〜中所得層、 学歴: 高卒、大卒、 職業: 学生、若手社員、クリエイティブ職の人たち、地元の住民

Objective and Goals
目的

キツラノのスピリットを体現しながら、より多くの人々にアプローチし、顧客がその提供するサービスをより楽しみやすくすること。

ゴール

ブランド価値の推進: サステナビリティやオーガニック製品への取り組みを特設ページで紹介する。

顧客の利便性の向上: 手軽にコーヒーを注文したり、自宅でくつろぎながら楽しめるよう、使いやすいオンライン注文システムを提供する。

顧客のリーチ拡大: 持ち帰りのオプションを追加し、新しい顧客を引きつける。

UIキット

カフェのブランド価値を反映させた色を選びました。プライマリーからーは、持続可能性を象徴するディープグリーン(#366b66)とソフトグリーン(#7eb693)、そして温かみを加えるアーシーブラウン(#625136)です。見出しにはYeseva Oneフォント、本文にはRosarioフォントを使用して、スタイリッシュでありながら親しみやすい雰囲気を作り出しました。この組み合わせにより、スタイリッシュでフレンドリーな印象のウェブサイトが完成しました。

最終スクリーン

ライブウェブサイト

Coming soon...

学んだこと

このケーススタディを通じて、架空のクライアントのビジネス提案に基づき、ロゴ作成からサイト全体のデザインまで、ブランド構築の方法を学びました。Variableを設定することで、作業がどれほど効果的かつ効率的に進められるかを実感し、ブランド作りにおいてデザイン原則を守ることの重要性を再確認しました。変数を活用し、最小幅と最大幅を設定することで、レスポンシブなウェブレイアウトをデザインしました。整合性、近接性、階層性、余白といった原則が、デザイン全体とブランドの強化につながるということを学びました。