--- title: QA用アコーディオンモジュールの作り方【レベル2-後半】Hubspot CMS Hub description: よくあるタイプのQA用アコーディオンのモジュールの作り方。CMS Hub（Hubspot CMS）：レベル1 image: https://www.hub-ken.net/hubfs/Canva%20images/accordion-level2-2.png --- [Skip to content](https://www.hub-ken.net/lab/accordion-2-2#main-content) [![logo_skills](https://www.hub-ken.net/hubfs/logo_skills.svg)](https://www.hub-ken.net/) - [Hub研とは](https://www.hub-ken.net/about) - [Hub研 Lab.](https://www.hub-ken.net/lab) Open main navigation Close main navigation - [Hub研とは](https://www.hub-ken.net/about) - [Hub研 Lab.](https://www.hub-ken.net/lab) - [お問い合わせ](https://www.hub-ken.net/contact) [お問い合わせ](https://www.hub-ken.net/contact) 2022年1月月19日 # QA用アコーディオンモジュールの作り方【レベル2-後半】Hubspot CMS Hub [Shinobu Minabe](https://www.hub-ken.net/lab/author/shinobu-minabe) 共有： [facebook-f icon](http://www.facebook.com/share.php?u=https://www.hub-ken.net/lab/accordion-2-2) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://www.hub-ken.net/lab/accordion-2-2) [twitter icon](https://twitter.com/intent/tweet?url=https://www.hub-ken.net/lab/accordion-2-2) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://www.hub-ken.net/lab/accordion-2-2) [envelope icon](mailto:?body=https://www.hub-ken.net/lab/accordion-2-2) このページは、[QA用アコーディオンモジュールの作り方【レベル2-前半】](https://www.hub-ken.net/lab/accordion-2-1)の続きとなるページです。 モジュールの仕様や、全体の手順など確認したい場合は、前半の記事からお読みいただくことをオススメいたします！ ## 3.ウェブサイトページにアコーディオンのモジュールを配置してみる 作ったモジュールを実際のページに配置してみましょう。 今回はCMS Hubのウェブサイトページにします。（ページの性質によって、「ウェブサイトページ」と「ランディングページ」を使い分けます。） Hubspot管理画面ヘッダー【マーケティング】→【ウェブサイト】→【ウェブサイトページ】から、新規ウェブサイトページを作成します。テンプレートはドラッグアンドドロップができる仕様のものをお選びください。 Hub研Lab.にも、[ドラッグアンドドロップ可能なテンプレートを使ったウェブサイトページの作り方](https://www.hub-ken.net/lab/simple-template)を説明したページがありますので、よろしければご参照いただければと思います。 【追加】の検索窓に「accordion」と入力すると、先程作成したモジュール「accordion-level-2」が候補としてあがってきますので、Drop module hereと書かれたエリアにドラッグアンドドロップします。 ![accordion-lev2-21](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-21.png?width=1720&name=accordion-lev2-21.png) モジュール「accordion-level-2」が配置されました。 早速、モジュール「accordion-level-2」に、QとAの文言を入力していきましょう。 【鉛筆アイコン】を押下すると、QとAの情報入力欄が表示されます。 ![accordion-lev2-22](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-22.png?width=1720&name=accordion-lev2-22.png) 【accordion-q】にQ用の文言を、【accordion-a】にA用の文言を入力します。 【accordion-a】は先程のモジュール作成の際にリッチテキスト仕様としたので、見た目のスタイル設定が可能となります。画像を配置したり、テキストにリンクを設定することもできます。 文言の入力が終わったら【次へ】を押下します。（モジュール作成時に、リピーターオプションであらかじめ2つのQAが表示されるようになっているので、【次へ】が表示されます） ![accordion-lev2-23](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-23.png?width=1720&name=accordion-lev2-23.png) 1つ目のQAと同様に、【accordion-q】にQ用の文言を、【accordion-a】にA用の文言を入力します。 文言の入力が終わったら【accordion-level-2】を押下し、モジュール「accordion-level-2」のトップに戻ります。 ![accordion-lev2-24](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-24.png?width=1720&name=accordion-lev2-24.png) モジュール「accordion-level-2」のトップに戻りました。 【＋追加】を押下して、QAを追加しましょう。 ![accordion-lev2-25](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-25.png?width=1720&name=accordion-lev2-25.png) 1つ目と2つ目のQAと同様に、【accordion-q】にQ用の文言を、【accordion-a】にA用の文言を入力します。 文言の入力が終わったら【accordion-level-2】を押下し、モジュール「accordion-level-2」のトップに戻ります。 ![accordion-lev2-26](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-26.png?width=1720&name=accordion-lev2-26.png) 【accordion-q】はリッチテキスト仕様としたので、リンクを挿入することも可能です。リンク先を新しいウィンドウ（別タブ）で開く設定もできます。 ![accordion-lev2-27](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-27.png?width=340&name=accordion-lev2-27.png) 【ホーム】を押下してこのページのホームに戻り、右上にあるオレンジ色の「公開」ボタンを押下します。 ![accordion-lev2-28](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-28.png?width=1720&name=accordion-lev2-28.png) 【今すぐページを更新】ボタンを押下します。 ![accordion-lev2-29](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-29.png?width=566&name=accordion-lev2-29.png) URL箇所に書かれたテキストリンクから実際のページを確認してみます。 [https://hub-ken.com/accordion-module2](https://www.hub-ken.net/accordion-module2) ![accordion-lev2-30](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-lev2-30.png?width=1720&name=accordion-lev2-30.png) 以上で、QAの記載内容をウェブサイトページに配置したアコーディオンモジュールから、簡単に書き換えられる仕様のモジュールの作り方の説明は終わりです。 モジュールを作るのであれば、やはりウェブサイトページから簡単に内容を書き換えられる仕様で作成するのがベストですね。 ただ、どこを書き換え可能にするのかは、事前にきちんと設計しておく必要があります。（Hub研では「モジュールの粒度設計」と呼んでいます） この粒度設計をおざなりにしてしまうと、発注側と作り手との間で「どこまでやる」といった認識に違いが生じて、コスト（時間、費用）がかさんでしまうことがあるので、注意しましょう。 この記事の前半は[こちら](https://www.hub-ken.net/lab/accordion-2-1) ## Related posts [![](https://www.hub-ken.net/hubfs/Canva%20images/%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%81%AEQA%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E8%A8%AD%E7%BD%AE.png)](https://www.hub-ken.net/lab/accordion-1) ## [QA用アコーディオンモジュールの作り方【レベル1】Hubspot CMS Hub](https://www.hub-ken.net/lab/accordion-1) 2022年1月月7日 [Read more](https://www.hub-ken.net/lab/accordion-1) [![HubSpot CMS Hub QA用アコーディオンのモジュールの作り方](https://www.hub-ken.net/hubfs/Canva%20images/accordion-level2-1.png)](https://www.hub-ken.net/lab/accordion-2-1) ## [QA用アコーディオンモジュールの作り方【レベル2-前半】Hubspot CMS Hub](https://www.hub-ken.net/lab/accordion-2-1) 2022年1月月19日 [Read more](https://www.hub-ken.net/lab/accordion-2-1) [![](https://www.hub-ken.net/hubfs/Canva%20images/websitepage.png)](https://www.hub-ken.net/lab/simple-websitepage) ## [ウェブサイトページの作り方。｜Hubspot CMS Hub](https://www.hub-ken.net/lab/simple-websitepage) 2022年1月月7日 [Read more](https://www.hub-ken.net/lab/simple-websitepage) - [Hub研とは](https://www.hub-ken.net/about) - [Hub研Lab.](https://www.hub-ken.net/lab) - [お問い合わせ](https://www.hub-ken.net/contact) --- [![](https://www.hub-ken.net/hubfs/logo_skills.svg)](https://www.hub-ken.net/) 運営会社：[株式会社VIVIBOND](https://vivibond.com) Copyright © 2026, 株式会社VIVIBOND++