FRAMEWORK

DESIGNED

目標

  • このプロトタイプは、Figma を練習するための自習制作として制作されました。

使用ツールの詳細

Figma

  • フレームワークとデザイン作成しました。

Copilotのデザイン機能

  • 画像素材作成に活用されました。

Canva

タイトルやハンバーガーメニューなどのグラフィックデザイン要素を作成するために使用されました。


デザインの工夫とレイアウト

  • メニュー画面:

    カテゴリーボタン(期間限定、パンケーキ、ドリンク)と「店員を呼ぶ」ボタンが表示されています。

    配色は暖かい黄色とベージュで、可愛らしいデザインです。

  • 期間限定メニュー:

    各パンケーキの画像と説明、価格、数量調整ボタン(プラス、マイナス)があります。

    合計点数と金額、注文確認・変更ボタンが下部にあります。

  • サイドメニュー表示:

    メニューカテゴリが表示され、選択したカテゴリの内容が右側に表示されます。

  • 注文確認画面:

    選択されたパンケーキの一覧と合計金額、注文ボタンがあります。

  • 注文完了画面:

    「ご注文ありがとうございます」と表示され、閉じるボタンがあります。

全体的に、温かみのある色使いとかわいらしいパンケーキのイラストが特徴的で、ユーザーが簡単に操作できるようにデザインされています。

プロトタイプ確認