Galactus
Design System ギャラクタスのデザインシステム

<a href="/contact/" class="btn btn-default">無料で相談する</a>

<a href="/works/" class="btn btn-skelton">制作実績を見る</a>

<a href="/download/" class="btn btn-white">サービス資料を受け取る</a>

<a href="/contact/" class="btn btn-default btn-contact">お問い合わせ</a>
<a href="/download/" class="btn btn-default btn-pdf">会社案内（PDF）</a>
<a href="/download/" class="btn btn-default btn-download">資料をダウンロード</a>
<a href="https://g.page/galactus_llc" class="btn btn-default btn-external" target="_blank" rel="noopener">Googleマップで見る</a>

<a href="/faq/" class="btn btn-default btn-small">よくある質問</a>
<a href="/estimate/" class="btn btn-default btn-full">見積もりを依頼する</a>

<ul class="btns_list">
  <li><a href="/contact/" class="btn btn-default">無料で相談する</a></li>
  <li><a href="/estimate/" class="btn btn-skelton">見積もりを依頼する</a></li>
</ul>

<a href="/services/" class="link">サービス一覧</a>
<a href="https://g.page/galactus_llc" class="link link_external" target="_blank" rel="noopener">Googleマップ</a>

<p>制作の進め方は<a href="/flow/">制作の流れ</a>のページで、工程ごとにご紹介しています。</p>

<ul class="links_list links_list-3">
  <li><a href="/company/" class="link">会社情報</a></li>
  <li><a href="/company/features/" class="link">私たちの特長</a></li>
  <li><a href="/company/philosophy/" class="link">経営理念</a></li>
  <li><a href="/flow/" class="link">制作の流れ</a></li>
  <li><a href="/services/price/" class="link">料金</a></li>
  <li><a href="/faq/" class="link">よくあるご質問</a></li>
</ul>

<a href="/estimate/" class="btn link_bnr">
  <span class="icon material-symbols-outlined" aria-hidden="true">calculate</span>
  <p>お見積もり依頼フォーム<small>お見積もりは無料です</small></p>
</a>

<a href="tel:050-3700-4132" class="tel_box">
  <span class="number">050-3700-4132</span>
  <span class="reception">（受付：平日 10:00～19:00）</span>
</a>

<div class="box">
  <p class="box_title">少数精鋭のチーム</p>
  <p class="box_desc">各分野のプロと連携しながら、制作工程の80%以上を社内で完結させています。</p>
</div>
<a href="/company/features/" class="box">
  <p class="box_title">私たちの特長</p>
  <p class="box_desc">リンクになるボックスは、枠線の色と右下の三角形で押せることを示します。</p>
</a>

<div class="box box-icon">
  <span class="icon material-symbols-outlined" aria-hidden="true">forum</span>
  <div class="content">
    <p class="box_title">密なコミュニケーション</p>
    <p class="box_desc">常時1〜2名の担当ディレクターが、制作から運用まで伴走します。</p>
  </div>
</div>
<a href="/flow/" class="box box-icon">
  <span class="icon material-symbols-outlined" aria-hidden="true">route</span>
  <div class="content">
    <p class="box_title">制作の流れ</p>
    <p class="box_desc">リンクの場合は、ホバーでアイコンも色が変わります。</p>
  </div>
</a>

<a href="/services/creative/" class="box box-icon">
  <span class="icon material-symbols-outlined" aria-hidden="true">language</span>
  <div class="content"><p class="box_title">Webサイト制作</p></div>
</a>
<a href="/services/operation/" class="box box-icon">
  <span class="icon material-symbols-outlined" aria-hidden="true">build</span>
  <div class="content"><p class="box_title">保守・運用</p></div>
</a>
<a href="/services/marketing/" class="box box-icon">
  <span class="icon material-symbols-outlined" aria-hidden="true">insights</span>
  <div class="content"><p class="box_title">マーケティング支援</p></div>
</a>

<div class="box-message">
  <p>ご相談・お見積もりは無料です。<br>まずはお気軽にお問い合わせください。</p>
</div>

