マフィン専門店mogmog.のWebサイトをつくった。
岡山市西古松にある、小さなマフィン屋さん。甘い生地と、とろけるトッピングと、焼きたての空気——その「匂い」を、画面越しに感じてもらえるサイトを目指してつくった記録と、その裏側にある考え方を書き残しておきたいと思う。
サイトをつくる前に、決めたこと
デザインを始める前に、ひとつだけ問いを立てた。
「このサイトを見た人は、何を感じてほしいか？」
情報を伝えるだけなら、テキストと地図があれば十分だ。でも、それだけでは「もったいない」と思った。mogmog. というお店には、説明しきれない「雰囲気」がある。ドアを開けた瞬間の温かさ、棚に並ぶ様々なマフィンたち、「どれにしようかな」と迷う時間の楽しさ。
その体験を、サイトに来た人に少しだけ先渡しできないか——それがコンセプトの出発点だった。
「匂いがしそう」という感覚はどこから来るか
ブランドのキャッチコピーは、こうだ。
甘い時間も、お腹を満たす時間も。毎日をちょっと楽しくする、マフィン専門店「mogmog.」
「甘い時間」という言葉は、味覚と時間感覚を同時に喚起する。「お腹を満たす時間」は、満足感と場所の記憶を引き出す。視覚的なビジュアルと、感覚を揺さぶるコピーが組み合わさるとき、人は「思い出したように」匂いを感じ始める。
これには、クロスモーダル対応（Cross-modal Correspondence） と呼ばれる認知の仕組みが関わっている。視覚・聴覚・嗅覚・味覚などの感覚は、それぞれ独立しているようで、脳の中では互いに連動している。焼きたてのパンを写した写真を見ただけで「あの匂い」を感じるのは、過去の体験と紐づいた感覚記憶が視覚刺激によって呼び起こされるからだ。
つまり「匂いがしそうなサイト」とは、匂いを出しているのではなく、見る人の記憶の中にある匂いを、上手に呼び起こすサイトのことだ。
ブランド名「mogmog.」の行動科学的な力
mogmog（もぐもぐ） という名前は、食べる動作の擬音語だ。
言語学・認知科学の分野では、擬音語・擬態語（オノマトペ）は感覚と意味が直結していることが知られている。「もぐもぐ」という音を聞くだけで、口の動き、咀嚼の感触、食べている場面が無意識に連想される。これを音象徴（Sound Symbolism） という。
さらに、名前の末尾に付いた「.（ピリオド）」。これは単なるデザイン上のアクセントではなく、余白と余韻の演出だ。ピリオドは「終止」を意味するが、ここでは「ここで一度止まって、ゆっくりしてください」という招待のようにも読める。小さな記号ひとつが、ブランドの佇まいをつくっている。
サイト構造のポイント：迷わせず、でも「選ぶ楽しさ」は残す
Webサイトにおいて、ユーザーが感じる最大のストレスのひとつが「何をすればいいかわからない」という状態だ。行動経済学では、選択肢が多すぎると意思決定が止まることを選択のパラドックス（Paradox of Choice）と呼ぶ。
mogmog. のサイトは、この問題に対してシンプルに答えている。
構造の核はこの3つに絞られている。ユーザーが「次に何をするか」を迷わないよう、情報の優先順位を明確にした。一方で、マフィンのラインナップや世界観については、視覚的な余白と写真の豊かさで「ゆっくり眺める楽しさ」を担保している。
「迷わせない動線」と「眺めたくなる世界観」の共存——これがサイト構造の肝だ。
色と余白が持つ心理的な効果
食べ物のWebサイトにおいて、配色は食欲と直結する。
食欲を刺激する色として知られているのは赤・オレンジ・黄色のような暖色系だが、mogmog. のビジュアルはそこにナチュラルなベージュやクリーム色を組み合わせている。これには、安心感・温かさ・手づくりのぬくもりを感じさせる効果がある。
カラーサイコロジー（色彩心理学）の観点では、ベージュは「自然・やさしさ・信頼」を喚起する色だ。大量生産の工場菓子ではなく、「誰かが心を込めて焼いた」というイメージを色が語っている。
また、余白の使い方も重要だ。情報を詰め込まず、写真を呼吸させるように配置することで、1枚1枚のマフィンの「存在感」が際立つ。心理学でいうフィギュア・グラウンド（図と地）の効果——余白（地）があるからこそ、被写体（図）が際立つ。
「毎日をちょっと楽しくする」という価値設計
ポジティブ心理学の研究者マーティン・セリグマンは、幸福の構成要素のひとつに「小さなポジティブ感情の積み重ね」を挙げている。大きな喜びよりも、毎日の小さな楽しみの方が、長期的な幸福感に寄与するという知見だ。
mogmog. のコンセプト「毎日をちょっと楽しくする」は、まさにこの文脈にある。
「特別な日のケーキ」ではなく、「今日のコーヒーのお供に」「仕事帰りのご褒美に」——そういう日常の文脈にそっと差し込める存在として、マフィンを位置づけている。これは、顧客との心理的距離を縮める価値提案だ。
「高くて特別」より、「手が届いて、でも十分特別」。その絶妙なポジションニングが、コピーひとつに込められている。
STUDIOで制作することを選んだ理由
このサイトはノーコードツールSTUDIOで制作した。
「なぜコーディングしなかったのか？」と問われることがある。答えは、ツールは目的のために選ぶものだからだ。
mogmog. に今必要なのは、「マフィンの魅力を伝え、お店に来てもらう」という明快なゴールを達成するサイトだ。そのためにSTUDIOは十分すぎるほどの力を持っているし、デザインの自由度も高い。技術的な複雑さを増やすことが、必ずしもサイトの価値を上げるわけではない。
シンプルな構造で、高い完成度のデザインを届ける。それが今回の判断基準だった。
まとめ：「伝わるかたちに変える」ということ
SynQ Creativeのフィロソフィーに「伝わらない想いを、伝わるかたちに変える」という言葉がある。
mogmog. のWebサイトは、まさにその実践だ。おいしいマフィンをつくる想いは、焼き上がった瞬間から時間と共に薄れていく。でも、それをWebというかたちに変換することで、誰かのスマホの画面の中に、今夜も残り続ける。
「匂いがしそうなサイト」をつくることは、感覚を設計することだ。色・言葉・余白・構造・名前——すべてが意味を持ち、すべてが訪問者の脳と感情に働きかけている。
mogmog. のマフィンが、岡山のだれかの「ちょっといい今日」をつくっていますように。