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

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

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

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

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

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





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

バレーボールの練習改善のためのプレー記録の視覚化

こんにちは、学部4年の佐野千秋です。
私は卒業研究で「バレーボールの練習改善のためのプレー記録の視覚化」を行いました。



自身が高校生の頃、プレーのデータをとって選手で共有していたものの、見にくさや情報の少なさからあまりデータを重要だと思う場面がありませんでした。
せっかくデータを利用してるのならばより良いデータ利用方法があるのではないかと思いこの研究をはじめました。
実際に母校である神奈川県立厚木高校のバレーボール部に制作物を使ってもらったり、アンケートをとったりしながら、選手が感じている問題を元にデータ利用の改善を行いました。

主に行った改善は以下3点です。

1つ目はデータ収集内容の改善です。
今までは4つのプレー要素(※1)についてレシーブの精度(※2)のみを記入していましたが、スパイク、サーブはコースの記入欄を新たに加えました。
選手が求める情報を元に収集内容を改善を行い、情報量の充実を図りました。
この改善によって、どのようなコースが効果的なのかが分かるようになります。


※1 バレーボールは大きく分けてスパイク、サーブ、サーブレシーブ、スパイクレシーブの4つのプレー要素があります。
※2 バレーボールではレシーブの精度(=セッターの取りやすいボールかどうか)をA-Eの5段階に分けて表現することがよくあります。

2つ目はデータ入力方法の改善です。私の母校はデータを紙媒体に記録した後、Excelに入力し、印刷したものを選手内で共有していましたが、ある程度時間がかかるため練習試合があるたびに入力するのではなく何日か分をまとめて入力している場面が見受けられました。少しでも入力の煩わしさを軽減するため今までベタ打ちだったものを、Excelのマクロを使うことでクリック入力や、選択式で入力を行えるようにしました。



3つ目は視覚化方法の改善です。
改善の流れとしては、実際に母校の試合のデータを視覚化し、試合後のミーティングで使ってもらいアンケートをとります。その結果を視覚化方法の改善に活かすことで、より選手が見やすい、求めるものに近づけていきました。
視覚化改善は計3回行いました。左が1番最初となっています。
効果的な攻撃が出来ている割合を色、打数を円の大きさで表現するなど選手が直感的に度のコースが効果的なのかが分かるような視覚化方法を用いました。
またアンケートから選手に…

「人間センサー」で災害状況をすばやくつかむ:「台風リアルタイム・ウォッチャー」公開

7月、台風が多発するシーズンに入りました。先週も台風第8号が発生し、沖縄や長野をはじめ、大きな被害が発生しました。私たちの研究チームは、気象庁が発表する台風情報と、多数の人々が発信する災害情報をマッシュアップしたウェブサービス「台風リアルタイム・ウォッチャー:台風情報と「減災リポート」のリアルタイム・マッシュアップ」を公開しました。 人間は、とてもすぐれた"センサー"でもあります。周囲の状況をすみやかに捕捉し、発信する能力を持っています。今回の試みは、こうしたボトムアップの、いわば「人間センサー」で、トップダウンの観測情報を補完しようとするものです。

台風リアルタイム・ウォッチャー」では、国立情報学研究所(NII)の北本朝展さんによる「デジタル台風:台風画像と台風情報」そして株式会社ウェザーニューズのサービス会員「ウェザーリポーター」が提供する「減災リポート」のデータがマッシュアップされています。 以下の北本さんのツイートにあるように、「減災リポート」のデータは、これまでオープンデータ化されていませんでしたが、今回、特別にAPI経由で提供していただくことができました。
台風リアルタイム・ウォッチャー http://t.co/5qiYVSEbKD (@hwtnv さん作)が動き始めたようだ。ウェザーニューズの減災リポートは、従来ネット上に出ていなかったはずで、これが外に出てきた点が一つのポイントだと思う。ちなみに、この台風アイコン、いいね。
-- 北本 朝展 (@KitamotoAsanobu) 2014, 7月 10 「デジタル台風」と「減災リポート」のデータは1時間ごとに収集・更新されます。さらに気象庁発表の台風情報が30分毎に反映されます。「減災リポート」のデータは、投稿時にユーザが付与するカテゴリで色分けされています。また、ウェブサイト上には過去72時間のデータがアーカイブされており、タイムスライダーで遡れるようになっています。さらに過去のデータもすべてサーバに蓄積されます。

