ストーリーボードの作成

ストーリーボードのデザイン

プレビュー

このトピックでは、ユーザーがモバイル アプリケーションを使用して映画を検索するストーリーボードを作成します。

前提条件

プロジェクトに 2 つのスクリーンを準備します。スクリーンを作成する方法については、スクリーンの作成をご覧ください。この例の手順を実行するには、アプリケーションメニューワークスペースタブから FindFlix プロジェクト サンプルを使用してください。

概要

以下は主な手順です。

  1. 新しいストーリーボードの作成
  2. 最初のステップにコンテンツを追加
  3. 更にステップを追加
  4. スクリーンをシーン プレースホルダーに追加
  5. ストーリーボードの保存

詳細手順

(a-1) 1.新しいストーリーボードの作成

プロジェクト タブで + アイコンをクリックし、ストーリーボード オプションを選択します。

空のステップを含む新しいストーリーボードを作成しました。

(a-2) 2.最初のステップにコンテンツを追加

ストーリーボードは、画像、スクリーン、およびテキストを含むボックスがあるステップで構築します。

  1. 最初のストーリーボード ステップの概要を入力します。

    トムが友達に電話します。

  2. 詳細は、Enter を押して概要の下に入力します。

    久しぶりに会うことを提案します。

  3. コンテンツをボックスに追加します。

    ボックス コンテンツには、スクリーン、画像、コンピューター、シーンを使用できます。

    ツールボックスシーン タブからシーンを選択し、ボックスへドラッグします。

    シーンと説明文のあるステップができました。

(a-3) 3.更にステップを追加

  1. マウス カーソルをステップの上にホバーします。コンテキスト メニューが表示されます。

  1. 次のステップを追加するために矢印をクリックします。新しいステップはドラッグして配置できます。

ステップが選択されているときにタブ キーを使用して新しいフレームを作成できます。

Tab キーを使用してステップを追加し、説明文を下に書き込むことができます。ストーリーのすべてのステップができたら、画像を追加できます。

以下は残りのフレームの例です。

ジェーンが電話をとります。 映画に行きたいと考えています。

ジェーンが FindFlix モバイル アプリを開きます。 興行成績と人気の映画を確認します。

ジェーンは人気の映画セクションを見ます。 観たい映画が見つかりました。

(a-4) 4.スクリーンをシーン プレースホルダーに追加

この例の 3 つ目のステップにシーン プレースホルダーのあるシーンがあります。シーン プレースホルダーは、スクリーンを追加できるシーンの一部です。これによって、実際のアプリケーション プロトタイプの画像を表示するスクリーンを含むことができます。

  1. ツールボックスシーン タブへ移動します。

  2. シーン プレースホルダーを含むシーンを選択し、ボックスへドラッグします。

  3. ツールボックスシーン タブへ移動します。

  4. スクリーンを選択してシーン プレースホルダーへドラッグします。

    画像が自動的にホットスポットに合うよう調整されます。

現在のプロジェクトにあるスクリーンは、`ツールボックス` の `シーン` タブで提供されます。

(a-5) 5.ストーリーボードの保存

  1. ストーリーボード タブを右クリックします。

    コンテキスト メニューが表示されます。

  2. 保存 オプションを選択します。

    保存」ダイアログが表示されます。

  3. [保存] ボタンをクリックします。

    ストーリーボードやプロジェクトの名前を変更できます。

関連トピック