かわいいラーメン
架空のラーメンやさんのwebサイト制作・・・・・・・・・・・・・・・・
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
- いわもと あゆ
- Keywords：web, html, css, ・・・
概要
これは何？
架空のラーメン屋さんのブランディング・WEBサイト制作
背景と目的
近年、消費者の購買行動において、商品の機能性や価格だけでなく、感情的な価値や体験が重視される傾向が強まっている。特に、SNSの普及により、視覚的に魅力的な情報が拡散されやすく、「かわいい」といったポジティブな感情を喚起するデザインは、大きな訴求力を持つ。
ラーメン業界においても、味の追求はもちろんのこと、店舗の内装や盛り付け、プロモーションなどにおいて、独自のコンセプトや世界観を打ち出すことで差別化を図る動きが見られるが、「かわいい」をコンセプトの中心に据えたラーメン屋はまだ少数であり、Webサイトにおいてもビジュアル面のみを重視して使いづらいサイトが多く、その可能性は十分に開拓されていないと考えられる。
そこで本研究では、「かわいい」という感性を軸に据えた架空のラーメン屋のWebサイトを制作する。本研究を通して制作するWebサイトでは、単なる情報発信の場ではなく、「かわいい」という感情を通じてユーザーとのエンゲージメントを高め、架空のラーメン屋のブランドイメージを確立するための重要なツールとなることを目指す。また、この制作過程で得られた知見は、今後のWebデザインやブランディングにおける新たな可能性を示唆する。
コンセプト
- 「かわいい」と親和性の高い若年層や女性層、SNSユーザーなどを主なターゲット層に設定する。
- ビジュアル的要素と使いやすさの両立を目指す。
成果物の仕様
メインカラー...
制作ツール
- Apple MacBook Pro
- MacOS Ver.14.4.1
- Visual Studio Cord：HTML + CSSのコーディング
- Adobe Illustrator：グラフィック要素のデザイン
プロジェクトの期間
2025.04.08-後期終了まで
まとめ
調査
現状調査
先行事例
技法・技術情報
htmlのcssの書き方のリンク
プロジェクト管理
スケジュール
ToDo
- コンセプトを明確に
- webサイト試作
- サイトマップ制作
- メニュー表制作
- お店のロゴ・シンボル制作
- 店内イメージ
- 参考資料集め
進捗記録
2025.05.13
中間報告準備
ワイヤーフレーム
めも
2025.05.06
次やること
- ワイヤーフレーム続き
- 学科サイトの概要整理・発表準備
2025.04.29
参考記事
2025.04.22
同時進行
- Webサイトのおおまかな形を制作
- サイトマップ・ワイヤーフレーム
- HTML + CSS の学習
- メニュー内容/お店の具体的な内容をつめる
参考記事
2025.04.15
テーマ案
- 架空かわいいがテーマのラーメン屋さん（カフェ風？）
- 架空のカフェのブランディング
- 架空のカフェ×かわいい×魔法×海
- 架空のカフェ×かわいい×魔法×ダーク
- 架空のカフェ×かわいい×魔法×夢
- 架空のカフェ×かわいい×魔法×ゴス
- 架空のカフェ×かわいい×魔法×
- 架空のカフェ×kawaii×魔法×非日常×ダーク
参考記事
2025.04.08
テーマ案1
- ビジュアルデザインと機能性の両立
- 架空のカフェのリアルなwebサイト制作➡️世界観と機能性の両立を図る
- コンセプトやメニューなど、実際に存在しているかのようにブランディング
- ビジュアル重視のデザインで視認性が落ちる場面は？どう解決したか
テーマ案2
- 商品魅力の視覚的伝達
- 商品を視覚情報で表現“味”と“香り”をどうデザインする？視覚化による商品の感性伝達
- 甘い・すっぱい・辛い・硬い・柔らかい/柑橘系・フローラル系などの要素を視覚的に伝達
- どんな要素が相手にどんな印象を与えるか
- ① 視覚表現の分析
食品（例：チョコレート、フルーツ、ドリンク）や香水のパッケージ、広告、Webサイトを収集し、視覚的な要素（色、形、素材感、フォントなど）を分析。
各デザインが「甘さ」「爽やかさ」「濃厚さ」「フレッシュさ」「香りの種類」などをどう伝えているかを考察。
② ユーザー印象調査
収集したデザインを見せて、「どんな味・香りだと思うか？」「どんな印象を受けるか？」というアンケートを実施。
実際の味・香りの情報と、ユーザーが視覚だけで想像した印象にズレがあるかを検証。
③ デザイン制作と実験
架空の商品（お菓子、香水など）を設定し、見た目だけで魅力を伝えるビジュアルデザインを自分で制作。
複数パターンを作成し、どれがより的確に味・香りを連想させるかを調査。
- 人はどれくらい視覚だけで「味や香り」を感じ取れるのか？
デザインによる「味や香りの誤認」はどこまで許容されるのか？
ブランドが与えたいイメージと、ユーザーの受け取る印象のギャップはあるか？
- 香りや味覚ごとの色・形・質感の対応関係をまとめたグラフィック資料
テーマ案3
- 国や文化によって異なる「可愛い」の傾向を分析・比較
- グローバルデザインにおいて、文化ごとの可愛さはどう活用できるか？
- それぞれの文化に合わせたwebサイトのUIを架空でデザイン
- 「かわいさの構造図」や「視覚的な特徴のレーダーチャート」インフォグラフィックで比較
色彩傾向（彩度・明度）
形の特徴（丸み／シャープさ）
顔の比率（目の大きさ・顔のバランス）
装飾の有無、フォントの雰囲気
デザインの余白感、密度感
- 同じ架空の~を、日本風／韓国風／フランス風など国別で制作・比較
各国ごとの“可愛い”を紹介し、それを元にした架空のお菓子パッケージやUIを再現
同じ機能（例：カフェ予約サイト）を、国別“可愛さ”表現でパターン制作
同じキャラクターを日本風、韓国風、フランス風でビジュアル表現して比較展示
