ストリーボードの概要および重要なコンセプト

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

ストーリーボードとは?

ストーリーボードは、ハイレベルなインタラクション フロー ダイアグラムです。通常、時間の経過を表す一連の画像と説明文で構成されます。Indigo では、ストーリーボードがユーザーの日常生活でソフトウェアを使用することを表します。

ストーリーボードは、人間が実行することや実行したいことをストーリーとして表します。ソフトウェア デザインにおいては、ソフトウェアでのヒューマン インタラクションを表すことに使用されます。

ストーリーボードは、デザイナーが前後関係や時間経過でプロダクト ユーザー インタラクションを理解することをサポートします。テクノロジーの視点ではなく人間の視点で考えることができるため、クリエイティブなプロセスにおいて便利なツールです。また、開発プロセスにおいて異なるタスクを持つメンバー間でコミュニケーションをとる場合にも便利です。詳細については、便利な知識: ストーリーボード (英語) を参照してください。

重要なコンセプト

基本

コンセプトは Indigo ストーリーボードに基づきます。

  • ステップ
    各ステップは、ストーリーボードのインタラクション フローのポイントです。ボックスのシーンやスクリーン、テキストで構成されます。

  • ボックス
    シーン、スクリーン、スクリーンのあるシーンを含みます。

  • 矢印
    フローの方向を示すポインター。

  • シーン
    テクノロジーが使用される実生活のシチュエーションを表す画像。

  • スクリーン
    スクリーンは、Indigo Studio プロトタイプの基礎的な要素です。インタラクションを含み実行することができます。

ステップ

ストーリーボードは、矢印で相互に接続された各ステップによって構成されます。ステップは以下で構成されます。

  • ボックス内の画像 - ストーリーのその時点でのビジュアル表現。
  • サマリー ライン - ストーリーのこの部分を要約したテキスト。
  • 詳細な説明 - 詳細なステップの説明を提供するテキスト。

矢印

矢印は、一連の各ステップをつなぎます。

以下が可能です

  • ステップを任意に接続
  • 曲線
  • 双方向

矢印を使用したブランチ化詳細については、オプションでブランチまたは並行パスを表示をご覧ください。

シーン

シーンは、共通のシナリオを表す画像です。ツールボックスシーン タブに製品に含まれる一連のシーンがあります。

以下は使用できるシーンのカテゴリです。

  • デスクトップ
  • ラップトップ
  • モバイル
  • シチュエーション
  • タブレット

シーン プレースホルダー

プレースホルダーを含むシーンもあります。たとえば、スクリーンステートを適用できる画像のセクションなどです。セクションは、コンピューター、タブレット、モバイル画面などが含まれます。

カスタム画像

ストーリーボードのボックスにカスタムな画像を使用できます。空のボックスの 画像の選択 リンクをクリック、またはボックスへローカル コンピューターから画像をドラッグします。

スクリーン

スクリーンはグラフィカル ユーザー インターフェイスです。ユーザー インタラクションによって、スクリーンに複数のステートが必要になる場合もあります。プロジェクトのスクリーンステートは、ステップやシーンのプレースホルダーの画像として使用できます。ツールボックスシーン タブに使用できます。

Indigo のストーリーボードはスクリーンとストーリーボードを動的に接続するため、ストーリーボード ボックスにスクリーンを適用したときにボックスが最新のスクリーン デザインで常に更新されます。これにより、スクリーンの画像を作成、ストーリーボードに挿入し、スクリーンが更新されるたびに繰り返すという手順を省くことができます。また、プロトタイプ (ストーリーボード ステップに表示) の特定のポイントにジャンプできます。

スクリーンの詳細については、スクリーンの概要と重要なコンセプトをご覧ください。

関連トピック