こんにちは．修士２年の五十嵐祐真です．
論文執筆，修論発表を終えまして，残りはネットワークデザインスタジオの展示を残すのみとなりました．
論文執筆，修論発表を終えまして，残りはネットワークデザインスタジオの展示を残すのみとなりました．
私は，修士課程に入ってからアニメーションするボタンが人に与える効果を明らかにする研究を行っていました．そこで今回は締めくくりとして，２年間でたどり着いた結論ではございますが，研究内容をまとめます．
まず最初に背景を説明いたします．
Webサイトを作るとき，自分の感覚のみで作る人もいるかと思いますが，大抵の場合，何かを参考にして作るかと思います．
そのとき，制作する上でのガイドラインやノウハウはwebでも本でもたくさん調べることができます．
例えばレイアウト，配色，デザインの原則などは調べるとたくさんでてきます．
レイアウトを調べたところすぐに以下のような情報を得ることができました．
（出典 http://liginc.co.jp/designer/archives/6154）
次に，現在のWebサイトの数をみてください．
このグラフは，株式会社日本レポジトリサービスのデータより作りました．
青い線は教育機関・法人など組織が使用しているドメインで，赤い線は個人，団体であればいくつでも登録できるドメインです．横軸は年で，縦軸はドメイン数となっております．
ドメイン数の遷移
このことから，Webサイトの数は年々増加していることが読み取れます．
そしてこういう状況では，結論から言ってしまうと，Webサイトを差別化させるために，動的表現を用いられることが増えてきております．
これは，評価されているサイトを分析したことからわかりました．
ということで，簡潔ではありますが事例 調査のまとめをいたします．
分析したのはWebsite of the Yearから40件，Webグランプリから25件です．
Website of the Year（http://www.cssdesignawards.com/woty/）は世界各国のWebサイトがノミネートされているコンペで，Webグランプリ（http://award.wab.ne.jp/）は日本の企業サイトのコンペになります．
分析したところ，アニメーションを多用した多くのサイトを見つけることができました．
背景，コンテンツの出現，ボタンやボタンホバーなどに動的表現が使用されています．
そして動的表現を使用する理由を考察したところ，
１，イメージを強く残し，記憶に定着させること
２，重要な情報なので目立たせている
３，読み飛ばされないようにする工夫
というように考えました．
研究報告に戻ります．
動的表現を上記のように考察しましたが，課題として，
どういう動きがどういう効果を持つか明らかになっていません．背景のどの動きにどんな印象を持ったのか，どういう風にコンテンツを出すと見やすくなるのか，そしてどんなボタンの動きがクリックされるのかなど，Webにおけるアニメーションの効果は不明なところが多いのが現状です．
これは，動的表現の使用に関してガイドラインやノウハウが見つからないところにも表れております．
HTML5が登場し，誰でもWebサイトにアニメーションが使えるようになりましたが，制作では，これらの表現を使うとなると，もっぱら制作者のヒューリスティックスに頼るしかありません．
そこで，研究目的をWebにおける3D・アニメーション表現が人に与える効果の解明することとし，ヒューリスティックスに依存しないWebサイト作りの補助を目指します．本研究ではアニメーションするボタンのクリック効果にしぼり，検証をいたしました．
長くなりましたが，ここまでが研究の前座となります．
ここから検証の話に移ります．
本研究では，２つの実験を行いました．
（１）クリック効果を持つ動的表現の検証
（２）パラメータ変化によるクリック効果操作の検証
まず実験（１）からお話しいたします．
実験（１）では以下のWebページを制作し，ユーザからボタンを１つ選んでもらいました．
これらのボタンは，調査したサイトで見られたアニメーションボタンと先行研究から注視することがわかっているボタンです．番号ごとに以下の表現となっております．
１，3D回転
２，点滅
３，拡大縮小
４，静止
５，２D回転
６，X軸移動
ちなみに静止ボタンは基準のために含めました．といいますのも普段押しているのは静止ボタンがほとんどだと思いますので，これよりクリックされたか，されなかったかがクリック効果の検証に使えると思ったからです．
これらから144名のユーザにボタンをクリックしてもらったところ結果は以下のようになりました．
拡大縮小が最もクリックされ．ついで2D回転がクリックされました．
横軸は，クリック効果の傾向のグラフと合わせてあります．
このグラフから,3D回転表現はクリック効果は低いですが，印象に残せることがわかりました．ということでクリックを狙った表現としてではなく，注視表現として活用できると考えられます．
また，この２つのグラフから，印象に残る＝クリック効果ではないことが考えられます．つまり，人の注意を引くことが，クリック効果を高めるのではなく，アニメーションがクリックできるものだと誘発するのです．
ということで，ボタンを選んだ理由を分析いたしました．
アンケート回答を質的分析し，それぞれの動きとまとめたものが以下になります．
以上のことから，実験１の結論を述べたいと思います．
１，クリック効果を狙う時は拡大縮小か2D回転が有効
２，注視効果を狙う時は拡大縮小か3D回転が有効だと考えられる
３，クリック効果は注視されることに加え，動きがボタンとして誘発するかどうかにも依ると考えられる
次に，実験（２）の「パラメータ変化によるクリック効果操作の検証」についてお話しします．
実験（２）ではユーザに対して以下のようなWebページでボタンを選んでもらいました．
拡大縮小と2D回転を並べ，どちらかをクリックしてもらう実験です．
この実験は，拡大縮小の倍率と2D回転の回転速度といった条件を変えたサイトを３つ作り，ユーザにはいずれか１つが表示されます．
そしてパラメータ変化によるクリック効果を検証いたします．
実験条件はこのようになっております．
実験１と比較して「弱」や「速」を表記しています．
これらの条件のボタンに対し，261名のユーザに実験を行ったところ以下のようになりました．
条件A,Bでは，拡大・縮小ボタンをクリックする人数の方が2D回転ボタンをクリックする人数よりも多くなり，条件Cでは拡大・縮小ボタンをクリックする人数と2D回転ボタンをクリックする人数がほぼ同じになることがわかりました．
このことから，クリック効果はパラメータで調節できることが確認されました．
次にアンケート回答を分析し，パラメータとクリック効果に関することをまとめました．
拡大縮小ボタンは倍率を変えると，倍率が高いときは「一番拡大したタイミングに合わせて押したい」という理由が増え，倍率が低いと「押すイメージと動作が一致している」という理由が増えます．このことから．押したい理由が変わったとしてもクリック効果が高いということが考えられます．
2D回転ボタンは拡大縮小を選んだ消極的理由から考察いたしました．回転ボタンの速度が速いほど，拡大縮小を選ぶ理由に「回転は押しにくそう」，「回転＝拒否だ」という意見が多くなります．しかし，回転を遅くするとこれらの意見が少なくなります．このことから回転は遅いほどクリック効果を高められることが考えられます．
実験２の結果をまとめます．
１，パラメータ変化でクリック効果の操作が可能
２，拡大縮小は，本研究の条件内ではパラメータを変化させても高いクリック効果を持つ
３，回転は遅くするとクリック効果が高くなる
これらのことが考えられます．
最後に本研究の結論です．
・実験で使った動きのみですが，ボタンに使用される動的表現がどのようにクリック効果を持つか明らかにしました．
・クリック効果を狙う時は拡大縮小か2D回転が有効であり，これらの動きはパラメータ変化で操作可能ということがわかりました．
これらの結果から，制作者のヒューリスティックスに依存しないWebサイト制作の一助となればと考えております．
簡潔に説明しましたところで，研究報告は以上となります．
自分としても，Webサイト制作での指針を作るつもりで検証しましたので，つぎは自分自身がこれらの結果を使ってWebコンテンツが作れたらなと考えております．
最後の最後に，
みなさま，ぜひネットワークデザインスタジオの展示に来ていただけたらと思います．
よろしくお願いいたします．
ありがとうございました．
長くなりましたが，ここまでが研究の前座となります．
ここから検証の話に移ります．
本研究では，２つの実験を行いました．
（１）クリック効果を持つ動的表現の検証
（２）パラメータ変化によるクリック効果操作の検証
実験フロー
まず実験（１）からお話しいたします．
実験（１）では以下のWebページを制作し，ユーザからボタンを１つ選んでもらいました．
１，3D回転
２，点滅
３，拡大縮小
４，静止
５，２D回転
６，X軸移動
ちなみに静止ボタンは基準のために含めました．といいますのも普段押しているのは静止ボタンがほとんどだと思いますので，これよりクリックされたか，されなかったかがクリック効果の検証に使えると思ったからです．
これらから144名のユーザにボタンをクリックしてもらったところ結果は以下のようになりました．
クリック効果の傾向
拡大縮小が最もクリックされ．ついで2D回転がクリックされました．
静止ボタンを境に，拡大縮小と2D回転表現は高いクリック効果を持つといえ，3D回転，点滅，X軸移動はクリック効果が弱いことがわかりました．
次に，クリックしてはいないが印象に残ったボタンをアンケートより調査しましたのでそのグラフを載せます．
クリックはしなかったが印象に残った表現
横軸は，クリック効果の傾向のグラフと合わせてあります．
このグラフから,3D回転表現はクリック効果は低いですが，印象に残せることがわかりました．ということでクリックを狙った表現としてではなく，注視表現として活用できると考えられます．
また，この２つのグラフから，印象に残る＝クリック効果ではないことが考えられます．つまり，人の注意を引くことが，クリック効果を高めるのではなく，アニメーションがクリックできるものだと誘発するのです．
ということで，ボタンを選んだ理由を分析いたしました．
アンケート回答を質的分析し，それぞれの動きとまとめたものが以下になります．
以上のことから，実験１の結論を述べたいと思います．
１，クリック効果を狙う時は拡大縮小か2D回転が有効
２，注視効果を狙う時は拡大縮小か3D回転が有効だと考えられる
３，クリック効果は注視されることに加え，動きがボタンとして誘発するかどうかにも依ると考えられる
次に，実験（２）の「パラメータ変化によるクリック効果操作の検証」についてお話しします．
実験（２）ではユーザに対して以下のようなWebページでボタンを選んでもらいました．
この実験は，拡大縮小の倍率と2D回転の回転速度といった条件を変えたサイトを３つ作り，ユーザにはいずれか１つが表示されます．
そしてパラメータ変化によるクリック効果を検証いたします．
実験条件はこのようになっております．
実験１と比較して「弱」や「速」を表記しています．
これらの条件のボタンに対し，261名のユーザに実験を行ったところ以下のようになりました．
条件A(左)，条件B(中)，条件C(右)のクリック効果の傾向
条件A,Bでは，拡大・縮小ボタンをクリックする人数の方が2D回転ボタンをクリックする人数よりも多くなり，条件Cでは拡大・縮小ボタンをクリックする人数と2D回転ボタンをクリックする人数がほぼ同じになることがわかりました．
このことから，クリック効果はパラメータで調節できることが確認されました．
次にアンケート回答を分析し，パラメータとクリック効果に関することをまとめました．
拡大縮小ボタンは倍率を変えると，倍率が高いときは「一番拡大したタイミングに合わせて押したい」という理由が増え，倍率が低いと「押すイメージと動作が一致している」という理由が増えます．このことから．押したい理由が変わったとしてもクリック効果が高いということが考えられます．
2D回転ボタンは拡大縮小を選んだ消極的理由から考察いたしました．回転ボタンの速度が速いほど，拡大縮小を選ぶ理由に「回転は押しにくそう」，「回転＝拒否だ」という意見が多くなります．しかし，回転を遅くするとこれらの意見が少なくなります．このことから回転は遅いほどクリック効果を高められることが考えられます．
実験２の結果をまとめます．
１，パラメータ変化でクリック効果の操作が可能
２，拡大縮小は，本研究の条件内ではパラメータを変化させても高いクリック効果を持つ
３，回転は遅くするとクリック効果が高くなる
これらのことが考えられます．
最後に本研究の結論です．
・実験で使った動きのみですが，ボタンに使用される動的表現がどのようにクリック効果を持つか明らかにしました．
・クリック効果を狙う時は拡大縮小か2D回転が有効であり，これらの動きはパラメータ変化で操作可能ということがわかりました．
これらの結果から，制作者のヒューリスティックスに依存しないWebサイト制作の一助となればと考えております．
簡潔に説明しましたところで，研究報告は以上となります．
自分としても，Webサイト制作での指針を作るつもりで検証しましたので，つぎは自分自身がこれらの結果を使ってWebコンテンツが作れたらなと考えております．
最後の最後に，
みなさま，ぜひネットワークデザインスタジオの展示に来ていただけたらと思います．
よろしくお願いいたします．
ありがとうございました．
.png)
