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

Open in your IDE?
  1. {#
  2. 初めての方へ - EC-CUBE 4.2 bynoiezam テーマ用
  3. 配置先: app/template/bynoiezam/guide/first.twig
  4. URL: /guide/first
  5. #}
  7. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'guide_page first_time_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">
  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'Artsのいえあ侍は、大阪府和泉市にある<br class="sp-only">フルオーダーPC専門店です。<br>
  42.                 世界一の美配線と、顔が見える安心感で<br class="sp-only">あなたの理想の一台をお作りします。
  43.             </p>
  44.             <div class="nz-hero-cta">
  45.                 <a href="https://noiezam.com/contact" class="nz-btn nz-btn-primary">
  46.                     <span class="nz-btn-icon">📝</span>
  47.                     お問い合わせ・ご相談
  48.                 </a>
  49.                 <a href="https://noiezam.com/contact" class="nz-btn nz-btn-secondary">
  50.                     <span class="nz-btn-icon">💬</span>
  51.                     まずは相談する
  52.                 </a>
  53.             </div>
  54.         </div>
  55.     </section>
  57.     {# 3つの強み #}
  58.     <section class="nz-section nz-strengths-section">
  59.         <h2 class="nz-section-title">
  60.             <span class="nz-section-title-en">WHY CHOOSE US</span>
  61.             <span class="nz-section-title-ja">選ばれる3つの理由</span>
  62.         </h2>
  63.         
  64.         <div class="nz-strengths-grid">
  65.             <article class="nz-strength-card">
  66.                 <div class="nz-strength-icon">🎨</div>
  67.                 <h3 class="nz-strength-title">世界一の美配線</h3>
  68.                 <p class="nz-strength-desc">
  69.                     見えない部分にこそこだわりを。<br>
  70.                     整然とした配線は、エアフローを最適化し<br>
  71.                     パフォーマンスと耐久性を高めます。
  72.                 </p>
  73.             </article>
  74.             
  75.             <article class="nz-strength-card">
  76.                 <div class="nz-strength-icon">👤</div>
  77.                 <h3 class="nz-strength-title">顔が見える安心感</h3>
  78.                 <p class="nz-strength-desc">
  79.                     大手量販店と違い、店主NOIEが<br>
  80.                     直接対応・制作を行います。<br>
  81.                     誰が作ったか分かる安心感をお届けします。
  82.                 </p>
  83.             </article>
  84.             
  85.             <article class="nz-strength-card">
  86.                 <div class="nz-strength-icon">🛡️</div>
  87.                 <h3 class="nz-strength-title">充実のサポート</h3>
  88.                 <p class="nz-strength-desc">
  89.                     購入後も安心のサポート体制。<br>
  90.                     修理・メンテナンス・アップグレード相談まで<br>
  91.                     長くお付き合いいたします。
  92.                 </p>
  93.             </article>
  94.         </div>
  95.     </section>
  97.     {# フルオーダーの流れ #}
  98.     <section class="nz-section nz-flow-section">
  99.         <h2 class="nz-section-title">
  100.             <span class="nz-section-title-en">ORDER FLOW</span>
  101.             <span class="nz-section-title-ja">ご注文の流れ</span>
  102.         </h2>
  103.         
  104.         <div class="nz-flow-timeline">
  105.             <div class="nz-flow-step">
  106.                 <div class="nz-flow-number">1</div>
  107.                 <div class="nz-flow-content">
  108.                     <h3 class="nz-flow-title">お問い合わせ・ヒアリング</h3>
  109.                     <p class="nz-flow-desc">
  110.                         お問い合わせフォーム、X（Twitter）DM、メールからご連絡ください。
  111.                         ご予算、用途、ご希望をお聞かせください。
  112.                     </p>
  113.                     <p class="nz-flow-time">
  114.                         <span class="nz-flow-time-icon">⏱️</span>
  115.                         所要時間: 即日〜1営業日
  116.                     </p>
  117.                 </div>
  118.             </div>
  119.             
  120.             <div class="nz-flow-step">
  121.                 <div class="nz-flow-number">2</div>
  122.                 <div class="nz-flow-content">
  123.                     <h3 class="nz-flow-title">お見積り提示</h3>
  124.                     <p class="nz-flow-desc">
  125.                         ヒアリング内容をもとに、最適なパーツ構成とお見積りをご提案します。
  126.                         ご納得いただけるまで何度でもご相談ください。
  127.                     </p>
  128.                     <p class="nz-flow-time">
  129.                         <span class="nz-flow-time-icon">⏱️</span>
  130.                         所要時間: 1〜3営業日
  131.                     </p>
  132.                 </div>
  133.             </div>
  134.             
  135.             <div class="nz-flow-step">
  136.                 <div class="nz-flow-number">3</div>
  137.                 <div class="nz-flow-content">
  138.                     <h3 class="nz-flow-title">ご注文・パーツ発注</h3>
  139.                     <p class="nz-flow-desc">
  140.                         お見積りにご納得いただけましたら、正式にご注文となります。
  141.                         お支払い確認後、パーツの発注を行います。
  142.                     </p>
  143.                     <p class="nz-flow-time">
  144.                         <span class="nz-flow-time-icon">⏱️</span>
  145.                         所要時間: 3〜7営業日
  146.                     </p>
  147.                 </div>
  148.             </div>
  149.             
  150.             <div class="nz-flow-step">
  151.                 <div class="nz-flow-number">4</div>
  152.                 <div class="nz-flow-content">
  153.                     <h3 class="nz-flow-title">組み立て・検証</h3>
  154.                     <p class="nz-flow-desc">
  155.                         パーツ到着後、丁寧に組み立てを行います。
  156.                         動作検証・負荷テストを実施し、安定動作を確認します。
  157.                     </p>
  158.                     <p class="nz-flow-time">
  159.                         <span class="nz-flow-time-icon">⏱️</span>
  160.                         所要時間: 2〜5営業日
  161.                     </p>
  162.                 </div>
  163.             </div>
  164.             
  165.             <div class="nz-flow-step">
  166.                 <div class="nz-flow-number">5</div>
  167.                 <div class="nz-flow-content">
  168.                     <h3 class="nz-flow-title">納品・アフターサポート</h3>
  169.                     <p class="nz-flow-desc">
  170.                         店頭お渡しまたは配送にてお届けします。
  171.                         セットアップのご説明、その後のサポートもお任せください。
  172.                     </p>
  173.                     <p class="nz-flow-time">
  174.                         <span class="nz-flow-time-icon">⏱️</span>
  175.                         所要時間: 1〜3営業日
  176.                     </p>
  177.                 </div>
  178.             </div>
  179.         </div>
  180.         
  181.         <p class="nz-flow-note">
  182.             ※ 所要時間はパーツの在庫状況により変動する場合があります。<br>
  183.             お急ぎの場合は事前にご相談ください。
  184.         </p>
  185.     </section>
  187.     {# よくある質問 #}
  188.     <section class="nz-section nz-faq-section">
  189.         <h2 class="nz-section-title">
  190.             <span class="nz-section-title-en">FAQ</span>
  191.             <span class="nz-section-title-ja">よくあるご質問</span>
  192.         </h2>
  193.         
  194.         <div class="nz-faq-list" itemscope itemtype="https://schema.org/FAQPage">
  195.             <details class="nz-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  196.                 <summary class="nz-faq-question" itemprop="name">
  197.                     初めてPCを買うのですが、フルオーダーは難しくないですか？
  198.                 </summary>
  199.                 <div class="nz-faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  200.                     <div itemprop="text">
  201.                         <p>全く問題ありません！用途（ゲーム、動画編集、仕事など）とご予算をお伝えいただければ、最適な構成をご提案いたします。パソコンに詳しくなくても大丈夫です。</p>
  202.                     </div>
  203.                 </div>
  204.             </details>
  205.             
  206.             <details class="nz-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  207.                 <summary class="nz-faq-question" itemprop="name">
  208.                     見積もりだけでも大丈夫ですか？
  209.                 </summary>
  210.                 <div class="nz-faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  211.                     <div itemprop="text">
  212.                         <p>もちろんです！見積もりは完全無料です。お気軽にご相談ください。納得いただけるまで何度でも見積もり調整いたします。</p>
  213.                     </div>
  214.                 </div>
  215.             </details>
  216.             
  217.             <details class="nz-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  218.                 <summary class="nz-faq-question" itemprop="name">
  219.                     大阪府外ですが、注文できますか？
  220.                 </summary>
  221.                 <div class="nz-faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  222.                     <div itemprop="text">
  223.                         <p>はい、全国発送対応しております！配送料は別途ご案内いたします。梱包には細心の注意を払い、安全にお届けします。</p>
  224.                     </div>
  225.                 </div>
  226.             </details>
  227.             
  228.             <details class="nz-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  229.                 <summary class="nz-faq-question" itemprop="name">
  230.                     支払い方法は何がありますか？
  231.                 </summary>
  232.                 <div class="nz-faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  233.                     <div itemprop="text">
  234.                         <p>銀行振込、クレジットカード（PayPal）に対応しております。高額商品の場合は分割払いのご相談も承ります。</p>
  235.                     </div>
  236.                 </div>
  237.             </details>
  238.             
  239.             <details class="nz-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  240.                 <summary class="nz-faq-question" itemprop="name">
  241.                     保証はありますか？
  242.                 </summary>
  243.                 <div class="nz-faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  244.                     <div itemprop="text">
  245.                         <p>当店でお作りしたPCには初期不良保証がございます。また、各パーツにはメーカー保証が適用されます。詳細は<a href="/user_data/guide_support">サポートページ</a>をご確認ください。</p>
  246.                     </div>
  247.                 </div>
  248.             </details>
  249.             
  250.             <details class="nz-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  251.                 <summary class="nz-faq-question" itemprop="name">
  252.                     既存のPCの修理やアップグレードも対応していますか？
  253.                 </summary>
  254.                 <div class="nz-faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  255.                     <div itemprop="text">
  256.                         <p>はい、対応しております！他店で購入されたPCでも大丈夫です。症状やご希望をお聞かせください。</p>
  257.                     </div>
  258.                 </div>
  259.             </details>
  260.         </div>
  261.     </section>
  263.     {# CTA #}
  264.     <section class="nz-section nz-cta-section">
  265.         <div class="nz-cta-box">
  266.             <h2 class="nz-cta-title">まずはお気軽にご相談ください</h2>
  267.             <p class="nz-cta-desc">
  268.                 見積もり無料・相談無料。<br>
  269.                 あなたの理想のPC、一緒に考えましょう。
  270.             </p>
  271.             <div class="nz-cta-buttons">
  272.                 <a href="https://noiezam.com/contact" class="nz-btn nz-btn-primary nz-btn-lg">
  273.                     <span class="nz-btn-icon">📝</span>
  274.                     お問い合わせ・ご相談
  275.                 </a>
  276.                 <a href="https://noiezam.com/contact" class="nz-btn nz-btn-secondary nz-btn-lg">
  277.                     <span class="nz-btn-icon">💬</span>
  278.                     お問い合わせ
  279.                 </a>
  280.             </div>
  281.             <div class="nz-cta-contact">
  282.                 <p class="nz-cta-tel">
  283.                     <span class="nz-cta-tel-icon">📞</span>
  284.                     <a href="tel:080-5706-0021">080-5706-0021</a>
  285.                 </p>
  286.                 <p class="nz-cta-sns">
  287.                     <a href="https://twitter.com/noiezam_com" target="_blank" rel="noopener">
  288.                         <span class="nz-sns-icon">𝕏</span> @noiezam_com
  289.                     </a>
  290.                 </p>
  291.             </div>
  292.         </div>
  293.     </section>
  295. </div>
  296. {% endblock %}
  298. {% block javascript %}
  299.     {{ parent() }}
  300.     <script>
  301.     // FAQのアコーディオン動作（アクセシビリティ対応）
  302.     document.querySelectorAll('.nz-faq-item').forEach(item => {
  303.         item.addEventListener('toggle', function() {
  304.             if (this.open) {
  305.                 // Google Analytics イベント送信（設定している場合）
  306.                 if (typeof gtag === 'function') {
  307.                     gtag('event', 'faq_open', {
  308.                         'event_category': 'FAQ',
  309.                         'event_label': this.querySelector('.nz-faq-question').textContent
  310.                     });
  311.                 }
  312.             }
  313.         });
  314.     });
  315.     </script>
  316.     
  317.     {# 構造化データ - LocalBusiness #}
  318.     <script type="application/ld+json">
  319.     {
  320.         "@context": "https://schema.org",
  321.         "@type": "ComputerStore",
  322.         "@id": "https://noiezam.com/#organization",
  323.         "name": "PC'Artsのいえあ侍",
  324.         "alternateName": "PCショップ のいえあ侍",
  325.         "url": "https://noiezam.com",
  326.         "logo": "https://noiezam.com/html/user_data/assets/img/logo.png",
  327.         "image": "https://noiezam.com/html/user_data/assets/img/og-image.jpg",
  328.         "description": "大阪府和泉市のフルオーダーPCショップ。世界一の美配線で、あなただけの一台をお作りします。",
  329.         "telephone": "080-5706-0021",
  330.         "email": "support@noiezam.com",
  331.         "address": {
  332.             "@type": "PostalAddress",
  333.             "streetAddress": "伏屋町5-2-14",
  334.             "addressLocality": "和泉市",
  335.             "addressRegion": "大阪府",
  336.             "postalCode": "594-0031",
  337.             "addressCountry": "JP"
  338.         },
  339.         "geo": {
  340.             "@type": "GeoCoordinates",
  341.             "latitude": 34.4833,
  342.             "longitude": 135.4333
  343.         },
  344.         "openingHoursSpecification": {
  345.             "@type": "OpeningHoursSpecification",
  346.             "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  347.             "opens": "10:00",
  348.             "closes": "19:00"
  349.         },
  350.         "priceRange": "¥¥",
  351.         "sameAs": [
  352.             "https://twitter.com/noiezam_com",
  353.             "https://www.youtube.com/channel/UC1j3WpYSBAys0HTaPjFcg6g"
  354.         ]
  355.     }
  356.     </script>
  357. {% endblock %}