diff --git a/.vscode/settings.json b/.vscode/settings.json index d6c7ff3..68cae5f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,3 @@ { - "cSpell.words": [ - "astro", - "Sato", - "Taiki" - ] -} \ No newline at end of file + "cSpell.words": ["astro", "Sato", "Taiki"] +} diff --git a/README.md b/README.md index ad8b671..dded07f 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,8 @@ ### Node.jsのバージョンを変更する -バージョン管理ツールインストール後、Node.jsのバージョンを[.node-version](.node-version)指定の`20.9.0`に変更してください。 +バージョン管理ツールインストール後、Node.jsのバージョン +を[.node-version](.node-version)指定の`20.9.0`に変更してください。 ### pnpmをinstallする @@ -49,22 +50,23 @@ pnpm build ## 更新方法 -| 対象箇所 | 更新方法 | -| ---- | ---- | -| ヘッダーリンク ![ヘッダーリンク](/docs/header.png) | [/src/data/headerLinks.ts](/src/data/headerLinks.ts)の内容を変更する | -| メニューリンク ![メニューリンク](/docs/menu.png) | [/src/data/menus.ts](/src/data/menus.ts)の内容を変更する | -| フッターリンク ![フッターリンク](/docs/footer.png) | [/src/data/footerLinks.ts](/src/data/footerLinks.ts)の内容を変更する | -| SNSリンク(メニュー・フッター・私について > PROFILE) ![メニュー > SNSリンク](/docs/sns-menu.png)![フッター > SNSリンク](/docs/sns-footer.png)![私について > PROFILE > SNSリンク](/docs/sns-about.png) | [/src/data/snsLinks.ts](/src/data/snsLinks.ts)の内容を変更する | -| TOP 私について 画像 ![TOP 私について 画像](/docs/top-about.png) | [/src/data/parallaxGalleryItems.ts](/src/data/parallaxGalleryItems.ts)の内容を変更する | -| 私について スライド画像 ![私について スライド画像](/docs/about-slide.png) | [/src/data/slides.ts](/src/data/slides.ts)の内容を変更する | -| 私について CAREER ![私について CAREER](/docs/about-career.png) | [/src/data/timelines.ts](/src/data/timelines.ts)の内容を変更する | -| 制作実績 FILTER ![制作実績 FILTER](/docs/works-filter.png) | [/src/data/filters.ts](/src/data/filters.ts)の内容を変更する | +| 対象箇所 | 更新方法 | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| ヘッダーリンク ![ヘッダーリンク](/docs/header.png) | [/src/data/headerLinks.ts](/src/data/headerLinks.ts)の内容を変更する | +| メニューリンク ![メニューリンク](/docs/menu.png) | [/src/data/menus.ts](/src/data/menus.ts)の内容を変更する | +| フッターリンク ![フッターリンク](/docs/footer.png) | [/src/data/footerLinks.ts](/src/data/footerLinks.ts)の内容を変更する | +| SNSリンク(メニュー・フッター・私について > PROFILE) ![メニュー > SNSリンク](/docs/sns-menu.png)![フッター > SNSリンク](/docs/sns-footer.png)![私について > PROFILE > SNSリンク](/docs/sns-about.png) | [/src/data/snsLinks.ts](/src/data/snsLinks.ts)の内容を変更する | +| TOP 私について 画像 ![TOP 私について 画像](/docs/top-about.png) | [/src/data/parallaxGalleryItems.ts](/src/data/parallaxGalleryItems.ts)の内容を変更する | +| 私について スライド画像 ![私について スライド画像](/docs/about-slide.png) | [/src/data/slides.ts](/src/data/slides.ts)の内容を変更する | +| 私について CAREER ![私について CAREER](/docs/about-career.png) | [/src/data/timelines.ts](/src/data/timelines.ts)の内容を変更する | +| 制作実績 FILTER ![制作実績 FILTER](/docs/works-filter.png) | [/src/data/filters.ts](/src/data/filters.ts)の内容を変更する | ### 実績の更新について #### 実績の追加 -[/src/pages/works配下](/src/pages/works/)に拡張子`astro`でファイルを作成することでページが追加されます。 +[/src/pages/works配下](/src/pages/works/)に拡張子`astro`でファイルを作成すること +でページが追加されます。 #### 一覧での表示設定 @@ -72,21 +74,15 @@ pnpm build ```ts { - title: '医療従事者サイト 1', - href: '/works/detail/', + slug: 'textile-manufacturer-site', + title: '繊維メーカー', year: '2021', - categories: ['Web Development'], - tags: ['Fashion Design'], - image: 'https://placehold.jp/464x560.png', // 制作実績用画像 + categories: ['PRIVATE WORKS'], + tags: ['ART DIRECTION', 'WEB DESIGN'], + image: '/detail/textile-manufacturer-site/sample.jpg', // 制作実績用画像 + mv: '/detail/textile-manufacturer-site/sample.jpg', // 詳細用画像 + mvSp: '/detail/textile-manufacturer-site/sample.jpg', // 詳細用画像(SP) isTop: true, // `true`の場合TOPページに表示 - imageTop: 'https://placehold.jp/1200x480.png', // TOPページ表示用画像 + imageTop: '/detail/textile-manufacturer-site/sample.jpg', // TOPページ表示用画像 }, ``` - -##### 制作実績での出力イメージ - -![制作実績での出力イメージ](/docs/works.png) - -##### TOPページでの出力イメージ - -![TOPページでの出力イメージ](/docs/top-works.png) diff --git a/docs/top-works.png b/docs/top-works.png deleted file mode 100644 index 11e79d1..0000000 Binary files a/docs/top-works.png and /dev/null differ diff --git a/docs/works.png b/docs/works.png deleted file mode 100644 index c8fe678..0000000 Binary files a/docs/works.png and /dev/null differ diff --git a/public/detail/5days/1.jpg b/public/detail/5days/1.jpg new file mode 100644 index 0000000..eabd7bc Binary files /dev/null and b/public/detail/5days/1.jpg differ diff --git a/public/detail/5days/2.jpg b/public/detail/5days/2.jpg new file mode 100644 index 0000000..22af78a Binary files /dev/null and b/public/detail/5days/2.jpg differ diff --git a/public/detail/5days/movie.mp4 b/public/detail/5days/movie.mp4 new file mode 100644 index 0000000..5e97408 Binary files /dev/null and b/public/detail/5days/movie.mp4 differ diff --git a/public/detail/5days/mv-pc.jpg b/public/detail/5days/mv-pc.jpg new file mode 100644 index 0000000..8fb47a4 Binary files /dev/null and b/public/detail/5days/mv-pc.jpg differ diff --git a/public/detail/5days/mv-sp.jpg b/public/detail/5days/mv-sp.jpg new file mode 100644 index 0000000..b611b88 Binary files /dev/null and b/public/detail/5days/mv-sp.jpg differ diff --git a/public/detail/5days/mv-vertical.jpg b/public/detail/5days/mv-vertical.jpg new file mode 100644 index 0000000..a2bbe2e Binary files /dev/null and b/public/detail/5days/mv-vertical.jpg differ diff --git a/public/detail/burst-of-mana/1.jpg b/public/detail/burst-of-mana/1.jpg new file mode 100644 index 0000000..7253cca Binary files /dev/null and b/public/detail/burst-of-mana/1.jpg differ diff --git a/public/detail/burst-of-mana/2.jpg b/public/detail/burst-of-mana/2.jpg new file mode 100644 index 0000000..c1d1fed Binary files /dev/null and b/public/detail/burst-of-mana/2.jpg differ diff --git a/public/detail/burst-of-mana/3.jpg b/public/detail/burst-of-mana/3.jpg new file mode 100644 index 0000000..3cd81bf Binary files /dev/null and b/public/detail/burst-of-mana/3.jpg differ diff --git a/public/detail/burst-of-mana/4.jpg b/public/detail/burst-of-mana/4.jpg new file mode 100644 index 0000000..0b6e709 Binary files /dev/null and b/public/detail/burst-of-mana/4.jpg differ diff --git a/public/detail/burst-of-mana/5.jpg b/public/detail/burst-of-mana/5.jpg new file mode 100644 index 0000000..410c5eb Binary files /dev/null and b/public/detail/burst-of-mana/5.jpg differ diff --git a/public/detail/burst-of-mana/mv-pc.jpg b/public/detail/burst-of-mana/mv-pc.jpg new file mode 100644 index 0000000..3e9f30e Binary files /dev/null and b/public/detail/burst-of-mana/mv-pc.jpg differ diff --git a/public/detail/burst-of-mana/mv-sp.jpg b/public/detail/burst-of-mana/mv-sp.jpg new file mode 100644 index 0000000..92e743e Binary files /dev/null and b/public/detail/burst-of-mana/mv-sp.jpg differ diff --git a/public/detail/burst-of-mana/mv-vertical.jpg b/public/detail/burst-of-mana/mv-vertical.jpg new file mode 100644 index 0000000..3c56454 Binary files /dev/null and b/public/detail/burst-of-mana/mv-vertical.jpg differ diff --git a/public/detail/ceramics/1.jpg b/public/detail/ceramics/1.jpg new file mode 100644 index 0000000..612aa2e Binary files /dev/null and b/public/detail/ceramics/1.jpg differ diff --git a/public/detail/ceramics/2.jpg b/public/detail/ceramics/2.jpg new file mode 100644 index 0000000..0599b03 Binary files /dev/null and b/public/detail/ceramics/2.jpg differ diff --git a/public/detail/ceramics/3.jpg b/public/detail/ceramics/3.jpg new file mode 100644 index 0000000..e841025 Binary files /dev/null and b/public/detail/ceramics/3.jpg differ diff --git a/public/detail/ceramics/4.jpg b/public/detail/ceramics/4.jpg new file mode 100644 index 0000000..06f4ce6 Binary files /dev/null and b/public/detail/ceramics/4.jpg differ diff --git a/public/detail/ceramics/mv-pc.jpg b/public/detail/ceramics/mv-pc.jpg new file mode 100644 index 0000000..59a84eb Binary files /dev/null and b/public/detail/ceramics/mv-pc.jpg differ diff --git a/public/detail/ceramics/mv-sp.jpg b/public/detail/ceramics/mv-sp.jpg new file mode 100644 index 0000000..1ea1894 Binary files /dev/null and b/public/detail/ceramics/mv-sp.jpg differ diff --git a/public/detail/ceramics/mv-vertical.jpg b/public/detail/ceramics/mv-vertical.jpg new file mode 100644 index 0000000..384c6c6 Binary files /dev/null and b/public/detail/ceramics/mv-vertical.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/1.jpg b/public/detail/clinical-diagnostic-reagents-company/1.jpg new file mode 100644 index 0000000..686a95d Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/1.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/2.jpg b/public/detail/clinical-diagnostic-reagents-company/2.jpg new file mode 100644 index 0000000..07cee38 Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/2.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/3.jpg b/public/detail/clinical-diagnostic-reagents-company/3.jpg new file mode 100644 index 0000000..393f94e Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/3.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/4.jpg b/public/detail/clinical-diagnostic-reagents-company/4.jpg new file mode 100644 index 0000000..fba0739 Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/4.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/mv-pc.jpg b/public/detail/clinical-diagnostic-reagents-company/mv-pc.jpg new file mode 100644 index 0000000..30b1286 Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/mv-pc.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/mv-sp.jpg b/public/detail/clinical-diagnostic-reagents-company/mv-sp.jpg new file mode 100644 index 0000000..6ca3ad3 Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/mv-sp.jpg differ diff --git a/public/detail/clinical-diagnostic-reagents-company/mv-vertical.jpg b/public/detail/clinical-diagnostic-reagents-company/mv-vertical.jpg new file mode 100644 index 0000000..7847ac9 Binary files /dev/null and b/public/detail/clinical-diagnostic-reagents-company/mv-vertical.jpg differ diff --git a/public/detail/keio-fashion-creator/1.jpg b/public/detail/keio-fashion-creator/1.jpg new file mode 100644 index 0000000..ef46864 Binary files /dev/null and b/public/detail/keio-fashion-creator/1.jpg differ diff --git a/public/detail/keio-fashion-creator/10.jpg b/public/detail/keio-fashion-creator/10.jpg new file mode 100644 index 0000000..744b029 Binary files /dev/null and b/public/detail/keio-fashion-creator/10.jpg differ diff --git a/public/detail/keio-fashion-creator/11.jpg b/public/detail/keio-fashion-creator/11.jpg new file mode 100644 index 0000000..d377a01 Binary files /dev/null and b/public/detail/keio-fashion-creator/11.jpg differ diff --git a/public/detail/keio-fashion-creator/2.jpg b/public/detail/keio-fashion-creator/2.jpg new file mode 100644 index 0000000..5d8520b Binary files /dev/null and b/public/detail/keio-fashion-creator/2.jpg differ diff --git a/public/detail/keio-fashion-creator/3.jpg b/public/detail/keio-fashion-creator/3.jpg new file mode 100644 index 0000000..fb772dd Binary files /dev/null and b/public/detail/keio-fashion-creator/3.jpg differ diff --git a/public/detail/keio-fashion-creator/4.jpg b/public/detail/keio-fashion-creator/4.jpg new file mode 100644 index 0000000..0cc870c Binary files /dev/null and b/public/detail/keio-fashion-creator/4.jpg differ diff --git a/public/detail/keio-fashion-creator/5.jpg b/public/detail/keio-fashion-creator/5.jpg new file mode 100644 index 0000000..0b29fbd Binary files /dev/null and b/public/detail/keio-fashion-creator/5.jpg differ diff --git a/public/detail/keio-fashion-creator/6.jpg b/public/detail/keio-fashion-creator/6.jpg new file mode 100644 index 0000000..560bb72 Binary files /dev/null and b/public/detail/keio-fashion-creator/6.jpg differ diff --git a/public/detail/keio-fashion-creator/7.jpg b/public/detail/keio-fashion-creator/7.jpg new file mode 100644 index 0000000..653dcdf Binary files /dev/null and b/public/detail/keio-fashion-creator/7.jpg differ diff --git a/public/detail/keio-fashion-creator/8.jpg b/public/detail/keio-fashion-creator/8.jpg new file mode 100644 index 0000000..6a0dad5 Binary files /dev/null and b/public/detail/keio-fashion-creator/8.jpg differ diff --git a/public/detail/keio-fashion-creator/9.jpg b/public/detail/keio-fashion-creator/9.jpg new file mode 100644 index 0000000..d6b9496 Binary files /dev/null and b/public/detail/keio-fashion-creator/9.jpg differ diff --git a/public/detail/keio-fashion-creator/mv-pc.jpg b/public/detail/keio-fashion-creator/mv-pc.jpg new file mode 100644 index 0000000..13c3641 Binary files /dev/null and b/public/detail/keio-fashion-creator/mv-pc.jpg differ diff --git a/public/detail/keio-fashion-creator/mv-sp.jpg b/public/detail/keio-fashion-creator/mv-sp.jpg new file mode 100644 index 0000000..6dcbb35 Binary files /dev/null and b/public/detail/keio-fashion-creator/mv-sp.jpg differ diff --git a/public/detail/keio-fashion-creator/mv-vertical.jpg b/public/detail/keio-fashion-creator/mv-vertical.jpg new file mode 100644 index 0000000..b890cda Binary files /dev/null and b/public/detail/keio-fashion-creator/mv-vertical.jpg differ diff --git a/public/detail/misia-forest/1.jpg b/public/detail/misia-forest/1.jpg new file mode 100644 index 0000000..f5a5e44 Binary files /dev/null and b/public/detail/misia-forest/1.jpg differ diff --git a/public/detail/misia-forest/2.jpg b/public/detail/misia-forest/2.jpg new file mode 100644 index 0000000..9b73264 Binary files /dev/null and b/public/detail/misia-forest/2.jpg differ diff --git a/public/detail/misia-forest/3.jpg b/public/detail/misia-forest/3.jpg new file mode 100644 index 0000000..ad49bc9 Binary files /dev/null and b/public/detail/misia-forest/3.jpg differ diff --git a/public/detail/misia-forest/4.jpg b/public/detail/misia-forest/4.jpg new file mode 100644 index 0000000..48af982 Binary files /dev/null and b/public/detail/misia-forest/4.jpg differ diff --git a/public/detail/misia-forest/5.jpg b/public/detail/misia-forest/5.jpg new file mode 100644 index 0000000..f4d89fa Binary files /dev/null and b/public/detail/misia-forest/5.jpg differ diff --git a/public/detail/misia-forest/movie.mp4 b/public/detail/misia-forest/movie.mp4 new file mode 100644 index 0000000..f13aec6 Binary files /dev/null and b/public/detail/misia-forest/movie.mp4 differ diff --git a/public/detail/misia-forest/mv-pc.jpg b/public/detail/misia-forest/mv-pc.jpg new file mode 100644 index 0000000..9d742dc Binary files /dev/null and b/public/detail/misia-forest/mv-pc.jpg differ diff --git a/public/detail/misia-forest/mv-sp.jpg b/public/detail/misia-forest/mv-sp.jpg new file mode 100644 index 0000000..55a566b Binary files /dev/null and b/public/detail/misia-forest/mv-sp.jpg differ diff --git a/public/detail/misia-forest/mv-vertical.jpg b/public/detail/misia-forest/mv-vertical.jpg new file mode 100644 index 0000000..6169de0 Binary files /dev/null and b/public/detail/misia-forest/mv-vertical.jpg differ diff --git a/public/detail/sato-noodle-factory/1.jpg b/public/detail/sato-noodle-factory/1.jpg new file mode 100644 index 0000000..3ee3c38 Binary files /dev/null and b/public/detail/sato-noodle-factory/1.jpg differ diff --git a/public/detail/sato-noodle-factory/2.jpg b/public/detail/sato-noodle-factory/2.jpg new file mode 100644 index 0000000..7b32e90 Binary files /dev/null and b/public/detail/sato-noodle-factory/2.jpg differ diff --git a/public/detail/sato-noodle-factory/3.jpg b/public/detail/sato-noodle-factory/3.jpg new file mode 100644 index 0000000..4edb189 Binary files /dev/null and b/public/detail/sato-noodle-factory/3.jpg differ diff --git a/public/detail/sato-noodle-factory/4.jpg b/public/detail/sato-noodle-factory/4.jpg new file mode 100644 index 0000000..e5a875f Binary files /dev/null and b/public/detail/sato-noodle-factory/4.jpg differ diff --git a/public/detail/sato-noodle-factory/5.jpg b/public/detail/sato-noodle-factory/5.jpg new file mode 100644 index 0000000..ee4c546 Binary files /dev/null and b/public/detail/sato-noodle-factory/5.jpg differ diff --git a/public/detail/sato-noodle-factory/mv-pc.jpg b/public/detail/sato-noodle-factory/mv-pc.jpg new file mode 100644 index 0000000..86efed1 Binary files /dev/null and b/public/detail/sato-noodle-factory/mv-pc.jpg differ diff --git a/public/detail/sato-noodle-factory/mv-sp.jpg b/public/detail/sato-noodle-factory/mv-sp.jpg new file mode 100644 index 0000000..306fa83 Binary files /dev/null and b/public/detail/sato-noodle-factory/mv-sp.jpg differ diff --git a/public/detail/sato-noodle-factory/mv-vertical.jpg b/public/detail/sato-noodle-factory/mv-vertical.jpg new file mode 100644 index 0000000..0570917 Binary files /dev/null and b/public/detail/sato-noodle-factory/mv-vertical.jpg differ diff --git a/public/detail/textile-manufacturer-site/sample.jpg b/public/detail/textile-manufacturer-site/sample.jpg new file mode 100644 index 0000000..90a155e Binary files /dev/null and b/public/detail/textile-manufacturer-site/sample.jpg differ diff --git a/src/components/DetailImage.astro b/src/components/DetailImage.astro index 5bc6400..9ae8fd9 100644 --- a/src/components/DetailImage.astro +++ b/src/components/DetailImage.astro @@ -1,15 +1,19 @@ --- import cn from '@/libs/cn'; interface Props { - column?: number; + row?: number; + columnSp?: number; } -const { column } = Astro.props; +const { row, columnSp } = Astro.props; const className = cn( - 'md:h-full flex flex-col flex-wrap [&>li]:w-full md:[&>li]:w-auto gap-4 md:gap-10 [&_picture]:block md:[&_picture]:h-full md:[&_img]:h-full md:[&_video]:h-full', + 'md:h-full flex flex-wrap md:[&>li]:w-auto gap-4 md:gap-10 [&_picture]:block md:[&_picture]:h-full md:[&_img]:h-full md:[&_video]:h-full', { - 'md:flex-col': column, - 'md:[&>li]:h-full': !column, - 'md:[&>li]:h-[calc(50%-1.25rem)]': column === 2, + 'md:flex-col': row, + 'md:[&>li]:h-full': !row, + 'md:[&>li]:h-[calc(50%-1.25rem)]': row === 2, + 'flex-col': !columnSp, + '[&>li]:w-full': !columnSp, + '[&>li]:w-[calc(50%-0.5rem)]': columnSp === 2, } ); --- diff --git a/src/components/DetailInfo.astro b/src/components/DetailInfo.astro new file mode 100644 index 0000000..9999c9a --- /dev/null +++ b/src/components/DetailInfo.astro @@ -0,0 +1,55 @@ +--- +import type { Work } from '@/types/Work'; +interface Props { + work?: Work; +} +const { work } = Astro.props; +--- + +
+

