MINGZE XIA

作品紹介 日本の若年層をターゲットにしたフードデリバリーアプリのUIデザイン作品です。淡い紫を基調にしたグラスモーフィズム(すりガラス風)の世界観で、ホーム、マイページ、アカウント設定、ヘルプセンターといった主要画面を一通り制作しました。 デザインのねらい フードデリバリーアプリといえば、食欲を刺激するオレンジや赤を使ったものがほとんどです。そこをあえて外して、若い世代、特に女性ユーザーが「ただ開くだけで気分が上がる」と感じられるような、ライフスタイル寄りのビジュアル表現を目指しました。アプリの中身だけでなく、見た目そのものが選ばれる理由になるようなUIを作りたかった、というのが出発点です。 画面構成 ボトムナビゲーションは「ホーム / カテゴリー / 注文 / マイページ」の4タブ構成で、今回はそのうち主要な4画面を仕上げています。 ホーム画面はあいさつ文と検索バーを上部に置き、その下に8つのカテゴリー入口(中華、洋食、カフェ、デザート、麺類、和韓、焼肉鍋、ヘルシー)、さらに下に人気グルメのレコメンド枠を配置しました。 マイページにはユーザー情報のカードに加えて、クーポン、お気に入り、残高の3つを並べたサマリー、配送先住所やアカウント設定などの機能リストをまとめています。 アカウント設定画面は「通知 / アカウント・セキュリティ / 一般 / その他」の4グループに分類して、項目が多くなっても迷わない構造にしました。 ヘルプセンターはオンラインサポート(9:00から22:00)、電話、メールの3つの問い合わせ手段を上部に、よくある質問を下部に配置して、ユーザーが状況に応じて選べるようにしています。 ビジュアル 配色は淡い紫をメインに、ピンクや水色のグラデーションを少しずつ重ねて、夢のような軽やかな雰囲気を作りました。カード自体は半透明のすりガラス調にし、柔らかいシャドウで浮遊感を出しています。 カテゴリーアイコンはぷっくりとした立体感のある3Dスタイル、機能系のアイコンは統一感のあるフラットな線画スタイルというように、装飾要素と機能要素ではっきり描き分けています。カードもボタンも大きめの角丸で揃え、余白をたっぷり取ることで、情報量があっても窮屈に感じない設計にしました。 ローカライズ 最初から日本市場向けに作っているので、通貨は円表示、ユーザー名も「佐藤 優」のように日本人名で、カテゴリーには和韓料理や焼肉鍋など日本のユーザーが普段から食べているジャンルを入れています。言語設定のデフォルトは日本語、ダークモードのトグルも標準で用意しました。 制作プロセスとこだわり UI部分はFigmaで全画面を作り、カードやボタン、アイコンはコンポーネント化して画面間での一貫性を保ちました。 実装段階ではWebコーディングのAI補助も活用しています。コードを一から書くのではなく、デザイン意図を伝えながらAIに下地を作ってもらい、自分は画面の見え方や挙動の調整に集中する、という進め方を取りました。これによってデザインの仕上げに時間を使えるようになり、作品全体のクオリティを上げることができたと考えています。 特に時間をかけたのはインタラクションアニメーションの部分です。画面が切り替わるときの動きの速さ、カードがふわっと現れるタイミング、ボタンをタップしたときのフィードバック、スクロール時の要素の動き方など、細かい挙動を何度も調整しました。動きを派手にしすぎると世界観が壊れてしまうので、すりガラスの軽やかさに合うように、控えめだけれど気持ちのいい動きを目指しています。静止画では伝わらない部分にこそ、このアプリの魅力があると考えて作り込みました。 この作品で得たこと ビジュアル面では、フードデリバリーアプリでも従来の刺激的な配色から離れた表現ができることを試せました。設計面では、複数画面にわたってビジュアルシステムを統一する難しさと面白さを実感できました。そして制作面では、AIによるコーディング補助を取り入れながら、自分はデザインとインタラクションの細部に時間を投資するという、新しい働き方を体験できた作品でもあります。