アイデアをワイヤーフレームにまとめる

デザインはアイデアから生まれます。アイデアを紙にスケッチする場合もあれば、頭で想像するだけの場合もあります。どちらの場合でも、ワイヤーフレームの形式でアイデアをまとめてから、デザインし始めるのが得策です。ワイヤーフレームを使用すると、デザインの細部まで気にせずに、柔軟に変更を加えることができます。また、早い段階でデザインの方向性に関してクライアントの承認を得ることも可能になります。

この節では、アイデアをラフスケッチにして、そのスケッチをシンプルでありながら柔軟なワイヤーフレームに変換する手順を説明します。それと同時に、Fireworks CS4 に備わっている、生産性を向上させて制作時間を短縮させる新しい機能をいくつか紹介します。サンプルファイルをまだダウンロードしていない場合は、Tutorial Working Files フォルダからサンプルファイルをダウンロードしてください。

新規ドキュメントの作成

1. Fireworks CS4 を起動します。
2. ファイル／新規作成を選択します。
3. 新規ドキュメントダイアログボックスで、カンバスの幅を 1024 ピクセル、高さを 640 ピクセルに設定します。
4. カンバスカラーを白に設定します。
5. 「OK」をクリックします。

スケッチの読み込み

1. ファイル／読み込みを選択します。
2. サンプルファイルがあるフォルダを指定し、sketch.jpg ファイルを選択します。
3. カンバス上の左上隅の位置（0,0）で直角型のカーソルをクリックし、読み込んだスケッチをその場所に配置します。スケッチがカンバスの水平方向の中央に配置されます。
   また、ファイルシステムからファイルをカンバスにドラッグ＆ドロップすることもできます（図 3 を参照）。

図 3. 読み込んだスケッチがカンバスの水平方向の中央に配置されます

ガイド、スマートガイドおよびツールヒントの使用

正確なレイアウトを簡単に作成するには、ガイドとツールヒントを使用します。

1. 表示／定規を表示を選択して、定規を表示します。
2. 表示／ガイド／ガイドにスナップを選択して、ガイドへのスナップを有効にします。
3. 表示／スマートガイドを選択して、スマートガイドを有効にします。「スマートガイドを表示」および「スマートガイドにスナップ」を選択します。
4. 表示／ツールヒントを選択して、ツールヒントを有効にします。
5. 上部の定規から、横方向のガイドをカンバスにドラッグします。ツールヒントを使用して、ガイドを 76 ピクセルの位置に正確に配置します。
6. 2本目の横方向のガイドをカンバスにドラッグして、604 ピクセルの位置に配置します。
   
   ヒント：ガイドをドラッグしながら（またはガイドをカンバスに配置した後）Shift キーを押すと、現在のガイドとその他すべてのガイドと、カンバスの端の間の距離が表示されます。
7. 読み込んだスケッチを選択して、メインコンテンツエリアの上下が、直前にカンバスに配置した 2 本のガイドの間におおよそ収まるようにスケッチを配置します。
8. レイヤーパネルで、スケッチオブジェクトの隣の 2 列目をクリックし、レイヤーをロックします（図 4 を参照）。ワイヤーフレームの要素を配置する際に、このスケッチのレイヤーを背景として使用します。
   
   
   図 4. 左から 2 列目をクリックして錠前アイコンを表示させ、レイヤーをロックします

ワイヤーフレームのレイアウトの作成

ワイヤーフレームの作成では、基本の長方形の描画とテキストを使用します。まず全体的なレイアウトを決定してから、完全なデザインを追加します。

1. レイヤーパネルの下部にあるレイヤーの作成／複製ボタンをクリックして、新規レイヤーを作成します。
2. ツールボックスで、「ベクトル」グループの長方形ツールを選択します。
3. プロパティパネルの塗りの種類ドロップダウンメニューで、リストから「なし」を選択します。ストロークのカラースウォッチをクリックして、表示されるカラーピッカーからダークグレーを選択します。
4. カンバス上でドラッグして、前述の 2 本のガイド間のエリア（カンバスの大部分）に長方形を描画します。カンバスの左右両端に長方形があるため、約 6 ピクセルが塗りつぶされずに残ります。 長方形が完全に水平方向中央揃えになっているのを確認します。確認するには、整列パネル（ウィンドウ／整列）を開きます。位置アイコンを選択してから、水平方向中央揃えアイコンを選択します（図 5 を参照）。
   
   
   図 5. 整列パネルで、位置アイコンを選択してから、長方形を水平方向に中央揃えするアイコンを選択します
5. ボタンを表す小さい長方形を右上隅に描画します。ツールヒントを使用して、x:850、y:35 の位置を始点にして、右下にドラッグします。スマートガイドを使用して、小さい長方形の右側をコンテンツボックス（大きい長方形）の右側に揃えます。ドラッグして長方形を描画しながら上向き矢印キーを押すと、長方形の角が少し丸くなります（図 6 を参照）。
   
   
   図 6. ドラッグで長方形を描画しながらキーボードの上向き矢印キーを押して角を丸くします
