ストーリーボードの作成

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

プレビュー

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

前提条件

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

概要

以下は主な手順です。

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

詳細手順

1.新しいストーリーボードの作成

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

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

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

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

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

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

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

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

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

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

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

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

3.更にステップを追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.ストーリーボードの保存

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

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

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

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

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

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

関連トピック