<div class="box-notes">
  <p>※ 料金はすべて税抜で表示しています。</p>
  <p>※ 内容は予告なく変更となる場合があります。</p>
</div>

<div class="section_inner">
  <p class="lead">小さなチームだからこそ、大手に比べて費用を抑えられ、対応もスピーディで柔軟です。</p>
</div>

---
import BlogCard from '@/components/BlogCard.astro';
import { getBlogPosts } from '@/lib/wordpress';
const posts = await getBlogPosts();
---
<ul class="blog_archive_list">
  {posts.map((post) => <li><BlogCard post={post} /></li>)}
</ul>

---
import WorksCard from '@/components/WorksCard.astro';
import { getWorks } from '@/lib/wordpress';
const works = await getWorks();
---
<ul class="works_archive_list">
  {works.map((work) => <li><WorksCard work={work} /></li>)}
</ul>

<div class="grid">
  <div class="grid-col-6 grid-col-lg-3"><a class="front-solution_box" href="/solutions/choosing-partner/"><span>Web制作会社の選び方がわからない</span></a></div>
  <div class="grid-col-6 grid-col-lg-3"><a class="front-solution_box" href="/solutions/osaka-local/"><span>大阪近辺で会って話せる制作会社がいい</span></a></div>
  <div class="grid-col-6 grid-col-lg-3"><a class="front-solution_box" href="/solutions/budget-friendly/"><span>予算に合った提案がほしい</span></a></div>
  <div class="grid-col-6 grid-col-lg-3"><a class="front-solution_box" href="/solutions/renewal/"><span>古いホームページをリニューアルしたい</span></a></div>
</div>

<h2 class="page_section_title">ホームページ制作</h2>

<h2 class="page_section_title-en" data-title-en="Our Services">
  <span class="ja">サービス一覧</span>
</h2>

<h2 class="front-section_title" data-title-en="About Us">
  <span class="ja">私たちについて</span>
</h2>

<h3 class="section_title_h3">制作の進め方</h3>
<h3 class="section_title_h3 numbered" data-number="01">ヒアリング</h3>
<h3 class="section_title_h3">
  <span class="icon material-symbols-outlined" aria-hidden="true">schedule</span>制作期間の目安
</h3>

<h4 class="section_title_h4">対応できるサイトの種類</h4>
<h4 class="section_title_h4 numbered" data-number="02">企画・設計</h4>

<h5 class="section_title_h5">お支払いについて</h5>

<p class="lead">ホームページの制作から保守・運用、マーケティング支援まで。<br>大阪・阿倍野からワンストップでサポートします。</p>

<p class="catch">想いと<span>Webのパワー</span>で届けよう</p>

<ul class="list-disc">
  <li>コーポレートサイト</li>
  <li>ECサイト</li>
  <li>採用サイト</li>
  <li>LP（ランディングページ）</li>
</ul>

<ul class="list-check">
  <li>制作工程の80%以上を社内で完結</li>
  <li>常時1〜2名の担当ディレクターが伴走</li>
  <li>公開後の保守・運用までご相談可能</li>
</ul>

<ol class="flow_list">
  <li>
    <div class="step_box" data-number="01">
      <h3 class="step_box_title">提案・契約</h3>
      <p class="step_box_description">現状の分析と課題の抽出から、Webサイトによる解決策をご提案します。</p>
    </div>
  </li>
  <li>
    <div class="step_box" data-number="02">
      <h3 class="step_box_title">準備</h3>
      <p class="step_box_description">キックオフミーティングで前提条件を共有し、ヒアリングを行います。</p>
    </div>
  </li>
  <li>
    <div class="step_box" data-number="03">
      <h3 class="step_box_title">企画・設計</h3>
      <p class="step_box_description">サイトマップとワイヤーフレームで、構造と内容を具体化します。</p>
    </div>
  </li>
</ol>

<p class="notes">※ 大阪近郊であれば、無料でご訪問いたします。</p>

