ホーム

Keynoteでプロトタイプを作成する

シンプルなアプリをデザインしよう

Keynoteでプロトタイプを作成する

Keynoteでアプリのプロトタイプを作成します。

この学習モジュールの所要時間:

40分

Keynoteでプロトタイプを作成する。

プロジェクトのKeynoteプレゼンテーションの「Keynoteでプロトタイプを作成する」セクションにある空白スライドを使ってプロトタイプを作成します。スライドが足りなければ複製しましょう。

Keynoteのツールを使ってみる。

Keynoteの機能について学びましょう。これから作るアプリに役立つものがあるかもしれません。各セクションでは、アファメーション(自分がこうありたい、と目指すイメージを思い描き、ポジティブな言葉を使って、気持ちや考え方がより良い方向に向かうよう自分をサポートして実現を目指すこと)に役立つアプリを作る場合を例として説明していきます。

要素を追加する。

テキスト、線、図形などを追加します。

手順1

テキスト、線、図形を追加するには、図形ボタンをタップして、要素を選択します。

手順2

メディアボタンをタップして、イメージや、オーディオ、描画、ビデオを追加します。

手順3

図形やイメージのサイズを変更するには、四隅の青い丸を好きな位置までドラッグします。

手順4

図形をダブルタップして、その中にテキストを追加します。

手順5

制作するアプリに必要な要素をすべて追加し、サイズを調整します。

タイトル、イメージ、ボタンについても考えましょう。

色をつける。

プロトタイプに含まれる要素の色と透明度を編集しましょう。

手順1

スライドナビゲータを表示させます。

手順2

スライドを選択してからフォーマットボタンをタップして、背景を変更します。

手順3

「背景」をタップして、カラー、グラデーション、イメージを選びます。

手順4

「ダイナミック」をタップすると、動きのある背景を追加できます。

手順5

図形の色を変更します。

図形を1つタップして選択します。または1つの図形をタップして押さえたまま別の指でほかの図形をタップして複数の図形を選択します。それからフォーマットボタンをタップし、「スタイル」タブで「塗りつぶし」をタップします。

手順6

不透明度スライダを使って、要素の透明度を調整します。

編集したい要素を選択して、フォーマットボタンをタップします。それから不透明度スライダをドラッグし、好みの透明度に設定します。

手順7

あらかじめ用意されているコントロールを使って、テキストスタイルを編集します。

テキストをタップして選択してから、フォーマットボタン、「テキスト」タブの順にタップします。

手順8

プロトタイプのデザインを、納得がいくまで編集しましょう。

要素をインタラクティブにする。

スライド間をつなぐリンクを設定して、ユーザーの操作に反応して動作するインタラクティブなプロトタイプにしましょう。

手順1

自分のアプリに、トランジションやインタラクティブな要素の設定が必要かどうか考えます。

ヒント

ユーザーが行った操作に反応してアプリが動作することを示すために、プロトタイプにスライドを追加して、要素を追加したり変更したりします。

手順2

スライドを追加します。スライドをタップして、「複製」を選びます。

手順3

リンクを作成します。リンクに変えたい要素をタップして、「リンク」を選択します。

手順4

リンク先を設定します。別のスライド、ウェブページ、メール、電話番号にリンクできます。

ヒント

プロトタイプを実際のアプリのように動作させるために、リンクによる操作や移動のみを許可します。

手順5

プレゼンテーションタイプを選択します。画面左上にあるプレゼンテーションの名前をタップし、「プレゼンテーションオプション」>「プレゼンテーションタイプ」の順にタップします。

手順6

「リンクのみ」を選択します。

手順7

同じようにスライドとリンクを追加していき、アプリを最後まで完成させます。リンクを追加したら、再生ボタンをタップして、リンクが正しく設定されているか確認してください。

手順8

再生ボタンをタップし、アプリ内で考えられるすべての操作手順をたどって確認します。どこかで先に進めなくなっていませんか?その場合は、リンクを追加して、行き止まりがないようにしてください。

アニメーションを追加する。

アニメーションを使って要素を追加、演出、削除することができます。

手順1

アニメーション化したい要素をタップして「アニメーション」を選択し、アニメーションを追加します。

手順2

アニメーションの様々なオプションを試してみます。

「ビルドインを追加」は、要素を画面に出現させます。

「アクションを追加」は、アクションを実行します。

「ビルドアウトを追加」は、要素を画面から消します。

手順3

メニューにある様々なアニメーションを試してみて、自分のアプリに合うものを探します。

確認が終わったら、戻るボタンをタップします。

手順4

選んだアニメーションのアイコンをタップし、好みに合わせて設定を調整したら、画面の左上にある「完了」をタップします。

ヒント

プレゼンテーションタイプを「リンクのみ」に設定すると、スライドのトランジションのあと、続いてアニメーションが再生されます。

手順5

アニメーションの設定時にビルドの順番ボタンをタップして、ビルドの設定を編集します。

手順6

1つ目のアニメーションを選択して、「トランジションの後」をタップします。

手順7

それ以外のアニメーションでは、「ビルドの後」をタップします。

手順8

プレビューボタンをタップすると、アニメーションの動作をテストできます。アプリの外観と機能が意図した通りになるまで編集を続けます。

次は: