岩井玄貴/情報デザイン研究I

Playing cards

3D×Webで新たなwebの形

デモ画像

Project Director
Keywords：Three.js, React, HTML/CSS

↑

Overview

↑

Introduction / What is This

3D活用してWebサイト

↑

Background and Purpose

なぜ3Dの表現にするのか?
その疑問を思った時に、理由として私は文章ばかりの情報より直感的の
視覚情報の方が伝わりやすいからである。
ただ自分が文章ばかりの本が苦手ということもあるが、絵や図など
でまとめてある情報の方が端的でわかりやすい。
プロのデザイナーなら誰しもが文章情報だけではなく図や絵で多くの情報を語る
ことができる。
特にiPhoneが良い例である。今までガラケーでほぼ文章しかない情報であったが
iPhoneによってほぼアイコンになり伝わりやすいデザインになった。
あと説明書のない電話とも言われとても革命的である。
話を逸れたが3Dの表現方法もその一部である。あたかもその場所に実物あるように感じる。実際にその場所に行かなくてもひとつ画面を通せば見えたりもする。
近年、VR（仮想現実）やAR（拡張現実）によって3Dが身近になりつつある。
その中でWebサイトもそれに応じて3Dサイトが急激に増加しつつある。
3Dで絵や図以外にも多くの情報を伝えることに魅力を持ったから、3D表現をすることに決めた。

↑

Concept

2Dグラフィックと3Dを上手く活用したデザイン

↑

Output

DEMO
デザイン
 情報

↑

Member

個人開発

↑

Tools

Three.js
Blender
React

↑

Term

プロジェクトの期間｜2021.4.15 - 2021.6.17

↑

Conclusion / Summary

↑

Survey

↑

Present Status

3Dを使いどのように問題を定義するか
webpackとは

↑

Precedent

Technique / Technology

Three.js
React

↑

Project Management

↑

Schedule

notion

↑

ToDo

Three.js
webpackについて勉強

worklog

↑

2021.5.6

デザイン作成でトランプというテーマなのでOldStyleのフォントを起用した
Font ー NewYork

デザイン

↑

2021.5.3

今回は素材をスクロールしたら回転するようにした。
公開したDEMO
※学校限定

参考にしたもの
https://codesandbox.io/s/adoring-feather-nk16u?from-embed

jsでレスポンシブ対応
例文

   let box = 1
   if(window.matchMedia('(max-width: 400px)').matches){
     box = 2　// iPhone用
   }else if (window.matchMedia('(max-width: 767px)').matches) {
     box = 3　// iPad用
   } else if (window.matchMedia('(min-width:768px)').matches) {
     box = 4   // PC用
   }

↑