アプリを企画してモックアップをつくりましょう!...
TRANSCRIPT
![Page 1: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/1.jpg)
アプリを企画してモックアップをつくりましょう!
1
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 2: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/2.jpg)
1、作りたいアプリを考える !
2、デザインを考える !
3、モックアップをつくる !
■ STEPはたったの3つです!
4
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 3: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/3.jpg)
モックアップとは?
外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみたいに動かせるのです。
5
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 4: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/4.jpg)
2
STEP1:アプリの企画を考えてみましょう!!
どんなアプリを作りたいですか? !
普段困っていることを考える !
分野とかけあわせてみる(次ページ)
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 5: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/5.jpg)
STEP1:アプリの企画を考えてみましょう!! アプリの分野を考えてみましょう
ゲームコミュニケーション勉強
買い物音楽TVスポーツ
アートファッション旅行
3
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 6: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/6.jpg)
3
旅行×
分野 困っていること
旅行のプロ達の行動がわかるアプリが欲しい!!
例えば…
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 7: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/7.jpg)
STEP 2 !
デザインを考えてみましょう!!
6
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 8: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/8.jpg)
デザインを考えてみましょう!!アプリ名:
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 9: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/9.jpg)
・デザインを考えてみましょう!!
・どんな見た目なのか ・どんなコンテンツにするのか ・ボタンの配置は? などなど
カラーペンを使って自由に書いてみましょう
7
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 10: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/10.jpg)
STEP3 !
モックアップを作りましょう!
8
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 11: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/11.jpg)
プロジェクトを作ります(1)
① https://www.fluidui.com/ で検索クリック
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 12: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/12.jpg)
ダブルクリック!!カチカチっと2回クリック
1
2
クリックしてみましょう! カチっと1回クリック
新しいページが登場!
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 13: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/13.jpg)
こんな画面が出てきたら、準備完了です!!
ページを作りましょう(1)
!!
!!
素材 ページ
11
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 14: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/14.jpg)
3
1
2
ドラッグ !クリックしたまま移動!
ドロップ !ここで離します
ページを作りましょう(2)
3
12
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 15: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/15.jpg)
!!
!!
!!背景の色
!!
テキスト
バー!!
図形
レイアウト
![Page 16: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/16.jpg)
ツールバーの使い方
色透明度フォントサイズスタイル
素材のグループ化
素材の順番 コピー、ペースト
削除
新しいページを つくる時に便利です
14
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 17: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/17.jpg)
画像をアップロードしましょう!1
!2
!!
3
クリックすれば ページ内に使えます
19
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 18: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/18.jpg)
画面遷移をしましょう(1)
!
!!
1
2
ボタンのエリアを選択
!!
3
矢印を遷移させたいところまでドラッグ&ドロップ
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 19: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/19.jpg)
画面遷移をしましょう(2)
ページからの移動ができるようにどんどんボタンやアイコンをリンクさせましょう!
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!
![Page 20: アプリを企画してモックアップをつくりましょう! …モックアップとは?外見を実物そっくりに似せた模型のことです。 デザインしたアプリを本物のiPhoneアプリみ](https://reader033.vdocuments.mx/reader033/viewer/2022060304/5f08fbe07e708231d424ac0c/html5/thumbnails/20.jpg)
実行(PLAY)して、動いたら完成です!!!!! PLAY
17
アプリを企画してモックアップをつくりましょう! Presented by Life is Tech!