プリン島図書館トップへ戻る プリン島へ戻る

62号■フラッシュ

フラッシュアニメ、またはフラッシュサイトという言葉を聞いたことのある人は多いと思います。これは、「.swf」形式というファイルでできたデータで、通常マクロメディア社のフラッシュというアプリケーションなどで作り、フラッシュプレイヤー、またはショックウェイブというプラグインを使って閲覧します。

新しいブラウザには初めからこれらのプラグインが付属としてインストールされていることが多いので、あまり意識せずに閲覧している方もいると思います。旧いバージョンのブラウザを使っていて、見れないものが多いようでしたら、フラッシュのプラグインは、そんなに重いものでもありませんので、何かの機会にダウンロードしてインストールすることをオススメします。
<http://www.macromedia.com/jp/downloads/>
からダウンロードできます。

さて、この「.swf」ファイルですが、これは音も含めた動画を軽く表示することが可能なデータ形式です。ボタンなどでマウスに反応するしくみを作るのも簡単で、これを「インタラクティブ性」というのですが、ただ見るだけではなく、何かができるWebページを作ることができます。

今、「軽く表示する」と言いましたが、もしかしたら「えっ?うそ!」と思った方もいると思います。私もマクロメディア社のホームページで、そういう言葉を見たとき、「うそ〜!」と叫んでしまいました。

私のイメージにあるフラッシュサイトは、長時間「Now Loading」という画面で待たされる、というものだったからです。

しかし、本当にフラッシュは軽いのです。通常ネットで見かけるアニメはGIFアニメと呼ばれるもので、これはノートの隅に絵を描いて、パラパラめくって遊ぶパラパラアニメのようなものです。何枚かの画像を作っておき、次々に表示して動いているように見せます。なめらかに動かそうと思うと、たくさんの絵が必要になり、どうしても重いものになってしまいます。

たとえば、1秒間に3コマという簡単なアニメでも、3秒間動かすためには9枚の絵が必要です。小さなバナー1枚8Kの画像を3秒間動かそうとすると、単純計算でも9枚なら72kのデータが必要ということになります。これでは大きなアニメなど作り様がありません。

フラッシュは、Adobe Illustrator のようなベクトルデータを動かすことを基本としています。Illustatorを使っている人ならわかると思いますが、こういうベクトルデータはフォトショップなどのピクセルデータに比べて非常に軽いですよね。

さらに、フラッシュでは、パスで作られたオブジェクトを時間軸に従って変型したり、色指定を変えたり、移動したりできます。フラッシュは、オブジェクトを1回読込めば、それを移動、変型することでアニメが作れるのです。

ですから、フライングロゴという、踊ったり回転したりするタイトル文字を作るのはお手のものです。文字だけなら、シェアウェアでもフラッシュアニメを作ることもできます。

それでは、あの、「Now Loading」はなんだったのでしょう?どうして重いフラッシュサイトが多いのでしょう?

フラッシュが軽いのは、ベクトルデータだからです。JPEGやGIF画像を読込んでそれを動かそうとすると、非常に重いものになってしまいます。フラッシュで使うといっても、ピクセルデータが軽くなるわけではありません。せめて、背景に1枚使う程度ならなんとか待てると思いますが、ギャラリーの絵を全部読込んでフラッシュでパタパタ見てもらおうというのは、今の回線環境ではちょっと無理があります。
 
もちろん、趣味で作っているページなら、見てくれる人だけに見てもらえばいいのですから自由ですが、できるだけ多くの人に見てもらいたい、というショップなどでは、サイトができて商売あがったり、ということになりかねませんので、少し考える必要もあるでしょう。

ちなみに、Illustratorで作ったデータは、バージョン6以下で保存してフラッシュで読込んで使います。フラッシュでも絵は描けますが、Illustrator に慣れている人はIllustratorの方がパスは引きやすいと思います。

次回は ナビゲーション について

戻る

63号■ページナビゲーション

