めんや☆まんぷく
架空ラーメン店の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）
メインビジュアル- メニュー表
ロゴ- webサイト
進捗記録
2025.07.08
お店の概要整理
🍥店名: めんや⭐︎まんぷく
- 名前の由来と意図
- めんや☆まんぷく という名前は、「親しみやすさ」「ゆるさ」「満足感」「語感のかわいさ」を名前だけで直感的に伝えるネーミングです。「めんや」でラーメン屋さんらしい響きを出し、「まんぷく」はおなかもこころも満たされるという印象を与えるための言葉です。また、中央の「☆」マークは、ポップさと遊び心を演出する記号で、中高生〜20代の感覚に馴染みやすいネット・サブカル的感性を反映しました。
🍥コンセプト: ゆるかわポップ × ほんのりダーク
- 「ゆるくてポップ⭐️🩷🧸🌀💤」と「ダーク🖤💀⚰️🧪🧟💊」を融合させた「kawaii」がコンセプトの「Kawaii文化に共感する若年層が、共鳴し・拡散したくなるラーメン屋さん🍥🍰🍮🍜」
- 「ゆるい」「かわいい」「ポップ」は、現代のKawaii文化における主流ジャンル。
でもそれだけでは甘すぎる！！「ほんのりダークさ」を加えることで、他の「かわいい」と差別化
◾️ゆるかわ（Yurukawa）
「グルーミー」や「うさまる」のような脱力系の可愛さ
癒し・緩さ・微笑ましさ・あいまいさ
キャラやメニューに漂う、不完全で愛される雰囲気
◾️ポップ（Pop）
色づかいや記号（☆・！・Z・†）の多用
ひと目で引っかかるインパクトのある名前
視覚的に楽しめるアイキャッチ要素（ネオン・パステル・奇抜な盛り付け）
◾️ダーク（Darkness）
黒がベースの配色／少し影のある演出（目がうるうる、骸骨なるとなど）
キャラクターや店舗に込められた、さびしさ・裏がある感じ
「かわいいけど何か引っかかる」→世界観に没入したくなる動機づけ
🎯想定ターゲット
- Z世代〜20代前半の若年層🔽
- SNSを中心に情報収集・行動決定を行う
- 「映える」「かわいい」「クセがある」といった視覚的インパクトを重視
- ファッション、推し活、K-POP、アニメ・キャラ文化などに親しみがある
- なぜ惹かれるか：
- 「ラーメン屋らしくないラーメン屋」というギャップに共感
- 中性的でゆるく、個性的な世界観に“自分らしさ”を感じる
- 「めんたん」などのキャラとの距離の近さ・親しみやすさ
- ネタとしても可愛さとしても投稿しやすい（≒他人からのリアクションを得やすい）
- 「#めんたんらーめん」「#まんぷくかわいい部屋」などのハッシュタグ展開にも乗りやすい
- かわいい文化／Y2K／地雷系・サブカル系ファッションが好きな層🔽
- 服装やSNS投稿にも**“世界観”や“キャラ性”を重視**
- Y2K、病みかわ、ゆめかわ、メンヘラ地雷、韓国カフェ風などに強く反応
- サンリオ、量産型、アクセサリーや雑貨にこだわりがある
- 食べ物の「味」よりも、「自分の世界に合っているか」を気にする
- なぜ惹かれるか：
- 「かわいい＋ちょっとダーク」という組み合わせに強い親和性
- フォトブース的な店舗空間や、キャラとの接点を“自己演出の舞台”として捉えられる
- 投稿すると「どこそれ！？」と聞かれやすく、他者との距離を近づける会話のきっかけになる
- デザイン・キャラクター・オタクカルチャーに興味を持つ層🔽
- 世界観」「造形美」「コンセプト設計」に感度が高い
- デザフェス、コミティア、V系、ボカロ、イラスト投稿文化などにも関わりがある
- 飲食も、単なる食事ではなく「作品」や「展示」のように捉える傾向あり
- 一般的な可愛さに飽きている人が多く、“毒気”や“クセ”に魅力を感じる
カテゴリ 主な価値観 惹かれる要素
Z世代女子：“かわいい×個性” ギャップ・世界観・キャラ
サブカル好き：“物語性×ビジュアル” ダークさ・造形・設定
カフェ通い層：“空間×共感性” ゆるさ・癒し・軽さ
オタク女子・創作層 “想像と投影” キャラ性・二次創作余地
- 「かわいい」だけでなく、「不思議」「毒っ気がある」「脱力感がある」デザインが好きな層。
- サブカル／キャラクター文化に馴染みがあり、Kawaiiと中二のあわいに魅力を感じる層。
🍥メインキャラクター：めんたん
- うさぎ型の人型キャラクターで、店員として働いている。
- 片耳が折れており、目はうるうる、口は「ω」、そして片耳とほっぺに“なると”の模様があるという、絶妙に不安定で愛されるビジュアル。
- 「めんたん」は、かわいさと寂しさのあわいにいる存在。
🍥 メニュー・ネーミングの方針:インパクトを持たせる！！
- めんたんらーめん
- ほねほねぴょん骨らーめん
- もきゅもきゅぎょうざZ
◾️Webサイトとの連動性
- マスコット「めんたん」がナビゲーター的に登場
- ローディング時に「湯気」や「ぐるぐるなると」などの演出あり
◾️このお店の存在意義（研究的意図）
- 「めんや☆まんぷく」は、実在しない架空のラーメン店だが、コンセプトの「ゆるかわポップでほんのりダークなkawaii」という伝えたい魅力を効果的に伝えられる効果的な手法を探る
期末報告めも📝
- 根拠のあるアイデア（味の裏付け）
- 型にはまらない自由度と現実的なところのライン
- お店の名前とか、他にはない案を再検討
- 店内イメージ/CMとか
2025.07.01
メインビジュアル
※ブラッシュアップ予定
メニュー
- こんな感じでメニューのグラフィックをつくる
- ラーメン3つ/ドリンク3つ/サイド2つ/セットメニュー2つ の予定
今週やること
めも📝
2025.06.24
ロゴ
- #FFCDFF （R:255 G:205 B:255）
- 試作
シンボルマーク予定図
- メニュー
- 各メニューに★か🍥でまんぷく度を表現？
- ラーメン３ ドリンク３ セット１
参考記事
2025.06.17
店名
- めんや⭐︎腹ぱん めんや⭐︎はらぱん
- *めんや⭐︎満腹 めんや⭐︎まんぷく ⬅️決定
- めんや⭐︎わんぱん
- めんや⭐︎一撃
- めんや⭐︎啜れ
- めんや⭐︎ズズズ
- めんたんらー麺
- *麺ぷく MENPUKU
- 超満腹
コンセプト設定
- 店員...うさぎのめんたん
- 使用カラー..白ピンク
- 場所..みんなの夢の中
- アクセス方法：おやすみになってから、5分ほどで「まんぷく街」に到着。寝ぼけたままでもだいじょうぶ。めんたんがそっと手を引いてくれます。
- めんや☆まんぷくの目印：・うさぎの街灯が光っている
・空にナルト模様の雲が浮かんでいる
- 「Zzz...いらっしゃいませ...」みたいな眠そうなトップテキスト
- 「入店する」ボタンをクリック＝夢に入る設定／画面がフェードインで切り替わる
2025.06.10
ロゴ案
2025.06.03
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
次やること
- ワイヤーフレーム続き
- 学科サイトの概要整理・発表準備
2025.04.29
参考記事
2025.04.22
同時進行
- Webサイトのおおまかな形を制作
- サイトマップ・ワイヤーフレーム
- HTML + CSS の学習
- メニュー内容/お店の具体的な内容をつめる
参考記事
2025.04.15
テーマ案
- 架空かわいいがテーマのラーメン屋さん（カフェ風？）
- 架空のカフェのブランディング
- 架空のカフェ×かわいい×魔法×海
- 架空のカフェ×かわいい×魔法×ダーク
- 架空のカフェ×かわいい×魔法×夢
- 架空のカフェ×かわいい×魔法×ゴス
- 架空のカフェ×かわいい×魔法×
- 架空のカフェ×kawaii×魔法×非日常×ダーク
参考記事
2025.04.08
テーマ案1
- ビジュアルデザインと機能性の両立
- 架空のカフェのリアルなwebサイト制作➡️世界観と機能性の両立を図る
- コンセプトやメニューなど、実際に存在しているかのようにブランディング
- ビジュアル重視のデザインで視認性が落ちる場面は？どう解決したか
テーマ案2
- 商品魅力の視覚的伝達
- 商品を視覚情報で表現“味”と“香り”をどうデザインする？視覚化による商品の感性伝達
- 甘い・すっぱい・辛い・硬い・柔らかい/柑橘系・フローラル系などの要素を視覚的に伝達
- どんな要素が相手にどんな印象を与えるか
- ① 視覚表現の分析
食品（例：チョコレート、フルーツ、ドリンク）や香水のパッケージ、広告、Webサイトを収集し、視覚的な要素（色、形、素材感、フォントなど）を分析。
各デザインが「甘さ」「爽やかさ」「濃厚さ」「フレッシュさ」「香りの種類」などをどう伝えているかを考察。
② ユーザー印象調査
収集したデザインを見せて、「どんな味・香りだと思うか？」「どんな印象を受けるか？」というアンケートを実施。
実際の味・香りの情報と、ユーザーが視覚だけで想像した印象にズレがあるかを検証。
③ デザイン制作と実験
架空の商品（お菓子、香水など）を設定し、見た目だけで魅力を伝えるビジュアルデザインを自分で制作。
複数パターンを作成し、どれがより的確に味・香りを連想させるかを調査。
- 人はどれくらい視覚だけで「味や香り」を感じ取れるのか？
デザインによる「味や香りの誤認」はどこまで許容されるのか？
ブランドが与えたいイメージと、ユーザーの受け取る印象のギャップはあるか？
- 香りや味覚ごとの色・形・質感の対応関係をまとめたグラフィック資料
テーマ案3
- 国や文化によって異なる「可愛い」の傾向を分析・比較
- グローバルデザインにおいて、文化ごとの可愛さはどう活用できるか？
- それぞれの文化に合わせたwebサイトのUIを架空でデザイン
- 「かわいさの構造図」や「視覚的な特徴のレーダーチャート」インフォグラフィックで比較
色彩傾向（彩度・明度）
形の特徴（丸み／シャープさ）
顔の比率（目の大きさ・顔のバランス）
装飾の有無、フォントの雰囲気
デザインの余白感、密度感
- 同じ架空の~を、日本風／韓国風／フランス風など国別で制作・比較
各国ごとの“可愛い”を紹介し、それを元にした架空のお菓子パッケージやUIを再現
同じ機能（例：カフェ予約サイト）を、国別“可愛さ”表現でパターン制作
同じキャラクターを日本風、韓国風、フランス風でビジュアル表現して比較展示
