-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b73fd8a
commit 1a065ea
Showing
16 changed files
with
1,292 additions
and
239 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| import type { Work } from '@/types/Work'; | ||
| interface Props { | ||
| work?: Work; | ||
| } | ||
| const { work } = Astro.props; | ||
| --- | ||
|
|
||
| <section | ||
| class="ts-horizontal-scroll-item md:mr-[41rem] | ||
| flex flex-col justify-end items-start md:pb-[7.5rem] | ||
| mt-28 md:mt-0 px-5 md:px-0" | ||
| > | ||
| <h1 class="md:w-1/2 flex flex-col gap-4"> | ||
| <span class="text-[2rem] md:text-5xl font-semibold">{work?.title}</span> | ||
| { | ||
| work?.categories.map(category => ( | ||
| <span class="font-serif-en md:text-lg">{category}</span> | ||
| )) | ||
| } | ||
| </h1> | ||
|
|
||
| <div | ||
| class="md:w-1/2 mt-16 md:mt-24 flex flex-col md:flex-row gap-4 md:gap-20" | ||
| > | ||
| <p class="flex flex-col gap-2"> | ||
| <span class="text-gray">ROLE</span> | ||
| <span> | ||
| { | ||
| work?.tags.map((tag, i) => ( | ||
| <span class="-ml-1"> | ||
| {i !== 0 && i < work.tags.length && <span>, </span>} | ||
| {tag} | ||
| </span> | ||
| )) | ||
| } | ||
| </span> | ||
| </p> | ||
|
|
||
| <p class="flex flex-col gap-2"> | ||
| <span class="text-gray">YEAR</span> | ||
| <span>{work?.year}</span> | ||
| </p> | ||
| </div> | ||
| </section> | ||
|
|
||
| <picture class="ts-horizontal-scroll-item mt-9 md:mt-0 | ||
| block"> | ||
| <source | ||
| srcset={work?.mv} | ||
| media="(min-width: 768px)" | ||
| class="ts-image-white-in md:h-full" | ||
| /> | ||
| <img src={work?.mvSp} alt="" class="ts-image-white-in md:h-full" /> | ||
| </picture> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| --- | ||
| import type { Work } from '@/types/Work'; | ||
| interface Props { | ||
| work: Work; | ||
| } | ||
| const { work } = Astro.props; | ||
| --- | ||
|
|
||
| <section | ||
| class="ts-horizontal-scroll-item flex justify-end items-end md:pl-[34rem] md:pr-20 box-content" | ||
| > | ||
| <div class="pt-24 md:py-[8.125rem] px-5 md:px-0"> | ||
| <p class="md:text-lg font-serif-en">(NEXT PROJECT)</p> | ||
| <h2 class="text-[2rem] md:text-[2.625rem] font-medium"> | ||
| {work.title} | ||
| </h2> | ||
| </div> | ||
| </section> | ||
|
|
||
| <picture class="ts-horizontal-scroll-item block mt-9 md:mt-0"> | ||
| <a | ||
| href={`/works/${work.slug}/`} | ||
| aria-label={`${work.title}を見る`} | ||
| class="ts-crossing-link block h-full relative" | ||
| > | ||
| <img | ||
| src={work.image} | ||
| aria-label={`${work.title}を見る`} | ||
| class="ts-image-white-in md:h-full" | ||
| /> | ||
|
|
||
| <span | ||
| class="bg-mine-shaft flex md:hidden justify-center items-center absolute bottom-[20px] right-5 rounded-full w-[40px] h-[40px]" | ||
| > | ||
| <svg | ||
| width="14" | ||
| height="10" | ||
| viewBox="0 0 14 10" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M6.91412 0.679339C6.91412 0.679339 7.99884 2.63402 8.2563 4.37282L0.731445 4.7742V5.34764L8.24902 5.74902C7.96468 7.46346 6.78603 9.32056 6.78603 9.32056C6.78603 9.32056 10.3661 5.54406 13.6435 5.05602C10.3758 4.56308 6.91412 0.679199 6.91412 0.679199V0.679339Z" | ||
| class="fill-taupe-gray"></path> | ||
| </svg> | ||
| </span> | ||
| </a> | ||
| </picture> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import works from '@/data/works'; | ||
|
|
||
| const getWork = (slug: string) => { | ||
| const work = works.find(work => work.slug === slug); | ||
| // slugが一致したworkの次のworkを取得 | ||
| const nextWork = | ||
| works | ||
| .map((work, i) => { | ||
| if (work.slug === slug) { | ||
| return works[i + 1]; | ||
| } | ||
| }) | ||
| .filter(Boolean)[0] || works[0]; | ||
|
|
||
| return { work, nextWork }; | ||
| }; | ||
|
|
||
| export default getWork; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| --- | ||
| import Layout from '@/layouts/Layout.astro'; | ||
| import DetailSection from '@/components/DetailSection.astro'; | ||
| import DescriptionList from '@/components/DescriptionList.astro'; | ||
| import DetailImage from '@/components/DetailImage.astro'; | ||
| import Scroll from '@/components/Scroll.astro'; | ||
| import Stalker from '@/components/Stalker'; | ||
| import updatePath from '@/libs/updatePath'; | ||
| import getWork from '@/libs/getWork'; | ||
| import NextWork from '@/components/NextWork.astro'; | ||
| import DetailInfo from '@/components/DetailInfo.astro'; | ||
| const slug = Astro.url.pathname.replace('/works/', '').replace('/', ''); | ||
| const { work, nextWork } = getWork(slug); | ||
| --- | ||
|
|
||
| <Layout title={work?.title} isContainer={false}> | ||
| <Scroll /> | ||
|
|
||
| <section | ||
| id="horizontal-scroll" | ||
| class="md:h-screen pt-[var(--header-height)] md:pt-0 w-full container md:px-20" | ||
| > | ||
| <div | ||
| id="horizontal-scroll-container" | ||
| class="md:flex md:items-center md:flex-nowrap md:whitespace-nowrap w-full md:w-max md:h-full md:[&>*]:h-full" | ||
| > | ||
| <DetailInfo work={work} /> | ||
|
|
||
| <DetailSection title="(Overview)"> | ||
| <div class="md:text-lg flex flex-col gap-4"> | ||
| <p> | ||
| 「見えないもの、見えにくいもの」として音楽を聴き視覚化するという課題に対して、物理的な見えなさと知覚的な見えなさに着目し映画監督クリストファー・ノーランの時間逆行や交差による非直線的な時間軸操作の手法をWebで表現した実験的なサイト作品です。 | ||
| </p> | ||
| <p> | ||
| こちらはミームデザイン学校（社会人向けデザイン学校）で、デザイナーの大原大次郎さんが行った授業課題で作成しました。 | ||
| </p> | ||
|
|
||
| <p class="flex gap-4 md:gap-12 font-serif-en mt-12"> | ||
| <span class="text-gray">URL</span> | ||
| <a | ||
| class="underline" | ||
| href="https://taikisato.com/5days/" | ||
| target="_blank" | ||
| rel="noopener noreferrer">https://taikisato.com/5days/</a | ||
| > | ||
| </p> | ||
| </div> | ||
| </DetailSection> | ||
|
|
||
| <picture class="ts-horizontal-scroll-item"> | ||
| <img | ||
| src={updatePath(`/detail/${work?.slug}/1.jpg`)} | ||
| alt="" | ||
| class="ts-image-white-in md:h-full" | ||
| /> | ||
| </picture> | ||
|
|
||
| <DetailSection title="(Description)" contentWidth="wide"> | ||
| <DescriptionList> | ||
| <span slot="title">課題概要</span> | ||
| <span slot="description" | ||
| >大原大次郎さんが行っているTypogRAPyという音楽グループの「読む」という複数人が朗読を行っているような課題曲を聞き、視覚化するというのが今回の課題でした。<br | ||
| /> | ||
| この曲は、ただ朗読を行うだけではなく言葉を変形させたり重ねたりするような言葉の響きを大切にしており、その分全体としての言葉の意味は見えづらいなと感じました。<br | ||
| /> | ||
| ここから、視覚化といっても”物理的に見えない”という意味と、”知らない、分からない、理解できないから見えない”という知覚的な意味があると考え、視覚化するにあたって目に見えるものをアウトプットとすることで物理的な視覚化を行う一方、課題曲のような難解なものにすることであえて知覚的な視覚化の方は行わないというものを作成しようと思いました。<br | ||
| /> | ||
| このような難解ゆえの見えづらさは、映画監督であるクリストファー・ノーランが行う時間逆行や交差による非直線的な時間軸操作の手法に近いと感じ、この手法を引用して非直線的な時間軸をWeb媒体で表現しました。<br | ||
| /> | ||
| コンテンツとして自分のとある五日間の話を入れており、これによって逆スクロールで進むインターネット上の時間軸と、五日間を順不同に描いた現実の時間軸の、二つの非直線的に進む時間軸を表現しました。<br | ||
| /> | ||
| 加えてリアルの自分の五日間と想像での五日間を織り交ぜることで、課題曲の複数人による重なりの箇所を、現実と想像の二つの自分の視点の重なりで表現した。</span | ||
| > | ||
| </DescriptionList> | ||
| <DescriptionList> | ||
| <span slot="title">制作範囲</span> | ||
| <span slot="description"> Webデザイン/コーディング </span> | ||
| </DescriptionList> | ||
| </DetailSection> | ||
|
|
||
| <div class="ts-horizontal-scroll-item"> | ||
| <div class="md:py-[7.5rem] h-full px-5 md:px-0"> | ||
| <DetailImage> | ||
| <li> | ||
| <picture> | ||
| <img | ||
| src={updatePath(`/detail/${work?.slug}/2.jpg`)} | ||
| alt="" | ||
| class="ts-image-white-in" | ||
| /> | ||
| </picture> | ||
| </li> | ||
| <li> | ||
| <picture> | ||
| <img | ||
| src={updatePath(`/detail/${work?.slug}/3.jpg`)} | ||
| alt="" | ||
| class="ts-image-white-in" | ||
| /> | ||
| </picture> | ||
| </li> | ||
| <li> | ||
| <video muted loop autoplay class="ts-image-white-in"> | ||
| <source | ||
| src={updatePath(`/detail/${work?.slug}/movie.mp4`)} | ||
| type="video/mp4" | ||
| /> | ||
| </video> | ||
| </li> | ||
| </DetailImage> | ||
| </div> | ||
| </div> | ||
|
|
||
| <NextWork work={nextWork} /> | ||
| </div> | ||
| </section> | ||
|
|
||
| <Stalker client:only="react" /> | ||
| </Layout> | ||
|
|
||
| <script> | ||
| import horizontalScroll from '@/libs/horizontalScroll'; | ||
| import imageWhiteIn from '@/libs/imageWhiteIn'; | ||
| horizontalScroll(); | ||
| imageWhiteIn(); | ||
| </script> |
Oops, something went wrong.