「減災リポート」のデータは、前々回の記事で解説した「東日本大震災マスメディア・カバレッジ・マップ」と同様、地面から鉛直方向に時間軸を設定し、時空間的なビジュアライゼーションを施しています。これによって、各地における災害の推移がわかります。 その一例として…

イベント「デジタル時代における戦争体験の継承」を共催します。

東京大学大学院 渡邉英徳研究室は,イベント「デジタル時代における戦争体験の継承」(Yahoo!ニュース主催)を共催します。

日時: 2019年8月8日 18:30〜
会場:ヤフー本社17階「ヤフーロッジ」(定員100人)
入場:無料
主催:Yahoo!ニュース
共催:東京大学大学院 渡邉英徳研究室

お申込みはこちらから

戦後74年が経過し,「戦争体験の風化」が大きな社会課題になりつつあります。

あの時,何が起きていたのか。戦場,空襲といった「戦火」の体験に加えて,市民の体験をもとに,市民の生活に戦争がもたらしたものを見つめることにより,私たちの日々の暮らしが戦争によってどう変わり,何を奪われていくのかについて,実感が深まります。

メディアや研究機関,あるいは若者たちが,デジタルツールを駆使して戦争体験をあつめ,伝え,アーカイブする動きが各地で始まっています。また,アニメやコミックなど,若者が親しみやすい表現で,戦争を伝える試みも,ひろく支持されています。

こうした動きは,デジタル時代だからこそ生まれてきたものです。今回のイベントでは,この動きと力を結びつけ,大きな流れを作りたいと考えています。そのために,NHK,沖縄タイムス,ヤフーなどのメディア,そして市民ベースのボトムアップな活動で,戦争体験の収集・継承の活動をしている人々が一堂に会し,取り組みや成果を報告します。

登壇者
宮坂学(前 ヤフー株式会社 代表取締役社長(予定))NHK「あちこちのすずさん」スタッフ輿那覇里子(沖縄タイムス 記者)渡邉英徳(東京大学 大学院情報学環 教授)庭田杏珠(広島女学院高等学校 生徒)進行:宮本聖二(Yahoo!ニュース プロデューサー/ 立教大学大学院 教授)プログラム

第一部:メディアの取り組み
ネットメディア:宮坂「デジタルによる戦争体験の継承」テレビ:NHK「あちこちのすずさん」新聞:與那覇「沖縄戦デジタルアーカイブ」第二部:市民の取り組み
研究者:渡邉「ヒロシマ・アーカイブと「記憶のコミュニティ」」高校生:庭田「カラー化写真と対話による「記憶の解凍」」第三部:会場との対話

会場では,「記憶の解凍」(庭田杏珠× 渡邉英徳)によるパネル・映像を展示します。

「COVID-19に関するアーカイブ活動の呼びかけ」新型コロナウイルス感染症に関するデジタルアーカイブ研究会

デジタルアーカイブ学会ウェブサイトより転載 「COVID-19に関するアーカイブ活動の呼びかけ」 2020年5月10日
新型コロナウイルス感染症に関するデジタルアーカイブ研究会
現在、新型コロナウイルス感染症「COVID-19」の感染拡大を受けて、社会の各層でさまざまな取り組みが行われています。

あらゆる点において、最も尊重されるのは人命であり、人命を守る医療の維持であることは言うまでもありません。

