<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 分析サイト【GA4】-->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8G4WM8Y37V"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-8G4WM8Y37V');
</script>


<!-- 分析サイト【Microsoft Clarity】-->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "txlz9pw7hg");
</script>


<!-- 分析サイト【Microsoft Clarity】-->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "txlz9pw7hg");
</script>


<!-- ブラウザのタブになるやつ -->
<!-- ■ページ毎に商品名とか変える■ -->
<title>
作例見本【 ぽんぽこ堂 印刷 】｜POP・メニュー・掲示物に（オンデマンド印刷）
</title>

<!-- Webで検索でひっかかった時に URLを サイト名　で表示させるやつ -->
<script type="application/ld+json">
{"@context": "https://schema.org","@type": "WebSite","name": "ぽんぽこ堂印刷","url": "https://pon-poco.tokyo/"}</script>

<!-- Webで検索でひっかかった時に 説明文 になるやつ -->
<!-- ■ページ毎に説明文を変える■ -->
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="justsystems:HPB-Input-Mode" content="mode/flm">
<meta name="description" content="
制作事例や店頭POPなどの写真ギャラリー。キャプション付きでご覧いただけます。
">

<!-- SNSとかで関係するやつ -->
<!-- ■ページ毎に商品名とか変える■ -->
<meta property="og:title" content="
ぴかぴか仕上げ✨ ラミネート加工【 ぽんぽこ堂 印刷 】は 神田の印刷所♪（オンデマンド印刷）
">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.pon-poco.tokyo">
<meta property="og:image" content="00_parts_main/OGP_image.png">
<meta property="og:site_name" content="
神田駅【 ぽんぽこ堂 印刷 】のWebサイト
">

<!-- ■ページ毎に説明文を変える■ -->
<meta property="og:description" content="
作例見本です。神田の【 ぽんぽこ堂 印刷 】では1枚から対応。厚さ・仕上がりの相談もOKです！
">
<meta property="og:locale" content="ja_JP">

<!-- CSSとかに関係するやつ --><style>
:root{
  --text:#eaeaea;
  --muted:#b7b7b7;
  --line:#2a2a2a;
  --card:#141414;
}

/* ===== 全体背景（地紋） ===== */
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--text);
  background:url("00_parts_main/main_board_000.png") repeat;
}

/* ===== ヘッダー ===== */
header{
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}

.wrap{
  max-width:900px;
  margin:0 auto;
  padding:14px 16px;
}

/* 上段＋下段 */
.topbar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.brand strong{
  font-size:16px;
}
.brand span{
  font-size:12px;
  color:var(--muted);
}

/* 操作行 */
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.search{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#111;
  color:#fff;
}

.chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#111;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.chip[aria-pressed="true"]{
  color:#fff;
  border-color:#555;
}

/* ===== グリッド ===== */
main{padding:16px;}

.grid{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}

figure{
  margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}

/* 複数写真 */
.thumbs{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.thumbs img{
  flex:0 0 100%;
  height:170px;
  object-fit:cover;
  scroll-snap-align:start;
}

/* 複数枚マーク */
figure.multi::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:16px;
  height:16px;
  background:url("images/icon_multi.svg") no-repeat center/contain;
  opacity:.9;
}

/* キャプション */
figcaption{
  padding:8px 10px;
}
.cap-title{
  font-size:12px;
  margin:0 0 4px;
}
.cap-text{
  font-size:11px;
  color:var(--muted);
  margin:0;
}

/* ===== ライトボックス ===== */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
.modal[aria-hidden="false"]{display:flex;}

.modal-card{
  width:min(900px,100%);
  background:#111;
  border-radius:16px;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:0.8fr 320px;
  overflow:hidden;
}

.modal-img{
  max-width:520px;
  margin:auto;
  height:520px;
  object-fit:contain;
  background:#000;
}

