- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2023-10-10T14:13:46+09:00","default:art-gs","art-gs")
#author("2023-10-11T00:49:24+09:00","default:art-gs","art-gs")
*[[諸琳]]｜論文構成
~
~
***CONTENTS
#contents2_1
~
~
**第１章 序論
*** 1.1.研究の目的
本研究では、Web画面における動的要素がUXにもたらす効果を体系的に分類・整理するとともに、より良いUXのための活用方法を提案することを目的とする。
~
本研究の具体的な目標は以下の通りである：
-異なるユーザーグループの動的デザインの認知の違いと心理的反応を探る。ユーザーによって動的デザインに対する認識や嗜好に差があるため、デザインプロセスにおいて異なるユーザーのニーズや嗜好を考慮した上で、個性的なデザインを実現することは必要である。
-動的デザインがユーザーの行動やインタラクションに与える影響を提高する。適切なアニメーション効果とトランジション方法を通じて、ユーザーの行動変容と参加を促進し、ユーザーの満足度と忠誠心を向上させることができる。
~
以上の研究を通じて、webデザイナー、ユーザー、webサイト運営者に関連するデザイン原則と最適化戦略を提供し、ウェブインタフェースにおける動的デザインの応用と発展を促進し、ユーザー体験の継続的に改善して革新しようとしている。
~
~
***1.2. 研究の背景
UXとは、User Experienceの略称であり、ユーザーが製品を使用する際に生じる主観的な感情や満足感などの「体験」全体を指している。インターネット技術の急成長に伴い、動的要素もますます普及して多様化している。動的要素は、製品を使いやすくて分かりやすくさせ、ユーザーを中心とする効果的な方法であり、ユーザーの使用に積極的な影響を与える。人間は視覚で八割の情報を得るため、Web画面における動的要素はUXに大きな影響をもたらすと思われる。
Webにおける動的要素は常にGIF、CSS、SVG、WebGLやビデオなどの形式で保存されることが多い。Webにおける動的要素はブラウザ誕生の初期段階から組み込まれていた。文字上で状態が変わるカーソル、進捗状況を示すプログレスバー、エラーメッセージを提示するポップアップウインドウなどがその例である。他にも、画面に埋め込まれた動画や、背景動画なども動的な要素と言える。動的要素はシンプルでありながら実用的なユーザ体験を実現している。
しかし動的要素の使用は、十分な事前分析がなければ逆効果になることもある。例えば、大量のトラフィックリソースを消費する動画や、読み込みに時間のかかるスクリプトなどは、反応を鈍らせる点で、UXによくない影響をもたらす場合もある。
本研究は、webサイトにおける動的デザインのユーザー体験に与える影響を深く探り、研究背景と目的を分析することである。webサイトにおける動的デザインの重要性は非常に高く、それによってwebサイトが面白くなり、そして、ユーザーに魅力的な体験を提供することができる。
~
~
***1.3. 研究意義
動的要素は、Web上で様々な機能を提供する存在であり、ユーザーの体験を改善し、製品全体への印象を向上させると同時に、情報にアクセスするユーザーの行動をアシストする。
視覚体験における「動き」の効果は人類に普遍的なものであり、本研究の成果は、デバイス環境の変化にも対応し得る、有益な知見となることが期待できる
~
~
***1.3. 論文の構成
**第２章 調査研究
*** 2.1. web動的要素効果の概要
-2.1.1. web動的効果の発展史
-2.1.1. web動的効果の発展史（Fig.2,1）
#image(2-1.png,center,70%)
（Fig.2,1）
動的デザインの発展過程は1994年のJavaScriptの誕生にさかのぼることができ、ブラウザがWebページと簡単にやり取りできるようになった。1995年、PHPに代表されるバックエンドwebサイト技術はwebページを本格的に動的webページ時代に突入させ始めた。動的webページはウェブページの動的効果ではなく、コンテンツの動的展示、豊富なユーザーインタラクションを指す。1996年、当時AdobeはFlash技術を発表し、新しいWebページ動的デザイン方式をもたらした。Flashにより、開発者は豊富なアニメーション、インタラクション、メディア要素を作成し、Webページをより生き生きとした魅力的なものにすることができる。インターネットの急速な発展と技術の進歩に伴い、動的なウェブページが主流になりつつある。2000年代初期には、動的Webページが台頭し始め、JavaScriptなどのスクリプト言語を使用することで動的効果を実現し、ユーザーがコンテンツとリアルタイムでやり取りできるようにし、ユーザー体験を大幅に向上させた。しかし、当時の動的Webページには、ロード速度が遅い、モバイルデバイスへの互換性が低いなどの問題があった。2005年、AJAX（Asynchronous JavaScript and XML）技術の出現に伴い、動的Webページはさらに改善された。AJAXは非同期にデータをロードし、ページを更新することで、ページ全体を更新することなく情報を取得できる機能を実現し、ページの応答速度とユーザー体験を大幅に向上させた。この時点での動的デザインは、単なるアニメーション効果に限定されるものではなく、ユーザーとコンテンツ間のリアルタイムなインタラクションに重点を置いている。
2010年、HTML5規格の正式発表は動的デザインのさらなる発展を推進した。HTML5は豊富なメディアサポートとアニメーション特性を提供し、開発者がWebページ上で直接ビデオ、オーディオ、アニメーションなどの要素を実行することができ、プラグイン（Flashなど）に依存せず、クロスプラットフォーム互換性とパフォーマンスを向上させる。これは、動的デザインが新たな段階に入り、より多くの創造性と相互作用の可能性を提供していることを示している。モバイル機器の普及に伴い、応答式デザインとモバイル優先の理念が流行してきた。動的デザインは応答式レイアウトにおいて重要な役割を果たし、異なる画面サイズとデバイス機能に適応することにより、一貫性と最適化されたユーザー体験を提供する。さまざまなデバイスのニーズに対応するために、開発者はWebページのロード速度とパフォーマンスの最適化により、モバイルデバイスでも動的なデザインによる体験をスムーズに楽しむことができるようになった。
~
~
-2.1.2. ディズニーの12法則
~
~
-2.1.3. 動的効果の定義と特徴
~
~
***2.2. UXについて
-2.2.1. UXの概要
~
~
-2.2.2. ユーザーエクスペリエンス（ux）の元素
~
~
-2.2.3.
~
~
***2.3. 運動の基本スタイルについて
-2.3.1 フェードイン·フェードアウト効果
-2.3.2 ズーム効果
-2.3.3 回転効果
-2.3.4 バウンス効果
-2.3.5 プッシュ効果
-2.3.1. フェードイン·フェードアウト効果
~
-2.3.2. ズーム効果
~
-2.3.3. 回転効果
~
-2.3.4. バウンス効果
~
-2.3.5. プッシュ効果
~
~
***2.4. 交互性を持つ動的効果
-2.4.1. インタタクティブな切り替えと過渡性展示の動的効果
--2.4.1.1 漸進的な出現
--2.4.1.2 スムーズな移行
--2.4.1.3 フォーカス
--2.4.1.4 注目のコレクト
--2.4.1.5 ページ切り替え
--2.4.1.6 スライドスイッチ
--2.4.1.7 フェエードイン フェエードアウト
--2.4.1.8 立体的な切り替え
~
~
-2.4.2. 情報の提示に関する動的効果
--2.4.2.1 広大的な動的効果デザイン
--2.4.2.2 折りたたみの動的効果デザイン
--2.4.2.3 回転的な動的効果デザイン
~
~
-2.4.3. 情報の表示に関する動的効果
--2.4.3.1 データ統計の動的効果
--2.4.3.2 プロセスデモの動的効果
~
~
***2.5. ケーススタディー
-2.5.1. アプリケーション○○の動的効果デザインの分析
-2.5.2. 動的○○webサイトの分析
-2.5.3. webサイト○○の動的効果デザインの分析
~
~
**第３章 実験研究
***3.1. UXにおける現状調査
-3.1.1. 業界専門家へのインタビュー
~
~
-3.1.2. インタビュー調査の結果
~
~
*** 3.2. UXにおける現状の課題（現存する問題
-3.2.1. パフォーマンスの問題
~
~
-3.2.2. コンパチビリティの問題
~
~
***3.3. 動的Webページに対するユーザーのニーズとフィードバック調査
-3.3.1. 調査对象
~
~
-3.3.2. 調査内容
~
~
-3.3.3. 調査结果
~
~
-3.3.4. アンケートの考察分析
~
~
-3.2.5. 結論
~
~
***
**第４章 xx動的webの制作
***4.1. 作品の概要
~
~
***4.2. 制作環境
~
~
***4.3. 作品の評価（実際に使ってもらった感想等
~
~
**第５章 ケーススタディー
***5.1. 全体の総括
~
~
***5.2. 今後の课题
~
~
**参考文献・資料
~
~