しかし、COVID-19に向き合うためには、感染症の実相や社会のありさまを正確に記録することも欠かせません。事実、今回のCOVID-19禍において、私たちはこれまでの疫病の歴史、たとえば約100年前のパンデミック「スペインかぜ」の記録などからまなべる点は多々あるはずです。
1918年「スペインかぜ」パンデミックの際に撮影された,アメリカ・カンザス州フォート・ライリーのキャンプ・ファンストン緊急病院のようす。ニューラルネットワークによる自動色付け+手動補正。 pic.twitter.com/7UmHdrs6VR — 渡邉英徳 (@hwtnv) April 22, 2020 しかし今回、過去の疫病の教訓が十分に生かされているとは言えません。今後の社会においてCOVID-19と相対していくためには、歴史に残るであろう現在の社会の状況を、仔細に記録していくことが肝要です。

そこで私たちは、図書館・博物館・自治体・大学・産業など、社会状況の記録に関心を持つみなさんに向けて、いま社会が直面しているCOVID-19に関する「アーカイブ活動の推進」を提案します。たとえば、次のような取り組みが考えられるでしょう。
市民による情報の収集活動を、十分に安全を確保することに留意したうえで、可能な範囲で支援することメディア報道や各種情報発信の内容をアーカイブすること自らの組織(たとえば自治体であれば対策本部等)や地域の記録をアーカイブすること ※アーカイブの手段については、デジタル・アナログを問いません

以上はあくまで例に過ぎません。私たちは、COVID-19に関するアーカイブ活動が本来地域の情報集積のハブである図書館・博物館等を中心として実施されることを切望しています。また、本研究会としても活動への協力を惜しみません。アーカイブ活動に関するご相談をお気軽にお寄せください。

なお本研究会は、デジ…

「記憶の解凍」 ARアプリ公開

東京大学大学院情報学環 渡邉英徳研究室は、AI技術を活用してカラー化した“戦前の広島”の白黒写真を、地図・AR(拡張現実)ビューに表示する「記憶の解凍」ARアプリを公開しました。

私たちのチームはこれまでに、数百枚の白黒写真をAI技術でカラー化し、さらに、被爆者との対話を重ねて色を補正することによって、過去の記憶を辿る旅を続けてきました。最新技術と、被爆者・若者たちのコミュニケーションが組み合わさることで、これまで凍りついていた記憶が「解凍」され、よみがえります。

カラー化された過去の写真は、私たちの心のなかに、これまでにない感情を喚起します。その写真が、アプリを通して、現在の広島の風景に重ね合わされるとき、私たちの眼の前には、切り撮られた過去の日々につながる、時の窓が開きます。


本アプリは、渡邉英徳教授とともに活動を進めてきた、広島市在住の庭田杏珠さんとのコラボレーションによって制作されたものです。

アプリダウンロード(無料):
App Store / Google Playにて、キーワード「記憶の解凍」で検索ウェブサイトからダウンロード制作チーム:
原案・カラー化・アプリ作成:渡邉英徳×庭田杏珠考証協力:濱井德三、ヒロシマ・フィールドワーク実行委員会写真提供:濱井德三、今中圭介、緒方昭三、片山曻、諏訪了我(浄寶寺)、高橋久、多田良子、本田美和子、広島県立文書館、広島市公文書館、アメリカ公文書館(撮影:尾木正己)タイトルロゴデザイン:秦那実カラー化技術提供:早稲田大学 石川博研究室平和記念公園(爆心地)街並み復元図提供:中国新聞社

女性アイドルの現実と虚構の様相の変化 -メディアの変遷に基づく研究-

こんにちは,B4の増田です!

■卒業研究について
私は,「女性アイドルの現実と虚構の様相の変化 -メディアの変遷に基づく研究」
という研究をしました.


アイドルが好きなので
テーマをアイドルにすることは入学当初から定まっていたのですが,
「大好きなアイドルのために何ができるか」から出発して
現在のテーマに至るまで,B3の後期から約10ヶ月ほどの年月を要しました.

「アイドルのためにコンテンツを作りたい!」

「アイドルとはそもそも何なのか?」

