Skip to main content

アニメーションするWebボタンがユーザに与える効果の検証

こんにちは.修士2年の五十嵐祐真です.
論文執筆,修論発表を終えまして,残りはネットワークデザインスタジオの展示を残すのみとなりました.


私は,修士課程に入ってからアニメーションするボタンが人に与える効果を明らかにする研究を行っていました.そこで今回は締めくくりとして,2年間でたどり着いた結論ではございますが,研究内容をまとめます.


研究タイトルは「Webボタンにおける3D・アニメーション表現の効果検証」です.


まず最初に背景を説明いたします.
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/)は日本の企業サイトのコンペになります.

分析したところ,アニメーションを多用した多くのサイトを見つけることができました.
背景,コンテンツの出現,ボタンやボタンホバーなどに動的表現が使用されています.


そして動的表現を使用する理由を考察したところ,

1,イメージを強く残し,記憶に定着させること
2,重要な情報なので目立たせている
3,読み飛ばされないようにする工夫

というように考えました.


研究報告に戻ります.
動的表現を上記のように考察しましたが,課題として,


どういう動きがどういう効果を持つか明らかになっていません.背景のどの動きにどんな印象を持ったのか,どういう風にコンテンツを出すと見やすくなるのか,そしてどんなボタンの動きがクリックされるのかなど,Webにおけるアニメーションの効果は不明なところが多いのが現状です.

これは,動的表現の使用に関してガイドラインやノウハウが見つからないところにも表れております.


HTML5が登場し,誰でもWebサイトにアニメーションが使えるようになりましたが,制作では,これらの表現を使うとなると,もっぱら制作者のヒューリスティックスに頼るしかありません.



そこで,研究目的をWebにおける3D・アニメーション表現が人に与える効果の解明することとし,ヒューリスティックスに依存しないWebサイト作りの補助を目指します.本研究ではアニメーションするボタンのクリック効果にしぼり,検証をいたしました.



長くなりましたが,ここまでが研究の前座となります.




ここから検証の話に移ります.
本研究では,2つの実験を行いました.
(1)クリック効果を持つ動的表現の検証
(2)パラメータ変化によるクリック効果操作の検証

実験フロー





まず実験(1)からお話しいたします.
実験(1)では以下のWebページを制作し,ユーザからボタンを1つ選んでもらいました.


これらのボタンは,調査したサイトで見られたアニメーションボタンと先行研究から注視することがわかっているボタンです.番号ごとに以下の表現となっております.

1,3D回転
2,点滅
3,拡大縮小
4,静止
5,2D回転
6,X軸移動

ちなみに静止ボタンは基準のために含めました.といいますのも普段押しているのは静止ボタンがほとんどだと思いますので,これよりクリックされたか,されなかったかがクリック効果の検証に使えると思ったからです.



これらから144名のユーザにボタンをクリックしてもらったところ結果は以下のようになりました.

クリック効果の傾向


拡大縮小が最もクリックされ.ついで2D回転がクリックされました.
静止ボタンを境に,拡大縮小と2D回転表現は高いクリック効果を持つといえ,3D回転,点滅,X軸移動はクリック効果が弱いことがわかりました.



次に,クリックしてはいないが印象に残ったボタンをアンケートより調査しましたのでそのグラフを載せます.


クリックはしなかったが印象に残った表現


横軸は,クリック効果の傾向のグラフと合わせてあります.
このグラフから,3D回転表現はクリック効果は低いですが,印象に残せることがわかりました.ということでクリックを狙った表現としてではなく,注視表現として活用できると考えられます.


また,この2つのグラフから,印象に残る=クリック効果ではないことが考えられます.つまり,人の注意を引くことが,クリック効果を高めるのではなく,アニメーションがクリックできるものだと誘発するのです.


ということで,ボタンを選んだ理由を分析いたしました.
アンケート回答を質的分析し,それぞれの動きとまとめたものが以下になります.



以上のことから,実験1の結論を述べたいと思います.

