Adobe Fireworks CS4 チュートリアル

その他の要件

Fireworks CS4 体験版

• Fireworks CS4 体験版版のダウンロード

はじめに

このチュートリアルでは、Adobe® Fireworks® CS4 を使用して、ページの最初のデザインの草案作成から、ワイヤーフレームの作成、最終的なデザインの作成に至るまでの Web サイトアプリケーションを作成する手順について説明します。必要なツールと使用方法がすべて掲載されているので、本チュートリアルをお読みいただければ、すぐに Fireworks CS4 を使用した Web サイトの作成を始められます。既に Fireworks を熟知されているユーザでも、このチュートリアルを通じて Fireworks CS4 の新しい機能について理解を深めることができます。

これより、Ignition Carshare という架空の会社の Web ページを作成していきます。同社はカーシェアリングサービス会社で、車を予約をして数時間または数日間車を共同利用できるサービスを同社の会員に提供しています。Web サイトでは、見込み客に対するカーシェアリングサービスの紹介を掲載したり、会員が車の予約やアカウントの管理を行えるインターフェイスを提供したりする必要があります。

本チュートリアルで使用するファイルは、Tutorial Working Files フォルダにあります。

Fireworks のワークスペースの設定

Fireworks で作業を始める前に、インターフェイスに慣れておきましょう。慣れるには、インターフェイスを使いやすいように自由にカスタマイズしておくと効果的です。Fireworks を使用していくにつれ、独自のワークフローでの必要性に合わせてインターフェイスを調整し、さらにカスタマイズを行っていくことが必要になる場合もありますが、ここでは作業を始めるためのヒントをいくつかご紹介します。

Fireworks 環境設定

1. 編集／環境設定（Windows）または Fireworks／環境設定（Macintosh）を選択します。
2. 「一般」カテゴリで、「最大取り消し回数」の回数を 80 以上に変更します。ブラシでストロークを描画するなどの細かい編集を行っている場合に、編集を取り消そうとしてもすぐに設定した回数を超えてしまいます。「最大取り消し回数」の数値を高く設定することで、柔軟に操作を行えるようになります。
3. 「編集」カテゴリで、「シンプルカーソル」を選択します。これを選択すると、すべてのツールに対してカーソルが標準型のアイコンではなく、十字型に切り替わります。これにより、作業の精度を高めることができます。
4. 「Photoshop 読み込み / 開く」カテゴリで、「クリッピングパスマスク」の「統合して外観を保持」チェックボックスをオンにします（図 1 を参照）。このオプションを選択すると、Fireworks CS4 に Adobe Photoshop® のクリッピングパスを読み込んだときにその外観が保持されます。

5. 「OK」をクリックします。

パネルの整理

パネルは、Fireworks のデザインワークフローに不可欠な要素です。利用できるすべてのパネルを理解することで、より効率よく作業を行うことができます。パネル名のみが表示されているアイコンモードを実行してみましょう。

画面の右上隅のグレーのバーにあるドロップダウンメニューから、「アイコンモード（パネル名付き）」を選択します（図 2 を参照）。

このモードでは、標準のパネルがすべて表示され、必要に応じて選択できます。作成するデザインの種類により、頻繁に使用するパネルは異なります。

• カラーパレットパネルは、カラーを操作する際に便利な、高度なインターフェイスです。
• パスパネルは、ベクトルを使用する際に役立ちます。
• 情報パネルとパスパネルは、頻繁に使用するので、アクセスしやすい場所に配置してください。

Fireworks CS4 では、インターフェイス上でのパネルの配置方法を制御することができます。チュートリアルの後半では、ワークスペースの整理について、他の推奨される方法について説明します。

定規の表示

定規を表示すれば、ドキュメント上でドラッグしてガイドを表示することができます。ガイドは優れたデザイン支援ツールですので、Fireworks で作業する際は、定規を表示させておくことをお勧めします。Fireworks でドキュメントを開いていないと、定規が表示されないことがありますのでご注意ください。

• 定規を表示するには、表示／定規を選択します。

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

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

新規ドキュメントの作成

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

スケッチの読み込み

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

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

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

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

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

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

