---
title: 食品紹介サイト - 12Grid
description: 株式会社12Gridの制作事例「食品紹介サイト（約100ページ）」をご紹介します。
image: https://12grid.co.jp/hubfs/works-keyvisual/food-intro.png
---

# [![株式会社12Grid](https://12grid.co.jp/hubfs/header_logo.png) ](https://12grid.co.jp/)

- [会社概要 会社概要 ](https://12grid.co.jp/about/)
- [サービス一覧 サービス一覧 ](https://12grid.co.jp/service/)
- [制作実績 制作実績 ](https://12grid.co.jp/works/)
- [お問い合わせ お問い合わせ ](https://12grid.co.jp/contact/)

- [RECRUITMENT採用情報](https://12grid.co.jp/recruitment/)
- [PARTNERパートナー募集](https://12grid.co.jp/partner/)

## WORKS 制作実績

食品紹介サイト  
（約100ページ）

2024/06/01

 静的ファイル（HTML/CSS/JS）にて納品する大量ページ制作案件。

 Astroで構築し、各商品を雛形しコンポーネント化することで、  
大量ページの工数を技術的に圧縮し、数十ページに及ぶ商品の更新作業も少ない工数で実現できました。

 また、コンポーネント化に加えてGit によるバージョン管理も行うことで、  
部分的な公開・非公開の複雑な更新フローにも耐えうる構成となりました。

 Astroによる大量ページ制作

- CLIENT
  
  デザイン会社
- MEMBER
  
  Director
  
  TAKEDA Tetsuro
  
  
  
  Coding
  
  SUGAWARA Kengo
  
  
  
  Coding
  
  OSHIMA Kano
  
  
  
  Coding
  
  TSUNETA Daiki

- [フロントエンド開発](https://12grid.co.jp/works/?tag=フロントエンド開発)

### PICKUP

[北海バネ株式会社

2024/06/01

![hokkai-bane](https://12grid.co.jp/hubfs/works-keyvisual/hokkai-bane.png)

「わかりやすさ」を意識したデザイン

](https://12grid.co.jp/works/hokkai-bane)

Webサイト制作

Webデザイン

フロントエンド開発

BtoB Webマーケティング

[PFANNER JAPAN

2020/05/07

![pfanner](https://12grid.co.jp/hubfs/works-keyvisual/pfanner.png)

コーポレートサイトとECサイトを再構成

](https://12grid.co.jp/works/pfanner-japan)

ECサイト構築／運営

VR・AR事業

Webサイト制作

Webデザイン

フロントエンド開発

- [TOP](https://12grid.co.jp/)
- [ WORKS ](https://12grid.co.jp/works/)
- 食品紹介サイト

- [会社概要 会社概要 ](https://12grid.co.jp/about/) 
    - [理念 理念 ](https://12grid.co.jp/about/philosophy/)
    - [スタッフ紹介 スタッフ紹介 ](https://12grid.co.jp/staff/)
- [サービス サービス ](https://12grid.co.jp/service/) 
    - [Webサイト制作 Webサイト制作 ](https://12grid.co.jp/service/website/)
    - [Webデザイン Webデザイン ](https://12grid.co.jp/service/web-design/)
    - [フロントエンド開発 フロントエンド開発 ](https://12grid.co.jp/service/frontend/)
    - [バックエンド開発 バックエンド開発 ](https://12grid.co.jp/service/backend/)
    - [BtoB Webマーケティング BtoB Webマーケティング ](https://12grid.co.jp/service/b2b/)
    - [ECサイト構築／運営 ECサイト構築／運営 ](https://12grid.co.jp/service/ec/)
    - [VR・AR事業 VR・AR事業 ](https://12grid.co.jp/service/vr-ar/)
    - [グラフィックデザイン グラフィックデザイン ](https://12grid.co.jp/service/graphic/)
    - [自社サービス 自社サービス ](https://12grid.co.jp/service/in-house/)
- [制作実績 制作実績 ](https://12grid.co.jp/works/) 
    - [Webサイト制作 Webサイト制作 ](https://12grid.co.jp/works/?tag=webサイト制作)
    - [Webデザイン Webデザイン ](https://12grid.co.jp/works/?tag=webデザイン)
    - [フロントエンド開発 フロントエンド開発 ](https://12grid.co.jp/works/?tag=フロントエンド開発)
    - [バックエンド開発 バックエンド開発 ](https://12grid.co.jp/works/?tag=バックエンド開発)
    - [BtoB Webマーケティング BtoB Webマーケティング ](https://12grid.co.jp/works?tag=btob-webマーケティング)
    - [ECサイト構築／運営 ECサイト構築／運営 ](https://12grid.co.jp/works?tag=ecサイト構築運営)
    - [VR・AR事業 VR・AR事業 ](https://12grid.co.jp/works?tag=vr-ar事業)
    - [グラフィックデザイン グラフィックデザイン ](https://12grid.co.jp/works/?tag=グラフィックデザイン)
    - [自社サービス 自社サービス ](https://12grid.co.jp/works/?tag=自社サービス)
- [ニュース ニュース ](https://12grid.co.jp/news/)[トピックス トピックス ](https://12grid.co.jp/topics/) [スタッフブログ スタッフブログ ](https://blog.12grid.co.jp/)

[RECRUITMENT採用情報](https://12grid.co.jp/recruitment/)

[PARTNERパートナー募集](https://12grid.co.jp/partner/)

[CONTACTお問い合わせ](https://12grid.co.jp/contact/)

TEL

[011-206-1890](tel:0112061890)

受付時間　平日10:00〜19:00

株式会社トゥエルブグリッド

札幌オフィス

〒060-0031

 北海道札幌市中央区北1条東1丁目6-5   
 札幌イーストスクエア 3F

東京オフィス

〒105-0022

 東京都港区海岸1丁目２−３  
 汐留芝離宮ビルディング 21階

[プライバシーポリシー プライバシーポリシー ](https://12grid.co.jp/privacy-policy/)

Copyright © 2025 12Grid All Rights Reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "12Grid",
    "url" : "https://12grid.co.jp/works/author/12grid"
  },
  "dateModified" : "2025-07-04T09:59:04.818Z",
  "datePublished" : "2025-01-17T15:00:00.000Z",
  "headline" : "食品紹介サイト - 12Grid",
  "image" : [ "https://12grid.co.jp/hubfs/works-keyvisual/food-intro.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://12grid.co.jp/works/food-introduction",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://12grid.co.jp/hubfs/header_logo.png"
    },
    "name" : "12Grid"
  }
}
```