カテゴリー: jQuery

jQueryのスライダーをホームページに取り入れる時に注意したいこと

サムネイル

トップページなどでよく使われるスライド式に自動で画像が切り替わるスライダー。ローテーションバナーやカルーセルと呼ぶこともあります。

スライダーを複数のコンテンツや写真を見せるのに便利で、かっこよくも見えます。
jQueryやWordpressのプラグインも充実しているので、設置もそこまで難しくありません。

しかし「設置が簡単でかっこよく見える」などという理由だけでスライダーを設置するとかえってユーザエクスペリエンスや滞在時間の低下になったりします。

スライダーを設置する時に注意しておいた方がいいポイントをいくつか紹介します。
なおここで紹介するのはある程度共通しているポイントではありますが、もちろん例外もあります。これがベスト!という答えはサイトの目的、目標によって変わってきますので、あくまで参考程度に思ってもらえればと思います。

1, バナーは3〜4枚程度に

ホームページによりますが、トップページに滞在する時間は長くてもせいぜい20秒程度です。ユーザはファーストビューの2秒程度で自分にとって価値のあるページか判断すると言われています。
この限られた時間の中で、バナーを何枚も設置しても、すべて見てもらえるどころか、存在しないも同然である場合がほとんどです。見きれない程のバナーを設置してもクリックもされず、画像の読み込みに無駄に時間を使ってしまうだけになります。

トップページのバナーは新鮮な情報を掲載し、時期が過ぎたら潔く外す方が他のバナーを見ても機会が増えるので外しておきましょう。枚数も3枚程度を目標にしましょう。

2,  サムネイルを付ける

サムネイル

順番が後ろにあるバナーほど、ユーザに見てもらえる確率は低くなります。
特に最後の方など、余程ユーザが興味を持って辛抱強く待ってくれない限り見てももらえないでしょう。
サムネイルがあることで、ユーザが直感的に見たいバナー(情報)を選ぶことが出来ます。
よくバナーの枚数だけがわかるように小さいアイコンだけがついたものもありますが、クリックもしづらく操作性も悪いです。
サムネイルも写真やイラスト、コピーなどを工夫して、ユーザがより直感的に判断できるものにすることで、クリック率アップにつながります。

3, 不快に感じない表示時間に

表示時間

なるべく多くのバナーを見てもらいたいがために、表示時間を短くし過ぎたり、逆にじっくり読んでもらいたいから表示時間を長くし過ぎたりと、どちらもユーザエクスペリエンスの低下になります。読むのにかかる時間はデザインの可読性や、人によって違うので、これといった秒数で表すことはできません。
マウスオーバでローテーションを停止できたり、ユーザが自分のペースで情報を見ることが出来るようにしてあげましょう。

まとめ

いかがでしょうか。
上記はスライダーを設置することを前提にしていますが、スライダーは必ずしも必要なものではありません。見栄えもするし、情報を多く掲載することが出来ますが、それがかえって不快に感じることもあります。スクリプトを使うのでブラウザによってうまく動かない場合もあります。
ユーザエクスペリエンスを下げないように、よく考えた上でスライダーは設置しましょう。

スクロールしている時の背景画像にパララックス効果を加える方法

jquery

最近よく見かけるスクロールしていくと固定された背景画像が変わっていくページを作ってみました。最近よく見かける割に、すごい新しい手法を使って作ったわけではないので、工夫次第で、今ある技術でもっといろんな表現が出来るかもなぁと再確認しました。

作り方は完全に我流なので、こういう作り方の方がスマートっていうやり方があれば是非とも教えてください。

デモ

HTMLとCSSを準備

HTMLとCSSを準備します。
流れとしては最初の段階ではbodyにbackground-imageで「01.jpg」を表示させておき、スクロールしていって、クラス[bg02][bg03][bg04]を追加していき、backgroundを上書きするやり方になります。[background-attachment]プロパティでスクロールした時に背景画像を固定するかどうかを指定出来ます。

HTML

CSS

jQueryを準備

jQueryではそれぞれ必要な高さを取得して、背景画像を切り替えたい高さにきた時に、設定したクラスが追加されるようにしています。

少しでも参考になれば幸いです。

jQueryで下までスクロールした時にフッターに固定されるボタンを作る方法

jquery

Webデザインをしていて、ページトップへのボタンの見せ方が気になることはありませんか?