1. レイヤーパネルの下部にあるレイヤーの作成／複製ボタンをクリックして、新規レイヤーを作成します。
2. ツールボックスで、「ベクトル」グループの長方形ツールを選択します。
3. プロパティパネルの塗りの種類ドロップダウンメニューで、リストから「なし」を選択します。ストロークのカラースウォッチをクリックして、表示されるカラーピッカーからダークグレーを選択します。
4. カンバス上でドラッグして、前述の 2 本のガイド間のエリア（カンバスの大部分）に長方形を描画します。カンバスの左右両端に長方形があるため、約 6 ピクセルが塗りつぶされずに残ります。 長方形が完全に水平方向中央揃えになっているのを確認します。確認するには、整列パネル（ウィンドウ／整列）を開きます。位置アイコンを選択してから、水平方向中央揃えアイコンを選択します（図 5 を参照）。

5. ボタンを表す小さい長方形を右上隅に描画します。ツールヒントを使用して、x:850、y:35 の位置を始点にして、右下にドラッグします。スマートガイドを使用して、小さい長方形の右側をコンテンツボックス（大きい長方形）の右側に揃えます。ドラッグして長方形を描画しながら上向き矢印キーを押すと、長方形の角が少し丸くなります（図 6 を参照）。

6. 新しく作成したボタンを示す長方形が選択された状態で、Alt キー（Windows）または Option キー（Macintosh）を押しながら左にドラッグして、長方形のコピーを作成します。2 つの長方形の間隔は少し空けておきます。
7. この手順を繰り返します（編集／複製を繰り返し）。これにより、2 つのコピーの間隔が同じになる 2 番目のコピーが作成されます（図 7 を参照）。

8. 手順 4 から 7 までを繰り返し、ドキュメントの左下の領域に 4 つの小さいボタンを作成します。
9. テキストラベルを追加します。ツールボックスで、「ベクトル」グループのテキストツールを選択します。
10. プロパティパネルで、「塗りのカラー」ボックスをクリックして黒っぽいカラーを選択します。テキストを左揃えにして、テキストサイズを 24 に設定します（図 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 を参照）。スケッチの画像を含むレイヤーは表示されなくなります。

16. スケッチのレイヤーを非表示にすると、画像は図 10 のようになります。

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

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

1. ワークスペースの右側にページパネルが表示されていない場合は、ウィンドウ／ページを選択して表示します。
2. 現在のページを選択した状態で、パネルのオプションメニューをクリックします。表示されるリストから、「マスターページとして設定」を選択します（図 11 を参照）。

3. ページパネルの下部にあるページを追加アイコンを 3 回クリックして、空白のページを 3 ページ追加します。各ページの背景にはマスターページが表示されています。
4. ページ名をダブルクリックして名前を変更し、一番上にある 3 つのボタンラベル（Find Cars、Check Rates および More Info）と同じ名前にします（図 12 を参照）。

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. 他の 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 を参照）。

この手順を繰り返して別の共有ライブラリ 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 では、クライアントがサイトのフローをクリックして確認できるため、クライアントレビュープロセスでの利用に最適です。クライアントは、サイトの閲覧者が完成した製品を使用するときと同じページレイアウトを使用できます。

ここまでで、ワイヤーフレームを作成して、アプリケーションのフローとレイアウトを定義しました。次はデザインに趣向を凝らしてみましょう。このような作業は通常、レイアウトの作成の中で最も時間や労力のかかる部分ですが、Fireworks CS4 の便利な機能を使用することで、デザインプロセスをスピーディに行いながら、将来のデザイン変更に対応できるようドキュメントを編集できます。

このチュートリアルの前の節でワイヤーフレームを作成していれば、ガイド、スマートガイドおよびツールヒントを使用してページの構成要素を正確な位置に配置できることを経験済みでしょう。このセクションでも引き続きガイド、スマートガイドおよびツールヒントを活用できますが、これらの機能については直接言及していません。

新規ドキュメントの作成

この段階で、完成したワイヤーフレームのコピーをバックアップとして保存しておくことをお勧めします。これにより、作成済みの要素と構造の一部を使用しながらオリジナルのワイヤーフレームファイルを直接使用してデザインを完成できます。

