オブジェクト：リスト

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

リストオブジェクトは、箇条書き（●）や番号付きリスト（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）。

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