app/template/user_data/guide/gallery.twig line 1

Open in your IDE?
  1. {#
  2. 制作実績ギャラリー - EC-CUBE 4.2 bynoiezam テーマ用
  3. 配置先: app/template/bynoiezam/guide/gallery.twig
  4. URL: /guide/gallery
  5. #}
  7. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'guide_page gallery_page' %}
  11. {% block stylesheet %}
  12.     {{ parent() }}
  13.     <link rel="stylesheet" href="{{ asset('assets/css/guide.css', 'user_data') }}">
  14. {% endblock %}
  16. {% block main %}
  17. <div class="nz-guide-container">
  18.     
  19.     {# パンくずリスト #}
  20.     <nav class="nz-breadcrumb" aria-label="パンくずリスト">
  21.         <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  22.             <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  23.                 <a itemprop="item" href="{{ url('homepage') }}"><span itemprop="name">TOP</span></a>
  24.                 <meta itemprop="position" content="1" />
  25.             </li>
  26.             <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  27.                 <span itemprop="name">制作実績</span>
  28.                 <meta itemprop="position" content="2" />
  29.             </li>
  30.         </ol>
  31.     </nav>
  33.     {# ヒーローセクション #}
  34.     <section class="nz-hero-section nz-hero-gallery">
  35.         <div class="nz-hero-content">
  36.             <h1 class="nz-hero-title">
  37.                 <span class="nz-hero-sub">世界一の美配線を</span>
  38.                 <span class="nz-hero-main">ご覧ください。</span>
  39.             </h1>
  40.             <p class="nz-hero-lead">
  41.                 当店で制作したフルオーダーPCの実績をご紹介します。<br>
  42.                 一台一台、お客様のご要望に合わせて丁寧にお作りしています。
  43.             </p>
  44.         </div>
  45.     </section>
  47.     {# 実績サマリー #}
  48.     <section class="nz-section nz-stats-section">
  49.         <div class="nz-stats-grid">
  50.             <div class="nz-stat-item">
  51.                 <span class="nz-stat-number">1,000<small>台</small></span>
  52.                 <span class="nz-stat-label">以上の制作実績</span>
  53.             </div>
  54.             <div class="nz-stat-item">
  55.                 <span class="nz-stat-number">10<small>年</small></span>
  56.                 <span class="nz-stat-label">以上の運営実績</span>
  57.             </div>
  58.             <div class="nz-stat-item">
  59.                 <span class="nz-stat-number">98<small>%</small></span>
  60.                 <span class="nz-stat-label">顧客満足度</span>
  61.             </div>
  62.         </div>
  63.     </section>
  65.     {# フィルター #}
  66.     <section class="nz-section nz-filter-section">
  67.         <div class="nz-filter-container">
  68.             <div class="nz-filter-group">
  69.                 <span class="nz-filter-label">カテゴリ</span>
  70.                 <div class="nz-filter-buttons">
  71.                     <button class="nz-filter-btn active" data-filter="all">すべて</button>
  72.                     <button class="nz-filter-btn" data-filter="gaming">ゲーミング</button>
  73.                     <button class="nz-filter-btn" data-filter="creator">クリエイター</button>
  74.                     <button class="nz-filter-btn" data-filter="business">ビジネス</button>
  75.                     <button class="nz-filter-btn" data-filter="collab">コラボPC</button>
  76.                 </div>
  77.             </div>
  78.             <div class="nz-filter-group">
  79.                 <span class="nz-filter-label">価格帯</span>
  80.                 <div class="nz-filter-buttons">
  81.                     <button class="nz-filter-btn active" data-price="all">すべて</button>
  82.                     <button class="nz-filter-btn" data-price="10">10万円台</button>
  83.                     <button class="nz-filter-btn" data-price="20">20万円台</button>
  84.                     <button class="nz-filter-btn" data-price="30">30万円以上</button>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.     </section>
  90.     {# ギャラリーグリッド #}
  91.     <section class="nz-section nz-gallery-section">
  92.         <div class="nz-gallery-grid">
  93.             
  94.             {# 実績カード 1 #}
  95.             <article class="nz-gallery-card" data-category="gaming" data-price="20">
  96.                 <div class="nz-gallery-image">
  97.                     <div class="nz-gallery-slider">
  98.                         <img src="{{ asset('assets/img/gallery/pc001-1.jpg', 'user_data') }}" 
  99.                              alt="ゲーミングPC制作実績 美配線" loading="lazy">
  100.                     </div>
  101.                     <span class="nz-gallery-badge nz-badge-gaming">ゲーミング</span>
  102.                 </div>
  103.                 <div class="nz-gallery-info">
  104.                     <h3 class="nz-gallery-title">RGB輝くハイエンドゲーミングPC</h3>
  105.                     <div class="nz-gallery-specs">
  106.                         <span class="nz-spec-item">
  107.                             <span class="nz-spec-icon">💻</span>
  108.                             Intel Core i7-14700K
  109.                         </span>
  110.                         <span class="nz-spec-item">
  111.                             <span class="nz-spec-icon">🎮</span>
  112.                             RTX 4070 Ti SUPER
  113.                         </span>
  114.                         <span class="nz-spec-item">
  115.                             <span class="nz-spec-icon">🧠</span>
  116.                             32GB DDR5
  117.                         </span>
  118.                     </div>
  119.                     <p class="nz-gallery-concept">
  120.                         「Apex Legendsで144fps以上を安定させたい」というご要望に応え、
  121.                         美しいRGBライティングと高いエアフローを両立したPCを制作しました。
  122.                     </p>
  123.                     <div class="nz-gallery-price">
  124.                         <span class="nz-price-label">参考価格</span>
  125.                         <span class="nz-price-value">約28万円</span>
  126.                     </div>
  127.                 </div>
  128.             </article>
  129.             
  130.             {# 実績カード 2 #}
  131.             <article class="nz-gallery-card" data-category="creator" data-price="30">
  132.                 <div class="nz-gallery-image">
  133.                     <div class="nz-gallery-slider">
  134.                         <img src="{{ asset('assets/img/gallery/pc002-1.jpg', 'user_data') }}" 
  135.                              alt="クリエイターPC制作実績 動画編集用" loading="lazy">
  136.                     </div>
  137.                     <span class="nz-gallery-badge nz-badge-creator">クリエイター</span>
  138.                 </div>
  139.                 <div class="nz-gallery-info">
  140.                     <h3 class="nz-gallery-title">4K動画編集特化ワークステーション</h3>
  141.                     <div class="nz-gallery-specs">
  142.                         <span class="nz-spec-item">
  143.                             <span class="nz-spec-icon">💻</span>
  144.                             AMD Ryzen 9 7950X
  145.                         </span>
  146.                         <span class="nz-spec-item">
  147.                             <span class="nz-spec-icon">🎮</span>
  148.                             RTX 4080 SUPER
  149.                         </span>
  150.                         <span class="nz-spec-item">
  151.                             <span class="nz-spec-icon">🧠</span>
  152.                             64GB DDR5
  153.                         </span>
  154.                     </div>
  155.                     <p class="nz-gallery-concept">
  156.                         YouTuberのお客様向けに、4K60fps動画のスムーズな編集と
  157.                         配信を両立できるスペックで制作。静音性にもこだわりました。
  158.                     </p>
  159.                     <div class="nz-gallery-price">
  160.                         <span class="nz-price-label">参考価格</span>
  161.                         <span class="nz-price-value">約45万円</span>
  162.                     </div>
  163.                 </div>
  164.             </article>
  165.             
  166.             {# 実績カード 3 #}
  167.             <article class="nz-gallery-card" data-category="gaming" data-price="10">
  168.                 <div class="nz-gallery-image">
  169.                     <div class="nz-gallery-slider">
  170.                         <img src="{{ asset('assets/img/gallery/pc003-1.jpg', 'user_data') }}" 
  171.                              alt="コスパ重視ゲーミングPC" loading="lazy">
  172.                     </div>
  173.                     <span class="nz-gallery-badge nz-badge-gaming">ゲーミング</span>
  174.                 </div>
  175.                 <div class="nz-gallery-info">
  176.                     <h3 class="nz-gallery-title">初めてのゲーミングPC</h3>
  177.                     <div class="nz-gallery-specs">
  178.                         <span class="nz-spec-item">
  179.                             <span class="nz-spec-icon">💻</span>
  180.                             Intel Core i5-14400F
  181.                         </span>
  182.                         <span class="nz-spec-item">
  183.                             <span class="nz-spec-icon">🎮</span>
  184.                             RTX 4060
  185.                         </span>
  186.                         <span class="nz-spec-item">
  187.                             <span class="nz-spec-icon">🧠</span>
  188.                             16GB DDR4
  189.                         </span>
  190.                     </div>
  191.                     <p class="nz-gallery-concept">
  192.                         学生のお客様向けに、予算15万円以内でValorantやFortniteを
  193.                         快適にプレイできるコスパ重視の構成をご提案しました。
  194.                     </p>
  195.                     <div class="nz-gallery-price">
  196.                         <span class="nz-price-label">参考価格</span>
  197.                         <span class="nz-price-value">約14万円</span>
  198.                     </div>
  199.                 </div>
  200.             </article>
  201.             
  202.             {# 実績カード 4 #}
  203.             <article class="nz-gallery-card" data-category="business" data-price="10">
  204.                 <div class="nz-gallery-image">
  205.                     <div class="nz-gallery-slider">
  206.                         <img src="{{ asset('assets/img/gallery/pc004-1.jpg', 'user_data') }}" 
  207.                              alt="ビジネスPC 事務用" loading="lazy">
  208.                     </div>
  209.                     <span class="nz-gallery-badge nz-badge-business">ビジネス</span>
  210.                 </div>
  211.                 <div class="nz-gallery-info">
  212.                     <h3 class="nz-gallery-title">静音・省電力ビジネスPC</h3>
  213.                     <div class="nz-gallery-specs">
  214.                         <span class="nz-spec-item">
  215.                             <span class="nz-spec-icon">💻</span>
  216.                             Intel Core i5-13400
  217.                         </span>
  218.                         <span class="nz-spec-item">
  219.                             <span class="nz-spec-icon">🎮</span>
  220.                             内蔵グラフィックス
  221.                         </span>
  222.                         <span class="nz-spec-item">
  223.                             <span class="nz-spec-icon">🧠</span>
  224.                             16GB DDR4
  225.                         </span>
  226.                     </div>
  227.                     <p class="nz-gallery-concept">
  228.                         会計事務所向けに、静音性と安定性を重視したビジネスPCを制作。
  229.                         SSD搭載で起動も高速、日々の業務をサクサク処理できます。
  230.                     </p>
  231.                     <div class="nz-gallery-price">
  232.                         <span class="nz-price-label">参考価格</span>
  233.                         <span class="nz-price-value">約10万円</span>
  234.                     </div>
  235.                 </div>
  236.             </article>
  237.             
  238.             {# 実績カード 5 #}
  239.             <article class="nz-gallery-card" data-category="collab" data-price="30">
  240.                 <div class="nz-gallery-image">
  241.                     <div class="nz-gallery-slider">
  242.                         <img src="{{ asset('assets/img/gallery/pc005-1.jpg', 'user_data') }}" 
  243.                              alt="コラボPC限定モデル" loading="lazy">
  244.                     </div>
  245.                     <span class="nz-gallery-badge nz-badge-collab">コラボPC</span>
  246.                 </div>
  247.                 <div class="nz-gallery-info">
  248.                     <h3 class="nz-gallery-title">VTuberコラボ限定モデル</h3>
  249.                     <div class="nz-gallery-specs">
  250.                         <span class="nz-spec-item">
  251.                             <span class="nz-spec-icon">💻</span>
  252.                             Intel Core i9-14900K
  253.                         </span>
  254.                         <span class="nz-spec-item">
  255.                             <span class="nz-spec-icon">🎮</span>
  256.                             RTX 4090
  257.                         </span>
  258.                         <span class="nz-spec-item">
  259.                             <span class="nz-spec-icon">🧠</span>
  260.                             64GB DDR5
  261.                         </span>
  262.                     </div>
  263.                     <p class="nz-gallery-concept">
  264.                         人気VTuberとのコラボモデル。オリジナルデザインのケースと
  265.                         最高峰のスペックを組み合わせた特別な一台です。
  266.                     </p>
  267.                     <div class="nz-gallery-price">
  268.                         <span class="nz-price-label">参考価格</span>
  269.                         <span class="nz-price-value">約65万円</span>
  270.                     </div>
  271.                 </div>
  272.             </article>
  273.             
  274.             {# 実績カード 6 - 美配線特集 #}
  275.             <article class="nz-gallery-card nz-gallery-card-wide" data-category="all" data-price="all">
  276.                 <div class="nz-gallery-image">
  277.                     <div class="nz-gallery-slider">
  278.                         <img src="{{ asset('assets/img/gallery/wiring-1.jpg', 'user_data') }}" 
  279.                              alt="美配線 内部配線の様子" loading="lazy">
  280.                     </div>
  281.                     <span class="nz-gallery-badge nz-badge-special">美配線特集</span>
  282.                 </div>
  283.                 <div class="nz-gallery-info">
  284.                     <h3 class="nz-gallery-title">こだわりの美配線</h3>
  285.                     <p class="nz-gallery-concept nz-gallery-concept-long">
  286.                         当店の最大の特徴は「世界一の美配線」。見えない部分こそ丁寧に。
  287.                         整然とした配線は見た目の美しさだけでなく、エアフローを最適化し、
  288.                         冷却効率を高めます。結果として、パフォーマンスの安定と
  289.                         パーツの長寿命化につながります。<br><br>
  290.                         「開けて見せたくなるPC」を目指して、一本一本のケーブルを丁寧に処理しています。
  291.                     </p>
  292.                 </div>
  293.             </article>
  294.             
  295.         </div>
  296.         
  297.         {# もっと見る #}
  298.         <div class="nz-gallery-more">
  299.             <p class="nz-gallery-more-text">
  300.                 ここに掲載している以外にも、多数の制作実績がございます。<br>
  301.                 SNSでも随時制作の様子を公開しています。
  302.             </p>
  303.             <div class="nz-gallery-sns">
  304.                 <a href="https://twitter.com/noiezam_com" target="_blank" rel="noopener" class="nz-btn nz-btn-outline">
  305.                     <span class="nz-btn-icon">𝕏</span>
  306.                     X（Twitter）で最新情報をチェック
  307.                 </a>
  308.                 <a href="https://www.youtube.com/channel/UC1j3WpYSBAys0HTaPjFcg6g" target="_blank" rel="noopener" class="nz-btn nz-btn-outline">
  309.                     <span class="nz-btn-icon">▶️</span>
  310.                     YouTubeで制作動画を見る
  311.                 </a>
  312.             </div>
  313.         </div>
  314.     </section>
  316.     {# お客様の声 #}
  317.     <section class="nz-section nz-reviews-section">
  318.         <h2 class="nz-section-title">
  319.             <span class="nz-section-title-en">CUSTOMER VOICE</span>
  320.             <span class="nz-section-title-ja">お客様の声</span>
  321.         </h2>
  322.         
  323.         <div class="nz-reviews-grid">
  324.             <article class="nz-review-card" itemscope itemtype="https://schema.org/Review">
  325.                 <div class="nz-review-rating" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  326.                     <span class="nz-stars">★★★★★</span>
  327.                     <meta itemprop="ratingValue" content="5">
  328.                     <meta itemprop="bestRating" content="5">
  329.                 </div>
  330.                 <p class="nz-review-text" itemprop="reviewBody">
  331.                     「初めてのゲーミングPCでしたが、丁寧にヒアリングしていただき、
  332.                     予算内で理想のPCが手に入りました。配線の美しさに感動しました！」
  333.                 </p>
  334.                 <div class="nz-review-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
  335.                     <span itemprop="name">大阪府 K様（20代）</span>
  336.                 </div>
  337.             </article>
  338.             
  339.             <article class="nz-review-card" itemscope itemtype="https://schema.org/Review">
  340.                 <div class="nz-review-rating" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  341.                     <span class="nz-stars">★★★★★</span>
  342.                     <meta itemprop="ratingValue" content="5">
  343.                     <meta itemprop="bestRating" content="5">
  344.                 </div>
  345.                 <p class="nz-review-text" itemprop="reviewBody">
  346.                     「他店では断られた特殊な構成も快く対応していただきました。
  347.                     店主さんの知識量がすごい。アフターサポートも迅速で安心です。」
  348.                 </p>
  349.                 <div class="nz-review-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
  350.                     <span itemprop="name">兵庫県 T様（30代）</span>
  351.                 </div>
  352.             </article>
  353.             
  354.             <article class="nz-review-card" itemscope itemtype="https://schema.org/Review">
  355.                 <div class="nz-review-rating" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
  356.                     <span class="nz-stars">★★★★★</span>
  357.                     <meta itemprop="ratingValue" content="5">
  358.                     <meta itemprop="bestRating" content="5">
  359.                 </div>
  360.                 <p class="nz-review-text" itemprop="reviewBody">
  361.                     「2台目もお願いしました。量販店のBTOと違って、本当に自分だけのPCという感じがします。
  362.                     ずっとお世話になりたいお店です。」
  363.                 </p>
  364.                 <div class="nz-review-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
  365.                     <span itemprop="name">東京都 S様（40代）</span>
  366.                 </div>
  367.             </article>
  368.         </div>
  369.     </section>
  371.     {# CTA #}
  372.     <section class="nz-section nz-cta-section">
  373.         <div class="nz-cta-box">
  374.             <h2 class="nz-cta-title">あなたのPCも作りませんか？</h2>
  375.             <p class="nz-cta-desc">
  376.                 世界一の美配線で、あなただけの一台をお作りします。<br>
  377.                 見積もり無料・相談無料。お気軽にどうぞ。
  378.             </p>
  379.             <div class="nz-cta-buttons">
  380.                 <a href="https://noiezam.com/contact" class="nz-btn nz-btn-primary nz-btn-lg">
  381.                     <span class="nz-btn-icon">📝</span>
  382.                     お問い合わせ・ご相談
  383.                 </a>
  384.                 <a href="/user_data/guide_first" class="nz-btn nz-btn-secondary nz-btn-lg">
  385.                     <span class="nz-btn-icon">📖</span>
  386.                     初めての方へ
  387.                 </a>
  388.             </div>
  389.         </div>
  390.     </section>
  392. </div>
  393. {% endblock %}
  395. {% block javascript %}
  396.     {{ parent() }}
  397.     <script>
  398.     // ギャラリーフィルター機能
  399.     document.addEventListener('DOMContentLoaded', function() {
  400.         const filterBtns = document.querySelectorAll('.nz-filter-btn[data-filter]');
  401.         const priceBtns = document.querySelectorAll('.nz-filter-btn[data-price]');
  402.         const cards = document.querySelectorAll('.nz-gallery-card');
  403.         
  404.         let currentFilter = 'all';
  405.         let currentPrice = 'all';
  406.         
  407.         function filterCards() {
  408.             cards.forEach(card => {
  409.                 const category = card.dataset.category;
  410.                 const price = card.dataset.price;
  411.                 
  412.                 const matchCategory = currentFilter === 'all' || category === currentFilter || category === 'all';
  413.                 const matchPrice = currentPrice === 'all' || price === currentPrice || price === 'all';
  414.                 
  415.                 if (matchCategory && matchPrice) {
  416.                     card.style.display = '';
  417.                     card.style.animation = 'fadeIn 0.3s ease';
  418.                 } else {
  419.                     card.style.display = 'none';
  420.                 }
  421.             });
  422.         }
  423.         
  424.         filterBtns.forEach(btn => {
  425.             btn.addEventListener('click', function() {
  426.                 filterBtns.forEach(b => b.classList.remove('active'));
  427.                 this.classList.add('active');
  428.                 currentFilter = this.dataset.filter;
  429.                 filterCards();
  430.             });
  431.         });
  432.         
  433.         priceBtns.forEach(btn => {
  434.             btn.addEventListener('click', function() {
  435.                 priceBtns.forEach(b => b.classList.remove('active'));
  436.                 this.classList.add('active');
  437.                 currentPrice = this.dataset.price;
  438.                 filterCards();
  439.             });
  440.         });
  441.     });
  442.     </script>
  443.     
  444.     {# 構造化データ - ImageGallery #}
  445.     <script type="application/ld+json">
  446.     {
  447.         "@context": "https://schema.org",
  448.         "@type": "ImageGallery",
  449.         "name": "PC'Artsのいえあ侍 制作実績ギャラリー",
  450.         "description": "当店で制作したフルオーダーPCの実績をご紹介。世界一の美配線をご覧ください。",
  451.         "url": "https://noiezam.com/guide/gallery",
  452.         "mainEntity": {
  453.             "@type": "ItemList",
  454.             "numberOfItems": 6,
  455.             "itemListElement": [
  456.                 {
  457.                     "@type": "ListItem",
  458.                     "position": 1,
  459.                     "item": {
  460.                         "@type": "Product",
  461.                         "name": "RGB輝くハイエンドゲーミングPC",
  462.                         "description": "Intel Core i7-14700K / RTX 4070 Ti SUPER搭載のゲーミングPC",
  463.                         "offers": {
  464.                             "@type": "Offer",
  465.                             "price": "280000",
  466.                             "priceCurrency": "JPY"
  467.                         }
  468.                     }
  469.                 }
  470.             ]
  471.         }
  472.     }
  473.     </script>
  474. {% endblock %}