背景デザインの作成

最初の作業は、ワイヤーフレームで作成したマスターページに背景デザインを作成することです。

1. ページパネルを使用してマスターページに移動します。
2. レイヤーパネルで、新規レイヤーを作成し、レイヤー名をダブルクリックして Design という名前に変更します。
3. ワイヤーフレームが含まれている古いレイヤーを新規レイヤーの上にドラッグします。ワイヤーフレームサムネールの左側にある錠前のアイコンの列をクリックして、このレイヤーをロックします。
   
   これで、デザインを描画する新規レイヤーからワイヤーフレームが分離されました。ワイヤーフレームは参照フレームとして利用できるため便利ですが、個別のロックされたレイヤーにあるので作業の妨げにはなりません。
   
   ヒント：ワイヤーフレームレイヤーを非表示にするには、レイヤーパネルの目の形のアイコンをクリックします。
4. Design レイヤーを選択した状態で、カンバスを完全に覆うよう背景の長方形を描画します。スマートガイドがオンの場合、長方形のサイズはカンバスの両端に合わせてスナップされます。
5. 長方形を選択した状態で、編集／コピーを選択し、次に編集／ペーストを選択します。これにより、同じ場所に長方形のクローンが作成されます。
   
   ヒント：要素を Fireworks CS4 でコピー＆ペーストすると、コピーした場所が画面に完全に表示されている場合、ペーストされたアイテムはコピー元アイテムと同じ場所に配置されます。コピーした場所が（ズームまたはパンによって）一部しか表示されていない場合、ペーストされたアイテムは画面の中央に配置されます。編集／クローンを使用すると、選択した要素のクローンがカンバスの表示や位置に関係なくオリジナルとまったく同じ場所に常に配置されて作成されます。
6. 長方形の新規クローンを選択した状態で、拡大・縮小ツールを選択します。上部中央のハンドルをドラッグして、上端が約 590 ピクセル のサイズになるように変更します。
7. プロパティパネルで、長方形クローンの不透明度を 80 パーセントまで下げます。これは、ヘッダ領域とコンテンツ領域の先頭です。
8. 写真の背景画像を追加するには、ファイル／読み込みを選択します。サンプルファイルフォルダから grass_bg.jpg を選択します。
9. 草の画像をコンテンツ領域を表す長方形の上に配置します。このとき、一部の画像は重なります。
10. レイヤーパネルで、コンテンツ領域を表す長方形を選択し、編集／コピーを選択します。
11. 背景の草の画像を選択し、変更／マスク／マスクとしてペーストを選択します。このアクションでは、クリップボードにコピーした長方形を草の画像の「マスク」として使用するため、画像はコンテンツ領域の長方形のサイズに合わせて切り抜かれます。
    
    ヒント：この場合、画像を移動すると、画像とマスクの両方が一緒に移動します。レイヤーパネルでリンクアイコンをクリックすると、画像とマスクを別々に移動でき、片方だけを移動して位置を調整できます。