6. 新しく作成したボタンを示す長方形が選択された状態で、Alt キー（Windows）または Option キー（Macintosh）を押しながら左にドラッグして、長方形のコピーを作成します。2 つの長方形の間隔は少し空けておきます。
7. この手順を繰り返します（編集／複製を繰り返し）。これにより、2 つのコピーの間隔が同じになる 2 番目のコピーが作成されます（図 7 を参照）。
   
   
   図 7. 角丸長方形を 3 つ作成します
8. 手順 4 から 7 までを繰り返し、ドキュメントの左下の領域に 4 つの小さいボタンを作成します。
9. テキストラベルを追加します。ツールボックスで、「ベクトル」グループのテキストツールを選択します。
10. プロパティパネルで、「塗りのカラー」ボックスをクリックして黒っぽいカラーを選択します。テキストを左揃えにして、テキストサイズを 24 に設定します（図 8 を参照）。
    
    
    図 8. テキストを選択した状態で、プロパティパネルでテキストの表示方法を定義します
11. ドキュメントの左上を 1 回クリックして、ヘッダに Ignition Carshare と入力します。
    
    ヒント：テキストボックスへの入力が完了したら、Ctrl キー（Windows）または Command キー（Mac）を押しながら Enter キーを押すと、入力編集モードをすぐに終了することができます。
12. 上部の列の左端のボタンをクリックします。Find Cars と入力します。テキストを選択した状態で、プロパティパネルでテキストサイズを 16 に変更します。
13. 選択ツールを使用して、Alt キー（Windows）または Option キー（Macintosh）を押しながら、テキストを他の 2 つのボタンにドラッグします。2 つのボタンのテキストをそれぞれ Check Rates と More Info に変更します。テキストを変更するには、テキストボックスをダブルクリックして、変更するテキストをハイライトし、新しいテキストを入力します。
14. 左下隅にある小さいボタンにも以上の手順を繰り返し、about us、partners、press および home などのテキストラベルを作成します。テキストサイズは 10 を指定します。
15. スケッチの画像をカンバス上で非表示にするには、レイヤーパネル（「ページ」タブにグループ化される場合があります）を選択して、「レイヤー 1」が表示されるまで下にスクロールします。「レイヤー 1」の隣にある目の形をしたアイコンをクリックして、非表示にします（図 9 を参照）。スケッチの画像を含むレイヤーは表示されなくなります。
    
    
    図 9. スケッチの画像を隠す目の形をしたアイコンをクリックして、レイヤー 1 を非表示にします
16. スケッチのレイヤーを非表示にすると、画像は図 10 のようになります。
    
    
    図 10. Ignition Carshare のページのワイヤーフレームのデザイン

ワイヤーフレームの他のページの作成

ここまで、サイトのレイアウトの基本的なワイヤーフレームを作成しました。次の手順では、様々なコンテンツを表示するページを作成します。Fireworks CS4 では、各ページで共有できる独自のアイテムを用いて、必要な分だけページを作成することができます。

1. ワークスペースの右側にページパネルが表示されていない場合は、ウィンドウ／ページを選択して表示します。
2. 現在のページを選択した状態で、パネルのオプションメニューをクリックします。表示されるリストから、「マスターページとして設定」を選択します（図 11 を参照）。
   
   
   図 11. パネルのオプションメニューを使用して、ページ 1 をマスターページとして設定します
3. ページパネルの下部にあるページを追加アイコンを 3 回クリックして、空白のページを 3 ページ追加します。各ページの背景にはマスターページが表示されています。
4. ページ名をダブルクリックして名前を変更し、一番上にある 3 つのボタンラベル（Find Cars、Check Rates および More Info）と同じ名前にします（図 12 を参照）。
   
   
   図 12. ページパネルで新規のページを 3 ページ作成し、サイトの各ページに対応した名前を付けます
5. ページパネルでマスターページを選択し、ページを移動します。
6. マスターページで、ドキュメント上部の「Find Cars」テキストの背面にある長方形を選択してコピーします。
7. ページパネル（マスターページではありません）で Find Cars ページをクリックして選択します。
8. コピーした長方形を Find Cars ページにペーストします。
9. プロパティパネルで、サイトの閲覧者がこのページがアクティブであると判断できるように、塗りのカラーをライトグレーに変更します。
10. マスターページに戻り、「Find Cars」テキストラベルを選択してコピーします。
11. ページパネルで Find Cars ページをクリックして、コピーしたテキストラベルを新しく作成したライトグレーの長方形にペーストします。
12. テキストツールを使用して、ページのタイトル（Choose your type of driving and a city）をコンテンツ領域の上部に追加します（図 13 を参照）。
    
    
    図 13. 「Find Cars」ボタンの背景をライトグレーにすることで、このページがアクティブであることを示します
13. 他の 2 ページでも同様に、手順 5 から 12 までを繰り返し、2、3 番目のボタンをコピー＆ペーストします。その後、テキストツールを使用して、コンテンツ領域にそれぞれ適切なページのタイトル（See available rates および Learn more）を追加します。

共有ライブラリアセットを使用したワイヤーフレームの完成