ホームページはリンクをクリックしてジャンプしてまわることで、閲覧者が求める情報に早く辿りつけるように設計します。

ですから、トップページ(一番最初にアクセスしてもらうページ)は、通常、index.html、インデックスページといいますが、このindexというのは目次のことです。

実際のホームページは、トップページに相互リンクのバナーがあったり、お店なら、売り出し商品の画像があったり、と複雑な状態になっているので、ページナビゲーションを分かりやすくするため、ボタンスペースとでもいうようなものを作ることが多いです。

これには、2つの方法が考えられます。ひとつは、テーブルにボタンを並べて、セットにしておきます。画像は1度読込めば、キャッシュとして自分のパソコンに残っていますから別のページで同じものを表示するのも簡単です。そこで、ボタンセットのテーブルを、それぞれのページにコピーペーストでつけていきます。どのページでも同じ位置にボタンセットを配置すれば、見た目もスマートで、すぐに表示されますから便利です。

もう一つはフレームを使う方法です。フレームは3枚のHTMLファイルを用意します。1枚目はフレームを指定するファイルで、ここにはウィンドウをどのように分けて、何を表示するかを書いておきます。2枚目は、ナビゲーション用のファイルで、例えば、左側にナビゲーションボタンを並べたければ、ボタンだけのファイルを作ります。3枚目が内容を表示するためのファイルです。

ボタンセットのテーブルをペーストしていく方法は、多少泥くさい感じもしますが、ファイル1枚で完成しているため、ページ検索で来てくれた人にも問題なくトップページに戻ったり、他のページを見て回ったりできます。また、今見ているページのボタンだけ色を変えたり、凹ませたりすれば、サイト全体の中で今、自分はどのページにいるのか、というのもわかりやすいです。

ただ、スクロールするような大きなページだと、ボタンも一緒にスクロールしてしまいますから、ボタンを押すためには、ページの一番上に戻らなくちゃならない、という場合も出てきます。

そういうページの場合、フレームは便利です。コンテンツのページをスクロールしても、フレームで分けたナビゲーションページはそのままです。また、逆にいろいろなページがたくさんあって、ボタンもたくさんつけなければならないときにも、フレーム方式だと楽です。

けれども、フレームの指定はけっこうややこしいので、無理して使う必要はありません。いくつものスクロールバーができてしまうのも、うっとうしいですし、あちこちクリックしないと、目的のページが表示できないとなると、ネット初心者には閲覧自体も難しくなってしまいます。

さらに、コンテンツページのタイトルがタイトルバーに表示されませんし、ボタンの色などを変えて、今いるページを表示することもできませんから、十分に工夫をしなければなりません。

もう一つ問題なのは、ホームページを閲覧する人は、始めてのページにページ検索で来ることが多いんです。プリン島の場合、「Tシャツ」と検索すると、一番最初に検索されてくるのは、「Tシャツプリント」というかなり奥にあるページなんです。何を思ったのか、たまたま、私がそういうページタイトルにしてしまったせいなのですが、ここから、印刷部門のトップページや他のページも見てもらわないと、印刷の注文はできません。

もし、ページ検索でやってきたページが、フレーム内のページで、そのページにはボタンがないとしたら、どうなるでしょう?閲覧者は袋小路にぶつかって、その先にいけなくなってしまいます。仕方がないので、検索ページに戻って、別のサイトに行くことになるでしょう。

ですから、フレーム内のコンテンツページにも、トップページに戻るボタンだけは必要なんじゃないかと思うのです。

さて、10月くらいから、ホームページ制作について、あれこれお話してきましたが、要は閲覧者の行動を想定して、閲覧者にとって「わかりやすい」「便利な」ページを作ることが大切だと思います。そして、その次に目的にあったデザインや楽しさ、有意義な情報を付け加えていけば、また来たくなるサイトへの第一歩を踏み出せます。

次回はもう、年末なので、パソコンの大掃除について考えましょう。

戻る

次へ


プリン島案内板へ

シルクスクリーンの製版・印刷は磯写真製版へ