+ {work?.title} + { + work?.categories.map(category => ( + {category} + )) + } +

+ +
+

+ ROLE + + { + work?.tags.map((tag, i) => ( + + {i !== 0 && i < work.tags.length && } + {tag} + + )) + } + +

+ +

+ YEAR + {work?.year} +

+
+
+ + + + + diff --git a/src/components/NextWork.astro b/src/components/NextWork.astro new file mode 100644 index 0000000..04da74f --- /dev/null +++ b/src/components/NextWork.astro @@ -0,0 +1,49 @@ +--- +import type { Work } from '@/types/Work'; + +interface Props { + work: Work; +} +const { work } = Astro.props; +--- + +
+
+

(NEXT PROJECT)

+

+ {work.title} +

+
+
+ + + + + + + + + + + + diff --git a/src/components/WorksGallery/Item.astro b/src/components/WorksGallery/Item.astro index cc08751..0079cd1 100644 --- a/src/components/WorksGallery/Item.astro +++ b/src/components/WorksGallery/Item.astro @@ -11,7 +11,7 @@ const { item, number } = Astro.props; class="ts-image-link image-link [&:not(:last-child)>a]:pb-9 md:[&:not(:last-child)>a]:pb-0 md:[&:not(:first-child)>a]:pt-14 md:contents-right" >
diff --git a/src/components/WorksSlide/index.tsx b/src/components/WorksSlide/index.tsx index 6271000..7bc5de1 100644 --- a/src/components/WorksSlide/index.tsx +++ b/src/components/WorksSlide/index.tsx @@ -11,7 +11,7 @@ type Props = { }; const WorksSlide = ({ title, titleEn, items }: Props) => { - const [selectedOption, setSelectedOption] = useState('All'); + const [selectedOption, setSelectedOption] = useState('ALL'); const [open, setOpen] = useState(false); const wrapper = useRef(null); const container = useRef(null); @@ -39,7 +39,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => { {items.map((item, i) => { return (
  • @@ -69,7 +69,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
      {item.categories.map((category, i) => { return ( -
    • +
    • {category}
    • ); @@ -84,7 +84,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
        {item.tags.map((tag, i) => { - return
      • {tag}
      • ; + return
      • {tag}
      • ; })}
    diff --git a/src/data/filters.ts b/src/data/filters.ts index 1b867fc..3aa4845 100644 --- a/src/data/filters.ts +++ b/src/data/filters.ts @@ -1,10 +1,11 @@ const filters = [ - 'All', - 'Art Direction', - 'Web Design', - 'Graphic Design', - 'Logo Design', - 'Fashion Design', + 'ALL', + 'ART DIRECTION', + 'WEB DESIGN', + 'GRAPHIC DESIGN', + 'LOGO DESIGN', + 'FASHION DESIGN', + 'CODING', ]; export default filters; diff --git a/src/data/works.ts b/src/data/works.ts index 2d032ac..72d13fb 100644 --- a/src/data/works.ts +++ b/src/data/works.ts @@ -2,126 +2,92 @@ import type { Work } from '@/types/Work'; const works: Work[] = [ { - title: '医療従事者サイト 1', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: ['Fashion Design'], - image: 'https://placehold.jp/464x560.png', - isTop: true, - imageTop: 'https://placehold.jp/1200x480.png', - }, - { - title: '繊維メーカーサイト', - href: '/works/textile-manufacturer-site/', + slug: 'textile-manufacturer-site', + title: '繊維メーカー', year: '2024', - categories: ['Private Works'], - tags: ['Art Direction', 'Web Design'], - image: 'https://placehold.jp/464x560.png', + categories: ['PRIVATE WORKS'], + tags: ['ART DIRECTION', 'WEB DESIGN'], + image: '/detail/textile-manufacturer-site/sample.jpg', + mv: '/detail/textile-manufacturer-site/sample.jpg', + mvSp: '/detail/textile-manufacturer-site/sample.jpg', isTop: true, - imageTop: 'https://placehold.jp/ff0000/ffffff/1200x480.png', + imageTop: '/detail/textile-manufacturer-site/sample.jpg', }, { - title: '医療従事者サイト 2', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: ['Art Direction', 'Web Design', 'Logo Design', 'Fashion Design'], - image: 'https://placehold.jp/464x560.png', + slug: 'misia-forest', + title: 'MISIAの森', + year: '2023', + categories: ['PRIVATE WORKS'], + tags: ['ART DIRECTION', 'WEB DESIGN', 'GRAPHIC DESIGN'], + image: '/detail/misia-forest/mv-vertical.jpg', + mv: '/detail/misia-forest/mv-pc.jpg', + mvSp: '/detail/misia-forest/mv-sp.jpg', isTop: true, - imageTop: 'https://placehold.jp/3d4070/ffffff/1200x480.png', + imageTop: '/detail/misia-forest/mv-pc.jpg', }, { - title: '医療従事者サイト 3', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: ['Art Direction', 'Web Design', 'Graphic Design', 'Fashion Design'], - image: 'https://placehold.jp/464x560.png', + slug: 'sato-noodle-factory', + title: '佐藤製麺所', + year: '2022', + categories: ['CLIENT WORKS'], + tags: ['GRAPHIC DESIGN'], + image: '/detail/sato-noodle-factory/mv-vertical.jpg', + mv: '/detail/sato-noodle-factory/mv-pc.jpg', + mvSp: '/detail/sato-noodle-factory/mv-sp.jpg', isTop: true, - imageTop: 'https://placehold.jp/1200x480.png', + imageTop: '/detail/sato-noodle-factory/mv-pc.jpg', }, { - title: '医療従事者サイト 4', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: ['Art Direction', 'Web Design', 'Graphic Design', 'Logo Design'], - image: 'https://placehold.jp/464x560.png', - isTop: true, - imageTop: 'https://placehold.jp/1200x480.png', - }, - { - title: '医療従事者サイト 5', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: [ - 'Art Direction', - 'Web Design', - 'Graphic Design', - 'Logo Design', - 'Fashion Design', - ], - image: 'https://placehold.jp/464x560.png', + slug: 'burst-of-mana', + title: 'Burst of Mana', + year: '2024', + categories: ['CLIENT WORKS'], + tags: ['GRAPHIC DESIGN'], + image: '/detail/burst-of-mana/mv-vertical.jpg', + mv: '/detail/burst-of-mana/mv-pc.jpg', + mvSp: '/detail/burst-of-mana/mv-sp.jpg', isTop: true, - imageTop: 'https://placehold.jp/1200x480.png', + imageTop: '/detail/burst-of-mana/mv-pc.jpg', }, { - title: '医療従事者サイト 6', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: [ - 'Art Direction', - 'Web Design', - 'Graphic Design', - 'Logo Design', - 'Fashion Design', - ], - image: 'https://placehold.jp/464x560.png', + slug: 'clinical-diagnostic-reagents-company', + title: '臨床検査薬企業', + year: '2023', + categories: ['PRIVATE WORKS'], + tags: ['ART DIRECTION', 'WEB DESIGN'], + image: '/detail/clinical-diagnostic-reagents-company/mv-vertical.jpg', + mv: '/detail/clinical-diagnostic-reagents-company/mv-pc.jpg', + mvSp: '/detail/clinical-diagnostic-reagents-company/mv-sp.jpg', }, { - title: '医療従事者サイト 7', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: [ - 'Art Direction', - 'Web Design', - 'Graphic Design', - 'Logo Design', - 'Fashion Design', - ], - image: 'https://placehold.jp/464x560.png', + slug: '5days', + title: '僕のとある五日間ともう一つの日々の話', + year: '2023', + categories: ['PRIVATE WORKS'], + tags: ['ART DIRECTION', 'WEB DESIGN', 'LOGO DESIGN', 'GRAPHIC DESIGN'], + image: '/detail/5days/mv-vertical.jpg', + mv: '/detail/5days/mv-pc.jpg', + mvSp: '/detail/5days/mv-sp.jpg', }, { - title: '医療従事者サイト 8', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: [ - 'Art Direction', - 'Web Design', - 'Graphic Design', - 'Logo Design', - 'Fashion Design', - ], - image: 'https://placehold.jp/464x560.png', + slug: 'ceramics', + title: '陶磁器ブランド', + year: '2022', + categories: ['PRIVATE WORKS'], + tags: ['WEB DESIGN', 'CODING'], + image: '/detail/ceramics/mv-vertical.jpg', + mv: '/detail/ceramics/mv-pc.jpg', + mvSp: '/detail/ceramics/mv-sp.jpg', }, { - title: '医療従事者サイト 9', - href: '/works/detail/', - year: '2021', - categories: ['Web Development'], - tags: [ - 'Art Direction', - 'Web Design', - 'Graphic Design', - 'Logo Design', - 'Fashion Design', - ], - image: 'https://placehold.jp/464x560.png', + slug: 'keio-fashion-creator', + title: 'Keio Fashion Creator', + year: '2023', + categories: ['PRIVATE WORKS'], + tags: ['FASHION DESIGN'], + image: '/detail/keio-fashion-creator/mv-vertical.jpg', + mv: '/detail/keio-fashion-creator/mv-pc.jpg', + mvSp: '/detail/keio-fashion-creator/mv-sp.jpg', }, ]; diff --git a/src/libs/getWork.ts b/src/libs/getWork.ts new file mode 100644 index 0000000..b193f1c --- /dev/null +++ b/src/libs/getWork.ts @@ -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; diff --git a/src/pages/works/5days.astro b/src/pages/works/5days.astro new file mode 100644 index 0000000..d1e5767 --- /dev/null +++ b/src/pages/works/5days.astro @@ -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); +--- + + + + +
    +
    + + + + + + + + + + + + + 課題概要 + 大原大次郎さんが行っているTypogRAPyという音楽グループの「読む」という複数人が朗読を行っているような課題曲を聞き、視覚化するというのが今回の課題でした。
    + この曲は、ただ朗読を行うだけではなく言葉を変形させたり重ねたりするような言葉の響きを大切にしており、その分全体としての言葉の意味は見えづらいなと感じました。
    + ここから、視覚化といっても”物理的に見えない”という意味と、”知らない、分からない、理解できないから見えない”という知覚的な意味があると考え、視覚化するにあたって目に見えるものをアウトプットとすることで物理的な視覚化を行う一方、課題曲のような難解なものにすることであえて知覚的な視覚化の方は行わないというものを作成しようと思いました。
    + このような難解ゆえの見えづらさは、映画監督であるクリストファー・ノーランが行う時間逆行や交差による非直線的な時間軸操作の手法に近いと感じ、この手法を引用して非直線的な時間軸をWeb媒体で表現しました。
    + コンテンツとして自分のとある五日間の話を入れており、これによって逆スクロールで進むインターネット上の時間軸と、五日間を順不同に描いた現実の時間軸の、二つの非直線的に進む時間軸を表現しました。
    + 加えてリアルの自分の五日間と想像での五日間を織り交ぜることで、課題曲の複数人による重なりの箇所を、現実と想像の二つの自分の視点の重なりで表現した。
    +
    + + 制作範囲 + Webデザイン/コーディング + +
    + +
    +
    + +
  • + + + +
  • +
  • + + + +
  • +
  • + +
  • +
    +
    +
    + + +
    +
    + + + + + diff --git a/src/pages/works/detail.astro b/src/pages/works/_detail.astro similarity index 53% rename from src/pages/works/detail.astro rename to src/pages/works/_detail.astro index b2c2af4..e7360e8 100644 --- a/src/pages/works/detail.astro +++ b/src/pages/works/_detail.astro @@ -5,10 +5,16 @@ import DescriptionList from '@/components/DescriptionList.astro'; import DetailImage from '@/components/DetailImage.astro'; import Scroll from '@/components/Scroll.astro'; import Stalker from '@/components/Stalker'; -const title = '医療従事者サイト'; +import updatePath from '@/libs/updatePath'; +import Video from '@/components/Video.astro'; +import NextWork from '@/components/NextWork.astro'; +import DetailInfo from '@/components/DetailInfo.astro'; +import getWork from '@/libs/getWork'; +const slug = Astro.url.pathname.replace('/works/', '').replace('/', ''); +const { work, nextWork } = getWork(slug); --- - +
    -
    -

    - {title} - PRIVATE WORKS -

    - -
    -

    - ROLE - ART DIRECTION, WEB DESIGN -

    - -

    - YEAR - 2023 -

    -
    -
    - - - - +
    @@ -130,7 +105,7 @@ const title = '医療従事者サイト'; />
  • - +
  • + +
  • + +
  • +
  • + +
  • + +
  • + +
  • + +
  • + + + +
  • +
    + +
  • + +
  • + +
  • + + + +
  • +
    + +
  • + +
  • + +
  • + +
  • +
    + +
  • + + + +
  • + +
  • + + + +
  • +
    +
  • + + + +
  • +
    -
    -
    -

    (NEXT PROJECT)

    -

    - タイトル名タイトル名タイトル名 -
    - タイトル名タイトル名 -

    -
    -
    - - - - タイトル名タイトル名タイトル名タイトル名タイトル名を見る - - - - - - - - + diff --git a/src/pages/works/burst-of-mana.astro b/src/pages/works/burst-of-mana.astro new file mode 100644 index 0000000..ff0170e --- /dev/null +++ b/src/pages/works/burst-of-mana.astro @@ -0,0 +1,138 @@ +--- +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); +--- + + + + +
    +
    + + + +
    +

    + Burst of + Mana(バーストオブマナ)というボードゲームのフライヤーデザインを行いました。
    + ボードゲームの世界観に関して様々な情報のヒアリングを行った上で、マナの背景やゲームルールなどをもとにビジュアル方向性を定め、らしさのあるデザインを意識し作成いたしました。 +

    +
    +
    + + + + + + + + ターゲット + 頭を使うゲームが好きな方、Burst of Manaに興味を持っている方 + + + 目的 + 販促物として店頭に置いたり手配りなどで世界観やルールを簡単に知ってもらい、Burst + of Manaで遊んでいただくため + + + 情報設計 + + 表面では一目で興味を引くような魅せるビジュアル、裏面では端的にルールや世界観を伝えられるような情報整理を意識して行いました。特に裏面は情報量も多いため、ユーザーが心地よく視線を巡らせるような情報の優先度やレイアウトを意識しました。 + + + + デザイン + + ゲームルールや世界観をビジュアル化することを強く意識しております。バーストモードという駒を裏返すと強化されるルールから、画面中央を切り裂いて裏面や内側の凶暴さが見えるようなイメージで作成しました。また、実際にプレイしている盤面を俯瞰的に見ているような駒の配置や、儚い存在であるマナの特性から崩れるようなタイポグラフィなどというように、ビジュアルからBurst + of Manaらしさを感じるようなデザインを行いました。 + + + + 制作範囲 + フライヤー + + + +
    +
    + +
  • + + + +
  • + +
  • + + + +
  • +
  • + + + +
  • +
    +
  • + + + +
  • +
    +
    +
    + + +
    +
    + + +
    + + diff --git a/src/pages/works/ceramics.astro b/src/pages/works/ceramics.astro new file mode 100644 index 0000000..dda6da9 --- /dev/null +++ b/src/pages/works/ceramics.astro @@ -0,0 +1,136 @@ +--- +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); +--- + + + + +
    +
    + + + +
    +

    + 自主制作として、日本の職人が一つ一つ心を込めて制作している良質な陶磁器ブランドのサイトを制作しました。
    + 想いや歴史、製品の情報や、店舗でのイベントなどのコンテンツをブランドの世界観の中で表現することを意識してWebサイトのデザインとコーディングを行いました。 +

    + +

    + URL + https://taikisato.com/ceramics +

    +
    +
    + + + + + + + + ターゲット + 40~60代で MAID IN JAPANの質の良さを求める人、 感度の高い人 + + + 目的 + 製品やものづくりに込めた想いや質の良さを知ってもらい購入してもらうため + + + 情報設計 + + 製品の質のよさを訴求するために、全体を通してビジュアルを大きく余白をゆったりあけた設計を行いつつ店舗情報などは見やすさをより重視したレイアウトにすることで、見せる箇所と読ませる箇所を分けて設計しています。 + + + + デザイン + + テクスチャや縦書きを使用することにより「和」の雰囲気を全面に出し、日本の職人による技術という印象訴求を狙っています。
    + また、全体的に余白を多く取ったり、フォントサイズを小さめに設定することで落ち着いた良質な印象を与えるように意識しております。 +
    +
    + + 制作範囲 + Webデザイン/Web構成要素/コーディング + +
    + +
    +
    + +
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
    +
    +
    + + +
    +
    + + +
    + + diff --git a/src/pages/works/clinical-diagnostic-reagents-company.astro b/src/pages/works/clinical-diagnostic-reagents-company.astro new file mode 100644 index 0000000..d5d3451 --- /dev/null +++ b/src/pages/works/clinical-diagnostic-reagents-company.astro @@ -0,0 +1,130 @@ +--- +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); +--- + + + + +
    +
    + + + +
    +

    + 自主制作として、医療従事者をターゲットとした難病に対する臨床検査薬の企業のWebデザインを制作しました。
    + 医療従事者に向けた疾患の判別に関する情報発信サイトとコーポレートの2面性をもつサイトとして設定し、そちらの提案としてWebサイトのアートディレクションとデザインを行いました。 +

    +
    +
    + + + + + + + + ターゲット + 30~60代の糖尿病内科、脳神経内科、耳鼻咽喉科の臨床専門医 + + + 目的 + ミッションと何を特徴とした会社なのかを第三者へわかりやすく伝えるため + + + 情報設計 + + ファーストビューの段階で、疾患別のそれぞれの情報への導線を設けることで目的の情報に素早く迷わずに辿り着けるように設計しました。
    + 疾患の判別に関する情報発信サイトとしての側面もあるため、情報を疾患や症状ごとに絞り込みできるようにし情報を探しやすいようにしました。 +
    +
    + + デザイン + + メインユーザーである医療従事者だけでなくその先にいる難病患者まで考えたデザインコンセプトとして「人」と策定しました。
    + コンセプトをもとに誰にでも直感的に操作しやすい優しいデザイン設計を行い、曲線を軸とすることでやわらかさや、やさしい雰囲気を演出し人の温かみのあるポジティブな感情を表現しています。
    + また、全体的に白と青で信頼感やクリーンな印象を表現しつつ、ファーストビューではカテゴリごとに色分けすることで直感的に目的の要素を探し当てることが出来るデザイン設計を行い、ポイントでイラストを使用することで特定の誰かではなく多くの人に寄り添うという意図を表現しています。 +
    +
    + + 制作範囲 + Webデザイン/Web構成要素 + +
    + +
    +
    + +
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
    +
    +
    + + +
    +
    + + +
    + + diff --git a/src/pages/works/keio-fashion-creator.astro b/src/pages/works/keio-fashion-creator.astro new file mode 100644 index 0000000..e4421bf --- /dev/null +++ b/src/pages/works/keio-fashion-creator.astro @@ -0,0 +1,187 @@ +--- +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); +--- + + + + +
    +
    + + + +
    +

    + 大学時代に所属していたKeio Fashion + Creatorという服飾のインカレで作成した作品です。
    + 自ら考えた世界観にあったデザインを作り、自分でパターンを引いて布の選定から裁断や縫製まで手作業で行いました。
    + そして年に一度行われる当団体が開催するファッションショーでモデルさんに着用していただき、披露するような活動を行なっておりました。 +

    +
    +
    + + + + + + + + ルック概要 + 毎年ファッションショーのコンセプトがあり、それに対してデザイナーが皆それぞれの解釈をし、意図を込めてデザインから縫製まで自身で行い、ルックを作成します。
    + 私はインカレに所属している間に計5つのルックを作成しましたが、その中でも「辿る」というコンセプトをもとに作成した2体のルックはクラシックバレエの演目「くるみ割り人形」からインスピレーションを受け作成したものになります。
    + 「辿る」というコンセプトに対し、私はその当時行っていた表現の手段として服飾というものがありましたが、自分の人生を辿ったときに叔母の影響で3歳の頃から10年間続けたクラシックバレエが自分の中の表現の原点であると考え、過去行っていた表現を当時行っていた服飾という媒体で表現するということを行いました。そして、クラシックバレエを表現するにあたり、最も思い出がある演目である「くるみ割り人形」を服で表現しました。
    + 私が辿ったのは、”表現”。「表現を辿る」という軸から2つのルックを作成しました。
    +
    + + 制作範囲 + 服飾デザイン/パターン、裁断、縫製 + +
    + +
    +
    + + +
  • + + + +
  • +
  • + + + +
  • +
    + +
  • + + + +
  • +
  • + + + +
  • +
    + +
  • + + + +
  • +
  • + + + +
  • +
    + +
  • + + + +
  • +
  • + + + +
  • +
    + +
  • + + + +
  • +
  • + + + +
  • +
    +
    +
    +
    + + +
    +
    + + +
    + + diff --git a/src/pages/works/misia-forest.astro b/src/pages/works/misia-forest.astro new file mode 100644 index 0000000..aa41a26 --- /dev/null +++ b/src/pages/works/misia-forest.astro @@ -0,0 +1,151 @@ +--- +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); +--- + + + + +
    +
    + + + +
    +

    + 歌手のMISIAさんがアート×森による生物の多様性をコンセプトに行っている石川県にある「MISIAの森」という活動のリブランディングを行いました。
    + これまでの生物多様性に加え、人の多様性にも配慮した森プロジェクトであることを伝えたいという要望をもとに「手」というデザインコンセプトを策定し、新たな繋がりの形の企画提案やビジュアル作成を行いました。
    + こちらはD.TOKYOたきデザインマスター(プロデザイナー向けスクール)でのブランディング課題として作成したものです。
    + 課題ではありますが、実際のクライアントが抱える問題をふまえてデザインを行い、最後はクライアントにプレゼンし最優秀賞に選ばれた作品になります。 +

    +
    +
    + + + + + + + + ターゲット + 石川県民。老若男女問わず県外からの観光者。LGBTなどのマイノリティの方。 + + + 目的 + 「MISIAの森」がある森林公園が50周年を迎えたタイミングでMISIAが森林公園全体の園⻑に就任したことから、県外からの訪問者数の増加を狙い、新たなコンセプトの浸透のため。 + + + 情報設計 + + 老若男女やマイノリティなどは問わずに、誰でも繋がれる森ということを強く意識されていたので、デザイン自体もロゴやポスターを何か一つに固定してしまうのではなく、季節や好みによってバリエーションを作って横展開する前提で作成しました。 + + + + デザイン + + 多様性という意味合いや、手と手を合わせる人や自然との繋がり、手でふれて体験するアートや未来への繋がりという意味合いから「手」というデザインコンセプトを策定しました。
    + このコンセプトをもとに、手書き感などの身体性からラフでナチュラルな優しく落ち着いた印象を与える方向性でデザイン展開を行いました。 +
    +
    + + 制作範囲 + ロゴ/ポスター/Webデザイン/コンセプトムービー + +
    + +
    +
    + +
  • + + + +
  • + +
  • + + + +
  • +
  • + + + +
  • +
    +
  • + + + +
  • +
  • + +
  • +
    +
    +
    + + +
    +
    + + +
    + + diff --git a/src/pages/works/sato-noodle-factory.astro b/src/pages/works/sato-noodle-factory.astro new file mode 100644 index 0000000..b341ab3 --- /dev/null +++ b/src/pages/works/sato-noodle-factory.astro @@ -0,0 +1,136 @@ +--- +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); +--- + + + + +
    +
    + + + +
    +

    + 実家のラーメン屋である「佐藤製麺所」のメニューのデザインです。
    + 湘南の地にあり、カップルや女性一人でも来店しやすい雰囲気の内装になっているため、そういった雰囲気を店を選ぶ際の大きな決め手となるメニューからも感じられるということを強く意識して行いました。
    + 実家ではありますが、クライアントとしてやりとりを重ねながら店の印象や想いを反映できるように提案をした案件であり、メニューとして店内や店外に掲載して頂いております。 +

    +
    +
    + + + + + + + + ターゲット + 湘南に住む方や観光に来た方 + + + 目的 + 印刷したものをお店の前に掲載し、メニューを見て来店してもらうため + + + 情報設計 + + 全商品を掲載する中で並列に見せるのではなく、特にお店が推しているラーメンを大きく分かりやすいように優先順位をつけてレイアウトしています。
    + また、メインであるラーメンには実物を想起しやすいように画像も一緒に載せて魅力的に見えるようにしております。 +
    +
    + + デザイン + + 筆文字のロゴとも合わせた和の印象から和紙や明朝体を使用し、色味もポイントで金色を使用することで女性一人でも躊躇わらず入れるような洗練された美味しそうなお店であることを訴求しました。
    + また自家製麺というこだわりのあるお店のため、一つ一つ想いを込めて作っているといったところが伝わるようにポイントで手書き感のあるような線や書体を使用しています。 +
    +
    + + 制作範囲 + メニュー + +
    + +
    +
    + +
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
    +
    +
    + + +
    +
    + + +
    + + diff --git a/src/pages/works/textile-manufacturer-site.astro b/src/pages/works/textile-manufacturer-site.astro index 5ecfd55..5785468 100644 --- a/src/pages/works/textile-manufacturer-site.astro +++ b/src/pages/works/textile-manufacturer-site.astro @@ -5,12 +5,14 @@ import DescriptionList from '@/components/DescriptionList.astro'; import DetailImage from '@/components/DetailImage.astro'; import Scroll from '@/components/Scroll.astro'; import Stalker from '@/components/Stalker'; -import Video from '@/components/Video.astro'; -import updatePath from '@/libs/updatePath'; -const title = '繊維メーカーサイト'; +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); --- - +
    -
    -

    - {title} - PRIVATE WORKS -

    - -
    -

    - ROLE - ART DIRECTION, WEB DESIGN -

    - -

    - YEAR - 2023 -

    -
    -
    - - - - +
    @@ -125,93 +95,15 @@ const title = '繊維メーカーサイト';
  • - -
  • -
  • - +
  • - -
  • - -
  • - -
  • - - - -
  • -
    - -
  • - -
  • - -
  • - - - -
  • -
    - -
  • - -
  • - -
  • - -
  • -
    - +
  • -
    -
    -

    (NEXT PROJECT)

    -

    - タイトル名タイトル名タイトル名 -
    - タイトル名タイトル名 -

    -
    -
    - - - - タイトル名タイトル名タイトル名タイトル名タイトル名を見る - - - - - - - - +
    diff --git a/src/types/Work.ts b/src/types/Work.ts index 13c92d9..33603ef 100644 --- a/src/types/Work.ts +++ b/src/types/Work.ts @@ -1,10 +1,12 @@ type Work = { + slug: string; title: string; - href: string; year: string; categories: string[]; tags: string[]; image: string; + mv: string; + mvSp: string; // TOPページに表示するかどうか isTop?: boolean; imageTop?: string;