えむいち、 Webサイト
「えむいち、」は、千葉工業大学大学院のデザイン科学専攻修士1年(M1)の15人で作り上げた、学園祭の出展プロジェクトです。 米粉のワッフル「もっふる」の販売と、メンバーそれぞれの個性あふれる「作品展示」を行いました。
私はこのプロジェクトの全体統括(責任者)を務めながら、チームの顔となるWebサイトの企画・デザイン・実装を一貫して担当しました。
プロジェクトのコンセプト
15人の専攻分野は、UI/UX、建築、モビリティ、グラフィックなどバラバラです。 そんな私たちが一つのチームとしてまとまるために、「デザインに対する姿勢」を共通項として定義しました。
「デザインを染め上げる、藍のムラ」
何度も布を浸して空気に触れさせ、色を深めていく「藍染め」の工程は、試行錯誤を繰り返して納得のいくアウトプットを作り上げる「デザインのプロセス」と重なります。 私たちのデザインへの「愛(Ai)」と、未完成ながらも味わい深い「藍(Ai)」を掛け合わせ、Webサイト全体もこの「藍染め」の世界観で統一しました。
Webデザインのこだわり
1. 「老舗」のような上質な世界観
学園祭のWebサイトにありがちな「賑やかさ」ではなく、大学院生らしい「知性」や「落ち着き」を感じさせるトーンを目指しました。 「藍色」を基調に、余白を広くとったレイアウトや縦書きのタイポグラフィを組み合わせ、上質な和菓子店のような佇まいをWeb上で表現しています。
2. 待ち時間を「エンタメ」に変えるUX
飲食店出展の課題である「ピーク時の待ち時間」や「受け渡し後の離脱」を解決するために、「もっふる診断」 というコンテンツを実装しました。 整理券のQRコードからアクセスでき、簡単な質問に答えると自分にぴったりの味(キャラクター)が診断されます。 待ち時間を「退屈な時間」から「自分に合う味を見つけるエンタメ」に変えることで、滞留率と顧客体験の向上を図りました。
3. 作品への没入感と公平性
メンバーの作品を紹介するページでは、スマホでの閲覧を最優先に設計しました。 画面いっぱいに作品画像を表示し、画面下部のボタンを押すと詳細(ストーリー)が読めるという、アプリのような没入感のあるUIを採用しています。 また、特定の作品だけが目立たないよう、ページを開くたびに作品の表示順がランダムに入れ替わるロジックを組み込み、全ての作品に公平に光が当たるように配慮しました。
プロジェクト背景
- 制作期間: 6ヶ月(プロジェクト全体)
- チーム: 15名(デザイン科学専攻M1)
- Role: 責任者, Web Design/Dev, Concept Formulation, Graphic Support
- Web Tech: Astro, TypeScript, SCSS
- Tools: Figma, Illustrator, Photoshop