※回答一覧

 出題者   カテゴリ   作成日

坂本　邦夫		 ユーザビリティ・デザイン担当 2015-11-30 09:53:23
 問題   ヒント   回答数 
■効果的なアニメーションテクニックとは?

Flashの衰退以降、アニメーションがあまり使われなくなっていましたが、去年から今年にかけて、CSS3を利用するなどして、動きが多彩なサイトが多く見られるようになっています。比較的簡単に導入できるものとしては、animate.cssや古典的なGIFアニメーションなどが挙げられるでしょう。

　animate.css
　https://daneden.github.io/animate.css/

またよく見かけるところでは、スマートフォンなどでボタンを押すとメニューがスライドして横から出てきたり、スクロールするとサイドバーが追従してくるなど、メインビジュアルのスライド以外に、細かいパーツの表現が豊かになってきたことを感じます。

文章を上から読んでいくだけであれば、動かなくても困ることはないのですが、動くことによって視線が引きつけることができたりもします。変化の乏しいページや縦に長いページであれば、少し動かすだけでも文章を読む行動にメリハリが生まれてきます。

そこで今回は動かないページにアニメーションを付けてみましょう。課題となるページはWeb担当者通信のこちらのページです。
　
　http://webtan-tsushin.com/kouza/jquery_basic.html

---
Q1. 課題ページの中で1ヶ所だけアニメーションを使えるとするならば、どの場所にどんなアニメーションを使いますか?　その場所と理由をお答えください。

例)ロゴを動かしてサイト名を覚えてもらいたい、SNSボタンを動かしてシェアを促したい　など

Q2. そのアニメーションはどのタイミングで動かすのが効果的でしょうか?

例)ページの読み込みが終わったとき、スクロールで見出しが出現した瞬間　など		 6

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
2 awk
〈Q1の答え〉
1ヶ所であれば、上部キャッチの「はじめてでも…」の文字に対して使用します。
「3時間」「理解」「実装」「jQuery」を上から時間差で強調して、
セミナーへの興味を引きます。

〈Q2の答え〉
読み込み直後に時間をかけずに動かします。
スクロールされる前に完了するよう5秒くらい。

…もし、要素を追加して良いのであれば、

〈Q1の答え〉
「PAGE TOP」ボタン上部に同じくスクロールする
「お申し込みはこちら」を設置して使用します。
このページのゴールは申込みだと思いますので、
ページを読んでいる途中でも申し込んでいただくためです。

〈Q2の答え〉
20秒に1回程度でpulse(脈打つ感じ)させます。
文章を読むことを邪魔しないが、気になる動きです。		 銅 (坂本　邦夫)
要素を追加してよいのであればということでお答えいただいた部分が非常におもしろかったのでawkさんを銅とさせていただきました。 大前提としてこのページに来るのは、SNSや検索エンジンから来る人だけではなく、メルマガや他のサイトでの紹介などで、既に内容をわかった上で申し込みをする人も含まれます。それらの人にとってはページの内容は知っていることをあらためて読まされるものであり、ショートカットを用意するのは大変親切です。 また「文章を読むことを邪魔しない」という考え方も大変素晴らしいと思います。
1 ツチノコ
Q1
上部ナビゲーションの、TOP～Q&Aの部分。
LavaLamp
http://h2ham.seesaa.net/article/105116797.html
のように、動くバーを1つ追加し、アニメーションにより動かします。

Q2
タイミングは上記URLのようなマウスオーバー時ではなく、ユーザーが画面をスクロールして、スクロール位置が該当の箇所に来たタイミングで動かします。

Q1の理由
縦に長いため、開催場所や費用(開催概要)、申し込み方法などの情報には素早くアクセスできる必要があるかと思います。
上部ナビゲーションで可能なのですが、Web担当者通信サイト全体のグローバルナビだと勘違いする利用者もいる(身の回りの実話です)ため、そうではなく、ページ内のナビゲーションであることを強調することで気づきを促す。