1,クリック効果を狙う時は拡大縮小か2D回転が有効
2,注視効果を狙う時は拡大縮小か3D回転が有効だと考えられる
3,クリック効果は注視されることに加え,動きがボタンとして誘発するかどうかにも依ると考えられる





次に,実験(2)の「パラメータ変化によるクリック効果操作の検証」についてお話しします.

実験(2)ではユーザに対して以下のようなWebページでボタンを選んでもらいました.


拡大縮小と2D回転を並べ,どちらかをクリックしてもらう実験です.
この実験は,拡大縮小の倍率と2D回転の回転速度といった条件を変えたサイトを3つ作り,ユーザにはいずれか1つが表示されます.

そしてパラメータ変化によるクリック効果を検証いたします.

実験条件はこのようになっております.


実験1と比較して「弱」や「速」を表記しています.

これらの条件のボタンに対し,261名のユーザに実験を行ったところ以下のようになりました.


条件A(左),条件B(中),条件C(右)のクリック効果の傾向



条件A,Bでは,拡大・縮小ボタンをクリックする人数の方が2D回転ボタンをクリックする人数よりも多くなり,条件Cでは拡大・縮小ボタンをクリックする人数と2D回転ボタンをクリックする人数がほぼ同じになることがわかりました.


このことから,クリック効果はパラメータで調節できることが確認されました.


次にアンケート回答を分析し,パラメータとクリック効果に関することをまとめました.




拡大縮小ボタンは倍率を変えると,倍率が高いときは「一番拡大したタイミングに合わせて押したい」という理由が増え,倍率が低いと「押すイメージと動作が一致している」という理由が増えます.このことから.押したい理由が変わったとしてもクリック効果が高いということが考えられます.


2D回転ボタンは拡大縮小を選んだ消極的理由から考察いたしました.回転ボタンの速度が速いほど,拡大縮小を選ぶ理由に「回転は押しにくそう」,「回転=拒否だ」という意見が多くなります.しかし,回転を遅くするとこれらの意見が少なくなります.このことから回転は遅いほどクリック効果を高められることが考えられます.


実験2の結果をまとめます.

1,パラメータ変化でクリック効果の操作が可能
2,拡大縮小は,本研究の条件内ではパラメータを変化させても高いクリック効果を持つ
3,回転は遅くするとクリック効果が高くなる

これらのことが考えられます.



最後に本研究の結論です.
・実験で使った動きのみですが,ボタンに使用される動的表現がどのようにクリック効果を持つか明らかにしました.
・クリック効果を狙う時は拡大縮小か2D回転が有効であり,これらの動きはパラメータ変化で操作可能ということがわかりました.


これらの結果から,制作者のヒューリスティックスに依存しないWebサイト制作の一助となればと考えております.



簡潔に説明しましたところで,研究報告は以上となります.



自分としても,Webサイト制作での指針を作るつもりで検証しましたので,つぎは自分自身がこれらの結果を使ってWebコンテンツが作れたらなと考えております.




最後の最後に,

みなさま,ぜひネットワークデザインスタジオの展示に来ていただけたらと思います.
よろしくお願いいたします.


ありがとうございました.





Popular posts from this blog

渡邉研 × ほぼ日:「ほぼ日のアースボール」コンテンツを共同研究・開発のお知らせ

首都大学東京 渡邉英徳研究室は,株式会社ほぼ日と共同で,AR 地球儀「ほぼ日のアースボール」をベースとしたマッピングコンテンツの研究・開発を進めてきました。

共同研究では「ほぼ日のアースボール」と,渡邉研がこれまでに研究・開発してきたジオビジュアライゼーション技術を組み合わせることにより,地球そのもの・人類の文化についての知識と,新鮮なユーザ体験を提供するARコンテンツの実現を目指しています。

このたび,その研究成果を元にした3つのARコンテンツを、「ほぼ日のアースボール」アプリ上で,2018年1月以降、順次公開していくことをお知らせいたします。

