LogoMark.png

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

3D × Playing cards

3D表現、新たなwebの形

site01.png

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


公開サイト
https://playingcards-home.web.app/
ソースコード
https://github.com/gorirakuniro/playingcards


Overview

Introduction / What is This

3D活用してWebサイト

Background and Purpose

最近ゲーム文化になりゲームをする人が多い、それは別に悪くないがゲーム依存症などで1日6時間以上ゲームをして目に悪くなるので、紙媒体で遊べるゲームとした時に一番、認知度の高いトランプが良いのではと思いこの紹介サイト作成するに至った。


調査結果
ゲームで目が悪くなる


なぜ3Dの表現にするのか?
自分の表現の幅を広げたいと思い3Dで見せるような演出をした。そして3Dに見せることにより、より多くの情報を伝えれるのではないかと思い3D起用した。今回はシンボルしか3Dを起用していないのですが、これからもっと技術が上がればより複雑の物もweb上で表現できるのではないかと考えています。


Concept

トランプの面白いのきかっけ作り。コロナで外出できないからこそ家の中で遊べるゲームとした時にトランプの良さを知ってもらいたい。


Output

公開サイト
スマホでスクロールが間に合いませんでした。できるかも不明です。


デザイン
情報

Member

個人開発

Tools

Term

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

Conclusion / Summary

このサイトを通して、3Dによるリッチなデザインかつ多くの情報伝達ができ、そしてトランプという紙媒体の良さを知ってもらうことができたのではないかと思う。



Survey

Present Status

現状調査
最近3Dをweb上で見せるのが流行している。3Dに見せることにより、より多くの情報を伝えれる、他にもVRの普及や本格的な5Gの普及でどんどんインターネットが早くなっている。特にBtoB向けのサイトやキャンペーンサイトが3Dが使われることが多い。


Precedent

NIKE

sssolitaire

ポートフォリオでの事例

TPN

学生の卒展で作成された事例

3D表現の数々


Technique / Technology

Three.js
React




Project Management

Schedule

notion

ToDo







worklog

2021.7.16

safariーフォント違う



2021.7.15

スマホ画面のスクロールは間に合いませんでした
スマホでスクロールできるかは不明です。

問題点
chomeーちゃんと動く
safariー3Dも動かない
firefoxーロゴの表示がおかしい

3Dが動かない理由
バージョンの問題かも‥



2021.7.1

サイトの中身を主に情報を集めて載せた。


Loading画面を挿入
ページのデザイン作成
ページの中身を作成/code
レスポンシブ対応

2021.6.23

現状の段階でのサイト
https://playingcards-home.web.app/
今後のTodo
https://trello.com/b/4F4TAwtk/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6ia#

今後する予定

2021.6.10

試作のデモ
https://youtu.be/1aDUjPyb-q4




2021.6.3

方向性を変更して作り直そうとして
試作を今作成しています。

mouseを持っていったら色を変更するサンプル
https://ics.media/tutorial-three/raycast/




2021.5.29

案として横スクロール型にすることにした
https://total-pr.net/

参考サイト01
参考サイト02

2021.5.26

play.png

3Dモデルのtextureを変更、macbook13インチのみレイアウト対応
それ以外はこれから修正します。特にiPhoneではみないでほしい...。


公開サイト
https://playing-cards-7d2a3.web.app




2021.5.20

Firebaseで公開しました。
公開サイト
https://playing-cards-7d2a3.web.app

Github公開ページ
https://github.com/gorirakuniro/socialdesign-lab1



2021.5.13

fontがうまく反映されていないので調べてみた。

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用
   }





2021.5.2

今回はトランプについて情報をまとめました。
ほぼwikipediaの情報です。
https://www.notion.so/886557ca9b2c431eaf2b66aca4ac46fd




2021.4.27

公開したDEMO


今回はReactとthreeを組み合わせたやり方を探しreact-three-fiberというのがあったため使いました。あとreact-three-fiberのヘルパーであるdreiを使いcanvas上にHTMLを表示した。
課題 - scrollしたら3Dモデルを回転させる。

モデルはsketchfabさんからお借りしたモノです''


大学のサーバーの個人領域にアクセス
①FortClientインストール
②学校のサーバーにアクセス
③Filezillaで接続する(なぜかできなかった)
なので
↓の方法でした
https://storage.ip.kyusan-u.ac.jp/proself/login/login.go



2021.4.22

今回Three.jsにすると処理が重たいのでどうにか解決したいと思い
調べたらwebpackがどうやら使いやすいらしい

webpack

webpackは、JavaScriptなどの複数のモジュールをひとつにまとめるツールです。
使い方
わかりやすい動画



2021.4.21

テスト




2021.4.15

2Dと3Dの両方のデザインを駆使して作成したい

stonestyle




2021.04.13

情報収集

個人ポートフォリオでこのクオリティー

Tools

Three.js





PAGES

GUIDE

添付ファイル: filelogo02.png 24件 [詳細] filelogo01.png 23件 [詳細] filesite01.png 24件 [詳細] fileplay.png 52件 [詳細] filedesign05.jpg 42件 [詳細] filedesign04.jpg 43件 [詳細] filedesign03.jpg 42件 [詳細] filedesign02.jpg 45件 [詳細] filedesign01.jpg 40件 [詳細] filedesign.png 72件 [詳細]
Last-modified: 2021-07-15 (木) 10:39:31