Marketing Blog マーケティングブログ

2015.05.08

用語集

No.5 デザインの機能と効果【ロールオーバー、アコーディオン方式、パララックス効果】

img_05_02

こんにちは!
新人平田のWeb用語紹介です(^0^)

前回は、Webサイトの中でもトップページの構造について説明しました!

今回は、webサイトのデザインにおける
機能や効果に目を向けていきたいと思います。

 

●ロールオーバー

画像にポインターを乗せると、色が変わったり、
画像が変わったりすることがありますよね!

これをロールオーバーと呼びます。

この機能によって、画面に動きが出るので
ユーザーの興味を引くことができます。

キューブのWebサイトのグローバルメニューに
ポインターを乗せてみてください!

https://cubecube.net/

アイコンや文字の色が少し変わるようになっています。

 

●アコーディオン方式

こちらは、

webページにおいて、表示しきれない大量のコンテンツを非表示で並べ、
メニュー部分をクリックするなどして、必要な部分を表示、他を非表示させるような仕組みを指します。

(株式会社コニファのマメ知識より引用
http://www.conifer.jp/coni_mame365.html

アコーディオンを思い出してください!

あんな風に、必要なときにはビヨーンと伸びる機能になっています。

img_05_01

 

例えばこのように、メニューの「商品情報」をクリックすると
詳しいカテゴリが表示されたりします。

スマートフォンサイトのように情報量をしぼらないといけないときなど、
アコーディオン方式を用いれば、ユーザーが欲しい情報だけさらに詳しく見せることができます。

 

●パララックス効果

なかなか聞きなれない言葉ですね!

Webデザインにおけるパララックスは、スクロールといった動作に応じて、
複数のレイヤー(層)にある視覚要素を異なるスピードで動かすことで視差を生み出し、
立体感・奥行きを演出する手法のことを指します。

(MICROWAVE 2013/12/02「パララックス」をはじめとする「スクロールエフェクト」の魅力とは
より引用 http://www.micro-wave.net/column/technology/parallax.php

説明だけ聞いてもかっこいいですね(笑)
こちらのWebサイトを見てみましょう!

http://www.bagigia.com/

スクロールしていくと、これまでのWebサイトとは全く違う感覚ですよね!
ページを降りていく感覚がないなと思っていると横にスクロールしてみたり・・・

このWebサイトもパララックス効果を使っています。

http://www.muji.com/jp/airpurifier/

このように、遊び心のあるWebサイトはついつい見てしまいます!
ユーザーの滞在時間をのばすのに効果的です。

 

以上今回は、

【ロールオーバー、アコーディオン方式、パララックス効果】

の3語のご紹介でした(^^)

 

お困りのことがあれば、
お気軽にお問い合わせ
ご相談ください。

ホームページ作成 / スマホ対応 /
アクセス解析 / サーバー管理 / サイト更新

営業電話は電話ではなくパートナー募集メールフォームより入力してください

pagetop