#author("2024-05-10T12:10:54+09:00","default:art-gs","art-gs") #author("2024-05-10T12:11:19+09:00","default:art-gs","art-gs") *Webサイトにおけるインタラクティブ表現の可能性の追求 ビルと自然物の対比 #image(DSC06905.jpg) -[[山田洸太]] ~ ~ **研究の背景と目的 Webサイト制作においては、アクセシビリティを考慮することが重要であり、その中で独自性を出すことは難しい課題であった。しかし、近年ではモーションデザインやパララックスなどの視覚的な要素を活用することで独自性を打ち出したWebサイトが増加している。これらの要素は、重要なコンテンツを強調する効果やストーリーテリング効果を生み出すなど、視覚的な魅力によってユーザーの関心を引きつけ、サイト滞在時間や利用率を伸ばす効果が期待できる。 学部での卒業研究では、「人工物であるビルと自然物である空」、「その場に在り続けるビルと常に変化をし続ける空」という二つの視点での対比をテーマとして、ビルの窓ガラスに映る景色をタイムラプスや写真で撮影しWebサイトでの発信を行なってきた。大学院における研究でも、Webサイトのコンテンツとしては「ビルと自然物の対比」を題材とした写真と映像を素材として、インタラクティブな要素を活用し、Webサイトの新たな可能性を追求することを本研究の目的とする。 ~ ~ ~ **研究計画 まず、インタラクティブなWebサイトを中心に実態調査を行い、問題の抽出をする。この調査結果を基に、卒業研究で制作したWebサイトとの比較分析を行う。次に本研究において適切なインタラクティブ要素を導入したWebサイトを制作し、試用を実施する。さらにユーザー調査を通じてフィードバックを収集し、それを基にブラッシュアップを行う。最終的にWebサイトを一般に公開し、ユーザーの閲覧状況を分析して最終評価を行う。 ~ -[[山田洸太/Schedule]] ~ ~ **参考 -Mutedscapes（卒業研究） --[[研究詳細>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=%E5%B1%B1%E7%94%B0%E6%B4%B8%E5%A4%AA%2F%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6&word=mutedscapes]] --[[Webサイト>https://adamay-design.github.io/mutedscapes/]] --[[YouTube>https://www.youtube.com/@mutedscapes]] -[[窓研究所>https://madoken.jp/]] ~ ~ **最後に 本研究では、インタラクティブなWebサイトの新たな可能性を探求し、視覚的な要素を活用することで、ユーザーの関心を引きつける効果が期待される。先行研究から得られた知見を基に、より洗練されたインタラクティブ要素を導入し、実際のユーザーからのフィードバックを通じてサイトの再構築を行う。これにより、Webサイトのユーザーエクスペリエンスを向上させ、コンテンツとしての完成度を高めることを目指す。 ~ ~ ~ **2024.05.03 -窓について調査。 --歴史、素材、種類等 --窓研究所のWebサイトを参考にする --[[OpenSquareJP｜正方形>https://design.kyusan-u.ac.jp/OpenSquareJP/?%E6%AD%A3%E6%96%B9%E5%BD%A2]] -窓について調査 -歴史、素材、種類等 -窓研究所のWebサイトを参考にする -[[OpenSquareJP｜正方形>https://design.kyusan-u.ac.jp/OpenSquareJP/?%E6%AD%A3%E6%96%B9%E5%BD%A2]] ~ ~ **2024.05.03 ***アイデア -コンテンツ ''キーワード：ビルの窓を額縁ように表現する'' --ビルの幾何学的なデザインをループさせた映像素材を合成する。*1 ---左右、上下、斜めなどさまざまな方向に流す。 #youtube(zTh16QdWECo) --日常の風景を撮影した映像を合成する。*2 ---案1. 一つの窓に限定 窓のフレーム部分ごと切り抜き、それ以外の要素を省く。さらに背景を単色にすることで情報量を減らす。窓ガラス越しに撮影した映像を合成し違和感を演出する。窓にズームしていくと次の窓が現れる。（繰り返しでも可） ---案2. 複数の窓で構成 窓のガラス部分のみ切り抜き、そこに15秒から30秒程度のものをランダムで表示させる。映像が映ってない窓もあることでより乱雑さを出す。 -Webサイト ''キーワード：「カテゴライズ」と「カスタマイズ」'' --自分の好きな組み合わせで映像を楽しむことができるWebサイト制作。 ---*1の場合は、ボタンをクリックした際に流れる方向が変わったり、映像を一時停止させたりできる。 ---*2の場合は、水や植物、車などカテゴライズし、そのボタンを押すことで閲覧者が見たいものを選択できる。 ---クリックした窓の映像が切り替わる。（その場合はループ映像にする） ---カラー、モノクロも選択可。 ---__[[レンジスライダー>Google:レンジスライダー]]__で映像の様々な項目の度合いを細かく調整できる。 →例）画素数を下げると時代感の錯覚を起きる。 ---[[p5.js>https://p5js.org/]]で映像を単純化することでイラスト的な表現。 →窓のフレームと相まって絵画のような演出になるのではないか。 →p5.jsではなく、AEで加工・編集する場合は以下の動画を参考にする。 |#youtube(S6BfPm24_dA)|#youtube(2gaQMS7Ven4)| ~ ***コンテンツ形態 -シネマグラフ ~ ***参考 -Nina Nayko --Instagram __[[@nina.nayko>https://www.instagram.com/reel/Cz6kFHpszEG/?hl=ja]]__ --YouTube __[[@ninanayko>https://www.youtube.com/@ninanayko]]__ -Alex Hyner --Instagram __[[@alexhyner>https://www.instagram.com/p/C0ch9HKSxqJ/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==]]__ //-Shota Ashida //--Instagram __[[@shota.mebakuro>https://www.instagram.com/reel/CwSYPCsR9zm/?igsh=MW50NDB0Nmt2bnRhaA%3D%3D]]__ -[[加藤大地/情報デザイン]] --「くもりのインタラクション - デジタルにおけるくもりの表現」 -__[[2005年のデジカメで撮影した最近の渋谷>https://twitter.com/eguri89/status/1756308644369768668]]__（[[@eguri89>https://twitter.com/eguri89]]） --関連記事：https://nlab.itmedia.co.jp/nl/articles/2402/26/news007.html -__[[約15年前のコンデジで撮ったらなんでも平成にみえる>https://twitter.com/inadariann/status/1690894642907398145]]__（[[@inadariann>https://twitter.com/inadariann]]） --関連記事：https://woman.excite.co.jp/article/lifestyle/rid_Grape_1434429/ ~ ~ **2024.04.26 ***メモ -時間を計測 -インタラクティブな要素とそうでない要素の比較 -buttonをひたすら研究するなど ~ ~ **2024.04.19 ***用語 -対称性の破れ もともとこの言葉は、高エネルギー下で物質が粒子と反粒子に分離する際、本来同等であるはずのそれぞれの振る舞いに違いがある（対称的でない）ことを意味する物理学用語。（[[OpenSquareJP>https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=Idea&word=%E5%AF%BE%E7%A7%B0%E6%80%A7%E3%81%AE%E7%A0%B4%E3%82%8C]]） ~ -パリティ対称性の破れ 空間反転した（鏡に映した）ときに物理法則が同じにならないこと、または、その様な状態を言う。（[[Wikipedia>https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%AA%E3%83%86%E3%82%A3%E5%AF%BE%E7%A7%B0%E6%80%A7%E3%81%AE%E7%A0%B4%E3%82%8C]]） ~ -エントロピー｜Entropy 無秩序の度合いを表す量のこと。 ~ -フォン・レストルフ効果｜Von Restorff Effect 似た要素が多く並んでいる中にひとつだけ異なる要素があると、その要素が一番記憶に残りやすい心理現象のこと。（[[ペイジのUIラボ>https://baigie.me/blog-ui/2022/03/29/psychology_for_uidesign/]]） ~ -視覚調整 人間の目の錯覚を考慮したデザインの調整のことである。視覚調整の対象になる人間の錯視とは、目から入った情報に対して脳が無意識に補正をかけることで、実際とは異なる知覚を得ることを言う。（[[広告デザイン業界用語辞典>https://andspace.net/dictionary/jp-sa/%E8%A6%96%E8%A6%9A%E8%AA%BF%E6%95%B4/]]） ~ -タイポグリセミア｜Typoglycemia 文章中のいくつかの単語で最初と最後の文字以外の順番が入れ替わっても正しく読めてしまう現象。（[[Wikipedia>https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%AA%E3%82%BB%E3%83%9F%E3%82%A2]]） ~ -ゲシュタルト崩壊｜Gestaltzerfall 知覚における現象のひとつ。全体性を持ったまとまりのある構造（Gestalt, 形態）から全体性が失われてしまい、個々の構成部分にバラバラに切り離して認識し直されてしまう現象。（[[Wikipedia>https://ja.wikipedia.org/wiki/%E3%82%B2%E3%82%B7%E3%83%A5%E3%82%BF%E3%83%AB%E3%83%88%E5%B4%A9%E5%A3%8A]]） ~ ~ ***キーワード -規則性の中の違和感 -人工物(ビル)と自然物の対比 ***メモ -__[[Google:アジャイル開発]]__ -__[[Google:ウォーターフォール]]__ -__[[Google:フォールトトレランス]]__ -__[[Google:ローディングアニメーション]]__ 待ち時間の離脱を防ぐための工夫。 ~ ~ **2024.04.12 ***作業一覧 -[[山田洸太/Schedule]]の作成・編集 -[[山田洸太/デザイン総合研究]]の編集 ~ ~ **関連ページ -[[山田洸太/デザイン総合研究]] -[[山田洸太/情報デザイン]] -[[山田洸太/Schedule]] -[[山田洸太/Memo]] ~ ~ ~