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

Open in your IDE?
  1. {#
  2. 店主・スタッフ紹介 - EC-CUBE 4.2 bynoiezam テーマ用
  3. 配置先: app/template/bynoiezam/guide/staff.twig
  4. URL: /guide/staff
  5. #}
  7. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'guide_page staff_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-staff">
  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.                 大手量販店と違い、当店では店主が直接対応・制作を行います。<br>
  42.                 顔が見える安心感をお届けします。
  43.             </p>
  44.         </div>
  45.     </section>
  47.     {# 店主プロフィール #}
  48.     <section class="nz-section nz-profile-section">
  49.         <div class="nz-profile-card" itemscope itemtype="https://schema.org/Person">
  50.             <div class="nz-profile-image">
  51.                 <img src="{{ asset('assets/img/staff/noie-profile.jpg', 'user_data') }}" 
  52.                      alt="店主 南 明男（NOIE）" 
  53.                      itemprop="image"
  54.                      loading="lazy">
  55.                 <div class="nz-profile-badge">
  56.                     <span class="nz-badge-text">店主</span>
  57.                 </div>
  58.             </div>
  59.             <div class="nz-profile-content">
  60.                 <div class="nz-profile-header">
  61.                     <h2 class="nz-profile-name">
  62.                         <span class="nz-name-ja" itemprop="name">南 明男</span>
  63.                         <span class="nz-name-en" itemprop="alternateName">NOIE</span>
  64.                     </h2>
  65.                     <p class="nz-profile-title" itemprop="jobTitle">PC'Artsのいえあ侍 代表</p>
  66.                 </div>
  67.                 
  68.                 <div class="nz-profile-message">
  69.                     <h3 class="nz-message-title">ご挨拶</h3>
  70.                     <p class="nz-message-text" itemprop="description">
  71.                         はじめまして、PC'Artsのいえあ侍 代表のNOIEこと南 明男です。
  72.                     </p>
  73.                     <p class="nz-message-text">
  74.                         今どこを見渡しても、パソコンは売っています。<br>
  75.                         でも、本当に自分が必要で、またここで買いたい。<br>
  76.                         そう思えるパソコンを作りたい。<br>
  77.                         その想いでこの店を始めました。
  78.                     </p>
  79.                     <p class="nz-message-text">
  80.                         大手量販店やBTOメーカーでは、誰が作ったかわかりません。<br>
  81.                         でも当店は違います。<br>
  82.                         お客様のPCは、すべて私が責任を持って組み立てています。
  83.                     </p>
  84.                     <p class="nz-message-text">
  85.                         「世界一の美配線」を目指して、見えない部分にもこだわります。<br>
  86.                         一本一本のケーブルを丁寧に処理し、<br>
  87.                         開けて見せたくなるPCをお作りします。
  88.                     </p>
  89.                     <p class="nz-message-text">
  90.                         PCに詳しくなくても大丈夫。<br>
  91.                         用途とご予算をお聞かせいただければ、<br>
  92.                         最適な一台をご提案いたします。
  93.                     </p>
  94.                     <p class="nz-message-text nz-message-signature">
  95.                         お気軽にご相談ください。<br>
  96.                         あなたとの出会いを楽しみにしています。
  97.                     </p>
  98.                 </div>
  99.                 
  100.                 <div class="nz-profile-details">
  101.                     <h3 class="nz-details-title">プロフィール</h3>
  102.                     <dl class="nz-details-list">
  103.                         <div class="nz-detail-item">
  104.                             <dt class="nz-detail-label">経歴</dt>
  105.                             <dd class="nz-detail-value">
  106.                                 PC歴20年以上。自作PCに目覚めたのは中学生の頃。
  107.                                 数々の自作経験を経て、PC'Artsのいえあ侍を開業。
  108.                             </dd>
  109.                         </div>
  110.                         <div class="nz-detail-item">
  111.                             <dt class="nz-detail-label">得意分野</dt>
  112.                             <dd class="nz-detail-value">
  113.                                 美配線、ゲーミングPC制作、ハードウェアトラブルシューティング
  114.                             </dd>
  115.                         </div>
  116.                         <div class="nz-detail-item">
  117.                             <dt class="nz-detail-label">趣味</dt>
  118.                             <dd class="nz-detail-value">
  119.                                 ゲーム（VALORANT等）、PC制作動画の配信
  120.                             </dd>
  121.                         </div>
  122.                     </dl>
  123.                 </div>
  124.                 
  125.                 <div class="nz-profile-sns">
  126.                     <h3 class="nz-sns-title">SNS・メディア</h3>
  127.                     <div class="nz-sns-links">
  128.                         <a href="https://twitter.com/noiezam_com" target="_blank" rel="noopener" class="nz-sns-link nz-sns-twitter" itemprop="sameAs">
  129.                             <span class="nz-sns-icon">𝕏</span>
  130.                             <span class="nz-sns-name">@noiezam_com</span>
  131.                             <span class="nz-sns-followers">フォロワー1万人以上</span>
  132.                         </a>
  133.                         <a href="https://www.youtube.com/channel/UC1j3WpYSBAys0HTaPjFcg6g" target="_blank" rel="noopener" class="nz-sns-link nz-sns-youtube" itemprop="sameAs">
  134.                             <span class="nz-sns-icon">▶️</span>
  135.                             <span class="nz-sns-name">YouTube</span>
  136.                             <span class="nz-sns-desc">PC制作の様子を配信中</span>
  137.                         </a>
  138.                     </div>
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </section>
  144.     {# 当店の歴史 #}
  145.     <section class="nz-section nz-history-section">
  146.         <h2 class="nz-section-title">
  147.             <span class="nz-section-title-en">OUR HISTORY</span>
  148.             <span class="nz-section-title-ja">当店の歩み</span>
  149.         </h2>
  150.         
  151.         <div class="nz-timeline">
  152.             <div class="nz-timeline-item">
  153.                 <div class="nz-timeline-marker"></div>
  154.                 <div class="nz-timeline-content">
  155.                     <span class="nz-timeline-date">創業</span>
  156.                     <h3 class="nz-timeline-title">PC'Artsのいえあ侍 開業</h3>
  157.                     <p class="nz-timeline-desc">
  158.                         大阪府和泉市にてフルオーダーPC専門店として開業。
  159.                         「世界一の美配線」をモットーに、一台一台丁寧にPCを制作開始。
  160.                     </p>
  161.                 </div>
  162.             </div>
  163.             
  164.             <div class="nz-timeline-item">
  165.                 <div class="nz-timeline-marker"></div>
  166.                 <div class="nz-timeline-content">
  167.                     <span class="nz-timeline-date">2022年</span>
  168.                     <h3 class="nz-timeline-title">Valorant Noie-zam CUP 開催</h3>
  169.                     <p class="nz-timeline-desc">
  170.                         初開催ながら総勢400人以上が参加する大規模イベントに。
  171.                         ゲーミングコミュニティとの繋がりを深める。
  172.                     </p>
  173.                 </div>
  174.             </div>
  175.             
  176.             <div class="nz-timeline-item">
  177.                 <div class="nz-timeline-marker"></div>
  178.                 <div class="nz-timeline-content">
  179.                     <span class="nz-timeline-date">現在</span>
  180.                     <h3 class="nz-timeline-title">制作実績1,000台以上</h3>
  181.                     <p class="nz-timeline-desc">
  182.                         おかげさまで累計1,000台以上のPCを制作。
  183.                         全国からご注文をいただいています。
  184.                     </p>
  185.                 </div>
  186.             </div>
  187.         </div>
  188.     </section>
  190.     {# こだわり #}
  191.     <section class="nz-section nz-philosophy-section">
  192.         <h2 class="nz-section-title">
  193.             <span class="nz-section-title-en">OUR PHILOSOPHY</span>
  194.             <span class="nz-section-title-ja">私のこだわり</span>
  195.         </h2>
  196.         
  197.         <div class="nz-philosophy-grid">
  198.             <article class="nz-philosophy-card">
  199.                 <div class="nz-philosophy-icon">🎨</div>
  200.                 <h3 class="nz-philosophy-title">美配線へのこだわり</h3>
  201.                 <p class="nz-philosophy-text">
  202.                     「見えない部分にこそ真価が問われる」<br>
  203.                     ケーブル一本一本を丁寧に整理し、美しさとエアフローを両立させます。
  204.                     開けて見せたくなるPCを目指しています。
  205.                 </p>
  206.             </article>
  207.             
  208.             <article class="nz-philosophy-card">
  209.                 <div class="nz-philosophy-icon">🤝</div>
  210.                 <h3 class="nz-philosophy-title">対話を大切に</h3>
  211.                 <p class="nz-philosophy-text">
  212.                     お客様の「やりたいこと」をしっかりヒアリングします。
  213.                     スペックの押し売りはしません。用途に合った最適な構成をご提案します。
  214.                 </p>
  215.             </article>
  216.             
  217.             <article class="nz-philosophy-card">
  218.                 <div class="nz-philosophy-icon">🔧</div>
  219.                 <h3 class="nz-philosophy-title">長く使える一台を</h3>
  220.                 <p class="nz-philosophy-text">
  221.                     売ったら終わりではありません。
  222.                     アフターサポート、アップグレード相談、修理対応まで、
  223.                     長くお付き合いします。
  224.                 </p>
  225.             </article>
  226.         </div>
  227.     </section>
  229.     {# 実績数 #}
  230.     <section class="nz-section nz-achievement-section">
  231.         <div class="nz-achievement-grid">
  232.             <div class="nz-achievement-item">
  233.                 <span class="nz-achievement-number">1,000<small>台</small></span>
  234.                 <span class="nz-achievement-label">以上の制作実績</span>
  235.             </div>
  236.             <div class="nz-achievement-item">
  237.                 <span class="nz-achievement-number">10,000<small>人</small></span>
  238.                 <span class="nz-achievement-label">以上のXフォロワー</span>
  239.             </div>
  240.             <div class="nz-achievement-item">
  241.                 <span class="nz-achievement-number">98<small>%</small></span>
  242.                 <span class="nz-achievement-label">顧客満足度</span>
  243.             </div>
  244.         </div>
  245.     </section>
  247.     {# CTA #}
  248.     <section class="nz-section nz-cta-section">
  249.         <div class="nz-cta-box">
  250.             <h2 class="nz-cta-title">お気軽にご相談ください</h2>
  251.             <p class="nz-cta-desc">
  252.                 PCに詳しくなくても大丈夫。<br>
  253.                 用途とご予算をお聞かせいただければ、最適な一台をご提案します。
  254.             </p>
  255.             <div class="nz-cta-buttons">
  256.                 <a href="https://noiezam.com/estimate/simulator" class="nz-btn nz-btn-primary nz-btn-lg">
  257.                     <span class="nz-btn-icon">💰</span>
  258.                     簡単見積りシミュレーター
  259.                 </a>
  260.             </div>
  261.             <div class="nz-cta-contact">
  262.                 <p class="nz-cta-contact-title">個別相談はこちら</p>
  263.                 <div class="nz-cta-contact-links">
  264.                     <a href="https://twitter.com/noiezam_com" target="_blank" rel="noopener" class="nz-contact-link nz-contact-x">
  265.                         <span class="nz-contact-icon">𝕏</span>
  266.                         <span>X</span>
  267.                     </a>
  268.                     <a href="https://discord.gg/KkAZXwkUQP" target="_blank" rel="noopener" class="nz-contact-link nz-contact-discord">
  269.                         <span class="nz-contact-icon">💬</span>
  270.                         <span>Discord</span>
  271.                     </a>
  272.                     <a href="https://noiezam.com/contact" class="nz-contact-link nz-contact-form">
  273.                         <span class="nz-contact-icon">📝</span>
  274.                         <span>お問い合わせフォーム</span>
  275.                     </a>
  276.                     <a href="tel:080-9993-5131" class="nz-contact-link nz-contact-tel">
  277.                         <span class="nz-contact-icon">📞</span>
  278.                         <span>080-9993-5131</span>
  279.                     </a>
  280.                 </div>
  281.             </div>
  282.         </div>
  283.     </section>
  285. </div>
  286. {% endblock %}
  288. {% block javascript %}
  289.     {{ parent() }}
  290.     
  291.     {# 構造化データ - Person & Organization #}
  292.     <script type="application/ld+json">
  293.     {
  294.         "@context": "https://schema.org",
  295.         "@type": "Person",
  296.         "name": "南 明男",
  297.         "alternateName": "NOIE",
  298.         "jobTitle": "PC'Artsのいえあ侍 代表",
  299.         "description": "大阪府和泉市のフルオーダーPCショップ店主。世界一の美配線を目指し、一台一台丁寧にPCを制作。",
  300.         "image": "https://noiezam.com/html/user_data/assets/img/staff/noie-profile.jpg",
  301.         "sameAs": [
  302.             "https://twitter.com/noiezam_com",
  303.             "https://www.youtube.com/channel/UC1j3WpYSBAys0HTaPjFcg6g"
  304.         ],
  305.         "worksFor": {
  306.             "@type": "ComputerStore",
  307.             "name": "PC'Artsのいえあ侍",
  308.             "url": "https://noiezam.com"
  309.         }
  310.     }
  311.     </script>
  312. {% endblock %}