約30分でBtoBサイトをノーコードでつくるSTUDIOテンプレート「This is B2B」
2023年4月にSTUDIOより「STUDIO STORE」という有料テンプレートの販売機能がリリースされました。
STUDIO STORE（スタジオストア）では、認定されたクリエイターが作った高品質なテンプレートを無料、有料で購入することができ、STUDIOによるサイト制作をさらに効率化することができます。
株式会社caroaとして作成したSTUDIOテンプレート「This is B2B」の使い方や特徴などを紹介していきます。
テンプレートについて
caroaでは、2020年に株式会社ベイジさんから公開された「BtoBサイトのワイヤーフレーム」のFigma版を制作し、実際に使用することで多くのBtoBサイトを制作してきました。
今回はcaroaとして制作してきたBtoBサイトの経験をもとに、特に事業立ち上げ期に優先度が高いページ、セクションをピックアップしてまとめたSTUDIOテンプレートを作成しました！
「This is B2B」はこんな方におすすめ
このSTUDIOテンプレートは、以下のような方におすすめのテンプレートです。
BtoBの事業を行っていて、リード獲得強化したい
新規事業の立ち上げを予定している
自社構築もしくはWordPress等で運用しているサイトを、STUDIOに移行したい
オリジナルデザインのベースとして使いたい
テンプレートのページ構成でも記述しますが、必要なコンテンツは全て揃っているため、事業用新サイトの早期立ち上げだけでなく、STUDIOへの移行のベースとしてお使いいただくのもおすすめです！
「This is B2B」の3つの特徴
01: リード獲得のためのコンテンツをすぐに
お役立ち資料、セミナー、導入事例などBtoB事業者がリード獲得のために必須なコンテンツを、構築が済んでいるCMSを使ってすぐに始めることができます。
そのため、1番大切なコンテンツの設計に集中して時間を使うことができます。
02: SEO対策済み
階層化構造や内部リンクなど基本的なSEO対策はされた状態です。
テンプレートのため、タイトル/説明文は個別に設定する必要はありますが、基本的な対策はされているので、すぐにでもコンテンツマーケティングを開始できます。
03: 規約系のページまで網羅
利用規約やプライバシーポリシーなどのサブページも、CMSを使って簡単に作成、公開できるようになっています。
フォーマットを合わせることで、特定商取引法に基づく表記などのページもCMSで作成ができます。
「This is B2B」の構成
トップ
お役立ち資料一覧
セミナ一覧
セミナー詳細（CMSによる動的ページ）
導入事例一覧
導入事例詳細（CMSによる動的ページ）
よくある質問
汎用的なページ（CMSによる動的ページ）
利用規約
プライバシーポリシー
など
お問い合わせ（STUDIOフォーム）
お問い合わせ完了
メニューモーダル
404 Not Found
「This is B2B」の使い方
導入事例の更新方法
導入していただいた企業のインタビューや情報などを掲載することができます。CMSの中の「導入事例」というモデルで以下の項目を設定してください。
カバー画像
画像をアップロードしてください
会社
別モデル「会社」を参照しているので、項目を編集する場合は参照元を変更してください
従業員規模
別モデル「従業員規模」を参照しているので、項目を編集する場合は参照元を変更してください
課題
テキストで入力してください
効果
テキストで入力してください
セミナーの更新方法
CMSの中の「セミナー」というモデルで、以下の項目を設定してください。
カバー画像
画像をアップロードしてください
開催場所
テキストで入力してください
開催日時
テキストで入力してください
登壇者
別モデル「セミナー登壇者」を参照しているので、項目を編集する場合は参照元を変更してください
フォームURL
テキストで入力してください
※このURLがセミナー詳細ページの「参加登録ボタン」の遷移先になります
受付中
クリックで切り替えができます
（切り替えによる変更箇所は下記画像をご覧ください）
公開前のチェックポイント
STUDIOテンプレートでは誰もが簡単に作れるように、汎用的な作りになっています。そのため、各自設定のし忘れがないか確認する必要があります。
ここでは、公開にここだけは確認した方がいいポイントを紹介します。
Check01: サイト設定、ページ設定
STUDIOではサイト全体に関する共通設定をする「サイト情報設定」と、ページごとに個別の設定をする「ページ情報設定」の2つを設定できます。
まずはサイト設定で共通の以下の項目を設定しているか確認してください。
タイトル
説明文
ファビコン
カバー画像(OGP)
言語
次に各ページごとに個別に設定がある場合は、ページ情報設定で以下の項目を確認ください。
タイトル
説明文
ファビコン
カバー画像(OGP)
公開範囲
Noindex
言語
構造化データ
動的ページ（CMSの利用したページ）では、CMSで設定した値が自動でページ情報設定に挿入されるようになっています。
SEOを考慮してサービス名などを含めたい場合は、以下のように追記ください。
Check02: CMSの公開/非公開
STUDIOではサイト全体を公開すると同時に、CMSのステータスも変更する必要があります。
公開する場合は緑丸の「公開中」に、公開したくない場合はグレー丸の「下書き」にしてください。
また、CMSのデータをどこか変更した場合は青丸の「変更あり」というステータスになります。この場合は、「更新する」を押さない限り公開されないので、ご注意ください。
サイト自体は公開したが、CMSを公開し忘れていることが多いので、注意してみてください。
サイトの公開方法
サイトを独自ドメインで公開する場合は、以下の記事を参考にしてください。
フォローアップ
本テンプレートは「デザインの力で、ビジネスの可能性を引き出す」をミッションとして掲げるるcaroa（ https://caroa.jp/design ）が制作しています。
このテンプレートをベースとした追加ページの制作、リニューアル、オリジナルデザインの依頼などありましたら、お気軽にお問い合わせください。