はじめに - レクチャー 2:アノテーション付きワイヤフレーム

1.アノテーション付きワイヤフレームのデモンストレーション

音声が流れますので、音量を調節して下さい。

2.サイトマップ

サイトマップは、デザインしたページを管理するために使用します。「サイトマップ」ウィンドウ枠で、ページの追加、削除および整理が可能です。

ページの追加と削除:

ページを追加するには、サイトマップツールバーの「子ページの追加」ボタンをクリックします。ページを右クリックして、「ページ名の変更」を選択するか、間隔を空けてページをダブルクリックして、ページの名を編集します。

ページを削除するには、ページを選択し、サイトマップツールバーの「ページの削除」ボタンをクリックするか、右クリックして「ページの削除」を選択します。

ページの整理:

サイトマップの中でページをドラッグし、移動先の親ページまでドロップすることで、サイトマップ内でページを移動できます。また、サイトマップツールバーの矢印ボタンを使用して、ページの位置関係を上下に移動したり、階層を上げたり、下げたりすることもできます。

デザインのためにページを開く操作:

サイトマップの中のページをダブルクリックすると、デザイン作業のために「ワイヤフレーム」ウィンドウ枠でページが開きます。

3.ウィジェット

ウィジェットは、ワイヤフレームをデザインする時に用いるユーザーインターフェイスのパーツのことです。「ウィジェット」ウィンドウ枠には、ボタン、画像およびテキストパネルなどのよくWeb上で使用されるウィジェットがあります。

ツールバーで、ウィジェットライブラリの選択、ロード、検索が可能です。また、カスタムウィジェットライブラリの作成や編集も可能です。

検索アイコンをクリックすると、テキストフィールドが表示されます。フィールドの中でタイピングを始めると、現在のライブラリに渡っての検索が始まります。

ドロップダウンメニューや検索ツールはバージョン5.5で追加された機能であり、これ以前のバージョンでは御使用になれません。

  

ワイヤフレームへの追加

ウィジェットをワイヤフレームに追加するには、ウィジェットを「ウィジェット」ウィンドウ枠からドラッグし、「ワイヤフレーム」ウィンドウ枠にドロップします。

また、ウィジェットはワイヤフレームからコピー (Ctrl+C) して、ほかのワイヤフレームに貼り付ける (Ctrl+V) こともできます。

ウィジェットの使用

ウィジェットは、ワイヤフレームに追加すると、ドラッグ & ドロップで移動でき、かつ、サイズの変更もできます。複数のウィジェットを選択して、同時に移動やサイズを変更することも可能です。

さらに、ウィジェットのグループ化、順序付け、整列、配置および固定が可能です。これらの機能は、ウィジェットを右クリックし、コンテキストメニューを使用することで利用できます。またこれらの機能は、「表示」-「ツールバー」-「オブジェクト」を使用して、「オブジェクト」ツールバーを使用することでも適用できます。

ウィジェットの形式とプロパティの編集

ウィジェットの形式とプロパティを編集する方法は何通りもあります。

  • ダブルクリック:
    ウィジェットをダブルクリックすると、各ウィジェット毎に関連付けられた一つのプロパティを編集することができます。たとえば、画像ウィジェットをダブルクリックすると画像をインポートでき、ドロップリストまたはリストボックスウィジェットをダブルクリックすると、リストの項目を編集できます。
  • ツールバー:
    テキストサイズ、枠の色、背景色、およびフォントの色などのウィジェットの書式設定を行います。
  • コンテキストメニュー:
    ウィジェットを右クリックするとコンテキストメニューが表示され、その中にウィジェットのプロパティを編集するオプションが表示されます。これらのプロパティはウィジェットの種類によって異なります。

4.アノテーション

アノテーションは、ウィジェットの機能を説明するもので、どのウィジェットにも追加できます。

アノテーションの追加

アノテーションを追加するには、ワイヤフレーム上の任意のウィジェットを選択して、「アノテーション&インタラクション」ウィンドウ枠の各項目を編集します。ウィンドウ枠の最上部にある「ラベル」フィールドを使用してウィジェットにラベルを付けることもできます。

フィールドのカスタマイズ

アノテーションフィールドはカスタマイズでき、メインメニューの「ワイヤフレーム」-「アノテーションフィールドとビューのカスタマイズ」をクリックするか、「インタラクション&アノテーション」ヘッダをクリックすることで編集できます。

注釈

ウィジェットにアノテーションを追加すると、ウィジェットに注釈番号が付き、ウィジェットの横に表示される黄色いボックスにその番号が表示されます。注釈番号は、ウィジェットを右クリックし「注釈」サブメニューを使用するか、「インタラクション&アノテーション」ウィンドウ枠の上部にある「注釈」フィールドを編集することで変更できます。

5.ページノート

ページノートは、表示している各ページの説明や要件を収集するために使用できます。

ページノートの追加

ページノートは、ワイヤフレームの下のウィンドウ枠で保存されます。

ページノートの管理

ノートフィールドを追加することで、さまざまな関係者やチームメンバーに向けて個別にノートを作成して管理することができます。

ノートフィールドを編集するには、メインメニューで「ワイヤフレーム」-「ページノートの管理」をクリックするか、「ページノート-デフォルト」の横にある下向き矢印をクリックして「ノートの管理」を選択します。「ページノート」ダイアログが表示されます。ダイアログを使用して、ノートフィールドを追加、削除、名称変更および再順序化できます。

ノートフィールドを切り替えるには、「ページノート-デフォルト」の横にある下向き矢印をクリックして、ノートを追加するフィールドを選択します。