めんや☆まんぷく
架空ラーメン店のwebサイト制作
🍥🍥🍥
- いわもと あゆ
- Keywords：web, html, css, kawaii
概要
これは何？
「かわいい」をコンセプトとした架空のラーメン屋さんのWEBサイト制作
背景と目的
近年、日本発の「かわいい（Kawaii）」文化は、ファッション、キャラクター、カフェ、雑貨など多様な分野において国内外で広く浸透しており、特にZ世代を中心とする若年層に強い影響を与えている。かわいさは単なるビジュアル表現にとどまらず、自己表現や共感の手段として機能し、ライフスタイルや消費行動にも密接に関わっている。
一方、ラーメン業界においては、長らく「職人気質」「無骨」「男性的」といったイメージが根強く残っており、かわいさを前面に押し出したデザインやブランディングはあまり見られない。しかしながら、SNSの普及によって、視覚的なインパクトや“映える”コンテンツが飲食店の話題性や集客力に直結する時代となっている。実際に、店の世界観や料理のビジュアルがSNSで拡散されることで、新しい客層の獲得に繋がっている事例も多く見られる。
このような社会的背景の中、「かわいい」という視点をラーメンという既存のジャンルに取り入れることは、業界に新たな価値や可能性をもたらす試みといえる。
また、そうした新しいコンセプトをより効果的に伝える上で、Webサイトの存在は非常に重要である。現代のユーザーは、店舗に訪れる前にWeb上で情報収集を行い、写真やデザイン、メニューの雰囲気などからその店の世界観を判断する傾向にあるため、ブランドイメージやビジュアルの印象は、来店意欲に直結する大きな要素である。
したがって、本プロジェクトでは、「かわいい」を軸とした架空のラーメン店の世界観を、ブランディングとWebサイト制作の両面から設計・構築し、伝えたいイメージを的確かつ効果的に伝える手法を探る。
コンセプト
- ゆるかわポップで少しダークなラーメン屋さん
- 「かわいい」と親和性の高い若年層や女性層、SNSユーザーなどを主なターゲット層に設定する。
- ビジュアル的要素と使いやすさの両立を目指す。
- 従来のラーメン店が持つ“無骨”“男性的”といったイメージから脱却し、ポップで明るい印象を目指す。
- 「かわいさ」を感じる要素を隅々に取り入れ、すべてのビジュアル表現を統一することで、世界観に一貫性を持たせる。
- Webサイトでは、店舗の情報だけでなく、「かわいい世界観」が直感的に伝わるビジュアル・動き・レイアウトを重視し、来店前から「このお店に行ってみたい！」と思わせる仕掛けをデザインする。
成果物の仕様
メニュー案
メインビジュアル/ロゴ
制作ツール
- Apple MacBook Pro
- MacOS Ver.14.4.1
- Visual Studio Cord：HTML + CSSのコーディング
- Adobe Illustrator：グラフィック要素のデザイン
プロジェクトの期間
2025.04.08-2026.01.15 (通年)
まとめ
- 前期まとめ
- WEBサイトの基盤となるお店の世界観を明確にするため、コンセプト設計やネーミング、キャラクター設定、ビジュアルイメージのアイデア出しを行い、その上でロゴやメインビジュアル、メニュー表などのグラフィック要素の制作に取り掛かった。
- 実際にお店の設定を考えることが想像以上に難しく、予定より進行が遅れてしまったため、夏季休業中に残りのグラフィック要素を完成させる。また、スムーズに自由度の高いwebデザインを行えるよう、html,cssの技術習得を目指す。
- 今後の流れ
夏季休業...html,cssの勉強/グラフィック要素の完成
後期...webサイト制作
調査
現状調査
- 消費者の行動とSNSの関係について
- ラーメン店の市場に関する情報
- 現代社会における「かわいい」の意義・位置付け
- 調査まとめ
- SNSと消費行動の関係→ SNSが若者の購買意欲に大きな影響を与えること、特に“映える要素”が行動のきっかけになっているという調査結果が得られた。
- ラーメン業界の市場変化→ ユーザー層が15年前より増加し、とくに女性利用者が増えている点が特徴的。
- Kawaii文化の役割と効果→ かわいい要素は共感や拡散を生みやすく、観光やマーケティングにも応用されている実例が多く見られた。
先行事例
〈かわいいコンセプト/ラーメン屋に関する現状の事例〉
〈参考サイト〉
技法・技術情報
プロジェクト管理
スケジュール
ToDo
🔽前期
ガントチャートコンセプト設定現状調査・先行事例サイトマップメインビジュアルメニュー案ロゴ- メニューグラフィック
- キャラクター紹介グラフィック
- ワイヤーフレーム（モバイル・pc）
🔽後期
進捗記録
2025.07.15
学科サイト整理
- ガントチャート🗓️
- メニュー案詰め
〈めんたんらーめん〉
濃厚な鶏白湯×豆乳のクリーミースープに隠し味の白味噌が甘みとコクを添え、もちもちの中太麺にまろやかに絡みます。
ホイップしたクリームチーズはビーツパウダーで淡いピンク色に仕上げ、口の中でふわっと溶ける軽やかな口当たりに。
スープに浮かぶめんたん型チーズボールは、外側をもちもちした羽二重餅のような食感で、中には濃厚なモッツァレラクリームが閉じ込められています。
温かいスープに浸すと、外側は程よく柔らかくなりながらも形を保ち、割ると中のチーズがとろりと溶け出します。
愛らしい見た目と、濃厚な味わい、もちもちとろける食感の三重奏が楽しめる特別なトッピングです。
めも📝
2025.07.08
お店の概要整理
🍥店名: めんや⭐︎まんぷく
- 名前の由来と意図
- めんや☆まんぷく という名前は、「親しみやすさ」「ゆるさ」「満足感」「語感のかわいさ」を名前だけで直感的に伝えるネーミング。「めんや」でラーメン屋さんらしい響きを出し、「まんぷく」はおなかもこころも満たされるという印象を与えるための言葉。また、中央の「☆」は、ポップさと遊び心を演出する記号で、中高生〜20代の感覚に馴染みやすいネット・サブカル的感性を反映。
🍥コンセプト：ゆるかわポップ × ほんのりダーク
「ポップ⭐️🩷🌀💤」と「ダーク🖤💀🧪」をゆるくまとめた「kawaii」
「ゆるい」「かわいい」「ポップ」は、現代のKawaii文化における主流ジャンルだが、「ダークさ」を加えることで差別化
◾️ゆるかわ（Yurukawa）
「グルーミー」や「うさまる」のような脱力系の可愛さ
癒し・緩さ・微笑ましさ・あいまいさ
キャラやメニューに漂う、不完全で愛される雰囲気
◾️ポップ（Pop）
メニュー名や装飾に多用される記号（☆・Z・†・♪）によって、サブカル的・インターネットミーム的表現
ひと目で引っかかるインパクトのある名前
視覚的に楽しめるアイキャッチ要素（ネオン・パステル・奇抜な盛り付け）
◾️ダーク（Darkness）
黒がベースの配色／少し影のある演出（目がうるうる、骸骨なるとなど）
キャラクターや店舗に込められた、さびしさ・裏がある感じ
- カラー：黒、パステルピンク、ミルキーホワイト、グレーパープル、蛍光ブルー
- タイポ：ゆるゴシック＋手描き風／記号記述（例：†☆Z）
- モチーフ：うさぎ／なると／星・雲・ハート／骸骨・包帯など
- ネーミングの方針：インパクトを持たせる・語感を意識
- めんたんらーめん
- ほねほねぴょん骨らーめん
- もきゅもきゅぎょうざZ：もちもち丸餃子（形がゆるい）
🍥想定ターゲット
- Z世代〜20代前半の若年層🔽
- SNSを中心に情報収集・行動決定を行う
- 「映える」「かわいい」「クセがある」といった視覚的インパクトを重視
- ファッション、推し活、K-POP、アニメ・キャラ文化などに親しみがある
- 「#めんたんらーめん」ハッシュタグ展開にも乗りやすい
- かわいい文化／Y2K／地雷系・サブカル系が好きな層🔽
- 食べ物の「味」よりも、「自分の世界に合っているか」を気にする
- 「かわいい＋ちょっとダーク」という組み合わせに強い親和性
- フォトブース的な店舗空間やキャラクターを“自己演出の舞台”として捉えられる
- 「不思議」「毒っ気がある」「脱力感がある」一般的ではないかわいさに魅力を感じる
🍥メインキャラクター：めんたん
うさぎ型の人型キャラクターで、店員として働いている。
片耳が折れており、目はうるうる、口は「ω」、そして片耳とほっぺに“なると”の模様があるという、絶妙に不安定で愛されるビジュアル。
「めんたん」は、かわいさと寂しさのあわいにいる存在。
🍥所在地：みんなの夢の中にある「まんぷく街」
現実では存在しないが、眠っているときだけ入ることができるふしぎなまち。
◾️アクセス方法：眠ってから5分ほどで「まんぷく街」に到着。
◾️目印
うさぎの街灯が光っている
空にナルト模様の雲が浮かんでいる
屋根の煙突からは湯気が「Zzz...」と吹き出している
🍥Webサイトとの連動性
マスコット「めんたん」がナビゲーター的に登場
ローディング時に「湯気」や「ぐるぐるなると」などの演出
「入店する」ボタンをクリック＝夢に入る設定／画面がフェードインで切り替わる
期末報告めも📝
- 根拠のあるアイデア（味の裏付け）
- 型にはまらない自由度と現実的なところのライン
- お店の名前とか、他にはない案を再検討
- 店内イメージ/CMとか
- 通年でのガントチャート
2025.07.01
メインビジュアル
※ブラッシュアップ予定
メニュー
- こんな感じでメニューのグラフィックをつくる
- 各メニューに★か🍥でまんぷく度を表現？
- ラーメン3つ/ドリンク3つ/サイド2つ/セットメニュー2つ の予定
めも📝
2025.06.24
シンボルマーク予定図
2025.06.17
ロゴ
- #FFCDFF （R:255 G:205 B:255）
- 試作
2025.06.10
ロゴ案
設定
- 店員...うさぎのめんたん
- 使用カラー..白ピンク
- 場所..みんなの夢の中
- アクセス方法：おやすみになってから、5分ほどで「まんぷく街」に到着。
- 目印：うさぎの街灯が光っている
- 「入店する」ボタンをクリック＝夢に入る設定／画面がフェードインで切り替わる
参考記事
2025.06.03
店名
- めんや⭐︎腹ぱん めんや⭐︎はらぱん
- *めんや⭐︎満腹 めんや⭐︎まんぷく ⬅️決定
- めんや⭐︎わんぱん
- めんや⭐︎一撃
- めんや⭐︎啜れ
- めんや⭐︎ズズズ
- めんたんらー麺
- *麺ぷく MENPUKU
- 超満腹
2025.05.27
サイトマップ変更
2025.05.20
中間報告
- 世界観(看板/ロゴ/店名/メニュー/店員/店内)をしっかり固めるのが先！
- ラーメン店のサイトだとわかるようなメインビジュアルに
- メニュー・商品のイメージ（AI?）
- WEBサイトのデザイン➡️自由度の高い配置を検証
- 先行事例の結果はどうだったのか？(ラーメン女子博)
2025.05.13
中間報告準備
プレゼンテーションモード！！！
- 学科サイトの概要整理
・背景 ※自分自身の話は最小限に
・目的
・コンセプト
・研究成果：調査（現状調査・先行事例・技術など）
・研究成果：試作（サイトマップ・プロトタイプなど）
・まとめ（これまでの成果の振り返り・今後について）
メインビジュアル（仮）
めも📝
ハート型のナルト（ラーメン×かわいいの象徴）
箸で持ち上げられたパステル色のラーメン
Webサイトで「かわいいラーメン占い」みたいな遊び心のあるコンテンツいいかも
サイトにフォトギャラリーを入れてもいいかも
ラーメンを真上から見たビジュアル＋商品名＋ミニ説明
ホバーでぐつぐつアニメーションや湯気エフェクト
トッピングを自分でカスタマイズ
ハッシュタグ
参考記事
- 日本の事例から探る「Kawaii（かわいい）」文化がもたらすマーケティング効果とは
- キャラクターを使ったマーケティングには、「認知度の向上」と「ブランド価値の向上」という、2つの効果がある。
- 日本のKawaiiの種類
Kawaiiには様々なスタイルがあり、それぞれに独自のルックや雰囲気がある。
人気のあるKawaiiスタイルの例↓
ギャルKawaii：大胆でグラマラスなスタイルで、大きな目やカラフルな服、遊び心のあるメイクが特徴。
夢Kawaii：いわゆる「ドリーミー・キュート」で、パステルカラーや星、雲、ファンタジーのテーマが特徴。柔らかく幻想的なルックが好きな人にぴったり。
ゴシックKawaii：暗めのファッションと可愛い要素を組み合わせたスタイルで、ミステリアスな雰囲気と可愛さを求める人に人気。
キモKawaii：「キモかわいい」とも呼ばれ、不気味さや奇妙な要素と可愛いデザインを融合させ、奇妙で可愛らしいルックを生み出す。
これらは一部のスタイルに過ぎない。Kawaiiは誰にでも合うスタイルがある！
Kawaiiキャラクター
Kawaii文化の有名な要素の一つが可愛いキャラクター。
以下は人気のあるキャラクターの例↓
ハローキティ：最初の有名なKawaiiキャラクターの一つで、その丸い顔とピンクのリボン、愛らしい笑顔が世界中で愛されてる。
ピカチュウ：このポケモンキャラクターは、黄色い顔と親しみやすい性格でKawaiiの代表。
リラックマ：リラックスしたクマのキャラクターで、リラックスが好きな雰囲気が人気。
ぐでたま：この「やる気のないタマゴ」は、かわいくて少し疲れた感じが魅力です。ゆるくて面白いキャラクターが好きな人に大人気。
これらのキャラクターは子供向けだけでなく、すべての年齢層の人々に愛されていて、彼らは楽しさと喜びをもたらしてくれる存在。
やること
- かわいいビジュアル要素のイメージ資料
- zoom準備
2025.05.06
- Webサイトのおおまかな形を制作
- 学科サイトの概要整理・発表準備
2025.04.29
参考記事
2025.04.22
同時進行
- Webサイトのおおまかな形を制作
- サイトマップ・ワイヤーフレーム
- HTML + CSS の学習
- メニュー内容/お店の具体的な内容をつめる
参考記事
2025.04.15
テーマ案
- 架空かわいいがテーマのラーメン屋さん（カフェ風？）
- 架空のカフェのブランディング
- 架空のカフェ×かわいい×魔法×海
- 架空のカフェ×かわいい×魔法×ダーク
- 架空のカフェ×かわいい×魔法×夢
- 架空のカフェ×かわいい×魔法×ゴス
- 架空のカフェ×かわいい×魔法×
- 架空のカフェ×kawaii×魔法×非日常×ダーク
参考記事
2025.04.08
テーマ案1
- ビジュアルデザインと機能性の両立
- 架空のカフェのリアルなwebサイト制作➡️世界観と機能性の両立を図る
- コンセプトやメニューなど、実際に存在しているかのようにブランディング
- ビジュアル重視のデザインで視認性が落ちる場面は？どう解決したか
テーマ案2
- 商品魅力の視覚的伝達
- 商品を視覚情報で表現“味”と“香り”をどうデザインする？視覚化による商品の感性伝達
- 甘い・すっぱい・辛い・硬い・柔らかい/柑橘系・フローラル系などの要素を視覚的に伝達
- どんな要素が相手にどんな印象を与えるか
- ① 視覚表現の分析
食品（例：チョコレート、フルーツ、ドリンク）や香水のパッケージ、広告、Webサイトを収集し、視覚的な要素（色、形、素材感、フォントなど）を分析。
各デザインが「甘さ」「爽やかさ」「濃厚さ」「フレッシュさ」「香りの種類」などをどう伝えているかを考察。
② ユーザー印象調査
収集したデザインを見せて、「どんな味・香りだと思うか？」「どんな印象を受けるか？」というアンケートを実施。
実際の味・香りの情報と、ユーザーが視覚だけで想像した印象にズレがあるかを検証。
③ デザイン制作と実験
架空の商品（お菓子、香水など）を設定し、見た目だけで魅力を伝えるビジュアルデザインを自分で制作。
複数パターンを作成し、どれがより的確に味・香りを連想させるかを調査。
- 人はどれくらい視覚だけで「味や香り」を感じ取れるのか？
デザインによる「味や香りの誤認」はどこまで許容されるのか？
ブランドが与えたいイメージと、ユーザーの受け取る印象のギャップはあるか？
- 香りや味覚ごとの色・形・質感の対応関係をまとめたグラフィック資料
テーマ案3
- 国や文化によって異なる「可愛い」の傾向を分析・比較
- グローバルデザインにおいて、文化ごとの可愛さはどう活用できるか？
- それぞれの文化に合わせたwebサイトのUIを架空でデザイン
- 「かわいさの構造図」や「視覚的な特徴のレーダーチャート」インフォグラフィックで比較
色彩傾向（彩度・明度）
形の特徴（丸み／シャープさ）
顔の比率（目の大きさ・顔のバランス）
装飾の有無、フォントの雰囲気
デザインの余白感、密度感
- 同じ架空の~を、日本風／韓国風／フランス風など国別で制作・比較
各国ごとの“可愛い”を紹介し、それを元にした架空のお菓子パッケージやUIを再現
同じ機能（例：カフェ予約サイト）を、国別“可愛さ”表現でパターン制作
同じキャラクターを日本風、韓国風、フランス風でビジュアル表現して比較展示
