Coffe Palette
コーヒーの種類とあなたにおすすめのコーヒーを診断できるWebサイト
- Tajiri Arisa
- Keywords：webデザイン, webサイト, コーヒー
- https://a7lor.github.io/coffee-pallet-ex/
プロジェクトの概要
これは何？
今更聞けないコーヒーの種類と自分の好みに合ったおすすめのコーヒーが診断できるwebサイト
背景と目的
普段あまりコーヒーを飲まない人にも分かりやすく、コーヒーには色んな種類がありそれぞれに違った美味しさがあることを伝えるため
また、出先ですぐ調べて開けるようにwebサイトという形にした
参考事例
制作ツール
Visual Studio Code , ibisPaint X
成果物とその仕様
進捗記録
2025.05.19
作業の記録
- ドリップコーヒーとエスプレッソの違いについて記述
- 各コーヒーの絵を描く
(カプチーノ・フラットホワイト・カフェブラベ・エスプレッソマキアート) - 診断の質問を考える
MEMO（ToDo項目など）
- 診断の作り方を調べる
- 各コーヒーの絵を描く
(エスプレッソ・アメリカーノ・カフェモカ・カフェラテ・エスプレッソコンパナ
アメリカンコーヒー・カフェオレ・フレーバーコーヒー・ウィンナーコーヒー)
2025.05.12
作業の記録
- webサイト(作成中)
(動作確認込みのためサイト内の説明は適したものではありません) - メニューバーの作成
- aboutの中身を書く
- about内に学科サイトやインスタのリンクを貼る
MEMO（ToDo項目など）
- webサイトを動作確認込みで動かしてみる
- スクロールしたら絵が動くような作りに挑戦する
2025.04.21
今回制作したプロトタイプ
- サイトマップ
プロトタイプ制作の方法
- Adobe Illustrator
2025.04.14
現状調査
先行事例（参考リンク）
解決すべき課題（ToDoリスト）
- 1. 近くのカフェや人気のカフェにて人気や定番メニューを調査
- 2. 掲載する写真の撮影
- 3. 種類のイラスト化
- 4. 種類ごとに苦味や甘さなどを追求
- 5. Webサイト作成ツールを選ぶ
制作上のアイデア（課題ごとに複数のアイデア）
- 1&2. 休日にカフェや喫茶店へ調査しにいく
- メニュー表や店員の声を参考にする
- 初心者さん向けの迷ったらこれを選んどけば間違いない種類の提示
- 3. 分かりやすいイラストの作成
- https://jp.pinterest.com/pin/735634920406125740/ ←この画像のようなものを作る
- 4. フレーバーチャート（分布図）の作成
- 甘味・苦味・酸味・香り・コク・後味 〜...
- 5. Web作成ツール
- 簡単に作れるものにするか（GoogleSite・WordPress ）
- Visual Studio Code
- もしくはその他
2025.04.07
プロジェクトのテーマ候補
- ファッション関連
- 色の組み合わせ方
- 柄の使い方
- 日常関連
- 近所の公園の使われ方
- 散歩中に見つけた色んな落とし物
- 音楽関連
- その日の気分にあった音楽診断
- 日常にありふれた様々な音で作る作業用BGM
- メイク関連
- 初心者さん向けメイク入門と使いやすいメイク道具
- 韓国アイドルから学ぶ今どきメイク術
- コーヒー関連
- コーヒーの香りと苦味
- 福岡市のカフェ・喫茶店紹介
web.JPEG
site_map.png
sitemap.png
sitemap.pdf
