Webサイトの制作フロー

“つまづき”ポイントから
知っておきたいテクニックまで細かく解説

※在庫があれば上記サイトで 　入手できます。	［著］鈴木隼人・高木綾子 ［監］ ［価格］2,940 円（税込） ［判型］B5変型／272頁 ［初版］2008/04/14　 ［ISBN］978-4-86167-229-3

　Web制作にあたり、今では必須となったFlash、Dreamweaver、Fireworks、Photoshop、 Illustratorですが、CS3から1つのパッケージとして統合され、さらにアプリケーション間の連携が強化されました。
　特にFlashは、元々アニメーション機能に特化したアプリケーションでした。しかし、今ではムービーやサウンド、外部データとの連携など当たり前のようにFlash上で行います。Flashが、幅広いプラットホームとしての役割を果たすようになり、それにより、さまざまな分野の人たちとともに制作を行う環境が整ってきました。
　一方、初心者にとってはどうなのでしょう？　間口が広がり、これからWeb制作を学ぼうとする人やWeb制作を仕事としていきたい人は、どこから手をつけたらいいのでしょうか。一体、どのような知識が必要で、何を勉強しなければならないのか。アプリケーションの進化とは反比例に、初心者が取り残されているような気がします。
　本書では、Web制作を始めるにあたり必要な知識や考え方、現場での制作フローから、各アプリケーションを使った素材の加工、「演出」を目的としたFlashの利用法などをまとめました。それぞれ、必要かつ応用の利くTipsになっています。
　ただ、本書はセカンドブックとして読むことをお勧めします。なぜなら本書では、たとえば「gotoAndPlay」や「gotoAndStop」の解説はしていません。本書を読んでもっと深く知りたくなったら各アプリケーションを専門に扱った解説書にあたってください。本書では、その分、実際の制作で本当に必要となる部分やつまずきやすい部分、なぜこうなるのかという、今までなかなか書かれなかった部分を詳しく書かせていただいたつもりです。なお、Illustratorの部分は高木綾子さんに執筆をお願いしました。

　本書を読んで、まずはFlashをはじめとしたWeb制作全般を楽しんで身につけてもらえればと思います。そして、この本を読んで枠にとらわれない作品を生み出してもらえたら幸いです。
　最後に、本書を世に出すまでに私を成長させてくれた方々、そして本書に携わって頂いた方すべてに感謝いたします。

Section_01　これだけはおさえておこう

01　製作現場での最適なアプリケーションとは

Flash

Photoshop/Fireworks

Illustrator

Dreamweaver

02　ブレインストーミング

03　サイトをどう構築するか

クライアントとともに制作する

ターゲットを明確にする

ユーザーのレベルを考える

階層を考える

04　サイトをどう演出するか

05　制作スケジュールを考える前に

06　滞りなく納品するには

実制作

テストアップ

確認と修正

本アップ（納品）

07　納品後の制作ファイルの管理

08　よく使うフリーソフト

09　Webブラウザの基準を知る

タブブラウザとは

タブブラウザの種類

Section_02 　Tips：サイト構築の基礎

01　コンテンツの表示領域を考える

メインターゲットとなる画面サイズ

画面サイズに対するデザイン領域の確認

ブラウザのサイズ可変に対応したデザイン

02　レイヤーの整理

Webサイトの基本的な構造をもとにレイヤーを整理

03　素材の切り抜き（パス抜き）

ベジェ曲線

アンカーポイントの追加と削除

人物の切り抜き

04　アクションセットを使った一括処理

「アクション」を使った画像の一括編集

05　質感を出すコツ（1）―プラスチックの質感

06　質感を出すコツ（2）―メタルの質感

07　質感を出すコツ（3）―ガラスの質感

08　質感を出すコツ（4）―リアルな光と影

09　画像コラージュでうまくなじませるには

画像の合成

10　テキストの描画

テキスト描画の違い

Flashに持っていくには

11　トレースでイラストを描く

［ペンツール］を使ったトレース

12　シンプルな地図の作り方とアレンジ

地図を作成する

簡単にできる地図のアレンジ

13　文字をきれいにまとめる

パスに沿ってテキストを入力する

オブジェクトの中にテキストを入力する

オブジェクトに合わせてテキストを回り込ませる

14　ロゴマークを作る

基本的な［パスファインダ］の使い方

ロゴマークの作成

影をつけてアレンジ

15　パターンデザインを使ったバナーデザイン

バナーの作成

16　オリジナルフォントを作る

コピー＆ペーストのショートカット

［長方形ツール］を使ってフォントを作る

17　パーツとパターンのストック

Illustratorでパーツのストック

Photoshopでパターンのストック

18　レイヤーをガイドにしてレイアウト

レイヤーをガイドにする

19　Flashに素材ファイルを読み込む

Flashで読み込める素材

Flashに素材を読み込む

CS3の新機能で素材を読み込む

20　ムービークリップから覚えよう

ムービークリップ

シンボル

21　フレームレートとは

22　タイムラインの基礎

モーショントゥイーンでアニメーション

ActionScriptでアニメーション

23　フレームラベルの基礎

フレームラベルの使い方

フレームアンカーの使い方

24　モーションガイドを使ったアニメーション

25　スクリプトをどこに書くか

ムービークリップに記述する場合

ボタンに記述する場合

フレームに記述する場合

26　スクリプトの考え方

脚本を書くようにスクリプトを書く

27　ターゲットパス（絶対パス・相対パス）

_root・_parent・this

ターゲットパスの指定

絶対パス・相対パスのメリット/デメリット

28　フルFlashサイトはコンテンツごとに分割する

基本となるファイル構成

外部のSWFファイルを読み込み、1つのサイトとして表示する

Section_03 　 Tips:ワンランク上の演出

01　フルスクリーン表示と最大化表示

フルスクリーン表示

ブラウザの最大化表示

02　ポップアップウィンドウ

ページにアクセスすると同時に表示させる

HTMLファイル上のボタンをクリックしたときに表示させる

FlashからJavaScriptを呼び出してポップアップを開く

03　ブラウザのサイズ可変に対応させる

04　ローディング

ローディングバーを作る

ローディング後の演出

05　シルエットを使ったローディング

マスク機能を使った演出

06　マウスオーバー時のボタンアニメーション

07　吹き出しボヨン

タイムラインのトゥイーンで表現する

ActionScriptで表現する

08　マウストレイル

ムービークリップをマウスに追従させる/基本編

ムービークリップをマウスに追従させる/なめらかな演出編

09　回転を使った演出

オブジェクトの基準点を軸に回転させる

オブジェクトに対して半径を設定して回転させる

10　フワッとドラッグ

ドラッグ＆ドロップする動き

フワッと投げる演出

11　カウントダウン

カウントダウンの仕組み

12　デジタル時計 / アナログ時計

年、月、日、曜日の表示

デジタル時計

アナログ時計

13　ファビコンの作り方

14　壁紙の制作

壁紙の制作

設定方法の告知

15　アクセスごとにランダムに表示する演出

Math.floor、Math.randam

アクセスごとに異なる画像を見せる

16　LightBox2.0を使った演出

17　スクロールバーをデザインする

スクロールバーの制作

18　Spryを使ったPhotoGallery

［Spryの収縮可能なパネル］

［Spryの収縮可能なパネル］のカスタマイズと演出

19　パースの表現

名刺のデザインを合成する

CS3で強化された「面」の取り扱い

20　重なりを使った演出

重なりの表現

Appendix

01　FLVの生成

動画ファイルの読み込みとエンコーディング

動画の再生

FLVでワンランク上の演出

●訂正表