UIアイデア入門
基本パターンをガイドラインで習得
UIアイデア入門
完璧にする前にラフでアイデアを作る理由を体感しよう
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

完璧にする前にラフでアイデアを作る理由を体感できます

コースの詳細へ

コース内容
デザインをはじめよう
SECTION
お題:モバイルオーダーアプリのUIプロトタイプをデザイン

架空のカフェの店舗で使うモバイルオーダーアプリをデザインしていきます。UIを作るフローとモバイルオーダーアプリについて知りましょう。

要件のスライドリンク

□ 参考:モバイルオーダーアプリって何?という人はこちらの記事読むとイメージが浮かぶかも

並ばず注文! スマホでの事前オーダー&決済『モバイルオーダー』を体験してみた

11:03
カテゴリ
お題:モバイルオーダーアプリのUIプロトタイプをデザイン
無料
メンバー限定
SECTION
自分で作り切る→動画をみよう

実際に考えてパターンを作ってUIを作るのが1番成長します。動画で作成例を見ていく前に自分で作り切ってみましょう

2:58
カテゴリ
自分で作り切る→動画をみよう
無料
メンバー限定
SECTION
デザインの進め方のイメージ

モバイルオーダーアプリをデザインしていく流れのイメージを話しています。デザインする際の参考にしてみてください。

2:39
カテゴリ
デザインの進め方のイメージ
無料
メンバー限定
SECTION
フローから必要な情報をアイデア出し

フローを確認しながらUIに必要な情報を出していきましょう。

10:32
カテゴリ
フローから必要な情報をアイデア出し
無料
メンバー限定
SECTION
参考になるアプリからヒントを得よう

今回は「マクドナルド」「スターバックス 」「UberEats」を参考にします。みなさんもアプリをチェックしてスクショを集めてみてください。

9:09
カテゴリ
参考になるアプリからヒントを得よう
無料
メンバー限定
SECTION
紙にUIアイデアのラフを出そう

まずラフでフローを作りきります。そのためのUIのイメージを紙で出していきましょう。<br>お題で設定されている「ユーザーフロー」に沿って必要なアイデアを出します。<br>参考にするサービスのUIを頼りに作っていきます。

21:14
カテゴリ
紙にUIアイデアのラフを出そう
無料
メンバー限定
SECTION
ホーム画面をラフデザイン

動画で使用しているiOSの基本コンポーネントのFigmaデータはこちら

今回はUberEatsをベースに作成していきます。

11:06
カテゴリ
ホーム画面をラフデザイン
無料
メンバー限定
SECTION
店舗選択画面をラフデザイン

普通の画面遷移ではなく、UberEatsを参考に「下から画面がせりあがり、選択のみの情報を表示する画面」としてUIを作っています。

10:32
カテゴリ
店舗選択画面をラフデザイン
無料
メンバー限定
SECTION
商品詳細選択画面ラフデザイン

今回はiOSの特徴的な「ハーフモーダル」を使って、画面遷移なしで選択できる詳細UIを作っています。

ハーフモーダルの動きについてはこちら

11:22
カテゴリ
商品詳細選択画面ラフデザイン
無料
メンバー限定
SECTION
カート&確定画面をラフデザイン

マクドナルドのアプリを参考にUIのパターンを作成してみます。

12:54
カテゴリ
カート&確定画面をラフデザイン
無料
メンバー限定
SECTION
注文確定/注文状況確認のUIラフ

注文番号を表示して、店舗で受け取れる情報を表示する画面を作っていきます。
基本的に役割が同じ情報は見た目を揃えて表示しましょう。

7:59
カテゴリ
注文確定/注文状況確認のUIラフ
無料
メンバー限定
SECTION
確定画面/注文タブ

遷移をつける部分を動画でやっていません。自分でお題のフローを進められるように遷移をつけて確認してください!<br>ポイントはここで機能面/スタイルの両方の軸で「ここはもう少し良くできるなあ」という点に気付くことです。

8:09
カテゴリ
確定画面/注文タブ
無料
メンバー限定
ABOUT
コース詳細