■でこぼこ地球(本日公開)
「ほぼ日のアースボール」上に、実際の100倍程度に強調した地形を立体的に表現。詳細画面では、標高8,000m超の山々が連なるヒマラヤ山脈や、厚さ3,000mもの氷に覆われた南極大陸などについて説明しています。ユーザは多様な「でこぼこ」を体感し、地形について知ることができます。


■昼夜の移り変わり(2月下旬公開予定)
太陽光によって、地上の昼と夜がどのように移り変わっていくのかを、アニメーションで表現しています。ユーザは春分・秋分、そして夏至・冬至と4つのモードを切り替えながら、「白夜」が生まれるメカニズムなど、地軸の傾きによって光が当たる場所がどのように異なるのかについて知ることができます。

■学生たちの「手作り人工衛星」(3月下旬公開予定)
大学宇宙工学コンソーシアム(UNISEC)に加盟する、大学・高専学生が開発した人工衛星のデータを網羅。約1日のあいだに描く軌道を、100倍速で再現します。日本の学生たちによる「手作り人工衛星」が、アースボールの周りを元気よく飛び回ります。各衛星の詳細なデータも表示されます。


■本研究開発の担当者
渡邉英徳准教授高田百合奈(特任助教)田村賢哉(リサーチアシスタント・博士後期課程3年)山浦徹也(博士前期課程1年)福井裕晋(博士前期課程1年)渡邉康太(学部4年)

週報180126 好評のほぼ日アースボールと佳境の論文

1月22日、東京は大雪。 日野キャンパスでも正午ごろから雪がパラパラ降り始め、30分ほどでキャンパスの色は真っ白に変わりました。 沖縄出身者としては、久しぶりの雪に心躍りながらも、雪で転ばないか不安がよぎりました。
案の定、お約束のように帰り道に転び、左の膝は青あざになっています。 残念です。 M1の與那覇です。




その日、外は記録的な寒さでしたが、渡邉研究室では、ホッとなニュースがありました。 雪が降り始める1時間前、ほぼ日さんと研究室のコラボコンテンツがリリースされました。 春ごろ、早野先生と古謝さんが研究室に来てくださり、半年かけて制作を進めてきたアースボールの第1弾です。 地球の地形を「強調」した「でこぼこ地球」。

ほぼ日のアースボールの新コンテンツ「でこぼこ地球」は、学生たちとの共同研究・開発により生まれたのでした。(コジャ)

首都大学東京渡邉英徳研究室とのARコンテンツ共同研究・開発のこと。https://t.co/7xEmHH41Ga#ほぼ日のアースボール#ほぼ日 — ほぼ日刊イトイ新聞 (@1101complus) 2018年1月22日とても好評で、みんな喜んでいます。


しかしながら、研究室は卒論・修論発表に向けてラストスパートの真っ最中です。 特に、大学院2年(M2)のメンバーの発表は来週に迫っています。 プレゼンテーションのためのスライド作成し、発表の練習が始まっています。

学部4年(B4)のみんなも、論文を書いたり、急ピッチで作品制作を進めています。 先生にスライドを見てもらいながら、中身を確認していきます。


ちなみにこの半年近く、論文を書くために

「目的・手法・検証・結論」

の四文を何度も練り直してきました。
博論や修論の場合は、各章ごとにこの「四文」が成立することが多いはず。その場合、各章の冒頭に、その章の「目的・手法・検証・結論」を述べておくと、読者(審査員)の頭に入りやすいです。 — 渡邉英徳 (@hwtnv) 2017年12月7日
自分の研究をそれぞれ、端的に言い表さなければなりません。

「ツバル・ビジュアライゼーション・プロジェクト」のコンテンツをアップデート

2009年に最初のバージョンを公開し,第13回文化庁メディア芸術祭で審査委員会推薦作品に選ばれた「ツバル・ビジュアライゼーション・プロジェクト」のコンテンツを更新しました.共同研究パートナーであるNPOツバル・オーバービューの遠藤秀一さんが撮影した,2012年のバイツプ環礁の写真があらたに掲載されています.
ツバル・ビジュアライゼーション・プロジェクトツバルに生きる一万人の人類 以下にスクリーンショットをご紹介.このプロジェクトも三年目に入りました.





