テンプレートを使用しないLP制作について

Quinn1 · ‎2 27, 2024

LPやwebサイトを制作する場合、まずはテンプレート選択の画面に遷移して、テンプレートを選択する。

テンプレートを使用しないでサイトを制作するには、オリジナルのテンプレートを作る必要がある。

というところまでは理解出来たのですが、テンプレートを使用したときのように、ある程度のモジュールが用意されている状態で、ドラッグ・アンド・ドロップしながら、何も無いまっさらな状態からLPを構築することは出来ないのでしょうか？

オリジナルのテンプレートを作るような、一からhtmlを使用して構築することが現状難しく、テンプレートを使用してある程度組んでから細部をcssで編集しようと試みているのですが、ヘッダーにグローバルナビを入れたいが、どこでcssを編集するのか…？テンプレートだと入れられないんだよなぁ…となり、上手く出来ていません。

テンプレートを使用せず、何も無い状態からモジュールを使用してサイト構築が出来たら一番いいのですが、そのような方法はとれるのでしょうか？

よろしくお願いします。

marykashima · ‎2 27, 2024

やりたいことに一番近い構築方法は

デザインツールでドラッグ＆ドロップテンプレート方式で作成だと思います。

https://developers.hubspot.jp/docs/cms/building-blocks/templates/drag-and-drop-templates

モジュールも標準ではいくつか用意されています。ただ、CSSの実装が1から必要です。

個人的にはこのやり方の実装は逆に難易度が高いと思います。

モジュールのゴールイメージをドラッグ＆ドロップの時点ではもてないからです。

無償テーマで人気があるものをDLして、テーマの編集で御社好みにカスタマイズしたほうがローコードですむのではないか、と感じました。

参考になれば幸いです。

Mary Kashima
HubSpot Community Champion
Grow Better at Community 2021,2022,2023
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner
JPで唯一の HubSpot INBOUND2024 Correspondent やってます！SNSで投稿中

元の投稿で解決策を見る

Quinn1 · ‎2 27, 2024

早速のご回答ありがとうございました。

また、ご丁寧に修正の方法を教えて頂き大変助かります。

最後にもう2点、質問させてください…！！

無料のテンプレートが複数インストール出来ることをしらず最初に提示されていたKrazyを使用しておりました。途中まで作成したのですが、これを新しいテーマに反映させることは出来るでしょうか？

また、テーマによって出来ることの違いはあるのでしょうか？モジュールの種類も同じでドラッグ・アンド・ドロップで構築し、最終的にCSSで整えるという方法だとどのテンプレートを使用しても同じではないだろうか？と思ってしまっています。

お忙しいところ、何度も申し訳ございません。

何卒よろしくお願いします。

marykashima · ‎2 27, 2024

回答します！

・これを新しいテーマに反映させることは出来るか

各ページ（LP、ウェブサイト、ブログ）の設定内で適用するテンプレート（テーマ）を選択できるので、ここでテンプレートを変更するという手法ができます。
しかし、固定モジュール系は引き継ぎできないので、変更元と変更先のテンプレの構成に依存します。ページ自体を複製して、一か八かでお試しください😅

・テーマによって出来ることの違いはあるか

違いあります。開発者が当然違いますので、彼らが考える「使い勝手の良いモジュール」「ページ」が用意されています。また、ソースコードの記述スタイルにによって速度差もあるかもしれません。テーマ、ページ、モジュールの構成までは実際にインストールしないと確認できないのが時間かかります。
個人的なおすすめはSprocket Freeです（アップデートが多いため改善スピードが早い）

※このようなCMSのお悩みもアドバイザリ業務として承っております。よろしければDMください！

Mary Kashima
HubSpot Community Champion
Grow Better at Community 2021,2022,2023
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner
JPで唯一の HubSpot INBOUND2024 Correspondent やってます！SNSで投稿中

Quinn1 · ‎2 27, 2024

ありがとうございます！

わからない所が多々ありますので、改めてご連絡させていただきます。

Quinn1 · ‎2 27, 2024

ご回答ありがとうございます。

私が希望していた事が出来ること、しかし、難しく効率が悪いことが理解できたのでとても参考になりました。

現状だと、Krazyというテンプレートを使用して元々のデザインを反映させているのですが、やはりテンプレートだと、デザイン通りというわけにもいかず、困っておりました。

また別の質問となってしまい大変恐縮なのですが、テンプレートを使用したあとに細かなCSSの変更などをしたい場合はどのような画面で変更を加えたら良いのでしょうか？

ナレッジベースで色々なページを見てみたのですが、上手く理解できておりません。

ご教授いただけましたら幸いです。よろしくお願いします。

marykashima · ‎2 27, 2024

CSSの変更は大きく3種類です。

1：テンプレート上にCSSファイルを作ってincludeさせる
デザインツール＞テンプレート＞赤枠です。CSSファイルは個別に作成をしてください。共通要素cssを管理するのに最適です。

2：モジュール単位でカスタムする

同じくデザインツール上でモジュールをカスタマイズするときは、html（兼hubl）＋css＋js を内包できます。モジュール単位で使い回しをしたい際にはこちらが有利です。

3：ページ単位
各ページ（LP、ウェブサイト、ブログ）の設定内に<head>内に記述できるエリアがあるのでこちらを使います。共通要素cssには向いていません。

配布テンプレートは人気があるものはどんどんアップデートされていますので、相性があるものが見つかると良いですね！

参考になれば幸いです。

Mary Kashima
HubSpot Community Champion
Grow Better at Community 2021,2022,2023
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner
JPで唯一の HubSpot INBOUND2024 Correspondent やってます！SNSで投稿中

marykashima · ‎2 27, 2024

やりたいことに一番近い構築方法は

デザインツールでドラッグ＆ドロップテンプレート方式で作成だと思います。

https://developers.hubspot.jp/docs/cms/building-blocks/templates/drag-and-drop-templates

モジュールも標準ではいくつか用意されています。ただ、CSSの実装が1から必要です。

個人的にはこのやり方の実装は逆に難易度が高いと思います。

モジュールのゴールイメージをドラッグ＆ドロップの時点ではもてないからです。

無償テーマで人気があるものをDLして、テーマの編集で御社好みにカスタマイズしたほうがローコードですむのではないか、と感じました。

参考になれば幸いです。

Mary Kashima
HubSpot Community Champion
Grow Better at Community 2021,2022,2023
著書「HubSpotワンストップマーケティング」発売中

株式会社クリエイティブホープ HubSpot Platinum Partner
JPで唯一の HubSpot INBOUND2024 Correspondent やってます！SNSで投稿中

質問＆ディスカッション