ページ作成
AIで作ったLPやウェブサイトをコネワンに表示させる方法
AIで作ったHTMLを埋め込んでみよう！ ChatGPTやClaudeなどのAIで作成したWebサイト・LP・デザインパーツ(料金表・よくある質問など)を、コネクティッドワンのページに埋め込んで活用する方法です。 手順は3ステップです。 AIにHTMLを作ってもらう 「コード」ウィジェットに貼り付ける 保存して、表示を確認する STEP1：AIにHTMLを作ってもらう ChatGPT・Claude・GeminiなどのAIに、作りたいものを日本語で伝えます。「高級感のある雰囲気で」「メインの色は紺色で」など、デザインの希望も日本語でOKです。 そのまま使える指示文はこちらです。 LPなど作成をする最初に入れる。または、作成をした後に、下記を貼り付けて指示を出してください。 1. ユニークIDの自動生成: 全体を囲む<div>に、作るものの名前(英語の小文字)と現在の日時を組み合わせたユニークIDを付けてください(例: pricing-table-20260717153000) 2.特集ページビルダー概要
ページビルダー概要〜スタイリッシュなデザインを直感的に作成！〜 素人でもプロ並みのデザインが作成できるコネクティッドワンのページビルダー機能のご紹介です。 AIがバランスも整えてくれるので、コーティングなしで綺麗に整えていくことが可能です！ 1. ブロックごとの設定 基本的には、ブロックを積み上げて、ページを構成します。 ブロックの中に1つのカラムで、カラムの中に様々なウィジェットで内容を構成してゆく。 ①ブロック ②カラム ③1つのブロックの境目 2. カラムで要素ごとのデザイン調整 カラム（列）数は図の④で変更できます。 構成デザインにより5カラムまで変更できます。 カラムの幅はパーセンテージで表記され、ドラックするだけで変更できます。 また、1つのブロックの中にカラム数の違う構成をプラスしたい場合は、図の⑤でデフォルト人気ページの追加方法
ページを追加して、HPやLPを作る〜ページの追加方法〜 新しいページを追加することで、さまざまな目的別のページ作成が可能です。 トップ、プロフィール、商品案内、無料登録案内、カミングースーンなど目的に合わせたデザインとなります。 1. ページ追加 ①メニューバーから、ページのメニューを開く （画面左上にある “3本線のアイコン” をクリックすると表示されます。） ②ページの追加を選択する ③「新しく追加する」ポップアップウィンドウで、ページの種類を選択 ページの種類を選択すると、テンプレートの画面が表示されます。 作成するページの種類で、カテゴリーから選択し、プレビューで確認してください。 また、テンプレートを使用せずご自身でカスタマイズする場合は、カテゴリーの一番下にある、空のページを選択して人気ブロックの活用方法&デザインについて
ブロックで多種多様なウェブサイトを構築！〜コネクティッドワンの使い方〜 ブロックの活用方法 ブロックテンプレ紹介、デザイン、コピー、時間差で表示させる方法などを解説しています。 ブロックとは？ ブロックは、最小限のデザインスキルでページを構成できる便利なパーツ です。 何百種類ものブロックが用意されており、高度なデザイン知識がなくても、見た目に優れたレイアウトを作成できます。 各ブロックは、プロジェクトにスムーズに統合できるよう設計されており、デザイン作業に時間をかけるのではなく、コンテンツ作成に集中できる のが特徴です。 ブログ、ポートフォリオ、ビジネスサイトなど、さまざまなスタイルや用途に対応可能。使いやすさと柔軟性を兼ね備えたブロックを利用することで、美しく、かつ効果的に機能するページ を簡単に作成できます。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/18_3m人気カラムの基本設定
ノーコードでカラム（列）を整えてデザインを調整！〜コネクティッドワンの使い方〜 カラムの活用方法 1〜5カラムと横幅を自由に変えれます。ノーコードでデザインを調整をしていくことが可能です。 カラムとは カラムとは、ブロックの中の「列」のことです。1〜5カラムまで、横幅を自由に変えられます。 ノーコードで、見やすく分かりやすいレイアウトを作れます。 カラム数 レイアウト 1カラム 1列（横いっぱいに1つ） 2カラム 横に2列 3カラム 横に3列 たとえば「画像と文章を横に並べる」「サービスを3つ並べて紹介する」といったレイアウトを作れます。 ① カラムの幅を調整する カラムとカラムの間にある青い線をクリックして、左右に動かします。 上に各カラムの幅が「％」で表示されるので、見ながら割合を調整してください。 ![](https://storage.crisp.chat/users/helpdesk/websit人気ウィジェット追加方法
魅力的なデザインを構成するウィジェット追加方法〜ページビルダーの使い方〜 ウィジェット追加方法 ページを構成するウィジェットの追加方法です。パズルのように組み立てながら、HPやLPを作成していくことが可能です。 ページの構成を知る コネクティッドワンのページは、次の3つの組み合わせでできています。 ブロック（大きなまとまり） └ カラム（列） └ ウィジェット（見出し・テキスト・画像・ボタンなど） 「ブロックの中にカラムがあり、そのカラムの中にウィジェットを入れる」という形です。 この組み合わせ方を変えることで、自由にデザインを作れます。 ① ウィジェットを追加する 左側の「＋ ウィジェットを追加」をクリックします。 追加したいウィジェットを選びます。 選んだウィジェットを左クリックしたまま、置きたい場所までドラッグします。 マウスを離すと、そこに入ります。 青い線が、入る場所の目印です 横向きの青い線：その位置（上下）に入りますよく読まれていますスマホサイズのデザイン設定方法
スマホでも観やすいようにデザインを調整しよう！〜コネクティッドワンの使い方〜 スマホサイズのデザイン設定方法 基本的な編集はPCサイズでしますが、タブレットサイズ、スマホサイズとそれぞれのデバイスに合わせて調整ができます。 また、グローバルスタイリングのテキスト設定でも簡易的にPCサイズとスマホサイズの調整が可能です。 スマホサイズ編集 モバイルエディターでは、デスクトップ用に作成したコンテンツをもとに、スマートフォンでの見え方を調整できます。 モバイルエディターを開くと、編集画面の右側に、モバイル表示を設定するためのボタンが表示されます。 既存のコンテンツを編集する モバイルエディターには、デスクトップ用に作成したコンテンツが表示されます。 編集したいコンテナにマウスポインターを重ねると、左側に設定メニューがよく読まれています購入者限定（会員サイト）ページの作成手順
購入者だけが見れるページの作り方。購入者限定ページ（会員ページ）の作成手順〜コネクティッドワンの使い方〜 購入者限定ページの作成手順 決済した方だけが見られるページ（動画教材のページなど）を作る手順です。 全体の流れ ① グループを作る（連絡先／CRM） ② ページにアクセス制限をかける ③ 商品を作る（ネットショップ） ④ チェックアウトフォームを設置する 購入した方は、決済と同時に自動でグループに追加され、限定ページを見られるようになります。 ① グループを作る 「連絡先」を開きます。 「グループを追加」をクリックします。 グループ名を入力して、追加します。 （例：〇〇講座 受講生、サブスク会員） グループはいくつでも作れるので、講座や会員プランごとに必要な分だけ作りましょう。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_7m1iqg人気ポートフォリオ機能で商品一覧・顧客の声を作成！
ポートフォリオ機能で商品一覧・顧客の声を作成！ 作品集、お客様の声、事例集などをカテゴリーで分けて、一覧で表示できる機能です。 一覧から1つをクリックすると、ポップアップで詳しい内容を表示したり、専用の詳細ページを開いたりできます。 こんな使い方ができます お客様の声を、業界別・ジャンル別に分けて紹介する 制作実績や作品集を載せる 商品を紹介する（物販の方におすすめ） 動画講座を、カテゴリー別の一覧ページにする（動画配信サービスのような見せ方） 全体の流れ ① ポートフォリオを開く ② 全体のデザインを決める（ページテーマ・ヘッダー） ③ アイテムを追加する ④ カテゴリーで分ける ⑤ メニューやページに表示する ① ポートフォリオを開く メニューの「ポートフォリオ」を開きます。 テンプレートによっては、最初から表示されていない場合があります。その場合は「新しく追加」から「ポートフォリオ」を追加してください。 ![](https://storage.crisp.chat/uよく読まれていますヘッダーを活用してホームページのメニューを最適化しよう！
ヘッダーを活用してホームページのメニューを最適化しよう！よく読まれています
ページ設定
ページへのアクセス設定
ページへのアクセス方法は3つ 公開、ページ自体にパスワードを設定、特定のグループのみ。会員ページを作成する際には必ずする設定となります。 特定のグループメンバーのみがページにアクセスできるようにするには、以下の手順を行います。 ［ページ］ またはページを含むフォルダーに移動します。 制限をかけたいページを見つけ、三点（…）アイコンをクリックして「ページ設定」を開きます。 ［ページアクセス］ ドロップダウンから ［メンバーのみ］ を選択します。 ［メンバーグループの選択］ をクリックし、アクセスを許可するグループを選びます。 ※この設定は、ページだけでなくファネルステップにも同様に適用できます。 ページビルダー一覧 [ページビルダー概要](/ja/article/44oa44o844k数人に読まれていますSEOの設定方法
SEOの設定方法 SEOの設定方法 ページタイトルとメタディスクリプションをキーワードに沿って設定をしていきます。 適切な文字数だと緑色やオレンジ色として表示されていきます。 ページSEO SEO（検索エンジン最適化） ページSEOにアクセスする方法 サイト全体の設定からアクセスする場合 「ウェブサイト設定」 → 「ページSEO」をクリックします。 特定のページごとにアクセスする場合 対象ページへ移動 → ページ上部の「…（三点メニュー）」をクリック → 「設定を表示」を選択します。 これでページSよく読まれています
コピー（複製）の仕方（ウィジェットやブロック）
コピー（複製）の仕方（ウィジェットやブロック） ウィジェットやブロックは複製して、貼り付けることができます。 コピー（複製）方法 ウィジェット、ブロックのコピー 作成手順： ウィジェット編集バーに①「コピー」のボタンがあるので、そこを押してコピーをする 左上の箇所②にコピーしたものが格納されます。 ブロックも同様、編集バーに「コピー」があります。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/7_6s数人に読まれていますファイルマネージャー
ファイルマネージャー ファイルマネージャーでは、画像やファイルをアップロードし、まとめて管理できます。フォルダを作成して、用途や種類ごとに整理することもできます。 ファイルマネージャーを開く 「ウェブサイト設定」から「ファイルマネージャー」を開き、「すべての画像」または「すべてのファイル」を選択します。 すべての画像 画像のみをアップロードできます。大きな画像は自動的にサイズが調整され、圧縮されます。画像ウィジェットからアップロードする場合と同じ動作です。 すべてのファイル 画像を含む、さまざまな種類のファイルをアップロードできます。画像の元のサイズや画質を保ちたい場合も、こちらを選択します。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/数人に読まれていますブロックの表示設定（見る人・日時・国などで表示を切り替える）
「ブロックの表示設定」を使うと、ブロックごとに誰に・いつ表示するかを決められます。 たとえば、会員だけに見せる、キャンペーン期間だけ表示する、ページを開いて少したってから表示する、といった使い方ができます。 設定画面の開き方 設定したいブロックの左上にある「ブロック」をクリックします。 「コンテナ設定を編集」が開きます。一番下までスクロールすると「ブロックの表示設定」があります。 「ルールの追加」をクリックして、プルダウンから表示のルールを選びます。 表示ルールは6種類 ルール 表示される人・タイミング 全員 サイトを見たすべての人 ログイン済みメンバー サイトにログインしている人 特定のメンバーシップグループ 選んだグループに入っている人 特定の日時 | 決めた数人に読まれていますブロックをスライダーで表示する方法（スライダーモード）
ブロックを「スライダーモード」にすると、複数のブロックを同じ場所に重ねて、横にスライドさせながら表示できます。 お客様の声、事例紹介、悩みのカードなど、たくさん並べると縦に長くなってしまう内容を、コンパクトに見せたいときに便利です。 ① スライダーモードをオンにする スライダーにしたいブロックの左上にある「ブロック」をクリックします。 「コンテナ設定を編集」が開きます。下にスクロールして、「スライダーモード」をオンにします。 オンにすると、ブロックの下の中央にスライダー専用のメニューが表示されます。 ② スライダーメニューの使い方 ボタン できること 1・2・3…（数字） スライドの番号です。クリックすると、そのスライドに切り替わって編集できます ＋ | 新しいブロック（スライド）を追数人に読まれていますグローバルカラムの設定
デザインを楽に！グローバルカラムの設定をしよう〜コネクティッドワンの使い方〜 グローバルカラム（Global Column） グローバルカラムを設定する 「グローバルカラム」にすると、1か所を変えるだけで、同じカラムを使っているほかのページにもすべて反映されます。 こんなときに 会員サイトのメニューなど、複数のページに同じ内容を入れたいとき 案内や動画など、何ページにも同じものを載せていて、変更のたびに全ページを直すのが大変なとき 通常のカラムとの違い 1つのページを直したとき 通常のカラム そのページだけが変わる（ページごとに1つずつ直す必要がある） グローバルカラム 同じグローバルカラムを使っているすべてのページが変わる ① グローバルカラムを作る グローバルにしたいカラムの上のラベルをクリックして、カラムの設定を開きます。 「グローバルカラム」にチェックを入れます。 「現在のコンテンツで保存数人に読まれていますフリームーブモード解説：ウィジェットを自由に移動
「フリームーブモード」を使うと、テキストや画像をブロックの中の好きな位置に、ドラッグで自由に配置できます。 これまでは、パーツを入れられる場所がある程度決まっていて、幅なども自動で調整されていました。フリームーブモードでは、位置を直感的に決められるので、細かい配置ができるようになります。 フリームーブモードをオンにする 動かしたいテキストや画像をクリックします。 表示された編集バーの一番右にある「フリームーブ」をクリックします。 パーツをドラッグして、好きな位置に動かします。 ![](https://storage.crisp.chat/users/helpdes数人に読まれていますフッターを活用してユーザーを誘導しよう！
フッター フッター機能について フッター機能について解説していきます。 フッターとは、ホームページやWebサイトの一番下に表示される共通エリアのことです。 フッターに設定した内容は、基本的にすべてのページに表示されます。 そのため、どのページから見ても案内したい情報やリンクを置く場所として活用できます。 フッターに表示される内容 フッターには、よく以下のような内容を入れます。 メニュー 会社情報 個人情報保護方針 特定商取引法に基づく表記 利用規約 お問い合わせページ ページごとに内容が変わる本文エリアとは違い、フッターはサイト全体で共通して表示されます数人に読まれていますファビコンとSNS共有画像
ファビコンとSNS共有画像 ファビコンとSNS共有画像を設定すると、ブラウザのタブやSNS上でサイトを見分けやすくなり、ブランドの印象を統一できます。 設定方法 「設定」を開き、「一般」タブを選択します。 ファビコンをアップロードします。 ファビコンは、ブラウザのタブに表示される小さなアイコンです。 SNS共有画像を設定します。 サイトがSNSで共有されたときに、プレビューとして表示される画像を選択します。 SNS共有画像とは SNS共有画像は、ウェブサイトやページのリンクがSNSで共有されたときに表示されるプレビュー画像です。ページの内容や雰囲気を、画像で伝える役割があります。 サイト内の各ページやファネルの各ステップには、それぞれの内容に合った共有画像を設定することをおすすめします。ページごとに画像を用意すると、リンク先の内容がひと目で伝わりやすくなります。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image数人に読まれていますカラムをスライダーで表示する方法（スライダーモード）
カラム（横に並んだ列）も、「スライダーモード」にするとスライドさせながら表示できます。 スライダーモードは、カラムごとに設定します。 たとえば3つ並んだカラムのうち、1つだけをスライダーにしたり、3つすべてをスライダーにしたりできます。 サービス紹介やお客様の声など、限られたスペースで多くの内容を見せたいときに便利です。 ① スライダーモードをオンにする スライダーにしたいカラムにマウスを乗せると、上に「カラム」のラベルが表示されます。 ラベルの歯車をクリックします。 「行設定を編集」が開きます。下にある「スライダーモード」をオンにします。 オンにすると、そのカラムの下にスライダー専用のメニューが表示されます。 ※オンにしたカラムだけがスライダーになり、横に並んだほかのカラムはそのままの表示です。 ② スライダーメニューの使数人に読まれていますカラムをタブで切り替えて表示する方法（タブモード）
カラムを「タブモード」にすると、見る人がタブをクリックして、表示する内容を切り替えられるようになります。 同じ場所に複数の内容をまとめられるので、情報が多くてもページがすっきりします。 こんなときに 料金プランを「月額」「年額」で切り替えて見せたいとき コースやサービスごとに、内容を分けて紹介したいとき よくある質問を、カテゴリーごとにまとめたいとき スライダーモードとの違い 切り替え方 向いている内容 タブモード 見る人がタブをクリックして切り替える 見る人が自分で選びたい内容（プラン、コース別など） スライダーモード 矢印や自動でスライドして切り替わる 順番に見てほしい内容（お客様の声、事例など） ① タブモードをオンにする タブにしたいカラムにマウスを乗せると、上に「カラム」のラベルが表示されます。 ラベルの歯車をクリックします。 「行設定を編集」が開きます。下に「スライダーモード」と「タブモード」の2つのス数人に読まれています