現在,遠藤秀一さんと共同で,ポートレートの追加作業をすすめています.こちらも近日中に公開予定です.(wtnv)

東京大学大学院への移籍のお知らせ

2018年4月1日より,指導教員の渡邉英徳は東京大学大学院情報学環の教授に着任いたしました。首都大学東京の客員教授も兼務します。これに伴い,渡邉英徳研究室も東京大学大学院に移籍いたします。首都大学東京での研究は,今後も継承する予定です。これまでご支援いただいたみなさま,本当にありがとうございました。

教員プロフィール首都大学東京学生の業績一覧学生の週報ログ

「平成アーカイブ」:首都大,宮城大,慶應大,早稲田大による合同課題

「平成」が終わろうとしています。新しい元号は2018年夏に発表され,2019年より,新元号に載った歴史がはじまる予定です。みなさんが現在3年生だとしたら,大学を卒業する直前に,新しい元号に切り替わることになります。

「平成」は1989年1月8日からはじまりました。受講者のみなさんのこれまでの人生は,「平成」のタイムスパンにすっぽりと収まっています。「平成」のあいだに,17人の総理大臣が就任し,ベルリンの壁崩壊,バブル経済の崩壊,アメリカ同時多発テロ,湾岸戦争,世界金融危機,東日本大震災など,多くのできごとがありました。新元号に切り替わった瞬間に,こうしたできごとには「平成」というタグが付けられることになります。みなさんは,講師陣が「昭和生まれ」であるように,「平成生まれ」と呼ばれるようになるわけです。

さて,第二次世界大戦と太平洋戦争には「昭和」,関東大震災には「大正」,そして日露戦争には「明治」というタグがついています。しかし,これらのできごとは連続した時空間のなかで起きたものであり,歴史の深層において関連しています。過去のできごとは,みなさんが生きるこの瞬間と地続きであり,また,未来の世界にもつながっていきます。年号によるタグ付けは,こうした意識のなかのつながりを,ときに断ち切ることがあります。こうした断絶は,国境,人種の違いなどによってもたされるものと同質のものかもしれません。

メディアやプロダクトのデザイン,あるいはアートによって,こうした「断絶」を越え,過去と未来をつなぐ認識を生みだすことはできるか。トップに掲げた「AIによる自動色付け写真」や,渡邉英徳研究室で取り組んできたアーカイブズ・シリーズは,こうしたテーマに沿って制作されたものです。

今回の合同課題では,みなさんにも,このテーマに取り組んでもらいたいと思います。自由な発想にもとづく,新鮮な提案を期待しています。(渡邉英徳・石川初・中田千彦・物部寛太郎)

作品制作の指針

テーマは「平成アーカイブ」です。上記の課題文を踏まえ,朝日新聞フォトアーカイブの写真を活用して,メディア,プロダクト,アート作品を制作してください。作品制作には,以下のような対象に提案する想定で取り組んでください。
出版社,放送局・番組制作会社,広告代理店(クリエイティブ部門),インターネットサービス企業,デジタルサイネージ運営企業…

ほぼ日アースボールコンテンツ「昼夜の移り変わり」こぼれ話

ご無沙汰しております。修士1年の山浦徹也です。
約1年ぶりのブログ投稿です。


先週の3月2日、ほぼ日アースボールの共同研究コンテンツ第二弾「昼夜の移り変わり」がリリースとなりました。
自分がメインで担当していたこのコンテンツは、地球の昼と夜がどう変化していくのか、季節によってどんな違いがあるか、アニメーションによって表現したコンテンツです。
↓詳細は是非こちらでご覧になってください。(ほぼ日さん記事)
コンテンツ紹介_010「昼夜の移り変わり」編

およそ半年かけて、どのような方向性・内容にするか、ほぼ日さんとやり取りを通して、色々と揉んできました。そこで、今回はそういったこぼれ話的なことを、少しばかり書いていきたいと思います。

