-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (212 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head lang="ja" prefix="og: http://ogp.me/ns#">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NNTN7K82T8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NNTN7K82T8');
</script>
<!-- Google Tag Manager -->
<title>Satsuki Wada Works</title>
<meta property="og:url" content="http://wsatsuki.com/" />
<meta property="og:title" content="Satsuki Wada Works">
<meta property="og:type" content="website">
<meta property="og:description" content="Designer / Consultant / Illustrator etc...">
<meta property="og:image" content="assets/ogp.jpg">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" href="assets/Icon.png">
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T96WLVWC"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="fixed-top shadow-sm">
<nav class="container d-flex justify-content-end align-items-center py-2">
<div class="social-icons">
<a href="https://x.com/say____u" target="_blank" class="me-2">
<img src="assets/sns_icon/x.png" alt="Twitter" width="24">
</a>
<a href="https://www.instagram.com/us_yu3/" target="_blank" class="me-2">
<img src="assets/sns_icon/instagram.png" alt="Instagram" width="24">
</a>
<a href="mailto:[email protected]" target="_blank">
<img src="assets/sns_icon/mail.png" alt="mail" width="24">
</a>
</div>
</nav>
</header>
<div class="container mt-5">
<div class="col-lg-10 offset-lg-1">
<div>
<h1 name="top">Satsuki Wada</h1><!-- 名前 -->
<div class="row pb-5 pt-2">
<p>Designer / Scenario writer / Consultant / Illustrator etc...</p>
</div><!-- 自己紹介 -->
</div>
<div class="row pt-5 pb-5">
<div class="sort-btn mb-4">
<div class="d-flex flex-wrap mb-1 px-1 f-14">
<div class="flex-grow-0"><a class="btn btn--black" href="index.html"> #All</a></div>
<div class="flex-grow-0"><a class="btn btn--white" href="product.html"> #Product</a></div>
<div class="flex-grow-0"><a class="btn btn--white" href="zine.html"> #Zine</a></div>
<div class="flex-grow-0"><a class="btn btn--white" href="movie.html"> #Movie & Scenario</a></div>
<div class="flex-grow-0"><a class="btn btn--white" href="illustration.html"> #Illustration</a></div>
</div>
</div>
<a name="works">Design</a>
<div class="row pt-2 pb-2"></div><!-- 小見出し -->
<div class="col-lg-4">
<a href="gei_dash.html" class="text-dark text-decoration-none">
<img src="assets/gei_dash/gei_thum.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">藝’（ゲイダッシュ）プロジェクト</h5>
<p style="font-size: 12px">日常に潜む、「藝術」とは言わない謙虚さを持った物や空間を、「藝'(ゲイダッシュ)」と名付けて集めるプロジェクト。</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="comp.html" class="text-dark text-decoration-none">
<img src="assets/comp/comp_thum.png" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">劣等感のすゝめ</h5>
<p style="font-size: 12px">劣等感の魅力、能力主義社会が生み出す歪みについて語った文章群。</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="utsuwa.html" class="text-dark text-decoration-none">
<img src="assets/utsuwa/utsuwa_thum.png" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">器 utsuwa</h5>
<p style="font-size: 12px">器のコレクション・紹介</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="neoconnection.html" class="text-dark text-decoration-none">
<img src="assets/neo/neoconnection-top.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">NEO CONNECTION</h5>
<p style="font-size: 12px">誰もが自分らしい「繋がり方」を選択できる未来のためのコンセプト・デザイン</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="owns.html" class="text-dark text-decoration-none">
<img src="assets/owns/owns-top.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">OWNS</h5>
<p style="font-size: 12px">大量生産/大量消費に対するアンチテーゼ。モノを所有し続けるためのソリューション</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="ooze.html" class="text-dark text-decoration-none">
<img src="assets/ooze/ooze-top.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">ooze</h5>
<p style="font-size: 12px">敢えて解像度を下げて他人を感じることの心地よさを追求した、気配で繋がるエンターテイメント</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="okan.html" class="text-dark text-decoration-none">
<img src="assets/okan/okan-main.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">Okan</h5>
<p style="font-size: 12px">めんどくさいコミュニケーションを楽しめる、“おかん”のように世話を焼いてくるちょっと鬱陶しいロボットの提案</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="talkn.html" class="text-dark text-decoration-none">
<img src="assets/chair/chair-top.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">Talkn</h5>
<p style="font-size: 12px">"しるし"の付いた小学校用椅子</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="petoile.html" class="text-dark text-decoration-none">
<img src="assets/pet/petoile-top.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">petoile</h5>
<p style="font-size: 12px">星を捕まえ、飼育できるプロダクト</p>
</div>
</a>
</div>
<div class="col-lg-4">
<a href="dandan.html" class="text-dark text-decoration-none">
<img src="assets/dandan/dandan-top.jpg" class="img-fluid" alt="">
<div class="mt-1">
<h5 class="mb-0">だんだん </h5>
<p style="font-size: 12px">在宅介護のためのIoTミラー</p>
</div>
</a>
</div>
</div>
<div class="row pt-5 pb-5">
<p>Scenario</p>
<details>
<summary>2019年 近江演劇祭「はじまりの夜」 -脚本</summary>
<p>卒業式の夜。ほとんどの人が帰宅する中、ある高校の女子寮では3人の生徒が残っていた。思い出話に花を咲かせる彼女たちは、これからの未来に想いを馳せながら、一つ一つ荷物を纏めていく。この夜はさよならと、そして何かがはじまる夜になる。</p>
<p>誰もが華々しい思い出を持って、未来に期待を持って卒業するわけじゃない。キラキラした友人への劣等感と、素直になれない自分が許せないという気持ちと、愛情を込めた脚本。</p>
</details>
<details>
<summary>2015年/2016年 「探しものはなんですか」/「探しものはなんですか リフレッシュ！」 -脚本・演出・出演</summary>
<p>新しくファミレスのバイトを始めた主人公、山川。そのファミレスは役者や歌手、芸人など様々な分野の「卵」が働く場だった。輝かしい夢に向かって努力している人々と「何もない自分」との対照に苦しむ山川だったが…。</p>
<p>夢や希望がある人間が素晴らしいのか？何も見つけられなくてもいいじゃないか。そんな気持ちで書いた脚本。2016年版はキャラクターの設定を大きく変えリメイク。</p>
</details>
</div>
<div class="row pt-5 pb-5">
<p>Illustration / Visual design</p>
<div class="col-lg-4">
<a href="assets/illustration/gyoza.jpg" data-lightbox="group"><img src="assets/illustration/gyoza-thum.jpg" alt="" width="300"></a>
</div>
<div class="col-lg-4">
<a href="assets/illustration/soda.jpg" data-lightbox="group"><img src="assets/illustration/soda-thum.jpg" alt="" width="300"></a>
</div>
<div class="col-lg-4">
<a href="assets/illustration/dot.jpg" data-lightbox="group"><img src="assets/illustration/dot-thum.jpg" alt="" width="300"></a>
</div>
<p> </p>
<div class="col-lg-4">
<a href="assets/illustration/beer.jpg" data-lightbox="group"><img src="assets/illustration/beer-thum.jpg" alt="" width="300"></a>
</div>
<div class="col-lg-4">
<a href="assets/illustration/sushi.jpg" data-lightbox="group"><img src="assets/illustration/sushi-thum.jpg" alt="" width="300"></a>
</div>
<div class="col-lg-4">
<a href="assets/illustration/coffee.jpg" data-lightbox="group"><img src="assets/illustration/coffee-thum.jpg" alt="" width="300"></a>
</div>
</div>
<div class="row pt-5 pb-5"><!-- contact -->
<div class="row pb-2">
<a>Contact</a>
</div>
<div class="col-lg-8">
<img src="assets/face.jpg" width="90px">
<div>
<a>和田 さつき / Satsuki Wada</a><br>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>