オブジェクト：リスト

概要

リストオブジェクトは、複数の情報を箇条書きや番号付き形式で整理して表示するためのパーツです。
手順の説明や項目の列挙、注意点の整理などに最適で、視認性・読みやすさを高める役割を果たします。
スタイルやアイコンの種類も豊富に用意されており、用途に応じて適切な見た目にカスタマイズできます。

リストの説明 #

リストオブジェクトの追加方法 #

リストオブジェクトは、箇条書き（●）や番号付きリスト（1. 2. 3.）を表示するためのパーツです。手順やポイントを整理して伝えたい場合に便利です。以下の手順で追加します。

1. 左側の「オブジェクト」セクションから 「リスト」（三本線＋点のアイコン）を選びます。
2. 「リスト」オブジェクトをクリック、またはドラッグ＆ドロップでキャンバス上の任意の場所に配置します。

リストを活用することで、複数の情報をわかりやすく並べて提示できます。

  #

リストの選択画面の説明 #

リスト選択画面について #

リストオブジェクトをキャンバスにドラッグ＆ドロップすると、「リスト選択」画面が自動的に表示されます。ここでは、用途に合わせてさまざまなスタイルのリストを選ぶことができます。

• 左側： リストの分類（例：ナンバースタイル、アイコンスタイル、スタイリッシュスタイル など）を一覧表示
• 中央・右側： 選択可能なリストテンプレートをサムネイル付きで表示

それぞれのスタイルには以下のような特徴があります：

• ナンバーリスト： 順序を明確にしたい手順などに適した番号付きリスト
• デフォルトリスト： 一般的な箇条書き形式のシンプルなリスト
• アイコンスタイル： チェックマークや矢印などのアイコン付きで視認性の高いリスト
• スタイリッシュスタイル： ボックス付きや影付きなど、デザイン性を重視したリスト
• イメージアイコンスタイル： ユーザー画像などを組み合わせた紹介向けリスト

任意のスタイルをクリックして選択すると、選んだテンプレートがキャンバス上に反映され、すぐに編集が可能になります。

ナンバーリストの項目説明 #

ナンバーリスト設定項目について #

ナンバースタイルのリストを選択すると、右側の設定パネルで以下のような詳細設定が可能です。

1. 項目リスト
   各行のリスト内容を編集・削除できます。「+項目を追加」をクリックすると新しい項目を追加できます。
   編集ボタン（✎）で内容の修正、ゴミ箱アイコンで削除が可能です。
2. メインカラー
   番号部分の背景や装飾に使用されるカラーを指定できます。
3. ナンバーフォント
   番号部分のフォントを選択できます。ページ全体のフォントと統一感を持たせることも可能です。
4. ナンバーフォントサイズ
   番号の大きさを調整できます。単位（px）で指定します。
5. ナンバー装飾
   番号の形を選択できます（例：標準・サークル・四角など）。
6. ナンバーカラー
   番号そのものの文字色を設定します。カラーコードで指定可能です。
7. ナンバー行間（margin）
   番号とテキストの上下間隔（余白）を設定できます。単位は em または px で調整可能です。

これらの設定を使うことで、見た目の統一感や強調表現を自由に調整し、読みやすく分かりやすいリスト表示が可能になります。

デフォルトリストスタイルの項目説明 #

デフォルトリストスタイルの設定項目について #

デフォルトスタイルのリストでは、シンプルな箇条書き形式でリストを構成できます。右側の設定パネルで以下の項目が編集可能です。

1. 項目リスト
   各行のリスト内容を編集・削除できます。「+項目を追加」をクリックすると新しい項目を追加できます。
   編集ボタン（✎）で内容の修正、ゴミ箱アイコンで削除が可能です。
2. メインカラー
   箇条書きのマーカー（ドット）やアイコンの色を変更できます。カラーコード（例：#637381）で指定します。

このスタイルは最も汎用性が高く、シンプルな構造のため、注意点・要点・説明の列挙など幅広く使用できます。

アイコンスタイルの項目説明 #

アイコンスタイルのリスト設定項目について #

アイコンスタイルのリストでは、各項目の先頭に好みのアイコンを表示できます。右側の設定パネルには以下の項目があります。

1. アイコン選択
   表示するアイコンを変更できます。矢印、チェック、バツ印など、用途に応じたスタイルが選択可能です。
   右横のカラーピッカーでアイコンの色も自由に変更できます（例：#3490dc）。
2. 項目リスト
   各行のリスト内容を編集・削除できます。「+項目を追加」をクリックすると新しい項目を追加できます。
   編集ボタン（✎）で内容の修正、ゴミ箱アイコンで削除が可能です。
3. メインカラー
   リスト全体のテキストやマーカーに影響する基本カラーを設定します（例：#637381）。

このスタイルは、視覚的なアクセントを加えながら情報を整理したい場合に適しています。用途例：チェックリスト、注意点の強調、作業指示など。

スタイリッシュリストの項目説明 #

スタイリッシュスタイルのリスト設定項目について #