ただし、ナビの内容は見直しをする、という前提です。
「参加費」よりは「講座概要」のほうが重要であったり、「運営者概要」と「Q&A」の順番はコンテンツの順番に合わせるなどです。
「講座概要」という見出しを「講座概要&申し込み」としてナビに反映する方がいいのかな、とも考えました。
このページのコンバージョンは申し込みだと思いますが、申し込むにあたって、参加費や開催場所、注意事項等の講座概要を確認することも重要だと考えるからです。		 銀 (坂本　邦夫)
銀はページの基本的な不備をご指摘いただいたツチノコさんとさせていただきます。全体の構成が見えにくいページを読み続けるのは非常に難しいものです。それを軽減させるための提案をいただきました。 アニメーションではなく、基本的なレイアウトから考え直す必要があるのかもしれませんが、制約によってレイアウトが変えれないサイトもあり、それをCSSやjQueryなどの技術で補うことも重要だと思います。
1 丸田
Q1. 課題ページの中で1ヶ所だけアニメーションを使えるとするならば、どの場所にどんなアニメーションを使いますか?　その場所と理由をお答えください。

冒頭、次を読ませようと思わせるために「jQueryが動かないときの対処法がわかります」を動かします。
例で挙げられたテクニックの中では「bounce」がよいと思います。

Q2. そのアニメーションはどのタイミングで動かすのが効果的でしょうか?

ページがロードされたとき

このページでは、ファーストビューにクリックできるところがありません。
文章が途中で切れているので、興味のあるユーザは自然と読み進むのではないかと思いますが、
そうでないユーザにとっては、ここで離脱してしまう可能性があると考えました。

そこで、なにかフック(とっかかり)を付けることで、読了率が高まるのではないかと考えました。

「jQueryが動かないときの対処法がわかります」というキャッチコピーが、
この講座を端的に示していると考えましたので、ここに注目させることが効果的だと考えました。

以上です。		 金 (坂本　邦夫)
私がどこか1ヶ所と言われた場合と同意見でしたので、銀・銅のお二方と甲乙付けがたいのですが丸田さんを金とさせていただきました。 ランディングページには読み終えて、申し込むまでのストーリー作りが重要ですが、その核となるのは「この講座を受講した場合にどのようなメリットがあるのか」ということだと思います。 「jQueryが動かないときの対処法が分かります」がそれに当たるのですが、文字のコントラストが低く、本文との差もあまり感じられないため、その部分を目立たせるのが妥当だと思います。 bounceは控えめなので、使いやすくていいですね。
0 yamataco
Q1.
「こんな人におすすめです」の部分をzoomInなどで動きをつけて、読むのを飽きさせず自分が対象かも、と思って読み進め参加を促す

Q2.
スクロールでその場所に来たとき		 なし (坂本　邦夫)
「こんな人におすすめです」の部分は、罫線囲みになっており、他の部分とは少し違うあしらいになっています。チェックの色が違い各項目は意識しやすいのですが、見出しの部分が少し弱いので。ここを補強するのもよいと思います。
0 yukko
Q1. 課題ページの中で1ヶ所だけアニメーションを使えるとするならば、どの場所にどんなアニメーションを使いますか?
TOP画像をスライドさせてページ下部にセミナー登録のお知らせがあることを告知する。セミナーへの参加を促したい。

Q2. そのアニメーションはどのタイミングで動かすのが効果的でしょうか?
ページを開いてから5秒ぐらい		 注目 (坂本　邦夫)
yukkoさんの回答を注目とさせていただきました。 「セミナー登録のお知らせがあることを告知する」というのが実はかなり想定外の回答でした。講座のページを課題で選んだこともあったのですが、このページをはじめて見たユーザーがそれを理解しているとは限らないため、出題者がその部分に意識が向いていなかったのはお恥ずかしいところです。 対象がトップ画像ということでしたら、5秒だと既に次の文章に視線が向いているため、もう少し早く開始してもよいのかなと思いました。
0 kamino
Q1.
使用場所:「お申込みはこちらから」
使用理由:申し込みをしてもらうことが目的だと思いますので、ここから申し込めるということに気づかせるため。

Q2.
「お申込みはこちらから」までスクロールし、「お申込みはこちらから」が見え、モニターの真ん中あたりに来た瞬間		 なし (坂本　邦夫)
申し込みにたどり付くためには相当長いページを読み進めなければならないため、最後のだめ押しとしてのアニメーションという意味合いで、よい使い方だと思いました。 タイミングとしても申し分ないと思います。