まず、はじまりのアイデアダンプで自分が制作したのは、10秒ほどで昼夜が一周切り替わるコンテンツでした。あっという間の10秒…。
糸井重里さんが口にしたのは「もったいないね、もっとじっくり見てみたい」の言葉でした。
それはまさしくその通りで、早すぎると切り替わりの動きを追うだけで終わってしまうのですよね。
細かいところまで見てもらうにはどうするか。
様々な時間で試した結果、良い塩梅に見られるのは1分程度であるという結論に落ち着きました。
そこからさらにどういった表現ができるか、模索していく段階でいろいろなアイデアを試しては、消えていきました。太陽にまつわる詩を一緒に流してみたり、夜空にオーロラを浮かべてみたり…。
紆余曲折を経て、最終的に、四季で異なる昼夜の切り替わりを表現するコンテンツに落ち着いたわけでございます。
ほぼ日さんの尽力もあり、本当に良いコンテンツをリリースすることができました。

色々と書いてきましたが、百聞は一見に如かずです。
是非、ダウンロードして、実際に見てください。
地上を離れて、ずっと大きな視点から、くるくると回る地球のメカニズムを楽しんでいただけたら幸いです。

先にリリースされた共同研究コンテンツ第一弾「でこぼこ地球」も合わせて楽しんでくださいね!


「記憶の解凍」国際平和映像祭2018にて学生部門賞を受賞

広島女学院高等学校2年生の庭田杏珠さんと,首都大学東京大学院2年の山浦徹也君が共同制作した映像作品「記憶の解凍:カラー化写真で時を刻み、息づきはじめるヒロシマ」が,9月22日にJICA横浜で開催された「国際平和映像祭(UFPFF)2018」の最終審査の結果,学生部門賞を受賞しました。受賞者は,ニューヨークの国際連合本部で11月に開催される「PLURAL+」の授賞セレモニーに招待され,作品上映とプレゼンテーションの機会を与えられます。


この作品は,2010年より渡邉英徳研究室と広島女学院高校が共同で取り組んできた「ヒロシマ・アーカイブ」の活動から派生したものです。昨年秋に首都大学東京で実施したワークショップにおいて,庭田さんたちは自動色付け技術を学び,それを活かした「カラー化写真をベースにした被爆証言の聞き取り」の営みをスタートしました。この活動を通して生まれたコンセプトが「記憶の解凍」です。


この映像作品では,現在は広島平和記念公園となっているかつての繁華街,旧・中島本町で暮らしていた濱井德三さんの記憶,そして生徒さんたちとの交歓,未来への希望が,スライドショーと音楽で表現されています。庭田さんが原作・脚本,山浦君が映像化を担当しています。ぜひ,ご覧いただければ幸いです。

「基礎ゼミナール」最終発表

全学一年生対象の講義「基礎ゼミナール」の最終発表会を7/8に行いました。



私は昨年の着任以来はじめて担当したのですが、いや実に楽しかった。こんなに楽しいのがわかっていたなら、昨年から担当したかったかも。お題は「近未来のインターネット環境におけるプロジェクト立案」でした。中間発表会の記事はこちら

幸か不幸か濃いメンツが多いクラスで、個性の強い案が出そろいました。一年生離れした構想力や一貫性、そしてプレゼン力を感じることもありました。このきらめきを喪わないまま学年を進んで欲しいものです。受講生の皆さん、アシスタントとして参加してくれた鈴木(真)さん、清水要くん(from 笠原研究室)、おつかれさまでした。全員、今後の糧にしていってください。(wtnv)

以下に全チームの発表資料を載せておきます。(まだ未提出のチーム分は随時載せます)Google Docsにコンバートした時点でレイアウトが若干崩れています。











デジタルアースを用いたドローンマップ&アーカイブによる風景資産の活用

こんにちは!B4の渡邉康太です。
1年間の締めとして、卒業研究について紹介します。


卒業研究
「デジタルアースを用いたドローンマップ&アーカイブによる風景資産の活用」
このテーマで1年間研究・制作をおこないました。