最近のデスクトップサイトではページトップ戻るボタンを付けているところが減っているように感じますが、スマホサイトではまだまだ見かけます。

今回フッタいい感じにフィットするボタンを作りましたのでご紹介します。

デモ

ページトップに限らず、いろいろなボタンの設置も出来るかと思うので、参考になれば幸いです。

ボタンを右下に表示させる

ボタンを右下に固定で表示させておきます。背景色や文字色はお好みで設定してください。

HTML

CSS

ボタンをフェードインで表示させる

スクロール値が120を超えた段階で、ボタンが表示されるようにします。またクリックした時にスムーズに動くように設定します。

ボタンをフッタにフィットさせる

jQueryでページ全体の高さ、フッタの高さ、ウィンドウ(ブラウザ)の高さ、スクロール量をそれぞれ取得して、フッタが見えた段階で、bottomの値が、スクロールに合わせて変動するようになっています。DOM構成時に取得するので、CSSなどで高さを固定する必要はありません。

WordPressのjQueryは$(ドル)を使えないので注意してください∠( ゚д゚)/

jQueryを使って簡単な視差(パララックス)効果を加える方法

パララックス

以前、当サイトで視差効果(パララックス効果)についての記事を書きました。

スクロールした時に背景やコンテンツにそれぞれ微妙に変化を加えて遠近感を感じる

パララックス効果と一言でいっても、見せ方は無数にあります。
横に景色が流れていくものや、画像がどんどん大きく表示されるもの、逆にどんどん小さくなっていくもの、最近ではスクロールしていくと背景にバナーが見え隠れるするサイトも見たことがあるのではないでしょうか。

その中で今回は複数の背景を使って奥行きを感じられるようにする方法をご紹介します。
完成イメージはこんな感じです。

デモ

なんか桜が上に舞い上がってる感じになっていますが、細かいツッコミは無しでお願いします(笑)

1, 画像を用意

今回は3枚の画像で奥行きを表現します。この時、奥の画像ほど、色を薄く、花びらを小さくするとより遠近間があるように見えます。

薄め&小さく

2, HTML & CSSで背景を設定

HTML

CSS

heightは中にコンテンツが無いので仮で入れています。実際は必要ありません。

3, jQueryを設定

今回は奥の画像を遅くなるようにします。

レイヤー

jQuery

値を大きくするほどスクロールした時、ゆっくり動くようになります。

CSSでリストのマーク・数字だけ色変えたり、影を付ける方法

HTMLで<li>要素の色を変えたり、影(shadow)を入れたい時、普通に指定するとマークや数字も変わってしまいます。数字の連番などは今までは画像で一つ一つ対応していましたが、それぞれにクラスを指定する必要がありとても面倒ですよね。

CSSだけでは表現できないデザインもありますが、画像を使わずにリストのマークや数字だけにスタイルを加える方法をご紹介します。

マークだけスタイルを変える

マークだけスタイルを変えたい場合、2つの方法があります。

spanを使う

<li>の中をさらに<span>で囲むことで、テキストだけ色を変更する方法です。

<span>は毎回付けるのが手間なので、jQueryなどで自動に付けるようにすると楽です。

ただ、この方法は簡単ではあるんですが、色を変えることは出来ても、影を付けることは出来ません。
影や他のスタイルを付けたい場合は以下の方法になります。

擬似要素を使う

擬似要素を使ってリストの丸や四角を表現する方法です。

「\2022」はUnicodeのエスケープです。海外サイトだと日本語特有の「●」や「■」が使えない場合がありますが、contentのところをそちらで代用してもいいと思います。

数字だけスタイルを変える

list-style-typeのdecimal(数字)の場合、先ほど紹介したspanの方法で色を変えることは出来ますが、影を付けることは出来ません。だからといって毎回擬似要素に「content: “1”」「content: “2”」・・・なんて書いていくのも面倒です。そこでcounter-incrementプロパティを使います。これで連番を作ることが出来ます。

ここでのnumberはカウンタ名で特にnumberという名前にする必要はありません。
また「content:”Q”counter(number) “.”」ように”Q”を付けることで「Q1.」「Q2.」「Q3.」・・・といったようにすることも出来ます。

まとめ

いかがでしたでしょうか。counter-incrementプロパティやbefore要素はIE7以前では使えないですが、もうここは無視してもいいかなと個人的には思ってます(笑) あと連番の値をリセットするcounter-resetプロパティもあるのでそちらも活用してみてください。