スタイリッシュスタイルのリストでは、ラベル（見出し）＋内容という形式で情報を整理できます。連絡先やプロフィールなどの表示に適しています。右側の設定パネルで以下の項目が設定可能です。

1. 項目リスト
   各行のリスト内容を編集・削除できます。「+項目を追加」をクリックすると新しい項目を追加できます。
   編集ボタン（✎）で内容の修正、ゴミ箱アイコンで削除が可能です。
2. メインカラー
   ラベル部分のテキストカラーを指定します（例：#111827）。見出しの視認性を高めるための配色設定です。
3. サブカラー
   内容部分（本文）の文字色を指定します（例：#6B7280）。ラベルとのコントラストを調整して読みやすくできます。

このスタイルは、整然とした情報表示を必要とする場面（連絡先、企業情報、プロフィール項目など）での利用に最適です。

イメージリストの項目説明 #

イメージリストスタイルの設定項目について #

イメージリストスタイルでは、各リスト項目に画像（アイコンや人物写真など）を添えて表示できます。主に紹介・プロフィール・レビュー表示などに適しています。

1. イメージ選択
   各項目で使用する画像をアップロード・選択できます。丸型のサムネイルとして表示されます。
2. 項目リスト
   各行のリスト内容を編集・削除できます。「+項目を追加」をクリックすると新しい項目を追加できます。
   編集ボタン（✎）で内容の修正、ゴミ箱アイコンで削除が可能です。
3. メインカラー
   「テキスト1」や「テキスト3」などの主要ラベルの文字色を指定します（例：#111827）。
4. サブカラー
   「テキスト2」などの補足テキストの文字色を指定します（例：#6B7280）。

このスタイルは、ユーザー情報や商品レビュー、スタッフ紹介など、画像＋テキストの組み合わせで印象的に見せたい場面に最適です。

操作説明 #

リストを挿入したい位置へドラッグ&ドロップで貼り付けることができます。

挿入したいリストのスタイルを選択します。

リストを選択すると右上にサブメニューが表示されます。

1. クリックしながらドラッグ&ドロップで任意の場所へ移動できます。
2. リストを複製します。
3. リストを削除します。
4. ブロックに保存します。

ナンバースタイル #

リストの項目を変更することで様々な設定ができます。

1. 各項目の順序を変更したり内容の編集ができます。
2. テキストのメインカラーを設定します。
3. ナンバーのフォントを選択します。
4. ナンバーのフォントサイズを設定します。
5. ナンバーの装飾を設定します。
6. ナンバーのフォントカラーを設定します。
7. ナンバーの行間を設定します。

デフォルトスタイル #

1. 各項目の順序を変更したり内容の編集ができます。
2. テキストのメインカラーを設定します。

アイコンスタイル #

1. アイコンやアイコンカラーを設定します。
2. 各項目の順序を変更したり内容の編集ができます。
3. テキストのメインカラーを設定します。

スタイリッシュスタイル #

1. 各項目の順序を変更したり内容の編集ができます。
2. テキストのメインカラーを設定します。
3. テキストのサブカラーを設定します。

イメージアイコンスタイル #

1. イメージアイコンを選択します。
2. 各項目の順序を変更したり内容の編集ができます。
3. テキストのメインカラーを設定します。
4. テキストのサブカラーを設定します。

フォント #

1. フォント設定を変更したいテキストを選択します。
2. フォント形式を設定します。
3. フォントを選択します。
4. テキストカラーを選択します。
5. テキスト背景カラーを選択します。
6. フォントサイズを設定します。
7. 行間を設定します。
8. 文字間を設定します。
9. 配置を選択します。

デザイン #

デザインの項目を変更することでリストのデザインを変更できます。

1. 背景を画像、単色、グラデーションの3つから選択できます。
2. 背景設定で選択した背景情報がレイヤーとして表示されます。
3. ボーダー設定はなし、実線、点線の3つから選択でき、線の太さを設定することができます。
4. ボーダーコーナーはボーダーの丸みを設定できます。
5. シャドウ設定ではインナー、ドロップ、テキストの3つから選択でき、それぞれシャドウの詳細な設定ができます。

レイアウト #

レイアウトの項目を変更することでリストのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 横幅を固定から、最小、最大とそれぞれ設定できます。
3. 高さを固定から、最小、最大とそれぞれ設定できます。
4. 水平方向の項目を変更することでリストの水平方向の配置を変更できます。
5. 垂直方向の項目を変更することでリストの垂直方向の配置を変更できます。
6. Z-indexを設定することでリストの重なり順を設定することができます。

表示設定 #

表示設定を変更することでリストを表示したり非表示にする条件を設定できます。

1. レスポンシブの項目を変更することでデスクトップのみやモバイルのみに表示することができます。
2. アンカーリンクを設定することができます。
3. ログインユーザーのみ表示したり、さらにタグで絞りこんで条件表示することができます。

その他 #

1. CSS IDを設定できます。
2. CSS Classを設定できます。
3. メモを書いておくことができます。