見出し画像

視線誘導の重要性＆スクロールで動く！下線を引くjsまとめ

はむちゃん🐹

読み物系コンテンツでよくあるスクロールしていったら下線が動くやつ！視線の誘導がスムーズにできるしユーザーさんにとってもうるさくなく、得たい情報を最短で見つけられる！最高！なのでやってみました♥その際に視線誘導の重要性も再確認したので、そのあたりもまとめてみました～～

1.視線誘導の重要性

デザインにおいて重要とされる情報の整理をする際にとっても重要なのが、視線の流れやユーザーの動きを誘導してあげることです！ユーザーの視線を意識していないと、情報が埋もれてしまって次の動作につながらないこともよくあります、、、＞＜

ユーザーの視線や行動を誘導することを意識すると、情報の正しい順序を導き出すことができるので、ユーザーはストレスなく情報を得ることができます。
「視線誘導」を理解してデザインに取り入れることで情報を分かりやすくユーザーに届け、狙った効果を得られるページを目指しましょう✨

2.視線誘導にはパターンがある

よく耳にする左上から右下の視線の流れは『グーテンベルク・ダイヤグラム』と呼ばれるそうです！WEB制作される方なら日ごろから意識されてると思います。その他にも意識したいのが『Z型』『F型』『N型』があります！それぞれ適切な場面が異なるので覚えておくと使えるかも。。。♥

①Z型

ユーザーの視線が左上→右上→左下→右下の順に動くパターンです。情報の重要度が同レベルのときにはこの視線パターンがおすすめ！自然な視線の流れになるので、内容を漏れなく伝えることができ、しっかりと読み込んでもらえるようになるので、集客や購買にもつながりやすい視線誘導のパターンでもあります！

画像2

②F型

ユーザーの視線が左上→右上→左下→右下の順に動くパターンです。WEB媒体に良く用いられるレイアウトで見られる視線の動きですね！左上から一番上の段を右に見た後に、メニューバーなどを下に読み進めています。右下はあまり見られないので、需要な項目は上の方に集めるのが良さそうです。

画像1

③N型

ユーザーの視線が右上→右下→左上→左下の順に動くパターンです。縦読みの新分や雑誌などに用いられる視線の動きですね！縦読みは大体この流れなので、こちらもユーザーの負担が少なくごく自然に内容を読み込んでもらえます✨

画像3

それぞれの内容やゴールの内容によって、これらのパターンを臨機応変に使えるといいですね！！

3.スクロールで動く下線の作り方

ここからはスクロールで動く下線の作り方です！noteに動画貼れなかったのでTwitterで出来上がり例を挙げてみました。

①html

<p class="Text"><span class="Text-Span JS_ScrollAnimationItem">スクロールで下線が引けるよ</span></p>
<p class="Text">スクロールで<span class="Text-Span JS_ScrollAnimationItem">下線が引けるよ</span></p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p class="Text">スクロールで<span class="Text-Span JS_ScrollAnimationItem">下線</span>が引けるよ</p>

brタグ多用したらいけないのですがテストなのでめちゃくちゃ多用しましたｗ

②css

<style>
.Text-Span {
	position: relative;
	z-index: 1;
	line-height:1.5em;
}
.Text-Span:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0%;
	height: 10px;
	background: #ffe785;
	z-index: -1;
	transition: all 0.8s;
}
.Text-Span.isActive:after {
	width: 100%;
}
</style>

z-indexを使用して文字の下に下線が敷かれるように調整しました。transitionで下線の流れてくる速さも調整できます～～

③js

<script>
$(window).on('scroll',function(){$(".JS_ScrollAnimationItem").each(function(){

   //ページの一番上から要素までの距離を取得
   var position = $(this).offset().top;
   
   //スクロールの位置を取得
   var scroll = $(window).scrollTop();
   
   //ウインドウの高さを取得
   var windowHeight = $(window).height();
   
   //スクロール位置が要素の位置を過ぎたとき
   if (scroll > position - windowHeight + 200 ){
   
   //クラス「isActive」を与える
     $(this).addClass('isActive');
   }
 });
 
});
</script>

下線の開始時を変えたいときは windowHeight + 200 の数字(今200にしているところ)を変更してみてください！

4.まとめ

どんなにいい内容を書いていても、見にくかったり情報を拾ってもらえないなんて悲しすぎますよね、、、実務ではヒートマップを見ながらなんでここ見られてないの？って謎解きする時間とっても好きです。視線誘導のパターンを知ることとこんな小技で視線誘導させちゃう方法でユーザーにとっても分かりやすいサイトデザインできるようになりたいなあ。。。

この記事が気に入ったらサポートをしてみませんか？