サイポン３つの基本構造
2025/11/19
CMSサイポンにおける「セクション」「コンテナ」「パーツ」は、Webページを構成するための基本的な3つの階層構造です。これらのコンセプトを理解すると、効率的かつ整理されたページ作成が可能になります。
サイポンの基本構造：3つのコンセプト
CMSサイポンでは、ページを大きな箱（セクション）の中に中くらいの箱（コンテナ）を入れ、その中に具体的な部品（パーツ）を配置していくイメージで構成します。
１. 構造役割イメージセクション
ページの区切りや背景を決定する最大の単位 ページ内の大きなブロック
２. 背景コンテナ
パーツを配置し、並び順を制御する中間の単位 セクション内のレイアウト枠
３. 段組みパーツ具体的なコンテンツ
（テキスト、画像など）を保持する最小単位 ページを構成する部品
1. セクション (Section)
セクションは、ページ全体を縦に区切る最大のブロックです。
コンテナは、セクションの中に配置され、パーツを囲んでレイアウトを制御する中間の箱です。
パーツは、Webページに表示される具体的なコンテンツそのものです。
イメージのまとめ
Webページを作成する際は、以下のような流れになります。
CMSサイポンの「セクション」「コンテナ」「パーツ」という基本コンセプトに基づいて、目的とするホームページを作成するために、ホームページ作成者が考えるべきことと行うべきことを箇条書きで生成します。
ホームページ作成者が考えるべきこと・行うべきこと
I. 計画段階：設計・構造を考えること
CMSサイポンでは、ページを大きな箱（セクション）の中に中くらいの箱（コンテナ）を入れ、その中に具体的な部品（パーツ）を配置していくイメージで構成します。
１. 構造役割イメージセクション
ページの区切りや背景を決定する最大の単位 ページ内の大きなブロック
２. 背景コンテナ
パーツを配置し、並び順を制御する中間の単位 セクション内のレイアウト枠
３. 段組みパーツ具体的なコンテンツ
（テキスト、画像など）を保持する最小単位 ページを構成する部品
セクションは、ページ全体を縦に区切る最大のブロックです。
- 役割: ページのテーマや背景を変えたいときに使用します。例えば、「ヒーローエリア」「サービス紹介」「お問い合わせフォーム」といった、内容のまとまりごとに区切ります。
- 主な設定:
- 背景: 色、画像、動画などの設定
- 上下の余白（マージン/パディング）
- 全幅表示にするか、コンテンツ幅に制限するか
コンテナは、セクションの中に配置され、パーツを囲んでレイアウトを制御する中間の箱です。
- 役割: セクション内でパーツを横に並べたり（段組み）、特定の配置（中央揃えなど）を決めたりする際に使用します。レスポンシブデザイン（スマホとPCでの表示切替）におけるレイアウト調整の主役です。
- 主な設定:
- 段組み: 1列、2列、3列など、内部のパーツをどのように並べるかを設定
- 幅の制限: コンテンツの最大幅を調整
パーツは、Webページに表示される具体的なコンテンツそのものです。
- 役割: ページに情報や機能を付け加えるための最小単位の部品です。
- 具体例:
- テキスト: 見出し、文章
- 画像/動画: 写真や埋め込み動画
- ボタン: リンクを設定
- リスト: 箇条書き
- フォーム: お問い合わせ欄 など
Webページを作成する際は、以下のような流れになります。
- セクションを追加し（例：青い背景のエリア）、大きな領域を作る。
- そのセクションの中に、コンテナ（例：左に画像、右にテキストの2段組み）を配置する。
- コンテナの左側に「画像パーツ」、右側に「テキストパーツ」と「ボタンパーツ」を配置してコンテンツを完成させる。
CMSサイポンの「セクション」「コンテナ」「パーツ」という基本コンセプトに基づいて、目的とするホームページを作成するために、ホームページ作成者が考えるべきことと行うべきことを箇条書きで生成します。
I. 計画段階：設計・構造を考えること
- 1. 目的とターゲットの明確化
- 目的の定義： ホームページで達成したい最終目標（問い合わせ増加、商品購入、情報提供など）を明確にする。
- ターゲット設定： 誰に、何を伝えたいのかを具体的に設定し、コンテンツのトーン＆マナーを決定する。
- 2. ページ構成の設計
- サイトマップ作成： 必要なページ（トップ、サービス、会社概要、問い合わせなど）の一覧と階層構造を決める。
- ワイヤーフレーム作成： 各ページで「どの情報を」「どこに」配置するか、セクション・コンテナの配置図を設計する。
- 3. セクション（大きな区切り）の定義
- コンテンツの分類： ページの内容を意味のあるブロック（セクション）に区切る。
- 例: メインビジュアルセクション、特長紹介セクション、お客様の声セクション。
- 背景・トーンの設定： 各セクションで統一したデザイン（背景色、画像など）を設定し、視覚的な変化でメリハリをつける。
- コンテンツの分類： ページの内容を意味のあるブロック（セクション）に区切る。
- 4. コンテナ（レイアウト）の設計
- 段組みの決定： 各セクション内で、情報を何列で配置するか（1列のテキスト、3列の特長アイコンなど）を設計する。
- レスポンシブ設計： PCだけでなく、スマートフォンで見たときにどのようにレイアウトが変化し、パーツが並び替わるかを意識する。
- 5. パーツ（情報）の配置と最適化
- パーツの選択： 表現したいコンテンツ（テキスト、画像、ボタン、動画など）に最適なパーツを選択し、コンテナ内に配置する。
- テキストの最適化：伝えたい情報が簡潔に伝わるよう、見出し（H1, H2など）と本文のテキストを整理する。
- 画像の準備と軽量化： 使用する画像を準備し、アップロード前にサイズとファイル形式を最適化（軽量化）して表示速度を確保する。
- 6. クロスブラウザ・レスポンシブ検証
- 複数環境チェック： PC、スマートフォン、タブレットなど、様々なデバイスでデザインや操作に崩れがないか確認する。
- ブラウザチェック： 複数の主要ブラウザ（Chrome, Edge, Safariなど）で意図通りに表示されるか確認する。
- 7. 公開前の最終チェック
- リンク切れ確認： ページ内のすべてのリンクやボタンが正しく設定されているか確認する。
- 誤字脱字チェック： テキストに誤りがないか最終確認する。
