ベーシック
ボタンの使い方
思わずクリックしたくなるボタンを作ろう！〜コネクティッドワンの使い方〜 ボタンの使い方 ボタンの色一つでも、クリック率が変わってきます。思わずクリックしたくなるように、色々と検証しながら作成をしていきましょう！ コネクティッドワンでは、ボタンがウィジェットとして提供されています。 ドラッグ＆ドロップの簡単な操作で、ウェブサイト内の任意の場所にボタンを追加できます。 ボタンのテキスト、クリック時の動作、デザイン、アニメーションなどを細かく設定できます。 さらに、ブロック型のボタンや、コールトゥアクション用のパーツも用意されており、簡単に利用できます。 ボタンの追加手順 1. ウィジェットの追加 コネクティッドワンの編集画面で、ボタンを追加したい場所に「ウィジェットを追加」します。 ウィジェットの一覧から 「ボタン」を選び、ドラッグ＆ドロップでウェブページ内の任意の場所に配置します。 ボタンの基本設定 1. ボタンテキストの編集 配置したボタンをクリックし、「編集数人に読まれていますコンテナ（ブロック）ウィジェット&アンカーポイントを設定
コンテナ（ブロック）ウィジェット コンテナウィジェットを使用すると、コンテナやブロックと呼ばれる追加の要素をウェブページ上に設置できます。 コンテナの追加方法 「ウィジェット」メニューから「コンテナ」を選択し、ウェブサイトに追加します。 コンテナを設置すると、そのページに最適なセクション設計が可能になります。 さまざまな設定が利用可能となり、自由なデザインが実現します。 それでは、コンテナ設定を詳しく見ていきましょう。 表示される主な設定項目は以下の通りです： ブロック設定 列の設定 表示タブの設定 ブロックの追加 コンテナ内で可能な編集内容 背景色の変更 ビデオの追加 グラデーションの設定 オーバーレイの設定 形状ディバイダーの挿入 アンカーポイントの設定 ![](https://数人に読まれています見出し&テキストの活用方法
メッセージを魅力的なデザインへ。見出しとテキスト活用〜コネクティッドワンの使い方〜 見出し&テキストの活用方法 基本的なデザインを構成する上で、 一番利用するのが、「見出し」と「テキスト」。 直感的にデザインが変更でき、配置も思うまま。 あなたの商品・サービスのメッセージを魅力的なデザインへ変えていきましょう！ ウィジェットの選択と配置 画面左側に表示されているウィジェットの一覧から、「見出し」と「テキスト」の項目を探します。 「見出し」「テキスト」ドラッグ＆ドロップします。ドロップできる場所には、プレースホルダーが表示されます。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys_4qemqn.よく読まれていますスペーサーで空間を活用しよう！
スペーサーの使い方 段落や画像のブロック間の間隔が狭く「読みづらい！」「もう少し段落間の間隔（行間）をあけたい！」と感じたことはありませんか？ その際は、ウィジェットのスペンサーを活用して下さい。 ①ウィジェットを開く ②ウィジェットの中のスペーサー ③スペーサーを挿入カ所までドラックをする ④高さの調節 ⑤幅の調節 ⑥名称確認個所 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ①ウィジェットを開く ②ウィジェットの中のスペーサー ③スペーサーを挿入カ所までドラックをする ![③](https:/数人に読まれています区切り線の設定
区切り線の設定法 区切り線で、見出しやテキストの境をデザインで表現する事が出来ます ①区切り線格納場所 ②名称表示箇所 ウィジェット挿入箇所 ③ガイドラインで高さ調節 ④設定1、小か全幅の選択、カラー変更 ⑤アライメントの設定 ⑥アニメーション設定１ ⑦アニメーション設定２ ⑧コピー格納箇所 ⑨素材削除 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ①区切り線格納場所 ②名称表示箇所とウィジェット挿入箇所 ③ガイドラインで高さ調節 ![ガイド数人に読まれていますアコーディオンでよくある質問などを作成しよう！
アコーディオンの使い方 アコーディオンは、長くなりがちなコンテンツをすっきり見せたい時に役立ちます。 よく利用される方法として、Q＆Aのように質問が見出しにあり、クリックすると回答の部分が展開されるものです。 ①ウィジェットを開く ②ウィジェットの中のアコーディオン ③アコーディオンの設定１ ④アコーディオンの設定２ ⑤スタイルの編集 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ①ウィジェットを開く ②ウィジェットの中のアコーディオン ③アコーディオンの設定１数人に読まれています
メディア
コード（HTML）を埋め込んでみよう！
コードの追加方法 サイトにコードを埋め込む方法です。HTMLなどの埋め込みで利用できます。 ウィジェットからコードを選び、挿入箇所にドラック。 コードの設定 ドラックをすると、デフォルトでHTMLのソースコードを貼り付ける画面が表示されます。 この黒い画面に、ソースコードを貼り付ける。 ウィジェット一覧 フリー画像素材の活用 [注文概要の作成](/ja/article/5roo5pah5qac6kab44gu5l2c5oiq-1qzddよく読まれています音声ファイルをアップして音声メディアを作成
あなただけの音声メディアを作ろう！〜コネクティッドワンの使い方〜 音声メディアを作ろう！ 音声ファイル（MP3）をアップロードして、サイトに埋め込むことができます。デザインを調整していくことで、あなただけのオリジナリティがある音声メディアを作成できます。 ファイルのアップ方法、埋め込み方法、デザイン構成に関して。 音声ファイルの追加方法 音声ファイルをコネクティッドワンに追加する方法は主に二通りあります。 ウィジェットからの追加 ウィジェットのメニューから「音声」を選択します。 曲名などを入力する項目が表示されます。必要に応じて情報を入力します。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/fよく読まれていますスライダーの活用
スライダーの追加方法 デザインされた画像やテキストをスライド形式で表示させたい場合に活用できるウィジェットです。 サイトにスライダーを追加する方法です。 ウィジェットからスライダーを選び、挿入箇所にドラック。 スライダーの編集 スライダーの作成を開始するには、まずスライドの編集タブを選択し、以下に示すようにプラス アイコンをクリックします。 プラス アイコンを選択すると、次の画像表示が表示されます。これがスライダー エディターです。 追加するレイヤーを選択し、イメージレイヤーを使用します。 ![](https://storage.crisp.chat/users/hel数人に読まれていますギャラリーウィジェット
ギャラリー ギャラリーウィジェットは、画像をグリッド形式またはインタラクティブなカルーセル形式で表示できるシンプルな要素です。複数枚の画像を表示させてることができます。 画像の追加 画像を1枚または複数追加したい場合は、「画像を編集」タブを選択してください。 スタイリングの編集 選べる主なレイアウトスタイルは、以下の2つです： グリッドレイアウト： 追加したすべての画像が静的に並べて表示されます。シンプルで整った見た目が特徴です。 カルーセルレイアウト： 画像がスライドショー形式で表示されます。 自動でスライドを数人に読まれています音声メッセージを埋め込む
音声ウィジェット 音声ウィジェットを使うと、Webサイトのページに**音楽や音声（サウンド）**を追加することができます。 ポッドキャストの埋め込みや、ページ閲覧中にBGMを再生したい場合などに最適です。 ユースケース たとえば、顧客が商品を購入した後に「ご購入ありがとうございます」といった**音声メッセージ（音声ノート）**を流すのもおすすめの活用方法です。 音声を通じて、よりパーソナルで心のこもったコミュニケーションが可能になります。 音声の追加方法 オーディオファイルをページに追加するのはとても簡単です。 音声ウィジェットを選択し、Webページビルダー内にドラッグ＆ドロップするだけで設置できます。 設定 ファイルの管理や音声のアップロードは、「ファイルマネージャー」エリアから行います。数人に読まれています
コミュニティ
このセクションには記事がありません。
リードジェネレーション
フォームの使い方〜お問い合わせ、メルマガ、アンケートなど〜
フォームの使い方〜お問い合わせ、メルマガ、アンケートなど〜 フォームの使い方〜お問い合わせ、メルマガ、アンケートなど〜 チェックアウトというのは、決済が連動したフォームです。こちらにネットショップで設定した商品を連動させて販売ができます。柔軟な設定やデザインができるの特徴で、CV（コンバージョン）率を上げていきます。 ①ウィジェットから選択 ②フォームの項目の追加 ③ドラックにより幅の調節 ④リサイズで長さの調整 ⑤２つリサイズで横並びになる ⑥⑦追加項目設定～⑧連絡先に関する項目～⑨アンケート情報など ⑩ラジオボタンチェックボックスファイル添付 ⑪フォームの設定1 フォーム名 通知設定 ⑫フォームの確認 ⑬ボタンテキストの変更 ⑭メールマーケする場合のリスト分け ⑮スパムメール対策⑯オートメーションメール管理 ⑰フォームスタイリング設定 ⑱ボタンのスタイリング設定 最終確認① 最終確認② ＝＝＝＝よく読まれていますクイズ・アンケートフォームの使い方
クイズフォームの使い方〜コネクティッドワンの使い方〜 クイズフォームの使い方 クイズフォームを利用すると、相手の回答によってメッセージを変えることができます。クイズだけではなく、アンケート、イベント参加受付など柔軟に作成が可能です。 ウィジェットでは、クイズ・アンケートの項目で表示されています。 ウィジェット一覧 フリー画像素材の活用 注文概要の作成 ボタンの使い方 見出し&テキストの活用方法 [画像の追加&設定方法](/ja/article/55よく読まれていますチェックアウトフォーム設定（決済フォーム）
チェックアウトフォーム設定 チェックアウトフォーム設定（決済フォーム） チェックアウトというのは、決済が連動したフォームです。こちらにネットショップで設定した商品を連動させて販売ができます。柔軟な設定やデザインができるの特徴で、CV（コンバージョン）率を上げていきます。 ウィジェット一覧 フリー画像素材の活用 注文概要の作成 ボタンの使い方 見出し&テキストの活用方法 [画像の追加&設定方法](/ja/article/55s75yop44gu6lよく読まれています
売上高
ネットショップウィジェットの設置
ネットショップウィジェット ネットショップウィジェットは、ネットショップの商品を任意のページやブログ記事に表示するのに最適なウィジェットです。好きな場所にあなたのショップの商品を掲載ができます。HPやLP、ファネルなど。 ネットショップウィジェットの追加方法 「ネットショップウィジェット」セクションに移動し、希望のページに追加します。 まず最初に行うべきステップは、表示したい商品を追加することです。 「製品の編集」タブを選択すると、新しいウィンドウが開き、以下のような方法で商品を追加できます： 最新の商品を表示 特定カテゴリ内のすべての商品を表示 個別に選択した商品を表示 表示する商品の数を指定 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f083数人に読まれています注文概要の作成！決済後に購入した商品の一覧を表示
決済後の注文概要でクレームを防止しよう！ ネットショップやチェックアウトフォーム（決済）をした後に、何をどのくらい、いくら購入をしたのか？など購入した注文の一覧をユーザーに表示させます。 ワンクリックのアップセルは、便利ですが、たまに間違えて押してしまう方もおります。 その際に、購入していないのに、請求をされたとクレームにもなりやすいですが、注文概要を提示することで、何を購入をしたのかがわ明確になるので、クレーム防止にもつながります。 サンキューページにドラックして入れておきましょう！ 決済後の注文概要でクレームを防止しよう！ サンキューページに注文概要を追加する。 注文概要は、顧客が商品を購入した後に、購入した内容、金額、入力した明細などを表示するものです。 1．購入後のページのお好きな場所にウィジェットとして追加できます。 ![ウィジェットを開く](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/5よく読まれています
その他
メニューを好きな場所に追加しよう！
メニューを好きな場所に追加しよう！〜コネクティッドワンの使い方〜 メニューを好きな場所に追加しよう！ ウィジェットのメニューというパーツを利用すると、好きな場所にページへのリンクを作成できます。 HPメニュー、フッターメニュー、動画コンテンツメニューなど自由に作成しましょう！ ** ウィジェットからメニューを追加する まず、画面左側にある「ウィジェットを追加」をクリックします。表示された項目の中から、「メニュー」という項目を見つけます。 見つけた「メニュー」を、ウェブサイト上でメニューを表示したい場所までドラッグ＆ドロップします。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys_1gn21ps.数人に読まれていますカウントダウンタイマー機能を活用しよう！
タイマー機能を活用して期間限定マーケティングキャンペーンを効果的に！〜コネクティッドワンの使い方〜 カウントダウンタイマー機能を活用しよう！ ランディングページ、会員ページなどタイマー機能を利用することで、期間限定で表示させることが可能です。 タイマー終了後に、メッセージを表示させる、別のページに飛ばして、キャンペーンが終了した旨を伝える。 など、マーケティングの基礎となる、デットラインを構成することが可能です。 deadline funnel（デッドラインファネル）と同じように効果的な集客や売上拡大をするのに必須な機能となっていきます。 1. カウントダウンウィジェットの追加 1.コネクティッドワンの編集画面で、ウィジェットのメニューを開き、カウントダウンを選択。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/44km44kj44k344kz44kn44od44oi_17hw1m4.pngよく読まれていますプログレスバーでファネルの進行状況を視覚化
プログレスバーの使い方 プログレスバーとは長時間かかるタスクの進捗状況を視覚的に示すGUI（グラフィカルユーザーインターフェース）です。 これを用いることでユーザーはプログラムがきちんと動いていることを確認できたり、タスクが完了する目安の時間を知ることができ、UX（ユーザーエクスペリエンス）の向上につながります。 また視覚効果としてどのくらいダウンロードが出来ているとか、今どのくらい進んでいるかの認識のために表示させます。 コネワンで実装できるプログレスバーは、進行状況と接続されていないので、ページの進み具合として視覚的な表示になります。 パーセンテージの変更は挿入して設定する事が出来ます。 ①ウィジェットの中のプログレスバー ②名称確認個所 ③プログレスバーの長さ変更 ④設定1、パーセンテージ設定 ⑤設定2、色の設定 ⑥設定3、高さの設定 ⑦設定4、プログレスバーの中のアニメーションONorOff ⑧アライメントの設定 ⑨プログレスバーの要素をページ上に表示させるアニメーションの設定 ⑩よく読まれています地図（Googleマップ）を入れてみよう！
地図（Googleマップ）の追加方法 サイトに地図としてGoogleマップ設置を設定方法です。 住所を入力すると、Googleマップが自動的に表示されていきます。 ウィジェットから地図を選び、挿入箇所に地図ウィジェットをドラック&ドロップ。 地図の設定方法 設定で、表示させたい住所を入力。 表示サイズを調整。 ウィジェット一覧 フリー画像素材の活用 [注文概要の作成](/ja/article/5roo5pah5qac6kab44g数人に読まれています埋め込みの活用
埋め込みの活用 ウィジェットから埋め込みウィジェットを選択します。 埋め込みコードを挿入し、「保存」をクリックするだけで、ビルダーに表示されます。 埋め込みオードがある動画などを活用できます。 ウィジェット一覧 フリー画像素材の活用 注文概要の作成 [ボタンの使い方](/ja/article数人に読まれています寄付金フォーム（ドネーション）
寄付（ドネーション） 寄付金の支払いを受け取りたい場合や、希望する金額を支払いたい場合には、このウィジェットが最適です。 寄付ウィジェットにアクセスし、任意のページに設置することができます。 設定 通常のショップの商品やチェックアウトとは異なり、寄付ウィジェットには特有の機能と設定があります。 まずは基本設定を確認し、寄付ウィジェットが正しく機能するように設定しましょう。 支払いゲートウェイ 支払いの受け取りには、Stripe と Braintree の2つの支払いゲートウェイが利用できます。 どちらも似たような手順で設定でき、APIキー（Strip数人に読まれていますブログ一覧をサイトの好きな場所に設置
ブログを設置 ウェブサイト上、あなたの任意の箇所に、ブログを設置することができます。 カテゴリリー分けをしておけば、イベントの案内の記事だけを、ホームページのトップになど設置するなどできます。 ウィジェットよりブログウィジェットを選択して、ページにドロップインします。 ブログウィジェットの設定 すべての要素と同様に、自分の好みに合わせてスタイルを設定できます。 ブログウィジェット内では、次の内容を変更できます ディスプレイコレクション カテゴリー 画像を表示 レイアウト表示 ソーシャル共有リンクの追加 表示したいブログ投稿の数 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/44ov44kz44ot数人に読まれていますSNS（ソーシャルメディア）ウィジェット
SNS（ソーシャルメディア）ウィジェット SNSウィジェット（ソーシャルメディアウィジェット）には、主に次の2つの活用方法があります： 訪問者にページをSNSでシェアしてもらう 訪問者をあなたのSNSアカウントへ誘導する 設定方法 「SNS設定」タブを選択すると、新しいウィンドウが開きます。 ここでは、以下のいずれかを選ぶことができます： ウィジェットを設置したページを訪問者にSNSで共有してもらう 訪問者をあなたのSNS（ソーシャルメディア）アカウントに誘導し、フォローしてもらう 【このページをシェア】オプション数人に読まれています