めんや☆まんぷく
架空ラーメン店のwebサイト制作
🍥🍥🍥
- いわもと あゆ
- Keywords：web, html, css, kawaii
概要
これは何？
「かわいい」をコンセプトとした架空のラーメン屋さんのWEBサイト制作
背景と目的
近年、日本発の「かわいい（Kawaii）」文化は、ファッション、キャラクター、カフェ、雑貨など多様な分野において国内外で広く浸透しており、特にZ世代を中心とする若年層に強い影響を与えている。かわいさは単なるビジュアル表現にとどまらず、自己表現や共感の手段として機能し、ライフスタイルや消費行動にも密接に関わっている。
一方、ラーメン業界においては、長らく「職人気質」「無骨」「男性的」といったイメージが根強く残っており、かわいさを前面に押し出したデザインやブランディングはあまり見られない。しかしながら、SNSの普及によって、視覚的なインパクトや“映える”コンテンツが飲食店の話題性や集客力に直結する時代となっている。実際に、店の世界観や料理のビジュアルがSNSで拡散されることで、新しい客層の獲得に繋がっている事例も多く見られる。
このような社会的背景の中、「かわいい」という視点をラーメンという既存のジャンルに取り入れることは、業界に新たな価値や可能性をもたらす試みといえる。
また、そうした新しいコンセプトをより効果的に伝える上で、Webサイトの存在は非常に重要である。現代のユーザーは、店舗に訪れる前にWeb上で情報収集を行い、写真やデザイン、メニューの雰囲気などからその店の世界観を判断する傾向にあるため、ブランドイメージやビジュアルの印象は、来店意欲に直結する大きな要素である。
したがって、本プロジェクトでは、「かわいい」を軸とした架空のラーメン店の世界観を、ブランディングとWebサイト制作の両面から設計・構築し、伝えたいイメージを的確かつ効果的に伝える手法を探る。
コンセプト
- 「かわいい」と親和性の高い若年層や女性層、SNSユーザーなどを主なターゲット層に設定する。
- ビジュアル的要素と使いやすさの両立を目指す。
- 従来のラーメン店が持つ“無骨”“男性的”といったイメージから脱却し、ポップで明るい印象を目指す。
- 「かわいさ」を感じる要素を隅々に取り入れ、すべてのビジュアル表現を統一することで、世界観に一貫性を持たせる。
- Webサイトでは、店舗の情報だけでなく、「かわいい世界観」が直感的に伝わるビジュアル・動き・レイアウトを重視し、来店前から「このお店に行ってみたい！」と思わせる仕掛けをデザインする。
- KAWAII MONSTER CAFE
成果物の仕様
制作ツール
- Apple MacBook Pro
- MacOS Ver.14.4.1
- Visual Studio Cord：HTML + CSSのコーディング
- Adobe Illustrator：グラフィック要素のデザイン
プロジェクトの期間
2025.04.08-2026.01.15 (通年)
まとめ
- 今後の流れ
夏季休業...html,cssの勉強/グラフィック要素の完成
後期...webサイト制作
調査
現状調査
- 消費者の行動とSNSの関係について
- ラーメン店の市場に関する情報
- 現代社会における「かわいい」の意義・位置付け
先行事例
技法・技術情報
プロジェクト管理
スケジュール
ToDo
コンセプト設定サイトマップ- ワイヤーフレーム（モバイル・pc）
- メインビジュアル
- メニュー
ロゴ
進捗記録
2025.07.08
2025.07.01
メインビジュアル/
※ブラッシュアップ予定
メニュー
- こんな感じでメニューのグラフィックをつくる
- ラーメン3つ/ドリンク3つ/サイド2つ/セットメニュー2つ の予定
めも📝
2025.06.24
ロゴ
- #FFCDFF （R:255 G:205 B:255）
- 試作
シンボルマーク予定図
- メニュー
- 各メニューに★か🍥でまんぷく度を表現
- めんたんのきまぐれらーめんセット
- ラーメン３ ドリンク３ セット２
参考記事
2025.06.17
店名
- めんや⭐︎腹ぱん めんや⭐︎はらぱん
- *めんや⭐︎満腹 めんや⭐︎まんぷく ⬅️決定
- めんや⭐︎わんぱん
- めんや⭐︎一撃
- めんや⭐︎啜れ
- めんや⭐︎ズズズ
- めんたんらー麺
- *麺ぷく MENPUKU
- 超満腹
コンセプト設定
- 店員...うさぎのめんたん
- 使用カラー..黒白ピンクブルー
- 場所...
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を再現
同じ機能（例：カフェ予約サイト）を、国別“可愛さ”表現でパターン制作
同じキャラクターを日本風、韓国風、フランス風でビジュアル表現して比較展示