12. レイヤーパネルで、草の画像がコンテンツ領域の長方形の下に位置するよう画像をドラッグします。この配置により、草の画像の上には不透明度 80 パーセントの長方形があるため、草の画像による背景はかなり抑えたトーンで表示されます。
    
    ヒント：レイヤーパネルのオブジェクトを上方向に移動するには、オブジェクトを選択した状態で、Ctrl キー（Windows）または Command キー（Macintosh）を押しながら上矢印キーを押します。Ctrl キー（Windows）または Command キー(Macintosh）を押しながら下矢印キーを押すと、オブジェクトは下方向に移動します。重なったレイヤーの一番上または一番下にオブジェクトを移動するには、Ctrl + Shift キー（Windows）または Command + Shift キー（Macintosh）を押しながら上矢印キーまたは下矢印キーを押します。
13. 背景の画像を選択した状態で、プロパティパネルで描画モードを「通常」から「乗算」に変更します。乗算描画モードでは、オブジェクト内の暗い領域は下にあるオブジェクトにブレンドされて暗くなり、画像の明るい領域は見えなくなります。これで、草の画像は一番下にかすかに表示されるようになります。

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

細部の追加

どのようなデザインでも、細部に気を使えば使うほど、仕上がりはより洗練されたものになります。ここまでは順調ですが、ページの外観を洗練されたものにするために、さらに作業が必要です。

1. ツールボックスで、「ベクトル」グループのラインツールを選択します。
2. ヘッダ領域とコンテンツ領域の間でドラッグして、長い横線を描画します。ドキュメントの左側をクリックし、Shift キーを押しながら右方向にドラッグして、線を 90 度の角度（水平方向）でロックします。
3. プロパティパネルで、線の色を黒のベタ塗り（#000000）に設定します。
4. プロパティパネルで、不透明度を 15 に設定し、オブジェクトを透明に近くします。この結果、ヘッダ領域に細くて明るい仕切りの付いたデザインになります。後で下にある色を変更しても色をリセットしなくてもシャドウが残るよう、ベタ塗りの色（黒など）を使用し、不透明度を下げます。
5. 長方形ツールを選択し、作成した線のすぐ上に幅が 1024 ピクセルで高さが 10 ピクセルの長方形を作成します。
6. 長方形のストロークカラーを透明に設定し、塗りをグラデーション／線形に設定します。
7. 「塗りのカラー」ボックスをクリックし、グラデーションを編集します。カラーの開始値をべた塗りの黒に設定し、カラーの終了値もべた塗りの黒に設定します。不透明度の開始値を 0 に変更し、不透明度の終了値を 100 に変更します。
8. プロパティパネルで、長方形の不透明度を 10 に設定します。これで、ヘッダ領域にソフトなシャドウが現れ、わずかな奥行きが生まれました。

テキストの追加

1. テキストツールを選択します。
2. 左上のヘッダ領域をクリックし、アプリケーションのタイトルとして IGNITION CARSHARE と入力します。
3. 入力を終えたら、カンバスをクリックするか、Ctrl キー（Windows）または Command キー（Macintosh）を押しながら Enter キーを押して、テキストを確定します。
4. テキストオブジェクトを選択したままの状態で、プロパティパネルで塗りのカラーを白に変更します。
5. さらに、プロパティパネルで、フォントを好みのフォントに設定し、テキストサイズを 14 に設定します。
   
   ヒント：Fireworks では、フォントサイズはポイントではなく、ピクセル単位で計算されます。
6. テキストをダブルクリックして編集します。CARSHARE という単語をダブルクリックして、単語全体を選択します。
7. プロパティパネルで、塗りのカラーをかなり明るい青（#B9E1F2）に変更します。この手順では、色の異なる 2 つの単語が含まれた 1 つのテキストボックスを作成しました。単語や文字のスタイルを変える場合も、これと同じ方法で行います。
8. テキストツールを選択した状態で、ドキュメントの右上の領域をクリックします。
9. 3 つのテキストボックス Join Now!、Help、Sign in を追加します。カンバスをクリックして、テキストを確定します。
   
   ヒント：テキストを追加するには、このチュートリアルの前半で説明した別の方法も使用できます。それは、テキストボックスを 1 つ作成し、Alt + Shift キー(Windows）または Option + Shift キー（Macintosh）を押しながらドラッグして複製コピーを作成して、編集／複製を繰り返しを選択するという方法です。これにより、2 つのコピーの間隔が同じになる 2 番目のコピーが作成されます。
10. Join Now! のテキストカラーを 白に設定します。Help と Sign In のテキストカラーをグレー（#595959）に設定します。
11. 同じ処理を繰り返してデザインの左下にテキストを追加します。プロパティパネルで、テキストの塗りのカラーをべた塗りの黒に設定し、不透明度を 45 パーセントにします。
12. ラインツールを使用して、2 つのテキストボックスの間に 1 ピクセルの短い縦線を追加します。プロパティパネルで、線の色をべた塗りの黒に設定し、不透明度を 15 に設定します。
13. Alt + Shift キー（Windows）または Option + Shift キー（Macintosh）を押しながらドラッグして、別のテキストボックスの間に線を複製します。
    
    ヒント：テキストボックスや仕切りの間隔がよくわからない場合は、すべてのテキストボックスおよび仕切りを選択して、整列パネルを開きます（ウィンドウ／整列）。位置アイコンがオフになっていることを確認し、水平方向等間隔に分布アイコンを選択します。
    
    ヒント：1 ピクセルの線がぼやけて表示される場合は、プロパティパネルのストロークドロップダウンメニューから「鉛筆」と「1 ピクセルの硬い線」を選択します。

ライブフィルタの追加

Fireworks CS4 には、従来のフィルタと「ライブ」フィルタの両方が含まれています。ライブフィルタは、シャドウ、光彩、ぼかしなどのエフェクトおよびスタイルで、オブジェクトへの追加や編集、オブジェクトからの削除ができます。「ライブ」と呼ばれるのは、オブジェクトを完全に変更する従来のフィルタとは異なり、このフィルタは後で変更できるためです。ライブフィルタは、ビットマップ、ベクトルおよびテキストを含む Fireworks で表示可能なすべてのオブジェクトに適用できます。

1. 「Join Now」テキストボックスを選択します。
2. 「Join Now」テキストボックスを選択します。
3. シャドウと光彩／ドロップシャドウを選択します。次のプロパティを設定します。
   • 距離：1
   • 柔らかさ：1
   • 不透明度：50 ％
   • 角度：270
4. 「Help」および「Sign In」テキストボックスを両方選択します。
5. 手順 3 を繰り返します。ただし、カラーは黒ではなく白に設定します。

メインナビゲーションのデザイン

ここまでで背景のデザインが完成したので、メインボタンのタブを配置します。メインボタンのタブは、ワイヤーフレームのマスターレイヤーに作成しました。ここでは、これらをデザインのページに配置します。

1. ページパネルを使用して、Find Cars という名前のページに移動します。
2. レイヤーパネルで、「新規レイヤー」をクリックします。
3. レイヤー名をダブルクリックして、Navigation という名前に変更します。
4. ツールボックスで、長方形ツールをクリックし、マウスボタンを押し続けて、すべてのシェイプツールを表示します。角丸長方形ツールを選択します。
5. 幅が約 110 ピクセル、高さが約 35 ピクセルの角丸長方形を描画します。
6. 自動シェイプのプロパティパネルを開きます（ウィンドウ／自動シェイプのプロパティ）。各コーナーを個別に変更できるように、コーナーをロック解除します。左下角と右下角の丸みを 0 に設定し、左上角と右上角の丸みを 5 に設定して、タブシェイプを作成します。
7. 選択ツールを使用して、コンテンツエリアの境界線の上にタブを移動します。
8. タブシェイプを選択した状態で、コピー＆ペーストして、元のシェイプと同じ位置にクローンを作成します。
9. クローンを選択した状態で、「ストロークカラー」ボックスをクリックして、白（#FFFFFF）を選択します。塗りの種類ドロップダウンメニューで「なし」を選択して、クローンの塗りを削除します。
   
   ヒント：ストロークと塗りのカラーを入れ替えコントロールを使用して、1 回の操作で塗りを削除してストロークカラーを設定することもできます。
10. 変更／グループ解除を選択して、タブシェイプをグループ解除します。シェイプをグループ解除することで、シェイプのポイントとカーブを詳細に編集することができます。この場合、自動シェイプコントロールハンドルは表示されなくなります。
11. ツールボックスで、「ベクトル」グループのナイフツールを選択します。タブよりも少し下の位置でクリックし、タブの下側を越えるように上にドラッグして、パスを分割します。
12. ツールボックスで、「選択」グループのダイレクト選択ツールを選択して、作成した 2 つのポイントを選択します。Delete キーを押して、それらを削除します。タブの下側全体が削除され、タブの左側、上側、右側を示すストロークが残ります。このような結果を得るために、元のタブシェイプに単にストロークを追加するのではなく、ストロークを異なるパスとして分割しました。
13. 元のタブシェイプを選択して、タブの周りにシャドウを追加します。プロパティパネルで、ライブフィルタを追加ボタン（+）をクリックします。シャドウと光彩／ドロップシャドウを選択します。プロパティを次の値に設定します。
    • 距離：3
    • 柔らかさ：3
    • 不透明度：25 ％
    • 角度：90
    
    角度を 90 度に設定することで、下側のコンテンツエリアにドロップシャドウが流れ込まなくなります。これにより、下側にあるコンテンツエリアフレームにタブが結合されたように見えます。
14. タブグラフィックにテキストを追加します。テキストツールを選択し、タブの上でクリックして、FIND CARS と入力します。プロパティパネルで、中央揃えを選択し、太字をクリックします。塗りのカラーを黒（#000000）に設定し、不透明度スライダをドラッグして不透明度を 65 に設定します。
    
    これでタブグラフィックは完成です。このタブは、アクティブなページを表します。次に、これを若干変更して、非アクティブなページを表すタブを作成します。
15. 選択ツールを使用して、元のタブシェイプ、ストロークタブシェイプおよびテキストを含むすべてのタブグラフィックを囲むようにドラッグします。オブジェクトをコピー＆ペーストして、同じ位置にクローンを作成します。
16. 作成したクローングラフィックを右に移動します。
    
    ヒント：Shift キーを押しながら選択ツールをドラッグすると、オブジェクトが移動する角度が 45 度に固定されます。また、キーボードの矢印キーを押して、オブジェクトを少しずつ移動することができます。Shift キーを押しながら矢印キーを押すと、オブジェクトは 10 ピクセル単位で移動します。
17. タブシェイプとストロークシェイプを選択します。プロパティパネルで、不透明度を 25 に設定します。
    
    これで、タブのアクティブなグラフィックと非アクティブなグラフィックが完成しました。新しいタブのテキストを CHECK RATES に変更します。タブを複製して 3 つ目のタブを作成し、テキストを MORE INFO に変更します。

これでインターフェイスのデザインは完成です。最後に、デザインにコンテンツを追加します。

インターフェイスコンポーネントの追加

Fireworks CS4 の共有ライブラリには、数多くのコンポーネントが含まれています。また、編集可能なプロパティを変更して、独自のコンポーネントを作成することもできます。

1. 1)サンプルファイルフォルダから Carshare_widgets.fw.png という名前のファイルを開きます。
2. 2)追加するシンボルを選択します。編集／コピーを選択します。
3. 3)チュートリアル用の作業ファイルに戻ります。編集／ペーストを選択します。
4. 4)シンボルプロパティパネルを開きます（ウィンドウ／シンボルプロパティ）。各フィールドで、シンボルの編集可能なプロパティを変更します。
5. 5)シンボルのグラフィックがどのように作成されているかを確認するには、シンボルをダブルクリックして開きます。シンボルのコンテンツを確認したら、左上隅にある青い矢印をクリックしてカンバスに戻ります。
   
   ヒント：シンボルのプロパティによっては、変更すると、シンボルのすべてのインスタンスに影響を与えるものもあります。その他のプロパティの変更は、シンボルプロパティによって上書きされ、それぞれに入力した値が使用されます。

Find Cars ページへのコンテンツの追加

1. 1)ページパネルで Find Cars ページに移動します。
2. 2)ファイル／読み込みを選択します。
3. 3)サンプルファイルフォルダから Carshare_map.fw.png という名前のファイルを選択します。
4. 4)前述した方法で Carshare_widgets.fw.png からアセットをコピーし、図 15 のようにアイテムを配置します。

これで Fireworks CS4 での Web ページのデザイン作業は完了です。Ignition Carshare アセットを使用してさらに実習を行う場合は、ページパネルで Find Cars - locations ページに移動して、それをガイドとして使用します。まず、チュートリアル用の作業ドキュメントに「Find Cars - locations」というタイトルのページを新規作成します。次に、新しいページにレイヤーをコピーして、それらを背景として使用します（図 16 を参照）。

参考資料

Fireworks を効率的に使用するための詳細な手順およびチュートリアルについては、Fireworks デベロッパーセンターのファーストステップガイドを参照してください。
トレーニングオプションの詳細については、トレーニングのページを確認してください。
Fireworks のご利用に関する詳細情報については、Fireworks デベロッパーセンターを参照してください。