.modal-side{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.modal-side h2{
  font-size:15px;
  margin:0;
}
.modal-side p{
  font-size:13px;
  color:var(--muted);
  margin:0;
  white-space:pre-wrap;
}

.modal-actions{
  margin-top:auto;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.btn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#1a1a1a;
  color:#fff;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary{
  background:#2a7cff;
  border-color:#2a7cff;
}
</style>
</head>

<body>

<header>
  <div class="wrap">
    <div class="topbar">
      <div class="brand">
        <strong>ぽんぽこ堂 印刷　作例見本</strong>
        <span>制作例・店頭POP・印刷サンプル（キャプション付き）</span>
      </div>

      <div class="controls">
    <input id="q" class="search" type="search" placeholder="キーワード検索" />
    <button class="chip" data-filter="all" aria-pressed="true">全部</button>
    <button class="chip" data-filter="copy" aria-pressed="true">コピー／データ印刷</button>
    <button class="chip" data-filter="greeting_card" aria-pressed="true">あいさつ状</button>
    <button class="chip" data-filter="cutting_seal" aria-pressed="true">カッティングシール</button>
    <button class="chip" data-filter="envelope" aria-pressed="true">封筒</button>
    <button class="chip" data-filter="flyer" aria-pressed="true">チラシ</button>
    <button class="chip" data-filter="laminate" aria-pressed="true">ラミネート</button>
    <button class="chip" data-filter="poster" aria-pressed="true">ポスター</button>
    <button class="chip" data-filter="seal" aria-pressed="true">シール</button>
    <button class="chip" data-filter="shop_card" aria-pressed="true">ショップカード</button>
    <button class="chip" data-filter="photo_pop" aria-pressed="true">POP</button>
    <button class="chip" data-filter="slip" aria-pressed="true">伝票</button>
    <button class="chip" data-filter="others" aria-pressed="true">その他</button>
    <button class="chip" data-filter="new_years_card" aria-pressed="true">年賀状</button>
    <button class="chip" data-filter="calendar" aria-pressed="true">カレンダー</button>
      </div>
    </div>
  </div>
</header>

<main>
<section class="grid">


<!-- ◆◆◆ ↓↓ここより下に新しいブロックを入れる↓↓ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ -->

<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="名刺印刷"
  data-text="名刺で、第一印象バッチリ！
ぽんぽこ堂なら、小ロットもおまかせ♪
「ちょっと作りたい」に、ちょうどいい名刺印刷です。"
data-link="merchandise_business_card.html">
  <div class="thumbs">
    <img src="00_photo_library/2015-12-20_11.23.09.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">名刺印刷</p>
    <p class="cap-text">名刺印刷します</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="シール印刷"
  data-text="現場で大活躍！「検品済み」シールも、ぽんぽこ堂ならこの通り！
お客さまのご要望にあわせて、使いやすくパッケージ化しました
業務効率UPにもひと役買いますよ。"
data-link="merchandise_seal.html">
  <div class="thumbs">
    <img src="00_photo_library/2017-06-13_23.13.47.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">シール印刷</p>
    <p class="cap-text">フリーカットのシールもできます</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="ショップカード印刷"
  data-text="「ごちそうさま！」のひと言に気持ちを添えて。
ラーメン屋さんのイベント用ショップカードも、かわいく・しっかり印刷します！
お店の個性が伝わるカードづくり、おまかせください♪"
data-link="merchandise_shop_card.html">
  <div class="thumbs">
    <img src="00_photo_library/2014-11-05.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">ショップカード</p>
    <p class="cap-text">フリーカットのシールもできます</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="ステッカー印刷"
  data-text="貼るだけで気分が上がる♪
オリジナルステッカーも、ラミネート加工でツヤっとキレイに仕上げます！
音楽プレーヤーやPCなど、好きなところにペタッとどうぞ。"
data-link="merchandise_seal.html">
  <div class="thumbs">
    <img src="00_photo_library/2025-01-12_16.49.27.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">シール印刷</p>
    <p class="cap-text">オリジナルステッカー出来ますよ</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="データ出力"
  data-text="商品の品質を伝える大切なひと手間。
お取り扱い説明書も、サイズやデザインに合わせてしっかり印刷！
包装資材とセットで、スムーズな納品をサポートします。"
data-link="merchandise_copy.html">
  <div class="thumbs">
    <img src="00_photo_library/2025-04-11_17.29.52.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">データ出力</p>
    <p class="cap-text">データから印刷しますよ</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="パネル作成"
  data-text="パネル制作完了
キズがつかないように丁寧に梱包して、納品を待つばかりの状態です！
サイズも色々、用途に合わせて対応できますよ
イベント・展示・店舗用にも大活躍のパネル印刷、ぜひご相談ください。"
data-link=".html">
  <div class="thumbs">
    <img src="00_photo_library/2016-04-30_16.39.35.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">パネル加工</p>
    <p class="cap-text">ドライマウントパネルを作成します</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="筆耕＋コピー"
  data-text="心のこもった一枚を贈りたい時に。
印刷だけでなく、筆耕による手書きの表彰状もご対応可能です。
記念に残る表彰を、丁寧にお手伝いします。"
data-link="merchandise_copy.html">
  <div class="thumbs">
    <img src="00_photo_library/2021-11-02_11.42.10.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">筆耕＋コピー</p>
    <p class="cap-text">スキャンした画像を印刷します</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="訂正シール印刷"
  data-text="貼るだけカンタン修正！
「特許取得済」のシールも、まとめて印刷いたします。
ちょっとした訂正も、見た目スッキリ＆時短で対応できますよ♪"
data-link="merchandise_seal.html">
  <div class="thumbs">
    <img src="00_photo_library/2021-06-14_12.08.07.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">シール印刷</p>
    <p class="cap-text">訂正シールもお作りします</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="梱包も丁寧に"
  data-text="大きなパネルも、持ち運びやすく丁寧に梱包
取っ手付きでお客様にもやさしい仕様になってます
展示会・説明会・店頭など、パネルが活躍する場面に合わせてしっかりサポートいたします！
安心しておまかせくださいね。"
data-link=".html">
  <div class="thumbs">
    <img src="00_photo_library/2018-10-06_17.15.57.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">梱包作業</p>
    <p class="cap-text">お持ち帰りやすく梱包します</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="タグの印刷"
  data-text="季節商品のアピールにぴったり！
「秋冬の定番品」タグも、印刷からカットまでしっかり仕上げます。
売り場の印象づくりに、ひと工夫してみませんか？"
data-link="merchandise_copy.html">
  <div class="thumbs">
    <img src="00_photo_library/2019-07-22_16.13.56.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">タグの印刷します</p>
    <p class="cap-text">データから印刷いたします</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="shop_card"
  data-title="ショップカード"
  data-text="こちらは「折スジ加工」の真っ最中！
ショップカードをキレイに二つ折りにするための大事な工程
スジを入れとくことで、紙がパキッと割れずに、見た目もきれいに仕上がるんだ
小さな気配りが、使いやすさとプロっぽさに差をつけるポイントだね"
data-link="merchandise_shop_card.html">
  <div class="thumbs">
    <img src="00_photo_library/2023-04-08_12.27.40.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">二つ折りショップカード</p>
    <p class="cap-text">ショップカードに折スジ加工</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="shop_card"
  data-title="ショップカード"
  data-text="こちらは「単票」を製本してるところ
重ねた用紙の背をそろえて、しっかり圧着してから仕上げていきます
ちょっとカラフルな養生テープがポイント（笑）
こうした作業も1冊1冊、丁寧に手作業で進めてますよ"
data-link="">
  <div class="thumbs">
    <img src="00_photo_library/2025-02-07_22.16.56.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">二つ折りショップカード</p>
    <p class="cap-text">ショップカードに折スジ加工</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="shop_card"
  data-title="ショップカード"
  data-text="こちらは単票に「ミシン目加工」をしている様子です
ミシン目があると、切り離しやすくなって実用性アップ
請求書や申込書、チケットなど…活躍の場はたくさん
小ロットでも対応してるので、お気軽にご相談くださいね"
data-link="">
  <div class="thumbs">
    <img src="00_photo_library/2025-02-05_19.09.16.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">二つ折りショップカード</p>
    <p class="cap-text">ショップカードに折スジ加工</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="shop_card"
  data-title="ショップカード"
  data-text="とある雑貨屋さんの商品シール＆タグを制作
シンプルだけど、可愛さもしっかり
ひとつひとつ手作業で丁寧にカット＆仕上げました
お店の世界観にピッタリの仕上がりです"
data-link="">
  <div class="thumbs">
    <img src="00_photo_library/2024-08-13_13.13.13.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">二つ折りショップカード</p>
    <p class="cap-text">ショップカードに折スジ加工</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ↓↓↓　▼▼▼ここから このブロック▼▼▼　↓↓↓ -->
<figure class="multi"
  data-tag="■タグ■"
  data-title="■タイトル■"
  data-text="■本文内容■"
data-link="■リンクURL■">
  <div class="thumbs">
    <img src="00_photo_library/■画像■.jpg" alt="">
  </div>  <figcaption>
    <p class="cap-title">■タイトル■</p>
    <p class="cap-text">■キャプション■</p>
  </figcaption></figure>
<!-- ↑↑↑　▲▲▲ここまで このブロック▲▲▲　↑↑↑ -->


<!-- ◆◆◆ ↑↑ここまで、新しいブロックが入る↑↑ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ -->
</section>
</main>


<!-- ===== モーダル ===== -->
<div class="modal" id="modal" aria-hidden="true">
  <div class="modal-card">
    <img class="modal-img" id="mImg" src="" alt="">
    <div class="modal-side">
      <h2 id="mTitle"></h2>
      <p id="mText"></p>
      <div class="modal-actions">
        <a class="btn btn-primary" id="detailBtn" href="#">この製品を詳しく見る</a>
        <button class="btn" id="closeBtn">閉じる</button>
      </div>
    </div>
  </div>
</div>

<script>
const modal=document.getElementById("modal");
const mImg=document.getElementById("mImg");
const mTitle=document.getElementById("mTitle");
const mText=document.getElementById("mText");
const detailBtn=document.getElementById("detailBtn");

document.querySelector(".grid").addEventListener("click",e=>{
  const fig=e.target.closest("figure");
  if(!fig)return;
  const img=fig.querySelector("img");
  mImg.src=img.src;
  mTitle.textContent=fig.dataset.title||"";
  mText.textContent=fig.dataset.text||"";
  detailBtn.href=fig.dataset.link||"#";
  modal.setAttribute("aria-hidden","false");
});

document.getElementById("closeBtn").onclick=()=>{
  modal.setAttribute("aria-hidden","true");
};
modal.onclick=e=>{
  if(e.target===modal)modal.setAttribute("aria-hidden","true");
};
</script>


</body>
</html>