ウィジェット | Connected One Help Desk

直接のご質問はこちらの掲示板へ作成スタートガイドはこちらヘルプデスクTOP

ベーシック

ボタンの使い方
思わずクリックしたくなるボタンを作ろう！〜コネクティッドワンの使い方〜ボタンの使い方ボタンの色一つでも、クリック率が変わってきます。思わずクリックしたくなるように、色々と検証しながら作成をしていきましょう！コネクティッドワンでは、ボタンがウィジェットとして提供されています。ドラッグ＆ドロップの簡単な操作で、ウェブサイト内の任意の場所にボタンを追加できます。ボタンのテキスト、クリック時の動作、デザイン、アニメーションなどを細かく設定できます。さらに、ブロック型のボタンや、コールトゥアクション用のパーツも用意されており、簡単に利用できます。ボタンの追加手順 1. ウィジェットの追加コネクティッドワンの編集画面で、ボタンを追加したい場所に「ウィジェットを追加」します。ウィジェットの一覧から「ボタン」を選び、ドラッグ＆ドロップでウェブページ内の任意の場所に配置します。ボタンの基本設定 1. ボタンテキストの編集配置したボタンをクリックし、「編集よく読まれています
コンテナ（ブロック）ウィジェット&アンカーポイントを設定
コンテナ（ブロック）ウィジェットコンテナウィジェットを使用すると、コンテナやブロックと呼ばれる追加の要素をウェブページ上に設置できます。コンテナの追加方法「ウィジェット」メニューから「コンテナ」を選択し、ウェブサイトに追加します。コンテナを設置すると、そのページに最適なセクション設計が可能になります。さまざまな設定が利用可能となり、自由なデザインが実現します。それでは、コンテナ設定を詳しく見ていきましょう。表示される主な設定項目は以下の通りです：ブロック設定列の設定表示タブの設定ブロックの追加コンテナ内で可能な編集内容背景色の変更ビデオの追加グラデーションの設定オーバーレイの設定形状ディバイダーの挿入アンカーポイントの設定 ![](https://数人に読まれています
見出し&テキストの活用方法
メッセージを魅力的なデザインへ。見出しとテキスト活用〜コネクティッドワンの使い方〜見出し&テキストの活用方法基本的なデザインを構成する上で、一番利用するのが、「見出し」と「テキスト」。直感的にデザインが変更でき、配置も思うまま。あなたの商品・サービスのメッセージを魅力的なデザインへ変えていきましょう！ウィジェットの選択と配置画面左側に表示されているウィジェットの一覧から、「見出し」と「テキスト」の項目を探します。「見出し」「テキスト」ドラッグ＆ドロップします。ドロップできる場所には、プレースホルダーが表示されます。 ![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys_4qemqn.よく読まれています
スペーサーで空間を活用しよう！
スペーサーの使い方段落や画像のブロック間の間隔が狭く「読みづらい！」「もう少し段落間の間隔（行間）をあけたい！」と感じたことはありませんか？その際は、ウィジェットのスペンサーを活用して下さい。 ①ウィジェットを開く ②ウィジェットの中のスペーサー ③スペーサーを挿入カ所までドラックをする ④高さの調節 ⑤幅の調節 ⑥名称確認個所＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ①ウィジェットを開く ②ウィジェットの中のスペーサー ③スペーサーを挿入カ所までドラックをする ![③](https:/よく読まれています
区切り線の設定
区切り線の設定法区切り線で、見出しやテキストの境をデザインで表現する事が出来ます ①区切り線格納場所 ②名称表示箇所　ウィジェット挿入箇所 ③ガイドラインで高さ調節 ④設定1、小か全幅の選択、カラー変更 ⑤アライメントの設定 ⑥アニメーション設定１ ⑦アニメーション設定２ ⑧コピー格納箇所 ⑨素材削除＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ①区切り線格納場所 ②名称表示箇所とウィジェット挿入箇所 ③ガイドラインで高さ調節 ![ガイド数人に読まれています
アコーディオンでよくある質問などを作成しよう！
アコーディオンの使い方アコーディオンは、長くなりがちなコンテンツをすっきり見せたい時に役立ちます。よく利用される方法として、Q＆Aのように質問が見出しにあり、クリックすると回答の部分が展開されるものです。 ①ウィジェットを開く ②ウィジェットの中のアコーディオン ③アコーディオンの設定１ ④アコーディオンの設定２ ⑤スタイルの編集＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ①ウィジェットを開く ②ウィジェットの中のアコーディオン ③アコーディオンの設定１よく読まれています
アイコンリスト
アイコンリストアイコンリストを使うと、各項目にアイコンを添えて、視覚的にわかりやすいリストを作成できます。ビルダーキャンバスの左側にあるウィジェットタブを開き、「アイコンリスト」を選択します。そのままキャンバスにドラッグ＆ドロップすると、編集を開始できます。右側の編集パネルで、リストの内容や表示スタイルを設定します。リスト項目の編集初期状態では、「リスト項目1」「リスト項目2」「リスト項目3」などの項目が表示されています。既存の項目をクリックするか、新しい項目を追加すると、次の内容を編集できます。タイトル説明アイコン **リ数人に読まれています
見出しチップ（ピル型見出し）
見出しチップ（ピル型見出し）見出しチップは、メインの見出しの上に配置する、小さな角丸のラベルです。「新着」「注目」「サービス内容」などの短い言葉を添えて、セクションの内容を伝えたり、視覚的なアクセントを加えたりできます。見出しチップを使うメリットページにメリハリをつける：見出しの上に小さなアクセントを加え、単調になりがちなページに変化をつけられます。自然に視線を誘導する：小さなラベルから大きな見出しへと視線を導き、情報の構成をわかりやすく伝えられます。ブランドの雰囲気に合わせる：背景色や形を調整して、サイト全体のデザインに統一感を持たせられます。セクションの内容を端的に伝える：「サービス内容」「事例」「ステップ1」などのラベルで、各セクションの内容や役割を簡潔に示せます。 ![](https://storage数人に読まれています
スクロールテキスト
スクロールテキストスクロールテキストを使うと、文字が横方向に流れる、動きのある見出しやバナーを作成できます。固定の見出しに、大きく淡い色のスクロールテキストを重ねると、奥行きのある表現ができます。また、スクロールテキストだけを表示して、文字が横に流れるバナーとして使うこともできます。スクロールテキストを使うメリット注目を集める：テキストに動きを加えて、読者の視線を引きつけます。ページ上部のメインビジュアルやバナーに適しています。奥行きと個性を加える：大きく淡い色のスクロールテキストに太字の見出しを重ねることで、画像を使わずに立体感のある印象的なデザインを作れます。メッセージを強調する：背景でキーワードやフレーズを繰り返し表示しながら、固定の見出しでメインのメッセージを伝えられます。用途に合わせて使い分ける：数人に読まれています
ソーシャルプルーフ
ソーシャルプルーフソーシャルプルーフは、プロフィール画像、星評価、利用実績などの情報をコンパクトにまとめて表示するウィジェットです。他の利用者からの評価や支持を示し、製品やサービスへの信頼感を高めます。見出しや申し込みボタン、ページ上部のメインビジュアルの近くなど、訪問者が利用を検討する場所への配置に適しています。ソーシャルプルーフを使うメリットひと目で信頼感を伝える：利用者のプロフィール画像と評価を組み合わせ、製品やサービスが支持されていることをわかりやすく示せます。行動へのためらいを減らす：登録フォームや申し込みボタンの近くに配置することで、利用を迷っている訪問者の判断を後押しできます。コンパクトに表示する：長いお客様の声や詳しい事例紹介を掲載しなくても、プロフィール画像や評価の数値を使って、利用者からの支持を簡潔に伝え数人に読まれています
テーブル
テーブルテーブルを使うと、料金プラン、機能一覧、仕様などの情報を整理し、ひと目で確認しやすい形で表示できます。用途に合わせて、2種類のレイアウトを選択できます。テーブルを使うメリット比較しやすくする：複数の選択肢を並べることで、訪問者が違いを把握し、選びやすくなります。デザインを手軽に整える：行ごとの背景色、罫線、角の丸みを設定して、コードを書かずに見やすいテーブルを作成できます。さまざまな用途に使える：料金プランの比較、機能一覧、仕様の比較、シンプルなデータの整理などに活用できます。レイアウトの選択標準テーブルレイアウトヘッダー行とデータ行で構成される、シンプルなテーブルです。仕様や機能の一覧、基本的な比較など、幅広い用途に適しています。比較テーブルレイアウト料金やプランの比較に適したテ数人に読まれています
お客様の声ウィジェット
お客様の声ウィジェットお客様の声ウィジェットを使うと、レビューや感想を、星評価、写真、名前、役職などと一緒に表示できます。実際の利用者の声を紹介することで、製品やサービスへの信頼感を高めます。セクションの目的や配置するスペースに合わせて、3種類のレイアウトを選択できます。お客様の声ウィジェットを使うメリット信頼性を高める：レビューに名前や役職、会社名を添えることで、誰から寄せられた声なのかが伝わり、内容に説得力が生まれます。評価をひと目で伝える：星評価を表示することで、レビューの本文を読む前に、利用者の満足度を把握できます。 **スペースに合数人に読まれています
タイムラインウィジェット
タイムラインウィジェットタイムラインウィジェットを使うと、出来事や節目、手順を時系列に沿って表示できます。会社の沿革、製品の開発計画、プロジェクトの進行段階、サービスの利用手順などの紹介に適しています。タイムラインウィジェットを使うメリット流れを視覚的に伝える：日付やアイコンとともに出来事を順番に並べることで、全体の流れや進み具合を把握しやすくなります。実績をわかりやすく示す：資金調達、製品の発売、受賞などの節目を日付付きで紹介し、これまでの歩みや実績を伝えられます。複数の手順を整理する：導入から利用開始までの手順やプロジェクトの各段階を、つながりのあるステップとしてわかりやすく説明できます。レイアウトの選択水平横に伸びる線に沿ってアイコンやマーカーを配置し、その上に日付とタイトルを表示します。出来事を数人に読まれています

他の記事を表示する

メディア

コミュニティ

このセクションには記事がありません。

リードジェネレーション

売上高

その他

他の記事を表示する

画像ウィジェット
画像ウィジェット画像は見た目の魅力を高め、サイトでのエンゲージメントを向上させます。画像を追加するには：ウィジェットへ移動 – を開くウィジェットパネルをエディターで開きます。「Image」を選択 – を見つけて画像ウィジェットをページに追加します。追加したら、サイズ変更、位置調整、スタイルの適用を行い、ウェブサイトのデザインに簡単に合わせられます!. 画像編集画像を選択してページに配置したら、画像設定タブに移動します。ここでは、画像の説明（SEOに最適）、シャドウ、画像キャプション、コールトゥアクションを追加できます。画像キャプショ数人に読まれています