<dl class="dl-table">
  <dt>社名</dt><dd>合同会社ギャラクタス（GALACTUS LLC）</dd>
  <dt>設立</dt><dd>2018年7月2日</dd>
  <dt>所在地</dt><dd>大阪府大阪市阿倍野区昭和町2-19-24 青葉ビル7C号室</dd>
  <dt>事業内容</dt><dd>Webサイトの企画・制作・運用サポート</dd>
</dl>

<dl class="history_dl">
  <dt>2016年</dt><dd>代表の溝口が独立し、Web制作事務所「GALACTUS」を開業</dd>
  <dt>2018年</dt><dd>大阪市阿倍野区に拠点を移し、合同会社ギャラクタスを設立</dd>
  <dt>現在</dt><dd>新規制作・リニューアルで300サイト以上に携わる</dd>
</dl>

<div class="table_wrapper">
  <table class="table">
    <thead>
      <tr><th scope="col">ブレークポイント</th><th scope="col">画面幅</th><th scope="col">コンテナ幅</th></tr>
    </thead>
    <tbody>
      <tr><td>xs</td><td>0〜575px</td><td>画面幅に追従</td></tr>
      <tr><td>sm</td><td>576〜767px</td><td>540px</td></tr>
      <tr><td>md</td><td>768〜991px</td><td>720px</td></tr>
      <tr><td>lg</td><td>992〜1199px</td><td>960px</td></tr>
      <tr><td>xl</td><td>1200〜1399px</td><td>1140px</td></tr>
      <tr><td>xxl</td><td>1400px〜</td><td>1320px</td></tr>
    </tbody>
  </table>
</div>

<dl class="faq_box">
  <dt class="faq_box_q"><span class="faq_box_title">見積もりは無料ですか？</span></dt>
  <dd class="faq_box_a"><p>お見積もりは無料で承っております。正式にご依頼いただいた時点で、着手金のご請求となります。</p></dd>
</dl>
<dl class="faq_box">
  <dt class="faq_box_q"><span class="faq_box_title">打ち合わせに来てもらえますか？</span></dt>
  <dd class="faq_box_a"><p>大阪近郊であれば無料でお伺いいたします。場所によっては、お電話・メール・オンラインでのご対応とさせていただきます。</p></dd>
</dl>

<dl class="accordion_dl">
  <dt class="accordion_dl_title">どんなWebサイトの制作が可能ですか？</dt>
  <dd class="accordion_dl_content"><p>個人・法人、規模、業種・業態を問わず承っております。中小規模の企業や個人事業・商店のお客様から、特に多くのご依頼をいただいています。</p></dd>
</dl>

<details class="details">
  <summary class="details_title">ルール・制度の厳守にこだわる</summary>
  <div class="details_content">
    <p>社会で決められた法律、取引において定めた契約、社内の制度や規則。さまざまなルールに気を配りながら仕事をすることを大切にしています。</p>
  </div>
</details>

<dl class="column_box">
  <dt class="column_box_title">事務所はどこ？会って話せるの？</dt>
  <dd>
    <p>事務所は大阪市阿倍野区の昭和町にあります。大阪府内・近郊であれば訪問いたします。事務所へのご来訪や、オンラインでのお打ち合わせも可能です。</p>
  </dd>
</dl>

<div class="tab_wrapper">
  <div class="tab_index">
    <ul class="tab_index_list">
      <li><button type="button" data-target="#ds-tab-01" class="tab_index_button active">仕事に対する考え方</button></li>
      <li><button type="button" data-target="#ds-tab-02" class="tab_index_button">Web制作に対する考え方</button></li>
      <li><button type="button" data-target="#ds-tab-03" class="tab_index_button">お客様に対する考え方</button></li>
    </ul>
  </div>
  <div class="tab_content">
    <div id="ds-tab-01" class="tab_content_item active">
      <p>嘘偽りのない正直な仕事がモットーです。必要・不要、できる・できないをはっきりお伝えする、誠実なコミュニケーションを大切にしています。</p>
    </div>
    <div id="ds-tab-02" class="tab_content_item">
      <p>Webサイトは、商品やサービスの魅力を伝えるメディアとして無限の可能性を持っています。Webの活用で大きな飛躍を望める中小企業・個人事業を応援します。</p>
    </div>
    <div id="ds-tab-03" class="tab_content_item">
      <p>お客様を、プロジェクトをともに進める二人三脚のパートナーと考えています。外注先ではなく、Web担当のパートナーとして接していただくのが理想です。</p>
    </div>
  </div>