ちなみに、皆さんは「ドローン」をご存知でしょうか?
知らないという方のために少し説明します。



ドローンとは無人航空機のことを指します。
定義を書くと長ったらしくなってしまうので割愛します(笑)

測量や農業、配達など様々な分野でドローンの活用・研究が進んでいます。
テレビでもドローンによる空撮映像がよく見られるようになりました。
これらに加えて、町おこしにドローンを活用する地域もあります。
その代表的な地域が徳島県那賀町です。

那賀町ではドローンを使って以下の取り組みをしています。
・ドローン体験会(11月に自分も参加させていただきました)
・林業への活用
・鳥獣被害対策
・実証実験
・那賀町ドローンマップの配布
・空撮アテンド



「那賀町についてさらに詳しく!」という方は是非こちらもご覧ください。
那賀町ドローン推進室
2017年11月の週報(那賀町でのフィールドワークまとめです)
※クリックで各ページにとびます

自分は那賀町の取り組みの中でも「那賀町ドローンマップ」と「空撮アテンド」に着目しました。



那賀町ドローンマップには風景が綺麗で飛行可能なスポットがまとめられています。
紙媒体なので、誰にでも利用可能です。
一方で、周辺情報の詳細さ、ドローンに適した情報配置に課題が残ります。
これらの課題解決を通して、ドローンマップ&アーカイブによる風景資産の活用を検討します。


手法周辺の地形やドローンの高度を表現するためにデジタルアース版ドローンマップを制作しました。
組み込んだ機能は主に3つあります。

1つ目は現地で撮影した全天球画像を球体外側に貼り付けて表示する機能です。
球体をまわしながら、周辺の状況を確認することができます。

10年の学生生活とその集大成

こんにちは。
ブログの書き方を忘れてしまったインダス2期生の高田百合奈です。

学生は、つい先日研究発表を終え、卒業生は、本日までの学内展や今後開催予定の学外展の準備で、慌ただしく活動しております。
この光景を毎年眺め、気付けば早いもので10年以上大学生活を送っていました。
研究室の在籍期間で言っても、もう8年目ですね。
そんな私は、去年の9月末に無事博士号を取得し、10年半の学生生活に終止符を打ちました。
現在は渡邉研究室の特任助教として在籍しております。
久々に研究室ブログを書くため、冒頭の挨拶でなんと名乗ろうか迷い、結局「2期生」という表現にしてみました。

本日は、学生生活の集大成と言える博士研究の報告と、振り返って思うところを少しばかり綴っていきたいと思います。

--------------------

さて、少し時期が遡りますが、去年の8月末に、
「道に迷う複合的要因からアプローチするナビゲーションシステムの研究」
というテーマで、博士研究の公聴会を開催しました。
お越し頂いた皆さま、ありがとうございました。
この研究テーマは、学部生の卒業研究から続いており、これまでに関わったプロジェクトも複数関連しているので、そう言った意味でも、学生生活の集大成と言えるものになりました。


*論文製本して、ちゃんとかっこよくなりました。
学部生時代に抱いた、

「地図という便利なツールがあるにも関わらず、なぜ道に迷ってしまう人(私)がいるのだろうか・・・」

という疑問から、「人はなぜ道に迷うのか」をテーマに研究を進め、今日に至ります。
自分の身の回りのことから生まれたテーマ、言わば、自分のための研究でした。
研究を進めるにつれ、心理学や建築学、脳科学など多岐に渡る分野と関連しているとわかり、それらの知見を繋ぐナビゲーション方法を考察し、開発まで行うことができました。


*開発したアプリの画面の一部。ユーザの方向感覚の診断結果によって、地図の表示パターンが変化します。
ここまでの研究成果は、博士研究という1つの形としてまとめ上げましたが、まだまだ実装したいこと、展望として構想していることが残っています。
これらを実現することを、今目に見える目標の1つとして掲げ、研究者としての一歩を踏み出したいと思います。

また、博士研究の中で、多分野に目を向けられたことや、渡邉研究室に所属して以来、数多くのプロジェクトに関わらせて頂いたこと…