アプリを企画してモックアップをつくりましょう！ …モックアップとは？外見を実物そっくりに似せた模型のことです。デザインしたアプリを本物のiPhoneアプリみ

アプリを企画してモックアップをつくりましょう！

1

アプリを企画してモックアップをつくりましょう！　Presented by Life is Tech!

１、作りたいアプリを考える !

２、デザインを考える !

３、モックアップをつくる !

■ STEPはたったの３つです！

4


モックアップとは？

外見を実物そっくりに似せた模型のことです。デザインしたアプリを本物のiPhoneアプリみたいに動かせるのです。

5


2

STEP１：アプリの企画を考えてみましょう!!

　どんなアプリを作りたいですか？ !

　　　　　普段困っていることを考える !

　　　　　分野とかけあわせてみる（次ページ）


STEP１：アプリの企画を考えてみましょう！！　アプリの分野を考えてみましょう

ゲームコミュニケーション勉強

買い物音楽TVスポーツ

アートファッション旅行

3


3

旅行×

分野困っていること

旅行のプロ達の行動がわかるアプリが欲しい！！

例えば…


STEP 2 !

デザインを考えてみましょう！！

6


デザインを考えてみましょう！！アプリ名：


・デザインを考えてみましょう！！

・どんな見た目なのか・どんなコンテンツにするのか・ボタンの配置は？などなど

カラーペンを使って自由に書いてみましょう

7


STEP３ !

モックアップを作りましょう！

8


プロジェクトを作ります（１）

① https://www.fluidui.com/　で検索クリック


https://www.fluidui.com/

ダブルクリック！!カチカチっと2回クリック

1

2

クリックしてみましょう！カチっと１回クリック

新しいページが登場！


こんな画面が出てきたら、準備完了です！！

ページを作りましょう（１）

!!

!!

素材ページ

11


3

1

2

ドラッグ !クリックしたまま移動！

ドロップ !ここで離します

ページを作りましょう（２）

3

12


!!

!!

!!背景の色

!!

テキスト

バー!!

図形

レイアウト

ツールバーの使い方

色透明度フォントサイズスタイル

素材のグループ化

素材の順番コピー、ペースト

削除

新しいページをつくる時に便利です

14


画像をアップロードしましょう!1

!2

!!

3

クリックすればページ内に使えます

19


画面遷移をしましょう（1）

!

!!

1

2

ボタンのエリアを選択

!!

3

矢印を遷移させたいところまでドラッグ＆ドロップ


画面遷移をしましょう（2）

ページからの移動ができるようにどんどんボタンやアイコンをリンクさせましょう！


実行（PLAY）して、動いたら完成です！！！！! PLAY

17


Documents

アプリを企画してモックアップをつくりましょう！ …モックアップとは？外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ

アプリを企画してモックアップをつくりましょう！ …モックアップとは？外見を実物そっくりに似せた模型のことです。デザインしたアプリを本物のiPhoneアプリみ