これで、ワイヤーフレーム全体の構造とページが追加されたので、次に各ページのコンテンツを完成させましょう。このアプリケーションは、スクロールバー、ドロップダウンメニュー、テキスト入力フィールドなどの使い慣れたインタラクティブコントロールで構成します。Fireworks CS4 に備わっている共有ライブラリアセットを使用して、コンテンツの見本を簡単に作成できます。

1. ページパネルで Find Cars ページを選択します。
2. ファイル／読み込みを選択するか、ファイルをドラッグ＆ドロップして、デモファイルの map_usa_wireframe.png をページに挿入します。このファイルは、グラフィックアウトラインで地図を描いたものです。
3. 地図要素を選択した状態で、整列パネルを開きます（ウィンドウ／整列）。水平方向中央揃えアイコンをクリックして、マップを水平方向の中央に配置します。垂直方向の中央揃えについては、チュートリアルの後半で説明します。
4. 共有ライブラリパネルを開きます（ウィンドウ／共有ライブラリ）。
5. Windows で作業をしている場合は Win フォルダを、Mac OS で作業をしている場合は Mac フォルダを展開します。
6. 共有ライブラリパネルから、ボタンとコンボボックスのそれぞれのインスタンスを 1 つずつドキュメントにドラッグします。
7. コンボボックスの左側とマップの左端が揃うように、コンボボックスを配置します。このとき、スマートガイドをオンにすると便利です。また、整列パネルを使用して、2 つの左端を揃えることもできます（位置アイコンがオフになっていることを確認してください）。
8. ツールボックスで、「選択」グループの拡大・縮小ツールを選択します。コンボボックスの右側中央の拡大・縮小ハンドルをドラッグして、幅が約 400 ピクセルになるようにします。
9. Alt キー（Windows）または Option キー（Macintosh）を押しながらコンボボックスを右方向にドラッグして、複製コピーを作成します。
10. 拡大・縮小ツールをもう一度選択し、右側中央の拡大・縮小ハンドルをドラッグして、2 番目のコンボボックスの幅が約 160 ピクセルになるよう大きさを調整します。
11. 2つのコンボボックスの右側にある横方向の余白にボタンを移動します。拡大・縮小ツールを使用して、必要に応じてボタンのサイズを変更します。
12. テキストツールを選択します。テキストサイズを 16 に設定します。最初のコンボボックスの上に Type of Driving と入力します。
13. 選択ツールを使用して、Alt キー（Windows）または Option キー（Macintosh）を押しながらテキストボックスを右方向にドラッグします。コピーしたテキストを 2 番目のコンボボックスの上部に配置します。テキストツールを使用して、テキストを City に変更します。
14. シンボルプロパティパネルを開きます（ウィンドウ／シンボルプロパティ）。
15. 1番目のコンボボックスを選択します。シンボルプロパティパネルで、ラベルを Personal に設定します。
16. 2番目のコンボボックスを選択します。シンボルプロパティパネルで、ラベルを Boston に設定します。
17. ボタンを選択します。シンボルプロパティパネルで、ラベルを Go に設定します(図 14 を参照）。
    
    
    図 14. コンボボックスとボタンを共有ライブラリから追加した Find Cars ページ

この手順を繰り返して別の共有ライブラリ UI アセットを追加します。サンプルファイルフォルダで Ignition_Carshare_Source.png という名前のファイルを開き、その他のワイヤーフレームページを表示します。

インタラクティブ PDF の書き出し

これで、アプリケーションのフローと構造の基本的なワイヤーフレームが作成できました。ドキュメント全体を複数のページドキュメントとして書き出しておくと、レビューの目的でクライアントに送信する場合のやり取りに便利です。

1. ページパネルでマスターページを選択して、マスターページに移動します。
2. ツールボックスで、「Web」グループのホットスポットツール を選択します。
3. 上部にある 1 番目のボタンの上にホットスポットを描画します。さらに 2 つのホットスポットを 2 番目のボタンと 3 番目のボタンの上に描画します。
4. 選択ツールで 1 番目のホットスポットを選択します。プロパティパネルで、Find Cars.html へのリンクを設定します。2 番目のホットスポットを選択し、Check Rates.html へのリンクを設定します。3 番目のホットスポットを選択し、More Info.html へのリンクを設定します。
5. ファイル／書き出しを選択します。書き出しドロップダウンメニューから「Adobe PDF（.pdf）」を選択します。
6. 「オプション」をクリックします。これは簡単なワイヤーフレームなので、「画質」は「中」に設定し、「グレースケールに変換」オプションを選択します。「OK」をクリックして、「Adobe PDF 書き出しオプション」ダイアログボックスを閉じます。
7. 「書き出し後 PDF を表示」のチェックボックスがオンになっていることを確認します。「書き出し」をクリックします。

これで、PDF を閲覧できるようになりました。ページをクリックし、必要に応じて Adobe Acrobat® のツールを使用してコメントを追加します。インタラクティブ PDF では、クライアントがサイトのフローをクリックして確認できるため、クライアントレビュープロセスでの利用に最適です。クライアントは、サイトの閲覧者が完成した製品を使用するときと同じページレイアウトを使用できます。

ページ 2 / 3

前のページ

次のページ