</div>

<div class="form_wrapper">
  <form class="contact-form wpcf7-form" novalidate>
    <dl class="form-dl">
      <dt><label for="ds-name">お名前<span class="required">必須</span></label></dt>
      <dd>
        <span class="wpcf7-form-control-wrap">
          <input type="text" id="ds-name" class="wpcf7-form-control wpcf7-text" placeholder="例：山田 太郎" autocomplete="name">
        </span>
      </dd>
      <dt><label for="ds-company">会社名<span class="optional">任意</span></label></dt>
      <dd>
        <span class="wpcf7-form-control-wrap">
          <input type="text" id="ds-company" class="wpcf7-form-control wpcf7-text" placeholder="例：株式会社〇〇" autocomplete="organization">
        </span>
      </dd>
      <dt><label for="ds-service">ご相談の種類<span class="optional">任意</span></label></dt>
      <dd>
        <span class="wpcf7-form-control-wrap">
          <select id="ds-service" class="wpcf7-form-control wpcf7-select">
            <option value="">－ 選択してください －</option>
            <option>ホームページの新規制作</option>
            <option>リニューアル</option>
            <option>保守・運用</option>
          </select>
        </span>
      </dd>
      <dt><label for="ds-message">お問い合わせ内容<span class="required">必須</span></label></dt>
      <dd>
        <span class="wpcf7-form-control-wrap">
          <textarea id="ds-message" class="wpcf7-form-control wpcf7-textarea" rows="5" placeholder="ご相談内容をご記入ください"></textarea>
        </span>
      </dd>
    </dl>
    <div class="privacy-acceptance">
      <span class="wpcf7-form-control-wrap">
        <span class="wpcf7-form-control wpcf7-acceptance">
          <span class="wpcf7-list-item">
            <label>
              <input type="checkbox" name="ds-privacy" value="1">
              <span class="wpcf7-list-item-label"><a href="/privacy/">プライバシーポリシー</a>に同意します</span>
            </label>
          </span>
        </span>
      </span>
    </div>
    <p class="form-submit">
      <button type="submit" class="btn btn-default wpcf7-submit">送信する</button>
    </p>
  </form>
</div>

<form class="wpcf7-form" novalidate>
  <dl class="form-dl">
    <dt><label for="ds-topic-1">ご希望のサービス<span class="optional">任意</span></label></dt>
    <dd>
      <span class="wpcf7-form-control-wrap">
        <span class="wpcf7-form-control wpcf7-checkbox">
          <span class="wpcf7-list-item first"><label><input type="checkbox" id="ds-topic-1" name="ds-topic[]" value="ホームページ制作" checked><span class="wpcf7-list-item-label">ホームページ制作</span></label></span>
          <span class="wpcf7-list-item"><label><input type="checkbox" name="ds-topic[]" value="保守・運用"><span class="wpcf7-list-item-label">保守・運用</span></label></span>
          <span class="wpcf7-list-item"><label><input type="checkbox" name="ds-topic[]" value="Webマーケティング支援"><span class="wpcf7-list-item-label">Webマーケティング支援</span></label></span>
        </span>
      </span>
    </dd>
  </dl>
</form>

<form class="wpcf7-form" novalidate>
  <dl class="form-dl">
    <dt><label for="ds-email">メールアドレス<span class="required">必須</span></label></dt>
    <dd>
      <span class="wpcf7-form-control-wrap">
        <input type="email" id="ds-email" class="wpcf7-form-control wpcf7-text wpcf7-not-valid" value="info@example" aria-invalid="true" aria-describedby="ds-email-tip">
        <span class="wpcf7-not-valid-tip" id="ds-email-tip">メールアドレスを正しい形式で入力してください。</span>
      </span>
    </dd>
  </dl>
</form>