「アイドルにおける現実と虚構の進化が気になる!」

「アイドル単体では全く分からないから,メディアの変遷と照らしあわせよう!」

…という経緯を経て,研究を進めました.


この研究により,アイドルを以下の6つに大別できると考察しました.


①アイドルという概念の再構成と大衆化 ②バラエティー番組への出演に伴う アイドルのキャラクター化 ③歌番組の退化に伴う ライブアイドルの誕生 ④インターネットの普及に伴う ネットアイドルの誕生 ⑤SNSの活性に伴う アイドルによる自己表現の多様化 ⑥AR,VR,AI技術の進化に伴う バーチャルアイドルの定着

です.

この6つに加え,先行研究や今後の展望を述べました.

https://drive.google.com/file/d/1dcFOwxB7qyoVum3DTpWd2C3pKo5uOcd7/view?usp=sharing

こちらから閲覧できますので,ぜひご覧ください.

(個人的には,ネットワーク研の一員として ネットワークについても
 研究できたことが嬉しいです…)


■後輩に向けて
B3の時に「私は切羽詰まった状態で提出日を迎えない!」と誓い
周りより早く卒業研究を始めても,
どんどん深堀りしたくなり 止まらなくなります.

私のようにギリギリにならないよう,取捨選択して生きてください.



そして,論文の場合はとにかく早めに文字に起こしてみてください.

テーマが定まらない場合は,とにかく文献を読み漁ったり
思いつきで何かを経験しに足を動かしたりすることが 後に功を成します.

共に頑張りましょう…

研究室のリデザインについてご報告

2018年4月に東京大学に移籍後,変更していなかった研究室の内装・レイアウトを刷新しました。デザインはM2の中原くんによるものです。修士論文の執筆で忙しい中,CADを使った立体的なデザインの検討・業者とのやり取りまで,中心になってこなしてくれました。
2年間放置されていた(!)トロフィーも,入口付近に「ほぼ日のアースボール」とともにディスプレイされています。また,これまた無法地帯だった書棚も,研究室メンバーによって整頓され,わかりやすく配置しなおされました。

雑然としていたLiquid Galaxyルームも,再レイアウトされ,使いやすくなりました。現在,Liquid Galaxyは修理手配中ですが,復旧後,特任助教の高田先生らが共同研究を進める場所として,活用されていくことと思います。

作業に取り組んでくれた院生さんたち,什器類の手配・納品・工事をご担当いただいた幸和商事のみなさま,本当にありがとうございました。

TOKYO 2021「慰霊のエンジニアリング」展への出展

9/14〜10/20の会期で開催されるTOKYO 2021「慰霊のエンジニアリング」展に,岩手日報社と共同制作した「忘れない:震災犠牲者の行動記録」を出展しています。


今回の展示では,EndPoint社が開発した大型ディスプレイ「Liquid Galaxy」で上映しています。ご遺族から氏名の公開を承諾していただいたかたについては,氏名をローマ字で表記しています。


会場は東京駅至近の,戸田建設本社ビルです。ぜひ,いらしてください。
TOKYO 2021「慰霊のエンジニアリング」展ウェブサイト https://www.tokyo2021.jp/bizyututen/入場 ウェブサイトより事前登録。※展覧会は2会場で開催されており、うち1つは事前登録なくご覧頂けます。会期 9月14日(土)〜10月20日(日)/火曜定休キュレーション 黒瀬陽平会場構成 西澤徹夫参加作家 会田誠、飴屋法水、磯村暖、宇川直宏、梅沢和木、梅田裕、大山顕、カオス*ラウンジ、カタルシスの岸辺、キュンチョメ、今野勉、たかくらかずき、高山明、竹内公太、寺山修司、中島晴矢、中谷芙二子、名もなき実昌、八谷和彦、檜皮一彦、藤元明、三上晴子、宮下サトシ、山内祥太、弓指寛治、渡邉英徳、Houxu Que、MES、SIDE CORE