Webデザイン・Webデザイナー専門スクール【インターネット・アカデミー】のオフィシャルブログです。
インタラクティブだからWebは楽しい
Webを勉強し始めると、いたるところで「インタラクティブ」という単語を耳にすると思います。
どんな意味か、ご存知でしょうか？？
「インタラクティブ」とは、「対話」とか「双方向の」という意味の単語です。
情報通信の観点からは、ユーザーの操作に対して、何か反応を返すことを総じて「インタラクティブ」と呼んでいます。
Webは、”ユーザーが操作をすることで成り立つ”という性質上、そもそもインタラクティブなメディアです。
だからこそ、デザインを考える上で「インタラクティブ」性を無視することはできません。
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
Webデザインで、とっても身近に感じられる具体例が「ロールオーバー」効果です。
ロールオーバーとは、マウスを画像に乗せたときに画像が切り替わって
表示に変化が起きたように見える効果のことです。
メニューなど目立たせたいパーツにロールオーバー機能をかけることで、
ユーザーに注目をしてもらいやすくなります。
最近はメニューだけではなく、バナー画像などメインコンテンツの中でも
積極的にロールオーバー効果がかけられているのを頻繁に見かけるようになりました。
インターネット・アカデミーのサイトでもたくさん使っているので確認をしてみてください♪
ココからちょっとだけ、上級者向けのお話。
ロールオーバー効果のつけ方はいくつか方法があります。
- JavaScriptという言語で作成
- CSSという言語で作成
- Flashで作成
JavaScriptは、Dreamweaverというソフトを使えばカンタンに導入が可能です。
CSSでロールオーバー効果をつけるときには、”マウスが乗ったら”という意味の「a:hover」を活用します。
CSSの場合は、画像を使わなくともロールオーバー効果のついたパーツを作ることができるのが特徴ですね。
Flashの場合は、ただ表示が変わるだけではなく、アニメーション効果の変化までつけることができるため、
よりグラフィカルで面白みのあるパーツにすることができます。
以上、上級者向けのお話オワリ☆
………・・・………・・・………・・・………・・・………・・・・‥…━━☆・‥…━━☆☆☆
「インタラクティブ」の代表例がFlashでのコンテンツ作成ですが、
上のロールオーバーの例のように、表現手法は様々あります。
ただ、大事なのは技術ではなく、
何を目的としてインタラクティブにするのかということ。
そして、ユーザーをワクワクさせるようなインタラクティブのアイディアを出すということ。
やたら動いたり、やたら変化すればいいというわけではありません。
どんな見た目ならユーザーがインタラクティブなパーツであることに気づいてくれるか、
どんな効果ならユーザーにどんなインパクトを与えることができるか。
そういったことを考えた上で、どの表現手法を使うかということが
クリエイターにとってとても大切なのです。
インタラクティブで大事なのは、あくまでも「ユーザー目線」です。
サイト制作のヒントにしてくださいね。
